// How it works · Why now · Scale · Footer

const WhatYouGet = ({ accent, onCta }) => {
  const items = [
    {
      color:"coral",
      eyebrow:"01 · Transcode",
      title:"Playable demo in under two minutes.",
      body:"Upload your APK, IPA, or design specs. Get a self-contained HTML5 playable that mirrors your real game loop.",
    },
    {
      color:"yellow",
      eyebrow:"02 · Distribute",
      title:"Real players find your game organically.",
      body:"Your demo goes live across discovery surfaces and our partner network. No ad tracking required.",
    },
    {
      color:"blue",
      eyebrow:"03 · Learn + Scale",
      title:"Engagement data in days. Scale when ready.",
      body:"Session duration, drop-off points, completion rates. Then scale UA across 350M+ devices.",
    },
  ];
  return (
    <section>
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow" style={{color:`var(--${accent})`}}>● How it works</div>
          <h2 className="display">One upload. Test, learn, and scale from one place.</h2>
          <p>From game build to player data. No creative agencies, no media buyers.</p>
        </div>
        <div className="g3">
          {items.map((it,i)=>(
            <div key={i} className={`card ${it.color}`} style={{
              padding:32, minHeight:380, display:"flex", flexDirection:"column",
              color: it.color==="blue"?"var(--cream)":"var(--ink)",
            }}>
              <div className="eyebrow" style={{color:"currentColor",opacity:0.8,marginBottom:14}}>● {it.eyebrow}</div>
              <h3 className="display" style={{fontSize:32,marginBottom:14,textWrap:"pretty"}}>{it.title}</h3>
              <p style={{fontSize:16,lineHeight:1.55,opacity:0.9}}>{it.body}</p>
              <div style={{flex:1}}/>
              <MiniIllustration kind={i} color={it.color}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const MiniIllustration = ({ kind, color }) => {
  const base = {
    width:"100%", height:100, marginTop:24, position:"relative",
    borderTop:"2px solid var(--ink)", paddingTop:16,
  };
  if (kind===0) {
    return (
      <div style={base}>
        <div style={{position:"absolute",top:16,right:0,fontFamily:"'JetBrains Mono',monospace",fontSize:11,opacity:0.7}}>create</div>
        <div style={{display:"flex",alignItems:"center",justifyContent:"center",gap:14,height:72}}>
          <div style={{width:72,height:72,background:"var(--paper)",border:"2px solid var(--ink)",borderRadius:14,display:"flex",alignItems:"center",justifyContent:"center",fontFamily:"'JetBrains Mono',monospace",fontSize:11}}>.apk</div>
          <div style={{fontWeight:700,fontSize:20}}>→</div>
          <div style={{width:72,height:72,background:"var(--ink)",color:"var(--cream)",border:"2px solid var(--ink)",borderRadius:14,display:"flex",alignItems:"center",justifyContent:"center",fontFamily:"'JetBrains Mono',monospace",fontSize:11}}>▸ play</div>
        </div>
      </div>
    );
  }
  if (kind===1) {
    return (
      <div style={base}>
        <div style={{display:"flex",alignItems:"flex-end",gap:8,height:"100%"}}>
          {[100,82,64,48,36].map((h,i)=>(
            <div key={i} style={{flex:1,height:`${h}%`,background:i===0?"var(--ink)":"var(--paper)",border:"2px solid var(--ink)",borderRadius:6}}/>
          ))}
        </div>
        <div style={{position:"absolute",top:16,right:0,fontFamily:"'JetBrains Mono',monospace",fontSize:11,opacity:0.7}}>discover</div>
      </div>
    );
  }
  return (
    <div style={base}>
      <div style={{position:"absolute",top:16,right:0,fontFamily:"'JetBrains Mono',monospace",fontSize:11,opacity:0.85,background:"var(--blue)",padding:"0 4px",zIndex:2,color:"var(--cream)"}}>scale</div>
      <svg viewBox="0 0 300 90" style={{width:"100%",height:84,display:"block"}}>
        {[[40,20],[110,14],[200,28],[70,70],[150,76],[230,72]].map((p,i)=>(
          <line key={i} x1="150" y1="45" x2={p[0]} y2={p[1]} stroke="#FFFBF2" strokeWidth="2"/>
        ))}
        {[[40,20],[110,14],[200,28],[70,70],[150,76],[230,72]].map((p,i)=>(
          <circle key={i} cx={p[0]} cy={p[1]} r="7" fill="#FFFBF2" stroke="#17182B" strokeWidth="2"/>
        ))}
        <circle cx="150" cy="45" r="12" fill="#FFC93C" stroke="#17182B" strokeWidth="2"/>
      </svg>
    </div>
  );
};

const WhyItMatters = () => {
  const problems = [
    { title:"Test game concepts for a fraction of the cost.", body:"Generate a playable demo from your build or even a design spec. Get real player engagement data before committing to full production." },
    { title:"See exactly where players drop off.", body:"Session duration, completion rates, tap heatmaps, drop-off points. All first-party. No tracking dependencies." },
    { title:"Scale UA with the same creative.", body:"The playable you tested is the playable you scale. One asset, no re-production. Promote it across our partner network when you're ready." },
  ];
  return (
    <section style={{background:"var(--ink)",color:"var(--cream)"}}>
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow" style={{color:"var(--yellow)"}}>● What you get</div>
          <h2 className="display" style={{color:"var(--cream)"}}>Stop guessing. <span style={{color:"var(--coral)"}}>Start testing.</span></h2>
          <p style={{color:"rgba(255,251,242,0.7)"}}>One pipeline from game build to player data.</p>
        </div>

        <div style={{display:"grid",gridTemplateColumns:"1.1fr 1fr",gap:48,alignItems:"start"}} className="why-grid">
          <div>
            {problems.map((p,i)=>(
              <div key={i} style={{borderTop:"2px solid rgba(255,251,242,0.25)",padding:"28px 0"}}>
                <div style={{display:"flex",gap:20,alignItems:"start"}}>
                  <div className="display" style={{fontSize:36,color:"var(--coral)",minWidth:60}}>{`0${i+1}`}</div>
                  <div>
                    <div className="display" style={{fontSize:26,color:"var(--cream)",marginBottom:8,textWrap:"pretty"}}>{p.title}</div>
                    <div style={{color:"rgba(255,251,242,0.72)",fontSize:16,lineHeight:1.55,maxWidth:540}}>{p.body}</div>
                  </div>
                </div>
              </div>
            ))}
            <div style={{borderTop:"2px solid rgba(255,251,242,0.25)"}}/>
          </div>

          {/* Old way / Crayon */}
          <div style={{position:"sticky",top:96,display:"flex",flexDirection:"column",gap:18}}>
            <div style={{padding:24,border:"2px solid var(--cream)",borderRadius:20,background:"transparent"}}>
              <div className="eyebrow" style={{color:"var(--cream)",opacity:0.6,marginBottom:12}}>● Old way</div>
              <div style={{display:"flex",flexDirection:"column",gap:8}}>
                {[
                  {l:"Brief agency", d:"+5d"},
                  {l:"Creative production", d:"+15d"},
                  {l:"Revisions", d:"+10d"},
                  {l:"QA + compliance", d:"+8d"},
                  {l:"Media plan + launch", d:"+14d"},
                ].map((s,i)=>(
                  <div key={i} style={{display:"flex",justifyContent:"space-between",fontFamily:"'JetBrains Mono',monospace",fontSize:12,opacity:0.75,gap:12}}>
                    <span>{`0${i+1}`} · {s.l}</span>
                    <span>{s.d}</span>
                  </div>
                ))}
                <div style={{marginTop:8,paddingTop:12,borderTop:"1px dashed rgba(255,251,242,0.3)",display:"flex",justifyContent:"space-between",fontFamily:"'JetBrains Mono',monospace",fontSize:12}}>
                  <span>Total</span>
                  <span style={{color:"var(--coral)"}}>~8 weeks</span>
                </div>
              </div>
            </div>
            <div style={{padding:24,border:"2px solid var(--cream)",borderRadius:20,background:"var(--yellow)",color:"var(--ink)"}}>
              <div className="eyebrow" style={{marginBottom:12}}>● Crayon</div>
              <div style={{display:"flex",flexDirection:"column",gap:8}}>
                {[
                  {l:"Upload build", d:"+0m"},
                  {l:"Playable generated", d:"+90s"},
                  {l:"Live across network", d:"+1d"},
                ].map((s,i)=>(
                  <div key={i} style={{display:"flex",justifyContent:"space-between",fontFamily:"'JetBrains Mono',monospace",fontSize:12,gap:12}}>
                    <span>{`0${i+1}`} · {s.l}</span>
                    <span>{s.d}</span>
                  </div>
                ))}
                <div style={{marginTop:8,paddingTop:12,borderTop:"2px dashed var(--ink)",display:"flex",justifyContent:"space-between",fontFamily:"'JetBrains Mono',monospace",fontSize:12,fontWeight:600}}>
                  <span>Total</span>
                  <span>Under a day</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){ .why-grid{grid-template-columns:1fr !important;} }
      `}</style>
    </section>
  );
};

const NetworkScale = ({ onCta, accent }) => {
  return (
    <section>
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow" style={{color:`var(--${accent})`}}>● The network</div>
          <h2 className="display">350 million players. 62 countries. 1 pipeline.</h2>
        </div>

        {/* Big stat trio */}
        <div style={{display:"grid",gridTemplateColumns:"2fr 1fr 1fr",gap:20}} className="net-grid">
          <div className="card coral" style={{padding:32,minHeight:340,display:"flex",flexDirection:"column",position:"relative",overflow:"hidden"}}>
            <div className="eyebrow" style={{minHeight:20}}>● Partner network</div>
            <div className="big-num" style={{marginTop:"auto"}}><span className="display">350M+</span></div>
            <div style={{fontSize:15,maxWidth:420,marginTop:16,lineHeight:1.5,minHeight:48}}>Connected devices across rewarded-video, interstitial, and in-game placements.</div>
            <div className="shape circle" style={{background:"var(--yellow)",width:120,height:120,top:-30,right:-30,border:"2px solid var(--ink)"}}/>
          </div>
          <div className="card yellow" style={{padding:32,minHeight:340,display:"flex",flexDirection:"column"}}>
            <div className="eyebrow" style={{minHeight:20}}>● Concept testing</div>
            <div className="big-num" style={{marginTop:"auto"}}><span className="display">1</span></div>
            <div style={{fontSize:15,marginTop:16,lineHeight:1.5,minHeight:48}}>Day from upload to real player data.</div>
          </div>
          <div className="card blue" style={{padding:32,minHeight:340,display:"flex",flexDirection:"column",color:"var(--cream)"}}>
            <div className="eyebrow" style={{color:"var(--cream)",minHeight:20}}>● Markets</div>
            <div className="big-num" style={{marginTop:"auto",color:"var(--cream)"}}><span className="display">62</span></div>
            <div style={{fontSize:15,marginTop:16,lineHeight:1.5,minHeight:48}}>Countries with live player traffic.</div>
          </div>
        </div>

        {/* Bottom row */}
        <div style={{marginTop:20,display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:20}} className="net-grid">
          <div className="card flat" style={{padding:28}}>
            <div className="eyebrow" style={{marginBottom:14}}>● For new games</div>
            <div className="display" style={{fontSize:32,textWrap:"pretty"}}>Test before you build.</div>
            <p style={{marginTop:12,color:"var(--ink-soft)",fontSize:15,lineHeight:1.5}}>Validate concepts with real players. Kill bad ideas early. Green-light good ones with data.</p>
          </div>
          <div className="card flat" style={{padding:28}}>
            <div className="eyebrow" style={{marginBottom:14}}>● For live games</div>
            <div className="display" style={{fontSize:32,textWrap:"pretty"}}>Better ads. Less spend.</div>
            <p style={{marginTop:12,color:"var(--ink-soft)",fontSize:15,lineHeight:1.5}}>Replace your $30K playable agency. Get a demo that mirrors your actual game loop.</p>
          </div>
          <div className="card flat" style={{padding:28}}>
            <div className="eyebrow" style={{marginBottom:14}}>● For UA teams</div>
            <div className="display" style={{fontSize:32,textWrap:"pretty"}}>One creative. Test to scale.</div>
            <p style={{marginTop:12,color:"var(--ink-soft)",fontSize:15,lineHeight:1.5}}>Same playable from concept test through full UA campaign. No re-production.</p>
          </div>
        </div>

        {/* CTA strip */}
        <div style={{marginTop:48,padding:"40px 40px",background:"var(--ink)",color:"var(--cream)",border:"2px solid var(--ink)",borderRadius:24,display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,flexWrap:"wrap",position:"relative",overflow:"hidden"}}>
          <div style={{position:"relative",zIndex:2,maxWidth:720}}>
            <div className="eyebrow" style={{color:"var(--yellow)",marginBottom:8}}>● Now onboarding publishers</div>
            <div className="display" style={{fontSize:"clamp(32px, 5vw, 56px)",color:"var(--cream)",textWrap:"pretty"}}>Submit your game. Get real player data back.</div>
          </div>
          <button className="btn primary" onClick={onCta} style={{background:`var(--${accent})`,boxShadow:"4px 4px 0 var(--cream)",color:"var(--ink)",position:"relative",zIndex:2}}>
            Get early access <span className="arrow">→</span>
          </button>
          <div className="shape circle" style={{background:"var(--lilac)",width:160,height:160,top:-40,right:160,opacity:0.9,border:"2px solid var(--cream)"}}/>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){ .net-grid{grid-template-columns:1fr !important;} }
        .big-num{ height: clamp(64px, 9vw, 124px); display:flex; align-items:flex-start; }
        .big-num .display{ font-size: clamp(72px, 10vw, 140px); line-height: 1; display:block; }
      `}</style>
    </section>
  );
};

const Footer = () => {
  return (
    <footer style={{background:"var(--cream)",padding:"72px 0 40px"}}>
      <div className="wrap">
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-end",gap:32,flexWrap:"wrap"}}>
          <div>
            <div className="logo" style={{fontSize:"clamp(72px, 11vw, 140px)",lineHeight:1}}>crayon<span className="dot">.</span></div>
            <p style={{marginTop:20,fontSize:18,color:"var(--ink)",maxWidth:340}}>Know before you build.</p>
          </div>
          <a href="mailto:hello@withcrayon.com" className="btn primary" style={{background:"var(--ink)",color:"var(--cream)",boxShadow:"4px 4px 0 var(--ink)"}}>
            Get early access <span className="arrow">→</span>
          </a>
        </div>
        <div style={{marginTop:56,paddingTop:24,borderTop:"2px solid var(--ink)",display:"flex",justifyContent:"space-between",fontFamily:"'JetBrains Mono',monospace",fontSize:12,color:"var(--ink-soft)",flexWrap:"wrap",gap:12}}>
          <span>© 2026 Crayon Labs</span>
          <a href="mailto:hello@withcrayon.com" style={{color:"var(--ink-soft)",textDecoration:"none"}}>hello@withcrayon.com</a>
        </div>
      </div>
    </footer>
  );
};

window.WhatYouGet = WhatYouGet;
window.WhyItMatters = WhyItMatters;
window.NetworkScale = NetworkScale;
window.Footer = Footer;