// variant-c.jsx — Zine / Modular Stack (enriched)
// Bold modular blocks, AI-engine citation cards, live editor + audit,
// animated 6-agent pipeline, repurpose grid, SEO+GEO+AEO scoreboard.

function VariantC({ tweaks }) {
  const tw = tweaks || {};
  const accent = tw.accent || '#c6f24e';
  const heroAlt = tw.heroVariant === 'alt';
  const { t, lang } = useT();
  const isMobile = useMobile(960);
  const [loginOpen, setLoginOpen] = React.useState(false);
  const route = useRoute();
  const SUBPAGE_PREFIXES = ['/pricing', '/tools', '/docs', '/contact', '/start', '/report'];
  const isSubpage = SUBPAGE_PREFIXES.some(p => route.path === p || route.path.startsWith(p + '/'));

  return (
    <div className={'ruu anim-' + (t.animations || 'intense') + (t.dark ? ' dark' : '')}
    style={{ '--accent': accent, background: 'var(--paper)', color: 'var(--ink)', fontFamily: 'var(--sans)', overflow: 'hidden' }}>

      {/* ━━━━━━━ SEO ━━━━━━━ */}
      <SEOHead />

      {/* ━━━━━━━ NAV ━━━━━━━ */}
      <NavC accent={accent} onLogin={() => setLoginOpen(true)} />
      {loginOpen && <LoginModal accent={accent} onClose={() => setLoginOpen(false)} />}

      {/* Top intro banner — once per session, dismissible */}
      <IntroBanner accent={accent} />

      {/* ━━━━━━━ ROUTED SUBPAGES ━━━━━━━ */}
      {route.path === '/pricing' && (<><PricingPage accent={accent} /><FooterC accent={accent} /></>)}
      {route.path.startsWith('/tools') && (<><ToolsRouter accent={accent} route={route} /><FooterC accent={accent} /></>)}
      {/* /docs — API documentation page */}
      {route.path.startsWith('/docs') && (<><DocsPage accent={accent} /><FooterC accent={accent} /></>)}
      {/* placeholders until built: */}
      {route.path.startsWith('/report') && (<><ReportPage /><FooterC accent={accent} /></>)}
      {route.path === '/contact' && (<><ContactPage accent={accent} /><FooterC accent={accent} /></>)}
      {route.path === '/start' && (<><StartPage /><FooterC accent={accent} /></>)}
      {isSubpage && route.path !== '/pricing' && route.path !== '/docs' && route.path !== '/contact' && route.path !== '/start' && route.path !== '/report' && null}
      {isSubpage && null /* end-of-subpage marker */}

      {/* ━━━━━━━ HOME ROUTE ━━━━━━━ */}
      {!isSubpage && (<>

      {/* ━━━━━━━ HERO ━━━━━━━ */}
      <section style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr', gridTemplateRows: isMobile ? 'auto auto auto' : 'auto auto', borderBottom: '4px solid var(--ink)' }}>
        {/* Block 1 — giant headline */}
        <div style={{ gridColumn: isMobile ? '1 / 2' : '1 / 2', gridRow: isMobile ? '1 / 2' : '1 / 3', padding: isMobile ? '32px 20px' : '56px 40px 56px 56px', borderRight: isMobile ? 0 : '4px solid var(--ink)', borderBottom: isMobile ? '4px solid var(--ink)' : 0, position: 'relative' }}>
          <Reveal>
            <span className="stamp" style={{ background: accent, borderColor: 'var(--ink)' }}>{t('hero.stamp')}</span>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="serif" style={{ fontSize: 'clamp(60px, 8vw, 144px)', lineHeight: 0.9, letterSpacing: '-0.03em', margin: '24px 0 0', textWrap: 'balance' }}>
              {t('hero.title')}
            </h1>
          </Reveal>
          <Reveal delay={300}>
            <p style={{ fontSize: 19, lineHeight: 1.45, color: 'var(--ink-2)', maxWidth: 540, margin: '28px 0 32px' }}>
              {t('hero.sub')}
            </p>
          </Reveal>
          <Reveal delay={420}>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <CTA>{t('hero.cta')}</CTA>
              <button className="btn btn-ghost"><span>{t('hero.alt')}</span><span className="arrow">→</span></button>
            </div>
          </Reveal>

          {/* Floating sticker */}
          <div style={{ position: isMobile ? 'static' : 'absolute', bottom: 40, right: 56, transform: isMobile ? 'none' : 'rotate(-7deg)', marginTop: isMobile ? 24 : 0, display: 'inline-block' }}>
            <span className="sticky" style={{ fontSize: 12 }}>
              {t('hero.sticker')}
            </span>
          </div>
        </div>

        {/* Block 2 — ink panel with citation widget */}
        <div style={{ gridColumn: isMobile ? '1 / 2' : '2 / 3', gridRow: isMobile ? '2 / 3' : '1 / 2', background: 'var(--ink)', color: 'var(--paper)', padding: isMobile ? '32px 20px' : '40px 36px', borderBottom: '4px solid var(--ink)', minHeight: isMobile ? 'auto' : 320, position: 'relative', overflow: 'hidden' }}>
          <NatureBackdrop opacity={0.18} interval={7200} blend="screen" />
          <div style={{ position: 'relative', zIndex: 1 }}>
          <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: accent, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="livedot"></span> {t('hero.tracker.title')}
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14 }}>
            <span className="serif" style={{ fontSize: 88, lineHeight: 0.9, color: accent }}>
              <Counter to={1247} />
            </span>
            <span className="mono" style={{ fontSize: 11, color: 'rgba(245,243,236,.6)' }}>↑ +148%<br />{t('hero.tracker.kicker')}</span>
          </div>
          <CitationSparkline color={accent} />
          <div style={{ marginTop: 12, display: 'grid', gap: 6 }}>
            {ENGINES.slice(0, 4).map((e) =>
              <div key={e.name} style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(245,243,236,.85)' }}>
                <span>{e.name}</span>
                <span><span style={{ color: accent }}>{e.citations}</span> · <span style={{ color: 'rgba(245,243,236,.5)' }}>{e.trend}</span></span>
              </div>
              )}
          </div>
          </div>
        </div>

        {/* Block 3 — pricing strip (subscription + pay-as-you-go) */}
        <div style={{ gridColumn: isMobile ? '1 / 2' : '2 / 3', gridRow: isMobile ? '3 / 4' : '2 / 3', background: accent, padding: isMobile ? '28px 20px' : '36px', minHeight: isMobile ? 'auto' : 220 }}>
          <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em' }}>{t('pricing.kicker')}</div>
          <div className="serif" style={{ fontSize: 50, lineHeight: 0.98, margin: '10px 0', letterSpacing: '-0.022em' }}>
            {t('pricing.headline')}
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 14 }}>
            {['Starter $19/mo · 50K', 'Pro $59/mo · 250K', 'Business $199/mo · 1M'].map((x) =>
            <span key={x} className="mono" style={{ padding: '5px 9px', background: 'var(--ink)', color: 'var(--paper)', borderRadius: 4, fontSize: 10, letterSpacing: '0.04em' }}>{x}</span>
            )}
          </div>
          <div className="mono" style={{ fontSize: 10, marginTop: 10, opacity: 0.65, letterSpacing: '0.06em', textTransform: 'uppercase' }}>One-off · 10K $5 · 50K $20 · 250K $80 · 1M $280</div>
        </div>
      </section>

      {/* ━━━━━━━ TICKER ━━━━━━━ */}
      <Ticker tall items={[
      '5,000 welcome tokens', 'subscribe or pay-as-you-go', 'native in 40+ languages',
      '+317 keywords · ranked #1', '6-agent pipeline',
      'open-source Citation Tracker', '1,247 AI citations · last 30 days']
      } bg="var(--ink)" color={accent} />

      {/* ━━━━━━━ AI ENGINE CITATION CARDS ━━━━━━━ */}
      <AISeenBlock accent={accent} />

      {/* ━━━━━━━ ENGINEERING NICETIES ━━━━━━━ */}
      <section style={{ padding: '88px 56px 24px', borderTop: '1px solid var(--rule)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'end', marginBottom: 48 }}>
          <h2 className="serif" style={{ fontSize: 'clamp(48px, 6vw, 92px)', lineHeight: 0.94, letterSpacing: '-0.024em', margin: 0 }}>
            {t('engineering.headline.a')} <span className="ital hl">{t('engineering.headline.b')}</span>
          </h2>
          <p style={{ color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.5, margin: 0 }}>
            {t('engineering.sub')}
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {[
            { tag: 'engineering.card.publish.tag', title: 'engineering.card.publish.title', body: 'engineering.card.publish.body', icon: '◉' },
            { tag: 'engineering.card.scheduled.tag', title: 'engineering.card.scheduled.title', body: 'engineering.card.scheduled.body', icon: '⏱' },
            { tag: 'engineering.card.multilingual.tag', title: 'engineering.card.multilingual.title', body: 'engineering.card.multilingual.body', icon: '◈' },
          ].map((f, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{
                background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 14,
                padding: '24px 22px', minHeight: 240, display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
              }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                    <span style={{ display: 'inline-flex', width: 32, height: 32, alignItems: 'center', justifyContent: 'center', borderRadius: 8, background: accent, color: 'var(--ink)', fontFamily: 'var(--serif)', fontSize: 18 }}>{f.icon}</span>
                    <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{t(f.tag)}</span>
                  </div>
                  <div className="serif" style={{ fontSize: 28, lineHeight: 1.04, letterSpacing: '-0.018em', marginBottom: 10 }}>
                    {t(f.title)}
                  </div>
                  <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>{t(f.body)}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ━━━━━━━ FEATURE BENTO ━━━━━━━ */}
      <section id="features" style={{ padding: '88px 56px 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'end', marginBottom: 56 }}>
          <h2 className="serif" style={{ fontSize: 'clamp(56px, 7vw, 112px)', lineHeight: 0.92, letterSpacing: '-0.025em', margin: 0 }}>
            Six cards.<br />Six <span className="ital hl">edges.</span>
          </h2>
          <p style={{ color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.5, margin: 0 }}>
            {t('bento.sub')}
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          <FeatureCardC f={FEATURES[0]} accent={accent} bg="var(--ink)" fg="var(--paper)" rot={-0.6} />
          <FeatureCardC f={FEATURES[1]} accent={accent} bg={accent} fg="var(--ink)" rot={0.8} />
          <FeatureCardC f={FEATURES[2]} accent={accent} bg="var(--paper-2)" fg="var(--ink)" rot={-0.3} />
          <FeatureCardC f={FEATURES[3]} accent={accent} bg="var(--paper-2)" fg="var(--ink)" rot={0.4} />
          <FeatureCardC f={FEATURES[4]} accent={accent} bg={accent} fg="var(--ink)" rot={-0.8} />
          <FeatureCardC f={FEATURES[5]} accent={accent} bg="var(--ink)" fg="var(--paper)" rot={0.6} />
        </div>
      </section>

      {/* ━━━━━━━ EDITOR + 80-POINT AUDIT ━━━━━━━ */}
      <EditorBlock accent={accent} />

      {/* ━━━━━━━ 6-AGENT PIPELINE ━━━━━━━ */}
      <PipelineBlock accent={accent} />

      {/* ━━━━━━━ REPURPOSE GRID ━━━━━━━ */}
      <RepurposeBlock accent={accent} />

      {/* ━━━━━━━ SEO + GEO + AEO BAŞARIM PANOSU ━━━━━━━ */}
      <section id="results"></section>
      <ResultsBlock accent={accent} />

      {/* ━━━━━━━ 21 COUNTRY BENTO STRIP ━━━━━━━ */}
      <CountryBento />

      {/* ━━━━━━━ COMPARE (flip cards) ━━━━━━━ */}
      <section style={{ padding: '96px 56px', background: 'var(--paper-2)', borderTop: '4px solid var(--ink)', borderBottom: '4px solid var(--ink)', position:'relative', overflow:'hidden' }}>
        <NatureBackdrop opacity={0.22} interval={7600} blend="multiply"
                        images={SPACE_IMAGES}
                        filter="contrast(1.1) saturate(.7) brightness(1.05)"/>
        <div style={{ position:'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 36 }}>
          <h2 className="serif" style={{ fontSize: 'clamp(56px, 7vw, 112px)', lineHeight: 0.92, letterSpacing: '-0.025em', margin: 0 }}>
            <s style={{ textDecorationThickness: 6, color: 'var(--ink-3)' }}>The old way.</s><br />
            <span className="ital">The ruuapi way.</span>
          </h2>
          <span className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--ink-2)', maxWidth: 280 }}>
            Row by row. Seven lines. See the SEO + GEO + AEO gap.
          </span>
        </div>
        <div style={{ display: 'grid', gap: 12 }}>
          {COMPARE_ROW_KEYS.map((r, i) => <CompareCardC key={i} row={r} idx={i} accent={accent} />)}
        </div>
        </div>
      </section>

      {/* ━━━━━━━ REAL SCREENSHOT SLOTS ━━━━━━━ */}
      <ScreensBlock accent={accent} />

      {/* ━━━━━━━ FOOTER CTA — STAMP ━━━━━━━ */}
      <section style={{ padding: '120px 56px', background: 'var(--paper)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <span className="tag">{t('closing.cta.edition')}</span>
            <h2 className="serif" style={{ fontSize: 'clamp(64px, 9vw, 156px)', lineHeight: 0.9, letterSpacing: '-0.03em', margin: '14px 0 24px' }}>
              <span className="ital">{t('closing.cta.title.a')}</span><br />{t('closing.cta.title.b')}
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 480, margin: '0 0 28px' }}>
              {t('closing.cta.body')}
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <CTA>{t('closing.cta.primary')}</CTA>
              <button className="btn btn-ghost"><span>{t('closing.cta.secondary')}</span><span className="arrow">→</span></button>
            </div>
          </div>
          <div style={{ position: 'relative', height: 420 }}>
            <div style={{ position: 'absolute', top: 0, right: 40, transform: 'rotate(-6deg)', animation: 'ruu-rise-stamp 1.2s cubic-bezier(.2,1.4,.4,1) forwards' }}>
              <div style={{ border: '4px double var(--ink)', borderRadius: 14, padding: '34px 38px', textAlign: 'center', background: 'var(--paper)', boxShadow: '10px 10px 0 var(--ink)' }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{t('closing.cta.stamp.label')}</div>
                <div className="serif" style={{ fontSize: 84, lineHeight: 0.9, margin: '8px 0' }}>{t('closing.cta.stamp.tokens')}</div>
                <div className="mono" style={{ fontSize: 12, letterSpacing: '0.1em', color: 'var(--ink-2)' }}>{t('closing.cta.stamp.value')}</div>
              </div>
            </div>
            <div style={{ position: 'absolute', bottom: 20, left: 20, transform: 'rotate(8deg)', animation: 'ruu-rise-stamp 1.4s .2s cubic-bezier(.2,1.4,.4,1) backwards' }}>
              <div style={{ background: 'var(--ink)', color: accent, padding: '18px 26px', borderRadius: 10, fontFamily: 'var(--serif)', fontSize: 28, letterSpacing: '-0.02em' }}>
                {t('closing.cta.badge')}<br />
                <span className="ital"></span>
                <span style={{ color: 'var(--paper)', fontSize: 16 }}>{t('closing.cta.badge.sub')}</span>
              </div>
            </div>
            <div style={{ position: 'absolute', top: 220, right: 220, transform: 'rotate(-12deg)' }}>
              <span className="sticky" style={{ fontSize: 13 }}>{t('closing.cta.sticker')}</span>
            </div>
          </div>
        </div>
      </section>

      {/* ━━━━━━━ FOOTER ━━━━━━━ */}
      <FooterC accent={accent}/>
      </>)}
    </div>);

}

// ──────── Feature card (3-up grid) ────────
function FeatureCardC({ f, accent, bg, fg, rot }) {
  const [hover, setHover] = React.useState(false);
  const { t } = useT();
  return (
    <Reveal>
      <article
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          background: bg,
          color: fg,
          padding: 32,
          borderRadius: 16,
          border: '2px solid var(--ink)',
          transform: `rotate(${hover ? 0 : rot}deg) translateY(${hover ? -4 : 0}px)`,
          transition: 'transform .3s cubic-bezier(.2,1.4,.4,1), box-shadow .3s',
          boxShadow: hover ? '10px 10px 0 var(--ink)' : '5px 5px 0 var(--ink)',
          display: 'flex',
          flexDirection: 'column',
          gap: 14,
          minHeight: 380
        }}>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, fontFamily: 'var(--mono)', fontSize: 11, opacity: .75 }}>
          <span>{f.n}</span>
          <span style={{ textTransform: 'uppercase', letterSpacing: '0.1em', textAlign: 'right' }}>{t(f.tag)}</span>
        </div>
        <h3 className="serif" style={{ fontSize: 'clamp(34px, 2.4vw, 44px)', lineHeight: 1, letterSpacing: '-0.022em', margin: 0, fontWeight: 400, textWrap: 'balance' }}>{t(f.title)}</h3>
        <p style={{ fontSize: 15, lineHeight: 1.5, margin: 0, opacity: .92 }}>{t(f.body)}</p>
        <p style={{ fontSize: 12.5, lineHeight: 1.5, margin: 'auto 0 0', opacity: .65, fontStyle: 'italic', paddingTop: 14, borderTop: '1px dashed currentColor' }}>{t(f.versus)}</p>
      </article>
    </Reveal>);

}

