// Three hero variants exposed via Tweaks

const HeroSpeed = ({ accent, onCta, playful }) => {
  return (
    <section style={{paddingTop:80,paddingBottom:96,borderBottom:"none"}}>
      <div className="wrap" style={{position:"relative"}}>
        <div style={{display:"grid",gridTemplateColumns:"1.25fr 1fr",gap:48,alignItems:"center"}} className="hero-grid">
          <div style={{position:"relative",zIndex:2}}>
            <div className="pill" style={{background:"var(--yellow)",marginBottom:20}}>● Now onboarding publishers</div>
            <h1 className="display" style={{fontSize:"clamp(48px, 7vw, 104px)"}}>
              Games belong where players are <span style={{color:`var(--${accent})`}}>looking.</span>
            </h1>
            <p style={{marginTop:24,fontSize:22,maxWidth:580,color:"var(--ink-soft)",textWrap:"pretty"}}>
              Game discovery is broken. Crayon puts playable demos of your
              game on the surfaces where players are already spending time.
            </p>
            <div style={{marginTop:36,display:"flex",gap:14,flexWrap:"wrap"}}>
              <button className="btn primary" onClick={onCta} style={{background:`var(--${accent})`}}>
                Get early access <span className="arrow">→</span>
              </button>
            </div>

            {/* Flow ribbon */}
            <FlowRibbon accent={accent} style={{marginTop:48}} />
          </div>

          <div style={{position:"relative",display:"flex",justifyContent:"center",alignItems:"center",minHeight:540}}>
            {playful && <>
              <div className="shape circle" style={{background:"var(--yellow)",width:180,height:180,top:-10,right:-20,border:"2px solid var(--ink)",zIndex:1}}/>
              <div className="shape sq" style={{background:"var(--mint)",width:120,height:120,bottom:30,left:-20,border:"2px solid var(--ink)",transform:"rotate(12deg)",zIndex:1}}/>
              <div className="shape circle" style={{background:"var(--lilac)",width:60,height:60,top:140,left:40,border:"2px solid var(--ink)",zIndex:1}}/>
            </>}
            <div style={{position:"relative",zIndex:2}}>
              <PhoneMock theme={accent} label="Playable · 0:30" tilt={-4} time={0.42} game="blocks"/>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){ .hero-grid{grid-template-columns:1fr !important;} }
      `}</style>
    </section>
  );
};

const HeroReach = ({ accent, onCta, playful }) => {
  return (
    <section style={{paddingTop:80,paddingBottom:96,borderBottom:"none",background:"var(--ink)",color:"var(--cream)"}}>
      <div className="wrap" style={{position:"relative"}}>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:48,alignItems:"center"}} className="hero-grid">
          <div style={{position:"relative",zIndex:2}}>
            <div className="pill" style={{background:"var(--yellow)",color:"var(--ink)",marginBottom:20}}>● Now onboarding publishers</div>
            <h1 className="display" style={{fontSize:"clamp(56px, 9vw, 128px)"}}>
              Your game.<br/>
              In front of <span style={{color:`var(--${accent})`}}>350M+</span> players.
            </h1>
            <p style={{marginTop:24,fontSize:22,maxWidth:540,color:"rgba(255,251,242,0.75)",textWrap:"pretty"}}>
              Crayon turns your game into a playable demo and distributes it
              across our partner network. Testing and UA, one pipeline.
            </p>
            <div style={{marginTop:36,display:"flex",gap:14,flexWrap:"wrap"}}>
              <button className="btn primary" onClick={onCta} style={{background:`var(--${accent})`,boxShadow:"4px 4px 0 var(--cream)",color:"var(--ink)"}}>
                Get early access <span className="arrow">→</span>
              </button>
            </div>

            {/* Scale strip */}
            <div style={{marginTop:52,display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:16}}>
              {[
                {n:"350M+",l:"Players across partner network"},
                {n:"< 90s",l:"From upload to playable demo"},
                {n:"62",l:"Countries with live traffic"},
              ].map((s,i)=>(
                <div key={i} style={{borderTop:"2px solid var(--cream)",paddingTop:14}}>
                  <div className="display" style={{fontSize:i===2?26:44,color:"var(--cream)",lineHeight:1}}>{s.n}</div>
                  <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,letterSpacing:"0.06em",textTransform:"uppercase",color:"rgba(255,251,242,0.7)",marginTop:8,textWrap:"pretty"}}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{position:"relative",display:"flex",justifyContent:"center",alignItems:"center",minHeight:620}}>
            {playful && <>
              <div className="shape circle" style={{background:"var(--coral)",width:200,height:200,top:-20,right:30,zIndex:1,border:"2px solid var(--ink)"}}/>
              <div className="shape sq" style={{background:"var(--yellow)",width:140,height:140,bottom:40,right:-30,border:"2px solid var(--ink)",transform:"rotate(-14deg)",zIndex:1}}/>
              <div className="shape circle" style={{background:"var(--mint)",width:70,height:70,top:40,left:-10,zIndex:1,border:"2px solid var(--ink)"}}/>
            </>}
            <div style={{position:"relative",zIndex:2,display:"flex"}}>
              <div style={{transform:"translate(24px, 40px)", zIndex:1, width:220}}>
                <PhoneMock theme="yellow" label="Match-3" tilt={-8} time={0.32} game="match"/>
              </div>
              <div style={{transform:"translate(0, 0)", zIndex:3, width:240, marginLeft:-30}}>
                <PhoneMock theme={accent} label="Runner" tilt={2} time={0.58} game="runner"/>
              </div>
              <div style={{transform:"translate(-24px, 56px)", zIndex:2, width:210, marginLeft:-40}}>
                <PhoneMock theme="mint" label="Puzzle" tilt={10} time={0.7} game="blocks"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){ .hero-grid{grid-template-columns:1fr !important;} }
      `}</style>
    </section>
  );
};

