// Home page — hi-fi (i18n)

function Home({ setPage }) {
  const t = useT();
  return (
    <div className="page">
      {/* HERO */}
      <section className="sec-lg hero-sec" style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -200, right: -200, width: 700, height: 700, background: 'radial-gradient(circle, rgba(255,201,60,0.18) 0%, transparent 60%)', pointerEvents: 'none' }}/>
        <div style={{ position: 'absolute', bottom: -200, left: -200, width: 600, height: 600, background: 'radial-gradient(circle, rgba(124,92,255,0.15) 0%, transparent 60%)', pointerEvents: 'none' }}/>

        <div className="wrap">
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
              <span className="pulse-dot"/>
              <span className="mono" style={{ fontSize: 12, color: 'var(--text-2)', letterSpacing: '0.12em' }}>3 MINIAPPS LIVE · 2 IN DEV · Q2 '26</span>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <h1 className="display" style={{ fontSize: 'clamp(52px, 9vw, 128px)', margin: 0, maxWidth: 1100 }}>
              {t('home.heroLine1')}<br/>
              {t('home.heroLine2')}<br/>
              <span style={{ background: 'linear-gradient(90deg, #FFE38A 0%, var(--accent) 40%, #FF5CA8 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{t('home.heroLine3')}</span>
            </h1>
          </Reveal>

          <Reveal delay={160}>
            <p style={{ fontSize: 20, color: 'var(--text-2)', maxWidth: 620, marginTop: 32, lineHeight: 1.5 }}>
              {t('home.heroSub')}
            </p>
          </Reveal>

          <Reveal delay={240}>
            <div style={{ display: 'flex', gap: 14, marginTop: 40, flexWrap: 'wrap' }}>
              <a className="btn btn-primary btn-lg" href="https://calendly.com/evveland" target="_blank" rel="noopener" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                {t('cta.discoveryCall')} <span className="chev">→</span>
              </a>
              <button className="btn btn-ghost btn-lg" onClick={() => setPage('work')}>
                {t('cta.seeMiniapps')}
              </button>
            </div>
          </Reveal>

          <Reveal delay={320} style={{ marginTop: 80 }}>
            <div className="grid g-3" style={{ padding: '32px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
              <div>
                <div className="display" style={{ fontSize: 48, color: 'var(--accent)' }}>1B+</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.15em', marginTop: 4 }}>{t('home.metricUsers')}</div>
              </div>
              <div>
                <div className="display" style={{ fontSize: 48 }}>0%</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.15em', marginTop: 4 }}>{t('home.metricFees')}</div>
              </div>
              <div>
                <div className="display" style={{ fontSize: 48, color: 'var(--green)' }}>{t('home.metricTapValue')}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.15em', marginTop: 4 }}>{t('home.metricTap')}</div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <Ticker items={[t('ticker.0'), t('ticker.1'), t('ticker.2'), t('ticker.3'), t('ticker.4'), t('ticker.5'), t('ticker.6')]}/>

      {/* DIY ENTRY POINT — GrowthPad */}
      <CreateHomeSection setPage={setPage}/>

      {/* WHY TELEGRAM */}
      <section className="sec">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="eyebrow">{t('home.whyEyebrow')}</div>
              <h2 style={{ marginTop: 16 }}>{t('home.whyTitle1')}<br/><span className="u-accent">{t('home.whyTitle2')}</span></h2>
            </div>
            <p style={{ maxWidth: 420, color: 'var(--text-2)', fontSize: 17 }}>
              {t('home.whyBody')}
            </p>
          </div>

          <div className="grid g-3">
            {[
              { icon: '◢', title: t('home.whyOneAudience'), body: t('home.whyOneAudienceBody') },
              { icon: '◆', title: t('home.whyZeroFriction'), body: t('home.whyZeroFrictionBody'), accent: true },
              { icon: '◈', title: t('home.whyNativeRails'), body: t('home.whyNativeRailsBody') },
            ].map((f, i) => (
              <Reveal key={f.title} delay={i * 80}>
                <div className="card card-hover" style={{ padding: 32, minHeight: 220, borderColor: f.accent ? 'rgba(255,201,60,0.3)' : 'var(--line)', background: f.accent ? 'linear-gradient(180deg, rgba(255,201,60,0.05), var(--ink-3))' : 'var(--ink-3)' }}>
                  <div className="display" style={{ fontSize: 36, color: f.accent ? 'var(--accent)' : 'var(--text-2)', marginBottom: 16 }}>{f.icon}</div>
                  <h3 className="display" style={{ fontSize: 24, marginBottom: 12, letterSpacing: '-0.02em' }}>{f.title}</h3>
                  <p style={{ color: 'var(--text-2)', fontSize: 15 }}>{f.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* MINIAPP LINEUP */}
      <section className="sec" style={{ background: 'linear-gradient(180deg, transparent, var(--ink-0) 50%, transparent)' }}>
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="eyebrow">{t('home.appsEyebrow')}</div>
              <h2 style={{ marginTop: 16 }}>{t('home.appsTitle1')}<br/><span className="u-muted">{t('home.appsTitle2')}</span></h2>
            </div>
            <button className="btn btn-ghost" onClick={() => setPage('work')}>{t('cta.allCases')} <span className="chev">→</span></button>
          </div>

          <div className="grid g-4">
            <Reveal>
              <Cartridge color="var(--gold)" tag="FLAGSHIP" tagClass="tag tag-flag"
                title="Incaverse 2" subtitle="Immersive Game"
                meta={['live', 'web3', 'tribes']} screen={<IncaverseScreen/>}
                href="https://t.me/incaverse_bot"/>
            </Reveal>
            <Reveal delay={80}>
              <Cartridge color="var(--green)" tag="LIVE" tagClass="tag tag-live"
                title="Chipsy" subtitle="Operator miniapp"
                meta={['live', 'operator', 'shipped']} screen={<ChipsyScreen/>}
                href="https://t.me/chipsycasino_bot/play"/>
            </Reveal>
            <Reveal delay={160}>
              <Cartridge color="var(--pink)" tag="LIVE" tagClass="tag tag-live"
                title="Plump" subtitle="Operator miniapp"
                meta={['live', 'operator', 'LatAm']} screen={<PlumpScreen/>}
                href="https://t.me/plumpcasino_bot/play"/>
            </Reveal>
            <Reveal delay={240}>
              <Cartridge color="var(--violet)" tag="IN DEV" tagClass="tag tag-dev"
                title="Spin the Wheel" subtitle={"Acquisition miniapp\n\n"}
                meta={['dev', 'q2-26', 'soon']} screen={<SpinScreen/>}
                href="#"/>
            </Reveal>
          </div>
        </div>
      </section>

      {/* FEATURED CASE — INCAVERSE */}
      <section className="sec">
        <div className="wrap">
          <Reveal>
            <div className="card" style={{ padding: 0, overflow: 'hidden', background: 'linear-gradient(135deg, #1a1432 0%, #0b0d14 70%)', border: '1px solid rgba(124,92,255,0.3)' }}>
              <div className="grid g-2" style={{ gap: 0, alignItems: 'stretch' }}>
                <div style={{ padding: '56px 48px', position: 'relative' }}>
                  <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
                    <span className="tag tag-flag">{t('home.flagshipTag')}</span>
                    <span className="tag">{t('home.flagshipWeb3')}</span>
                    <span className="tag">{t('home.flagshipS3')}</span>
                  </div>
                  <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', letterSpacing: '-0.03em', lineHeight: 0.95 }}>
                    {t('home.flagshipTitle1')}<br/>
                    <span style={{ background: 'linear-gradient(90deg, #C9BFFF 0%, #FFE38A 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{t('home.flagshipTitle2')}</span>
                  </h2>
                  <p style={{ fontSize: 17, color: 'var(--text-2)', marginTop: 20, maxWidth: 520 }}>
                    {t('home.flagshipBody')}
                    <br/><br/>
                    <strong style={{ color: 'var(--text-1)' }}>Season 1</strong> · {t('home.flagshipS1')}<br/>
                    <strong style={{ color: 'var(--text-1)' }}>Season 2</strong> · <a href="https://t.me/incaverse_bot" target="_blank" rel="noopener" style={{ color: 'var(--accent)' }}>{t('home.flagshipS2Lead')}</a><br/>
                    <strong style={{ color: 'var(--text-1)' }}>Season 3</strong> · {t('home.flagshipS3Lead')}
                  </p>
                  <div className="grid g-3" style={{ gap: 16, marginTop: 28, padding: '20px 0', borderTop: '1px solid rgba(255,255,255,0.08)', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
                    <div>
                      <div className="display" style={{ fontSize: 28, color: '#FFE38A' }}>170k</div>
                      <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>{t('home.flagshipMetric1')}</div>
                    </div>
                    <div>
                      <div className="display" style={{ fontSize: 28, color: '#C9BFFF' }}>15k</div>
                      <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>{t('home.flagshipMetric2')}</div>
                    </div>
                    <div>
                      <div className="display" style={{ fontSize: 28, color: '#24E1A4' }}>1.5k</div>
                      <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>{t('home.flagshipMetric3')}</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                    <a className="btn btn-primary" href="https://incaverse.io" target="_blank" rel="noopener">{t('home.flagshipVisitWeb')} <span className="chev">→</span></a>
                    <a className="btn btn-ghost" href="https://t.me/incaverse_bot" target="_blank" rel="noopener">{t('cta.openTelegram')}</a>
                  </div>
                  <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginTop: 28, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.06)', flexWrap: 'wrap' }}>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--text-4)', letterSpacing: '0.15em' }}>{t('home.flagshipBackedBy')}</span>
                    <div style={{ background: '#fff', padding: '6px 10px', borderRadius: 6, display: 'inline-flex', alignItems: 'center', height: 36 }}>
                      <img src="assets/ministerio-cultura.png" alt="Ministerio de Cultura — Gobierno de España" style={{ height: 22, display: 'block' }}/>
                    </div>
                    <div style={{ background: '#111', padding: '8px 14px', borderRadius: 6, display: 'inline-flex', alignItems: 'center', height: 56, border: '1px solid rgba(255,255,255,0.1)' }}>
                      <img src="assets/madrid-in-game.jpg" alt="Madrid in Game" style={{ height: 40, display: 'block' }}/>
                    </div>
                    <div style={{ background: '#fff', padding: '6px 10px', borderRadius: 6, display: 'inline-flex', alignItems: 'center', height: 36 }}>
                      <img src="assets/financiado-ue.png" alt="Financiado por la Unión Europea — NextGenerationEU" style={{ height: 24, display: 'block' }}/>
                    </div>
                  </div>
                </div>
                <div className="incaverse-stage" style={{ background: 'radial-gradient(ellipse at 50% 40%, #3B2C7A 0%, #0c0e15 70%)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40, position: 'relative', minHeight: 480 }}>
                  <div style={{ position: 'absolute', inset: 0, opacity: 0.5, backgroundImage: `repeating-linear-gradient(60deg, transparent 0 60px, rgba(255,255,255,0.02) 60px 61px), repeating-linear-gradient(-60deg, transparent 0 60px, rgba(255,255,255,0.02) 60px 61px)` }}/>
                  <div className="incaverse-phone" style={{ width: '60%', maxWidth: 280 }}>
                    <IncaverseHeroScreen/>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* SERVICES STRIP */}
      <section className="sec">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="eyebrow">{t('home.servicesEyebrow')}</div>
              <h2 style={{ marginTop: 16 }}>{t('home.servicesTitle1')}<br/>{t('home.servicesTitle2a')}<span className="u-accent">{t('home.servicesTitle2b')}</span>{t('home.servicesTitle2c')}</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => setPage('services')}>{t('cta.allServices')} <span className="chev">→</span></button>
          </div>

          <div className="grid g-3">
            {[
              ['Miniapp design & dev', 'End-to-end build. UX, engineering, ship.'],
              ['Game design', 'Loops, economies, progression — built for retention.'],
              ['Tokenomics + on-chain', 'Wallets, tokens, smart contracts inside Telegram.'],
              ['Growth + UA', 'Paid, organic, viral. Optimized for the conversions that matter to you.'],
              ['Community & retention', 'Daily ops, events, moderation — the layer most skip.'],
              ['Strategy + PM', 'Consulting and ongoing PM as the app evolves.'],
            ].map(([name, desc], i) => (
              <Reveal key={name} delay={i * 60}>
                <div className="card card-hover" style={{ padding: 28 }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.14em' }}>0{i+1}</div>
                  <h3 className="display" style={{ fontSize: 22, marginTop: 10, letterSpacing: '-0.02em' }}>{name}</h3>
                  <p style={{ color: 'var(--text-2)', fontSize: 14, marginTop: 10 }}>{desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS QUICK */}
      <section className="sec" style={{ background: 'var(--ink-0)' }}>
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="eyebrow">{t('home.processEyebrow')}</div>
              <h2 style={{ marginTop: 16 }}>{t('home.processTitle1')}<span className="u-accent">{t('home.processTitle2')}</span></h2>
            </div>
            <button className="btn btn-ghost" onClick={() => setPage('contact')}>{t('cta.startProject')} <span className="chev">→</span></button>
          </div>

          <div className="grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            {[t('home.processStep1'), t('home.processStep2'), t('home.processStep3'), t('home.processStep4'), t('home.processStep5')].map((s, i) => (
              <Reveal key={s} delay={i * 60}>
                <div className="card" style={{ padding: 20, textAlign: 'left', minHeight: 140, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.15em' }}>STEP 0{i+1}</div>
                  <div className="display" style={{ fontSize: 24, letterSpacing: '-0.02em', marginTop: 20 }}>{s}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PARTNERS */}
      <section className="sec-sm">
        <div className="wrap">
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div className="eyebrow" style={{ justifyContent: 'center' }}>{t('home.partnersEyebrow')}</div>
            <h3 className="display" style={{ fontSize: 28, marginTop: 12, letterSpacing: '-0.02em' }}>{t('home.partnersTitle')}</h3>
          </div>
          <div className="partners-row">
            {[
              { name: 'Chipsy', src: 'assets/chipsy-logo.jpeg' },
              { name: 'Plump', src: 'assets/plump-logo.jpg' },
              { name: 'OC Games', src: 'assets/oc-games-logo.png' },
              { name: 'Addressable LTD', src: 'assets/addressable.png' },
              { name: 'Ingenia LatAm', src: 'assets/ingenia.jpeg' },
              { name: 'Mundial Group', src: 'assets/mundial.jpeg' }
            ].map((p) => (
              <div key={p.name} className="partner-cell">
                <div className="partner-tile">
                  <img src={p.src} alt={p.name}/>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 56, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 32, flexWrap: 'wrap' }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{t('home.partnersBackedBy')}</span>
            <div style={{ background: '#fff', padding: '8px 14px', borderRadius: 8, display: 'inline-flex', alignItems: 'center', height: 52 }}>
              <img src="assets/ministerio-cultura.png" alt="Ministerio de Cultura — Gobierno de España" style={{ height: 34, display: 'block' }}/>
            </div>
            <div style={{ background: '#0a0a0a', padding: '10px 18px', borderRadius: 8, display: 'inline-flex', alignItems: 'center', height: 76, border: '1px solid rgba(255,255,255,0.08)' }}>
              <img src="assets/madrid-in-game.jpg" alt="Madrid in Game" style={{ height: 56, display: 'block' }}/>
            </div>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="sec">
        <div className="wrap">
          <Reveal>
            <div style={{ position: 'relative', padding: '80px 48px', borderRadius: var_r_4, background: 'radial-gradient(ellipse at 30% 30%, rgba(255,201,60,0.22) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(124,92,255,0.18) 0%, transparent 60%), var(--ink-3)', border: '1px solid var(--line)', overflow: 'hidden' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
                <div>
                  <div className="eyebrow">{t('home.finalEyebrow')}</div>
                  <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', marginTop: 16, maxWidth: 700 }}>
                    {t('home.finalTitle1')}<br/>{t('home.finalTitle2a')}<span className="u-accent">{t('home.finalTitle2b')}</span>
                  </h2>
                </div>
                <a className="btn btn-primary btn-lg" href="https://calendly.com/evveland" target="_blank" rel="noopener" style={{ fontSize: 16, padding: '20px 28px', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  {t('cta.discoveryCall')} <span className="chev">→</span>
                </a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

const var_r_4 = '22px';

window.Home = Home;