// ──────── Compare row card ────────
function CompareCardC({ row, idx, accent }) {
  const { t } = useT();
  return (
    <Reveal delay={idx * 70}>
      <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr 60px 1fr', alignItems: 'center', gap: 0, background: 'var(--paper)', border: '2px solid var(--ink)', borderRadius: 12, overflow: 'hidden', boxShadow: '4px 4px 0 var(--ink)' }}>
        <div style={{ padding: '22px 0 22px 24px', fontFamily: 'var(--serif)', fontSize: 44, lineHeight: 1, color: 'var(--ink-3)' }}>
          0{idx + 1}
        </div>
        <div style={{ padding: '22px 24px', display: 'flex', alignItems: 'center', gap: 12, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.4, textDecoration: 'line-through', textDecorationColor: 'var(--ink-3)' }}>
          <CrossIcon size={18} color="#a8a39a" />
          <span>{t(row.a)}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: accent, alignSelf: 'stretch', fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 600 }}>→</div>
        <div style={{ padding: '22px 24px', display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, lineHeight: 1.4, fontWeight: 500, background: 'var(--paper)' }}>
          <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <CheckIcon size={14} color={accent} />
          </span>
          <span>{t(row.b)}</span>
        </div>
      </div>
    </Reveal>);

}

window.VariantC = VariantC;