const HeroOutcome = ({ accent, onCta, playful }) => {
  return (
    <section style={{paddingTop:80,paddingBottom:96,borderBottom:"none"}}>
      <div className="wrap" style={{position:"relative"}}>
        <div className="pill" style={{background:"var(--yellow)",marginBottom:28}}>● Now onboarding publishers</div>
        <div style={{display:"grid",gridTemplateColumns:"1.5fr 1fr",gap:64,alignItems:"end"}} className="hero-grid">
          <h1 className="display" style={{fontSize:"clamp(56px, 10vw, 152px)"}}>
            Test the<br/>
            concept.<br/>
            <span style={{color:`var(--${accent})`}}>Before</span> the<br/>
            $5M bet.
          </h1>
          <div>
            <p style={{fontSize:22,color:"var(--ink-soft)",textWrap:"pretty"}}>
              Generate a playable demo. Get real player data in days. Make
              build/kill decisions with signal, not instinct.
            </p>
            <div style={{marginTop:28}}>
              <button className="btn primary" onClick={onCta} style={{background:`var(--${accent})`}}>
                Get early access <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </div>

        {/* Outcome stat row */}
        <div style={{marginTop:72,display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:20}} className="outcome-stats">
          <StatBlock color="coral" big="< 90s" small="Upload to playable demo" />
          <StatBlock color="yellow" big="Days" small="To real engagement data" />
          <StatBlock color="blue" big="350M+" small="Players in partner network" />
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){ .hero-grid{grid-template-columns:1fr !important;} .outcome-stats{grid-template-columns:1fr !important;} }
      `}</style>
    </section>
  );
};

const StatBlock = ({ color, big, small }) => {
  const fg = color === "blue" ? "var(--cream)" : "var(--ink)";
  return (
    <div style={{
      background:`var(--${color})`,
      border:"2px solid var(--ink)",
      borderRadius:24,
      padding:"36px 28px",
      position:"relative",
      overflow:"hidden",
      color: fg,
    }}>
      <div className="display" style={{fontSize:"clamp(48px, 6vw, 80px)",lineHeight:0.92}}>{big}</div>
      <div style={{marginTop:12,fontSize:16,maxWidth:240}}>{small}</div>
    </div>
  );
};

// Visual flow
const FlowRibbon = ({ accent, style }) => {
  const steps = [
    {n:"01",label:"Upload your game",bg:"var(--paper)"},
    {n:"02",label:"Playable demo generated",bg:`var(--${accent})`},
    {n:"03",label:"Distributed to real players",bg:"var(--ink)",fg:"var(--cream)"},
  ];
  return (
    <div className="flow-ribbon" style={style}>
      {steps.map((s,i,arr)=>(
        <React.Fragment key={i}>
          <div className="flow-step" style={{
            background:s.bg,color:s.fg||"var(--ink)",
          }}>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,opacity:0.7}}>{s.n}</span>
            <span>{s.label}</span>
          </div>
          {i<arr.length-1 && <span className="flow-arrow">→</span>}
        </React.Fragment>
      ))}
      <style>{`
        .flow-ribbon{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
        .flow-step{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:2px solid var(--ink);border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap;}
        .flow-arrow{font-weight:700;font-size:18px;color:var(--ink-mute);flex-shrink:0;}
        @media (max-width: 1100px){
          .flow-ribbon{flex-wrap:wrap;}
        }
        @media (max-width: 720px){
          .flow-ribbon{flex-direction:column;align-items:flex-start;}
          .flow-arrow{transform:rotate(90deg);}
        }
      `}</style>
    </div>
  );
};

window.HeroSpeed = HeroSpeed;
window.HeroReach = HeroReach;
window.HeroOutcome = HeroOutcome;
window.StatBlock = StatBlock;
window.FlowRibbon = FlowRibbon;