// ──────── Wide footer ────────
function FooterC({ accent }) {
  const { t } = useT();
  const [email, setEmail] = React.useState('');
  const [subscribed, setSubscribed] = React.useState(false);

  const cols = [
    {
      titleKey: 'footer.col.product.title',
      links: [
        [t('footer.col.product.link.features'),  '#features'],
        [t('footer.col.product.link.tracker'),   '#tracker'],
        [t('footer.col.product.link.audit'),     '#audit'],
        [t('footer.col.product.link.tokens'),    '#pricing'],
        [t('footer.col.product.link.roadmap'),   '#roadmap'],
        [t('footer.col.product.link.changelog'), '#changelog'],
      ],
    },
    {
      titleKey: 'footer.col.resources.title',
      links: [
        [t('footer.col.resources.link.docs'),      '#docs'],
        [t('footer.col.resources.link.api'),       '#api'],
        [t('footer.col.resources.link.oss'),       '#oss'],
        [t('footer.col.resources.link.templates'), '#templates'],
        [t('footer.col.resources.link.blog'),      '#blog'],
        [t('footer.col.resources.link.faq'),       '#faq'],
      ],
    },
    {
      titleKey: 'footer.col.learn.title',
      links: [
        [t('footer.col.learn.link.guide'),   '#guide'],
        [t('footer.col.learn.link.aeo'),     '#aeo'],
        [t('footer.col.learn.link.geo'),     '#geo'],
        [t('footer.col.learn.link.schema'),  '#schema'],
        [t('footer.col.learn.link.webinar'), '#webinar'],
        [t('footer.col.learn.link.cases'),   '#cases'],
      ],
    },
    {
      titleKey: 'footer.col.company.title',
      links: [
        [t('footer.col.company.link.about'),    '#about'],
        [t('footer.col.company.link.careers'),  '#careers', t('footer.col.company.link.careers.badge')],
        [t('footer.col.company.link.press'),    '#press'],
        [t('footer.col.company.link.contact'),  '#contact'],
        [t('footer.col.company.link.partners'), '#partners'],
      ],
    },
    {
      titleKey: 'footer.col.legal.title',
      links: [
        [t('footer.col.legal.link.privacy'),  '#privacy'],
        [t('footer.col.legal.link.terms'),    '#terms'],
        [t('footer.col.legal.link.kvkk'),     '#kvkk'],
        [t('footer.col.legal.link.cookies'),  '#cookies'],
        [t('footer.col.legal.link.sla'),      '#sla'],
        [t('footer.col.legal.link.security'), '#security'],
      ],
    },
  ];

  const socials = [
    { name: 'X / Twitter', handle: '@ruuapi', href: '#' },
    { name: 'GitHub',      handle: 'ruuapi',   href: '#' },
    { name: 'LinkedIn',    handle: 'ruuapi',   href: '#' },
    { name: 'YouTube',     handle: '@ruuapi',  href: '#' },
    { name: 'Discord',     handle: 'davet',    href: '#' },
  ];

  function onSubmit(e) {
    e.preventDefault();
    if (!email.trim()) return;
    setSubscribed(true);
  }

  return (
    <footer style={{ background:'var(--ink)', color:'var(--paper)', borderTop:'4px solid var(--ink)' }}>
      {/* ─── Band 1: Newsletter ─── */}
      <div style={{ padding:'72px 56px', borderBottom:'1px solid rgba(245,243,236,.14)', position:'relative', overflow:'hidden' }}>
        <NatureBackdrop opacity={0.18} interval={8000} blend="screen"
                        images={SPACE_IMAGES}
                        filter="contrast(1.1) saturate(.7)"/>
        <div style={{ position:'relative', zIndex: 1, display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 56, alignItems:'center' }}>
          <div>
            <span className="mono" style={{ fontSize: 11, textTransform:'uppercase', letterSpacing:'0.14em', color: accent }}>{t('footer.newsletter.kicker')}</span>
            <h2 className="serif" style={{ fontSize: 'clamp(48px, 5.6vw, 88px)', lineHeight: 0.95, letterSpacing:'-0.025em', margin:'10px 0 12px', color:'var(--paper)' }}>
              {t('footer.newsletter.title.a')}<br/>
              <span className="ital" style={{ color: accent }}>{t('footer.newsletter.title.b')}</span>
            </h2>
            <p style={{ color:'rgba(245,243,236,.7)', fontSize: 16, lineHeight: 1.5, maxWidth: 520, margin: 0 }}>
              {t('footer.newsletter.body')}
            </p>
          </div>
          <form onSubmit={onSubmit} style={{ display:'flex', flexDirection:'column', gap: 10 }}>
            {!subscribed ? (
              <>
                <div style={{ display:'flex', gap: 10, padding: 6, background:'var(--paper)', border:'2px solid var(--paper)', borderRadius: 999, boxShadow: '4px 4px 0 ' + accent }}>
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="name@domain.com"
                    style={{
                      flex: 1, padding:'12px 18px', border: 0, background:'transparent',
                      color:'var(--ink)', fontSize: 15, fontFamily:'var(--sans)',
                      outline:'none', minWidth: 0,
                    }}
                  />
                  <button type="submit" className="btn btn-accent" style={{ padding:'10px 18px', fontSize: 13 }}>
                    <span>{t('footer.newsletter.cta')}</span><span className="arrow">→</span>
                  </button>
                </div>
                <span className="mono" style={{ fontSize: 11, color:'rgba(245,243,236,.5)', letterSpacing:'0.06em' }}>
                  {t('footer.newsletter.subscribers')}
                </span>
              </>
            ) : (
              <div style={{ padding:'18px 22px', background: accent, color:'var(--ink)', borderRadius: 999, display:'flex', alignItems:'center', gap: 12, fontWeight: 600, fontSize: 15 }}>
                <span style={{ width: 24, height: 24, borderRadius:'50%', background:'var(--ink)', color: accent, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>✓</span>
                <span>{t('footer.newsletter.success')}</span>
              </div>
            )}
          </form>
        </div>
      </div>

      {/* ─── Band 2: Brand + columns ─── */}
      <div style={{ padding:'72px 56px 56px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.3fr repeat(5, 1fr)', gap: 32 }}>
          {/* Brand block */}
          <div style={{ paddingRight: 24 }}>
            <RuuWordmark size={28} color="var(--paper)"/>
            <p style={{ marginTop: 18, fontSize: 14, lineHeight: 1.55, color:'rgba(245,243,236,.65)' }}>
              {t('footer.brand.line1')}<br/>
              {t('footer.brand.line2')}
            </p>
            {/* Live status */}
            <a href="#status" style={{ marginTop: 22, display:'inline-flex', alignItems:'center', gap: 10, padding:'8px 12px', borderRadius: 999, border:'1px solid rgba(245,243,236,.18)', color:'rgba(245,243,236,.85)', textDecoration:'none', fontFamily:'var(--mono)', fontSize: 11 }}>
              <span style={{ width: 8, height: 8, borderRadius:'50%', background:'#22c55e', boxShadow:'0 0 0 3px rgba(34,197,94,.18)' }}></span>
              <span>{t('footer.status.label')}</span>
              <span style={{ color:'rgba(245,243,236,.45)' }}>· {t('footer.status.uptime')}</span>
            </a>
            {/* Locations */}
            <div style={{ marginTop: 22, display:'grid', gap: 8, fontFamily:'var(--mono)', fontSize: 11 }}>
              {[
                { cityKey: 'footer.address.hq.city', addrKey: 'footer.address.hq.addr', tag: 'HQ' },
                { cityKey: 'footer.address.eu.city', addrKey: 'footer.address.eu.addr', tag: 'EU' },
              ].map(loc => (
                <div key={loc.tag} style={{ display:'flex', gap: 10, alignItems:'baseline' }}>
                  <span style={{ width: 24, color: accent, fontWeight: 600, letterSpacing:'0.1em' }}>{loc.tag}</span>
                  <span style={{ color:'var(--paper)', fontWeight: 600 }}>{t(loc.cityKey)}</span>
                  <span style={{ color:'rgba(245,243,236,.5)' }}>· {t(loc.addrKey)}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Link columns */}
          {cols.map(col => (
            <div key={col.titleKey}>
              <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.14em', color: accent, paddingBottom: 14, marginBottom: 8, borderBottom:'1px solid rgba(245,243,236,.14)' }}>
                {t(col.titleKey)}
              </div>
              <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'grid', gap: 10 }}>
                {col.links.map(([label, href, badge]) => (
                  <li key={label}>
                    <a href={href} style={{ display:'flex', alignItems:'center', gap: 8, color:'rgba(245,243,236,.85)', textDecoration:'none', fontSize: 13.5, transition:'color .12s' }}
                       onMouseEnter={(e) => { e.currentTarget.style.color = accent; }}
                       onMouseLeave={(e) => { e.currentTarget.style.color = 'rgba(245,243,236,.85)'; }}>
                      <span>{label}</span>
                      {badge && (
                        <span style={{ padding:'2px 6px', borderRadius: 3, background: accent, color:'var(--ink)', fontFamily:'var(--mono)', fontSize: 9, letterSpacing:'0.06em', textTransform:'uppercase' }}>{badge}</span>
                      )}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Social row */}
        <div style={{ marginTop: 64, paddingTop: 28, borderTop:'1px solid rgba(245,243,236,.14)', display:'flex', flexWrap:'wrap', gap: 12, justifyContent:'space-between', alignItems:'center' }}>
          <div className="mono" style={{ fontSize: 11, textTransform:'uppercase', letterSpacing:'0.14em', color:'rgba(245,243,236,.5)' }}>
            {t('footer.social.label')}
          </div>
          <div style={{ display:'flex', flexWrap:'wrap', gap: 10 }}>
            {socials.map(s => (
              <a key={s.name} href={s.href} style={{
                display:'inline-flex', alignItems:'center', gap: 8, padding:'8px 14px',
                border:'1px solid rgba(245,243,236,.2)', borderRadius: 999,
                color:'rgba(245,243,236,.85)', textDecoration:'none', fontSize: 12,
                fontFamily:'var(--mono)', transition:'background .14s, color .14s, border-color .14s',
              }}
                 onMouseEnter={(e) => { e.currentTarget.style.background = accent; e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.borderColor = accent; }}
                 onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'rgba(245,243,236,.85)'; e.currentTarget.style.borderColor = 'rgba(245,243,236,.2)'; }}>
                <span>{s.name}</span>
                <span style={{ opacity: .6 }}>· {s.handle}</span>
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* ─── Band 3: Oversized wordmark ─── */}
      <div style={{ padding:'24px 32px 0', overflow:'hidden', borderTop:'1px solid rgba(245,243,236,.10)' }}>
        <div className="serif" style={{
          fontSize:'clamp(120px, 22vw, 360px)',
          lineHeight: 0.85,
          letterSpacing:'-0.04em',
          margin: 0,
          color:'transparent',
          WebkitTextStroke: '1.5px rgba(245,243,236,.32)',
          fontWeight: 400,
          textAlign:'center',
          whiteSpace:'nowrap',
        }}>
          <span style={{ fontStyle:'italic' }}>r</span>uuapi.com<span style={{ color: accent, WebkitTextStroke: '0', fontStyle:'normal' }}>.</span>
        </div>
      </div>

      {/* ─── Band 4: Bottom strip ─── */}
      <div style={{ padding:'18px 56px', borderTop:'1px solid rgba(245,243,236,.14)', background:'rgba(0,0,0,.25)' }}>
        <div style={{ display:'flex', flexWrap:'wrap', gap: 16, alignItems:'center', justifyContent:'space-between', fontFamily:'var(--mono)', fontSize: 11, color:'rgba(245,243,236,.55)' }}>
          <span>{t('footer.copyright')}</span>
          <span style={{ display:'inline-flex', gap: 14 }}>
            <a href="#privacy" style={{ color:'inherit', textDecoration:'none' }}>{t('footer.bottom.privacy')}</a>
            <a href="#terms" style={{ color:'inherit', textDecoration:'none' }}>{t('footer.bottom.terms')}</a>
            <a href="#kvkk" style={{ color:'inherit', textDecoration:'none' }}>{t('footer.bottom.kvkk')}</a>
            <a href="#cookies" style={{ color:'inherit', textDecoration:'none' }}>{t('footer.bottom.cookies')}</a>
          </span>
          <span style={{ display:'inline-flex', gap: 14, alignItems:'center' }}>
            <span>v3.1.4</span>
            <span>·</span>
            <span>build a3f29c</span>
            <span>·</span>
            <span>TR · EN · DE · ES</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

// ──────── Nav (lang selector + sandwich) ────────
function NavC({ accent, onLogin }) {
  const { lang, setLang, langs, t } = useT();
  const [langOpen, setLangOpen] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const langRef = React.useRef(null);
  const menuRef = React.useRef(null);

  React.useEffect(() => {
    function onDoc(e) {
      if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false);
      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
    }
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const navLinks = [
  { href: '#features',  label: t('nav.features') },
  { href: '#/tools',    label: t('nav.tools') },
  { href: '#/pricing',  label: t('nav.pricing') },
  { href: '#/docs',     label: t('nav.docs') },
  { href: '#/contact',  label: t('nav.contact') }];


  return (
    <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 36px', borderBottom: '4px solid var(--ink)', background: 'var(--paper)', position: 'relative', zIndex: 50 }}>
      <a href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }} style={{ display: 'inline-flex', textDecoration: 'none' }} aria-label="ruuapi · home">
        <RuuWordmark size={28} />
      </a>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {/* Language selector */}
        <div ref={langRef} style={{ position: 'relative' }}>
          <button
            onClick={() => {setLangOpen((o) => !o);setMenuOpen(false);}}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '9px 12px', border: '2px solid var(--ink)', borderRadius: 10,
              background: 'var(--paper)', cursor: 'pointer',
              fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 600,
              boxShadow: langOpen ? '0 0 0 var(--ink)' : '3px 3px 0 var(--ink)',
              transform: langOpen ? 'translate(3px, 3px)' : 'none',
              transition: 'transform .15s, box-shadow .15s'
            }}>
            
            <span style={{ fontSize: 14, lineHeight: 1 }}>{langs.find((l) => l.code === lang).flag}</span>
            <span>{lang}</span>
            <svg width="10" height="6" viewBox="0 0 10 6" style={{ transform: langOpen ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>
              <path d="M0 0l5 6 5-6z" fill="currentColor" />
            </svg>
          </button>
          {langOpen &&
          <div style={{
            position: 'absolute', top: 'calc(100% + 8px)', right: 0,
            background: 'var(--paper)', border: '2px solid var(--ink)', borderRadius: 10,
            boxShadow: '4px 4px 0 var(--ink)', minWidth: 180,
            animation: 'ruu-fade-up .18s ease-out', overflow: 'hidden'
          }}>
              {langs.map((l, i) =>
            <button
              key={l.code}
              onClick={() => {setLang(l.code);setLangOpen(false);}}
              style={{
                display: 'flex', alignItems: 'center', gap: 10, width: '100%',
                padding: '10px 14px', border: 0, cursor: 'pointer',
                background: l.code === lang ? accent : 'transparent',
                borderTop: i ? '1px solid var(--rule)' : 0,
                fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500,
                color: 'var(--ink)', textAlign: 'left',
                transition: 'background .12s'
              }}
              onMouseEnter={(e) => {if (l.code !== lang) e.currentTarget.style.background = 'var(--paper-2)';}}
              onMouseLeave={(e) => {if (l.code !== lang) e.currentTarget.style.background = 'transparent';}}>
              
                  <span style={{ fontSize: 16 }}>{l.flag}</span>
                  <span style={{ flex: 1 }}>{l.name}</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>{l.code}</span>
                </button>
            )}
            </div>
          }
        </div>

        {/* Login icon */}
        <LoginIcon accent={accent} onOpen={onLogin} />

        {/* CTA */}
        <button className="btn btn-accent" style={{ padding: '10px 16px', fontSize: 13 }}>
          <span>{t('nav.cta')}</span><span className="arrow">→</span>
        </button>

        {/* Hamburger / sandwich menu */}
        <div ref={menuRef} style={{ position: 'relative' }}>
          <button
            aria-label="menü"
            onClick={() => {setMenuOpen((o) => !o);setLangOpen(false);}}
            style={{
              width: 44, height: 44, borderRadius: 10,
              border: '2px solid var(--ink)', background: menuOpen ? 'var(--ink)' : 'var(--paper)',
              color: menuOpen ? accent : 'var(--ink)', cursor: 'pointer',
              display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5,
              boxShadow: menuOpen ? '0 0 0 var(--ink)' : '3px 3px 0 var(--ink)',
              transform: menuOpen ? 'translate(3px, 3px)' : 'none',
              transition: 'transform .15s, box-shadow .15s, background .15s'
            }}>
            
            <span style={{ width: 18, height: 2, background: 'currentColor', borderRadius: 1, transform: menuOpen ? 'translateY(7px) rotate(45deg)' : 'none', transition: 'transform .22s' }}></span>
            <span style={{ width: 18, height: 2, background: 'currentColor', borderRadius: 1, opacity: menuOpen ? 0 : 1, transition: 'opacity .15s' }}></span>
            <span style={{ width: 18, height: 2, background: 'currentColor', borderRadius: 1, transform: menuOpen ? 'translateY(-7px) rotate(-45deg)' : 'none', transition: 'transform .22s' }}></span>
          </button>
          {menuOpen &&
          <div style={{
            position: 'absolute', top: 'calc(100% + 8px)', right: 0,
            background: 'var(--paper)', border: '2px solid var(--ink)', borderRadius: 12,
            boxShadow: '5px 5px 0 var(--ink)', minWidth: 280,
            animation: 'ruu-fade-up .2s ease-out', overflow: 'hidden'
          }}>
              <div style={{ padding: '12px 16px', background: 'var(--ink)', color: accent, fontFamily: 'var(--mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em' }}>
                {t('nav.menu.header')}
              </div>
              {navLinks.map((l, i) =>
            <a
              key={l.label}
              href={l.href}
              onClick={() => setMenuOpen(false)}
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '14px 18px', borderTop: '1px solid var(--rule)',
                fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500,
                color: 'var(--ink)', textDecoration: 'none',
                transition: 'background .12s'
              }}
              onMouseEnter={(e) => {e.currentTarget.style.background = accent;}}
              onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';}}>
              
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>0{i + 1}</span>
                    <span>{l.label}</span>
                  </span>
                  <span style={{ opacity: .4 }}>→</span>
                </a>
            )}
              <div style={{ padding: '12px 16px', borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-2)' }}>
                <span>v3.1</span>
                <span>{t('nav.menu.cities')}</span>
              </div>
            </div>
          }
        </div>
      </div>
    </header>);

}