// c-blocks.jsx — rich section components for the C (zine) variant.
// AI-engine citation cards, live editor + audit panel, animated 6-agent
// pipeline, repurpose grid, SEO + GEO + AEO results dashboard.

// ─────────────────────────────────────────────────────────────────────
// 1. AI-SEEN BLOCK — "Bu makale şuralarda görüldü"
// 3 stylized "AI answer" cards: ChatGPT-like, Perplexity-like, Google AI
// Overview-like. Original chrome, not branded UI.
// ─────────────────────────────────────────────────────────────────────
function AISeenBlock({ accent }) {
  const { t } = useT();
  return (
    <section style={{ padding: '96px 56px', borderBottom: '4px solid var(--ink)', background: 'var(--paper)' }}>
      <Reveal>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', flexWrap:'wrap', gap: 16, marginBottom: 48 }}>
          <div>
            <span className="tag">{t('aiseen.tag')}</span>
            <h2 className="serif" style={{ fontSize: 'clamp(56px, 7vw, 108px)', lineHeight: 0.92, letterSpacing:'-0.025em', margin:'10px 0 0' }}>
              {t('aiseen.title.a')}<br/>
              <span className="ital hl">{t('aiseen.title.hl')}</span> {t('aiseen.title.b')}
            </h2>
          </div>
          <p style={{ maxWidth: 360, color:'var(--ink-2)', fontSize: 16, lineHeight: 1.5, margin: 0 }}>
            {t('aiseen.sub')}
          </p>
        </div>
      </Reveal>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 18 }}>
        <Reveal delay={0}>
          <FlashCard rot={-1} accent={accent} back={<EngineBack accent={accent} title={t('aiseen.chatgpt.back.title')} subtitle={t('aiseen.chatgpt.back.subtitle')} items={[
              { k: t('aiseen.chatgpt.back.01.k'), d: t('aiseen.chatgpt.back.01.d') },
              { k: t('aiseen.chatgpt.back.02.k'), d: t('aiseen.chatgpt.back.02.d') },
              { k: t('aiseen.chatgpt.back.03.k'), d: t('aiseen.chatgpt.back.03.d') },
              { k: t('aiseen.chatgpt.back.04.k'), d: t('aiseen.chatgpt.back.04.d') },
              { k: t('aiseen.chatgpt.back.05.k'), d: t('aiseen.chatgpt.back.05.d') },
            ]}/>}>
            <ChatGPTCard accent={accent}/>
          </FlashCard>
        </Reveal>
        <Reveal delay={140}>
          <FlashCard rot={0.6} accent={accent} back={<EngineBack accent={accent} title={t('aiseen.perplexity.back.title')} subtitle={t('aiseen.perplexity.back.subtitle')} items={[
              { k: t('aiseen.perplexity.back.01.k'), d: t('aiseen.perplexity.back.01.d') },
              { k: t('aiseen.perplexity.back.02.k'), d: t('aiseen.perplexity.back.02.d') },
              { k: t('aiseen.perplexity.back.03.k'), d: t('aiseen.perplexity.back.03.d') },
              { k: t('aiseen.perplexity.back.04.k'), d: t('aiseen.perplexity.back.04.d') },
              { k: t('aiseen.perplexity.back.05.k'), d: t('aiseen.perplexity.back.05.d') },
            ]}/>}>
            <PerplexityCard accent={accent}/>
          </FlashCard>
        </Reveal>
        <Reveal delay={280}>
          <FlashCard rot={-0.4} accent={accent} back={<EngineBack accent={accent} title={t('aiseen.google.back.title')} subtitle={t('aiseen.google.back.subtitle')} items={[
              { k: t('aiseen.google.back.01.k'), d: t('aiseen.google.back.01.d') },
              { k: t('aiseen.google.back.02.k'), d: t('aiseen.google.back.02.d') },
              { k: t('aiseen.google.back.03.k'), d: t('aiseen.google.back.03.d') },
              { k: t('aiseen.google.back.04.k'), d: t('aiseen.google.back.04.d') },
              { k: t('aiseen.google.back.05.k'), d: t('aiseen.google.back.05.d') },
            ]}/>}>
            <GoogleAICard accent={accent}/>
          </FlashCard>
        </Reveal>
      </div>

      <Reveal delay={360}>
        <div style={{ marginTop: 32, display:'flex', alignItems:'center', justifyContent:'center', gap: 14, fontFamily:'var(--mono)', fontSize: 12, color:'var(--ink-2)' }}>
          <span style={{ display:'inline-flex', alignItems:'center', gap: 6 }}>
            <span className="livedot"></span>
            {t('aiseen.live')}
          </span>
          <span>·</span>
          <span>{t('aiseen.first-citation')} <strong style={{ color:'var(--ink)' }}>{t('aiseen.first-citation.value')}</strong></span>
          <span>·</span>
          <span>{t('aiseen.retention')} <strong style={{ color:'var(--ink)' }}>{t('aiseen.retention.value')}</strong></span>
        </div>
      </Reveal>
    </section>
  );
}

function ChatGPTCard({ accent }) {
  const { t } = useT();
  const sources = [
    t('aiseen.chatgpt.source.01'),
    t('aiseen.chatgpt.source.02'),
    t('aiseen.chatgpt.source.03'),
  ];
  return (
    <div style={{ background:'#1e1f24', color:'#ecedee', border:'2px solid var(--ink)', borderRadius: 14, padding: 22, minHeight: 460, display:'flex', flexDirection:'column' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 18 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <span style={{ width: 22, height: 22, borderRadius:'50%', background:'#10a37f', display:'inline-flex', alignItems:'center', justifyContent:'center', color:'#fff', fontFamily:'var(--mono)', fontWeight: 700, fontSize: 11 }}>G</span>
          <span style={{ fontFamily:'var(--mono)', fontSize: 12, color:'rgba(236,237,238,.7)' }}>{t('aiseen.chatgpt.brand')}</span>
        </div>
        <span className="mono" style={{ fontSize: 10, color:'rgba(236,237,238,.45)' }}>{t('aiseen.chatgpt.ts')}</span>
      </div>
      <div style={{ fontSize: 13, color:'rgba(236,237,238,.65)', marginBottom: 10, fontFamily:'var(--mono)' }}>"{t('aiseen.chatgpt.query')}"</div>
      <div style={{ background:'#2a2b30', borderRadius: 12, padding: 14, fontSize: 13.5, lineHeight: 1.55, flex: 1, marginBottom: 10 }}>
        {t('aiseen.chatgpt.body.p1')} <CitTag n={1} accent={accent}/> <CitTag n={2} accent={accent}/>
        <br/><br/>
        {t('aiseen.chatgpt.body.p2')} <CitTag n={3} accent={accent}/>
      </div>
      <div style={{ borderTop:'1px dashed rgba(236,237,238,.18)', paddingTop: 10 }}>
        <div className="mono" style={{ fontSize: 10, color:'rgba(236,237,238,.5)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom: 8 }}>{t('aiseen.sources.label')}</div>
        {sources.map((u, i) => (
          <div key={u} style={{ display:'flex', alignItems:'center', gap: 8, fontFamily:'var(--mono)', fontSize: 11, color: u.includes('ruuapi') ? accent : 'rgba(236,237,238,.55)', padding:'3px 0' }}>
            <span style={{ fontVariantNumeric:'tabular-nums' }}>{i+1}</span>
            <span style={{ flex: 1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u}</span>
            {u.includes('ruuapi') && <span style={{ padding:'2px 6px', borderRadius: 3, background: accent, color:'var(--ink)', fontSize: 9, letterSpacing:'0.08em' }}>{t('aiseen.you.label')}</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function CitTag({ n, accent }) {
  return <sup style={{ display:'inline-flex', alignItems:'center', justifyContent:'center', width: 18, height: 18, borderRadius:'50%', background: accent, color:'var(--ink)', fontFamily:'var(--mono)', fontSize: 10, fontWeight: 700, marginLeft: 2, verticalAlign:'super' }}>{n}</sup>;
}

function PerplexityCard({ accent }) {
  const { t } = useT();
  return (
    <div style={{ background:'#fafaf7', color:'var(--ink)', border:'2px solid var(--ink)', borderRadius: 14, padding: 22, minHeight: 460, display:'flex', flexDirection:'column' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 18 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <span style={{ width: 22, height: 22, borderRadius: 6, background:'#20808d', display:'inline-flex', alignItems:'center', justifyContent:'center', color:'#fff', fontFamily:'var(--mono)', fontWeight: 700, fontSize: 11 }}>P</span>
          <span style={{ fontFamily:'var(--mono)', fontSize: 12, color:'var(--ink-2)' }}>{t('aiseen.perplexity.brand')}</span>
        </div>
        <span className="mono" style={{ fontSize: 10, color:'var(--ink-3)' }}>{t('aiseen.perplexity.ts')}</span>
      </div>
      <div style={{ fontSize: 13, color:'var(--ink-2)', marginBottom: 12, fontFamily:'var(--mono)' }}>"{t('aiseen.perplexity.query')}"</div>
      <div style={{ display:'flex', gap: 6, flexWrap:'wrap', marginBottom: 12 }}>
        {[
          { src: 'ruuapi.com', hi: true },
          { src: 'searchengineland', hi: false },
          { src: 'ahrefs.com', hi: false },
          { src: 'webranking.tr', hi: false },
        ].map((s, i) => (
          <span key={i} style={{
            padding:'4px 8px', borderRadius: 999, fontFamily:'var(--mono)', fontSize: 10,
            border:'1px solid ' + (s.hi ? 'var(--ink)' : 'rgba(0,0,0,.15)'),
            background: s.hi ? accent : 'transparent',
            display:'inline-flex', alignItems:'center', gap: 6,
          }}>
            <span style={{ width: 12, height: 12, background:'var(--ink-3)', borderRadius: 2, opacity: s.hi ? 1 : .5 }}></span>
            {s.src}
          </span>
        ))}
      </div>
      <div style={{ fontSize: 13.5, lineHeight: 1.6, flex: 1 }}>
        {t('aiseen.perplexity.body')}
      </div>
      <div style={{ borderTop:'1px solid rgba(0,0,0,.08)', marginTop: 14, paddingTop: 10, display:'flex', justifyContent:'space-between', fontFamily:'var(--mono)', fontSize: 11, color:'var(--ink-2)' }}>
        <span>{t('aiseen.chatgpt.footer.related')}</span>
        <span style={{ color: '#22c55e' }}>{t('aiseen.chatgpt.footer.cite')}</span>
      </div>
    </div>
  );
}

function GoogleAICard({ accent }) {
  const { t } = useT();
  return (
    <div style={{ background:'var(--paper)', color:'var(--ink)', border:'2px solid var(--ink)', borderRadius: 14, padding: 22, minHeight: 460, display:'flex', flexDirection:'column' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <span style={{ display:'inline-flex', alignItems:'center', gap: 4, padding:'4px 10px', borderRadius: 999, background:'linear-gradient(90deg,#4285f4 0%, #ea4335 50%, #fbbc04 100%)', color:'#fff', fontFamily:'var(--mono)', fontSize: 10, fontWeight: 700, letterSpacing:'0.05em' }}>
            ◆ AI OVERVIEW
          </span>
          <span style={{ fontFamily:'var(--mono)', fontSize: 11, color:'var(--ink-3)' }}>google.com · {t('aiseen.googleai.type')}</span>
        </div>
        <span className="mono" style={{ fontSize: 10, color:'var(--ink-3)' }}>{t('aiseen.googleai.ts')}</span>
      </div>
      <div style={{ display:'flex', alignItems:'center', gap: 8, padding:'8px 12px', background:'var(--paper-2)', borderRadius: 8, fontFamily:'var(--mono)', fontSize: 12, marginBottom: 14 }}>
        <span style={{ color:'var(--ink-3)' }}>🔍</span>
        <span>{t('aiseen.googleai.query')}</span>
      </div>
      <div style={{ fontSize: 13.5, lineHeight: 1.6, marginBottom: 14, flex: 1 }}>
        {t('aiseen.googleai.intro')}
        <ul style={{ paddingLeft: 18, margin:'10px 0' }}>
          <li><strong>{t('aiseen.googleai.body.li1.k')}</strong> — {t('aiseen.googleai.body.li1.v')}</li>
          <li><strong>{t('aiseen.googleai.body.li2.k')}</strong> — {t('aiseen.googleai.body.li2.v')}</li>
          <li><strong>{t('aiseen.googleai.body.li3.k')}</strong> — {t('aiseen.googleai.body.li3.v')}</li>
        </ul>
        <span className="hl-tight">ruuapi.com</span> {t('aiseen.googleai.outro')}
      </div>
      <div style={{ borderTop:'1px dashed rgba(0,0,0,.12)', paddingTop: 12, display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ display:'flex', gap: 6 }}>
          {['rua', 'sea', 'wbr', '+9'].map((lbl, i) => (
            <div key={i} style={{ width: 28, height: 28, borderRadius:'50%', background: i === 0 ? accent : 'var(--paper-2)', border:'2px solid var(--paper)', fontFamily:'var(--mono)', fontSize: 9, display:'inline-flex', alignItems:'center', justifyContent:'center', marginLeft: i ? -10 : 0, color:'var(--ink)', fontWeight: 600 }}>{lbl}</div>
          ))}
        </div>
        <span className="mono" style={{ fontSize: 11, color: '#22c55e' }}>{t('aiseen.googleai.footer.rank')}</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 2. EDITOR BLOCK — split: editor (left) + 80-point audit panel (right)
// ─────────────────────────────────────────────────────────────────────
function getEditorArticles(t) {
  return [
    {
      slug:  t('editor.article.01.slug'),
      title: t('editor.article.01.title'),
      body1: t('editor.article.01.body1'),
      body2: t('editor.article.01.body2'),
      faqQ:  t('editor.article.01.faqQ'),
      faqA:  t('editor.article.01.faqA'),
      meta:  t('editor.article.01.meta'),
    },
    {
      slug:  t('editor.article.02.slug'),
      title: t('editor.article.02.title'),
      body1: t('editor.article.02.body1'),
      body2: t('editor.article.02.body2'),
      faqQ:  t('editor.article.02.faqQ'),
      faqA:  t('editor.article.02.faqA'),
      meta:  t('editor.article.02.meta'),
    },
    {
      slug:  t('editor.article.03.slug'),
      title: t('editor.article.03.title'),
      body1: t('editor.article.03.body1'),
      body2: t('editor.article.03.body2'),
      faqQ:  t('editor.article.03.faqQ'),
      faqA:  t('editor.article.03.faqA'),
      meta:  t('editor.article.03.meta'),
    },
    {
      slug:  t('editor.article.04.slug'),
      title: t('editor.article.04.title'),
      body1: t('editor.article.04.body1'),
      body2: t('editor.article.04.body2'),
      faqQ:  t('editor.article.04.faqQ'),
      faqA:  t('editor.article.04.faqA'),
      meta:  t('editor.article.04.meta'),
    },
    {
      slug:  t('editor.article.05.slug'),
      title: t('editor.article.05.title'),
      body1: t('editor.article.05.body1'),
      body2: t('editor.article.05.body2'),
      faqQ:  t('editor.article.05.faqQ'),
      faqA:  t('editor.article.05.faqA'),
      meta:  t('editor.article.05.meta'),
    },
  ];
}

function ArticleTypewriter({ accent }) {
  const { t } = useT();
  const EDITOR_ARTICLES = getEditorArticles(t);
  const [idx, setIdx] = React.useState(0);
  const [chars, setChars] = React.useState(0);
  const [enabled, setEnabled] = React.useState(true);

  const a = EDITOR_ARTICLES[idx];
  const faqText = a.faqQ + '||' + a.faqA;
  const segments = [a.title, a.body1, a.body2, faqText];
  const total = segments.reduce((s, x) => s + x.length, 0);
  const HOLD_MS = 1400, CHARS_PER_TICK = 6, TICK_MS = 22;

  React.useEffect(() => {
    const root = document.querySelector('.ruu');
    if (root && root.classList.contains('anim-minimal')) {
      setEnabled(false);
      setChars(total);
      return;
    }
    if (chars >= total) {
      const t = setTimeout(() => {
        setIdx(i => (i + 1) % EDITOR_ARTICLES.length);
        setChars(0);
      }, HOLD_MS);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setChars(c => Math.min(total, c + CHARS_PER_TICK)), TICK_MS);
    return () => clearTimeout(t);
  }, [chars, idx, total]);

  // Slice helper
  function take(text, n) {
    const used = Math.max(0, Math.min(n, text.length));
    return [text.slice(0, used), n - used];
  }
  let rem = chars;
  let titleShown, p1Shown, p2Shown, faqShown;
  [titleShown, rem] = take(a.title, rem);
  [p1Shown, rem]    = take(a.body1, rem);
  [p2Shown, rem]    = take(a.body2, rem);
  [faqShown, rem]   = take(faqText, rem);

  // Where to render the blinking cursor — at the end of whichever segment is still typing.
  const cursorAt = chars >= total ? 'done'
    : titleShown.length < a.title.length ? 'title'
    : p1Shown.length < a.body1.length ? 'p1'
    : p2Shown.length < a.body2.length ? 'p2'
    : 'faq';

  // Split faqShown back into Q + A
  const faqQShown = faqShown.includes('||') ? faqShown.split('||')[0] : faqShown;
  const faqAShown = faqShown.includes('||') ? faqShown.split('||')[1] : '';

  const Cursor = () => (
    <span style={{ background: accent, display:'inline-block', width: 2, height: '0.9em', marginLeft: 2, verticalAlign:'-2px', animation:'ruu-cursor 1s steps(2) infinite' }}></span>
  );

  return (
    <div style={{ minHeight: 540 }}>
      <div className="mono" style={{ fontSize: 10, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.12em', marginBottom: 12, display:'flex', justifyContent:'space-between' }}>
        <span>{t('editor.draft.prefix')}{a.meta}</span>
        <span style={{ display:'inline-flex', gap: 6, alignItems:'center' }}>
          <span style={{ width: 6, height: 6, borderRadius:'50%', background: accent }}></span>
          {idx + 1}/{EDITOR_ARTICLES.length} · {a.slug}
        </span>
      </div>

      {/* Title */}
      <div className="serif" style={{ fontSize: 38, lineHeight: 1.05, letterSpacing:'-0.02em', marginBottom: 18, minHeight: 84 }}>
        {titleShown}{cursorAt === 'title' && <Cursor/>}
      </div>

      {/* Body */}
      <div style={{ fontSize: 15, lineHeight: 1.6, color:'var(--ink)' }}>
        <p style={{ marginTop: 0, minHeight: 80 }}>
          {p1Shown && (
            <>
              <span style={{ float:'left', fontFamily:'var(--serif)', fontSize: 62, lineHeight: 0.85, paddingRight: 8, paddingTop: 6 }}>{p1Shown[0]}</span>
              <span>{p1Shown.slice(1)}</span>
            </>
          )}
          {cursorAt === 'p1' && <Cursor/>}
        </p>
        <p style={{ minHeight: 56 }}>
          {p2Shown}{cursorAt === 'p2' && <Cursor/>}
        </p>
        <div style={{
          position:'relative', padding:'12px 14px', background:'var(--paper-2)',
          borderRadius: 8, borderLeft: '3px solid ' + accent,
          opacity: faqQShown ? 1 : 0.3, transition:'opacity .3s',
          minHeight: 70,
        }}>
          <span className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-3)' }}>{t('editor.faq.label')}</span><br/>
          <strong>{faqQShown}</strong>{cursorAt === 'faq' && !faqAShown && <Cursor/>}{faqAShown && ' ' + faqAShown}{cursorAt === 'faq' && faqAShown && <Cursor/>}
        </div>
      </div>

      <div style={{ marginTop: 24, display:'flex', gap: 8, flexWrap:'wrap' }}>
        {['Speakable ✓', 'ClaimReview ✓', 'FAQ pattern ✓', 'llms.txt ✓', 'Schema.Article ✓'].map((b, i) => {
          const triggered = chars > (total * (i + 1) / 6);
          return (
            <span key={b} className="mono" style={{
              padding:'5px 9px', fontSize: 11, borderRadius: 4,
              background: triggered ? accent : 'var(--paper-2)',
              color: triggered ? 'var(--ink)' : 'var(--ink-2)',
              transition: 'background .4s, color .4s',
            }}>{b}</span>
          );
        })}
      </div>
    </div>
  );
}

function EditorBlock({ accent }) {
  const { t } = useT();
  // 80-dot grid: weighted to mostly-green for the "good draft" demo.
  const dots = [];
  for (let i = 0; i < 80; i++) {
    const r = (i * 37) % 100;
    const status = r < 64 ? 'g' : r < 80 ? 'a' : 'r';
    dots.push(status);
  }
  const colorOf = (s) => s === 'g' ? '#22c55e' : s === 'a' ? '#eab308' : '#dc2626';

  return (
    <section style={{ padding:'96px 56px', background:'var(--paper-2)', borderBottom:'4px solid var(--ink)' }}>
      <Reveal>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', flexWrap:'wrap', gap: 16, marginBottom: 40 }}>
          <h2 className="serif" style={{ fontSize: 'clamp(56px, 7vw, 108px)', lineHeight: 0.92, letterSpacing:'-0.025em', margin: 0 }}>
            {t('editor.title.a')}<br/>
            <span className="ital">{t('editor.title.b')}</span>
          </h2>
          <p style={{ maxWidth: 360, color:'var(--ink-2)', fontSize: 16, lineHeight: 1.5, margin: 0 }}>
            {t('editor.sub')}
          </p>
        </div>
      </Reveal>

      <Reveal delay={120}>
        <div style={{ background:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 16, overflow:'hidden', boxShadow:'8px 8px 0 var(--ink)' }}>
          {/* Window chrome */}
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 18px', borderBottom:'1px solid var(--rule)', background:'var(--paper-2)', fontFamily:'var(--mono)', fontSize: 11 }}>
            <span style={{ display:'flex', gap: 6, alignItems:'center' }}>
              <span style={{ width:10, height:10, borderRadius:'50%', background:'#ff5f57' }}></span>
              <span style={{ width:10, height:10, borderRadius:'50%', background:'#febc2e' }}></span>
              <span style={{ width:10, height:10, borderRadius:'50%', background:'#28c840' }}></span>
              <span style={{ marginLeft: 12, color:'var(--ink-2)' }}>{t('editor.chrome.file')}</span>
            </span>
            <span style={{ display:'flex', gap: 12, color:'var(--ink-2)' }}>
              <span>{t('editor.chrome.cmd')}</span>
              <span>{t('editor.chrome.autosave')}</span>
              <span style={{ color:'#22c55e' }}>{t('editor.chrome.synced')}</span>
            </span>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr' }}>
            {/* LEFT — editor */}
            <div style={{ padding: 36, borderRight:'1px solid var(--rule)' }}>
              <ArticleTypewriter accent={accent}/>
            </div>

            {/* RIGHT — Audit panel */}
            <div style={{ padding: 28, background:'var(--paper)', display:'flex', flexDirection:'column', gap: 18 }}>
              <div>
                <div className="mono" style={{ fontSize: 10, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.12em' }}>{t('editor.panel.label')}</div>
                <div style={{ display:'flex', alignItems:'baseline', gap: 12, marginTop: 6 }}>
                  <span className="serif" style={{ fontSize: 88, lineHeight: 0.9 }}><Counter to={88}/></span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{t('editor.panel.score.label')}</div>
                    <div className="mono" style={{ fontSize: 11, color:'var(--ink-2)' }}>{t('editor.panel.score.delta')}</div>
                  </div>
                </div>
              </div>

              {/* 80-dot grid */}
              <div>
                <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-3)', marginBottom: 6 }}>
                  {t('editor.panel.dots.label')}
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(20, 1fr)', gap: 4 }}>
                  {dots.map((s, i) => (
                    <span key={i} style={{
                      width: 12, height: 12, borderRadius: 3, background: colorOf(s),
                      animation: 'ruu-fade-up .5s both', animationDelay: (i * 12) + 'ms',
                    }}></span>
                  ))}
                </div>
                <div style={{ display:'flex', gap: 14, marginTop: 8, fontFamily:'var(--mono)', fontSize: 11, color:'var(--ink-2)' }}>
                  <span><span style={{ display:'inline-block', width: 8, height: 8, background:'#22c55e', borderRadius: 2, marginRight: 6 }}></span>52 {t('editor.panel.dots.pass')}</span>
                  <span><span style={{ display:'inline-block', width: 8, height: 8, background:'#eab308', borderRadius: 2, marginRight: 6 }}></span>14 {t('editor.panel.dots.warn')}</span>
                  <span><span style={{ display:'inline-block', width: 8, height: 8, background:'#dc2626', borderRadius: 2, marginRight: 6 }}></span>14 {t('editor.panel.dots.fail')}</span>
                </div>
              </div>

              {/* Scores */}
              <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10 }}>
                {[
                  { k: 'SEO', v: 92 },
                  { k: 'GEO', v: 88 },
                  { k: 'AEO', v: 96 },
                  { k: 'E-E-A-T', v: 74 },
                ].map((s, i) => (
                  <div key={s.k} style={{ padding:'10px 6px', textAlign:'center', border:'1px solid var(--rule)', borderRadius: 8 }}>
                    <div className="serif" style={{ fontSize: 28, lineHeight: 0.95 }}>{s.v}</div>
                    <div className="mono" style={{ fontSize: 10, color:'var(--ink-2)', textTransform:'uppercase', letterSpacing:'0.08em', marginTop: 2 }}>{s.k}</div>
                  </div>
                ))}
              </div>

              {/* Suggested actions */}
              <div>
                <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-3)', marginBottom: 8 }}>
                  {t('editor.panel.actions.label')}
                </div>
                {[
                  { tKey: 'editor.panel.action.01.t', whyKey: 'editor.panel.action.01.why' },
                  { tKey: 'editor.panel.action.02.t', whyKey: 'editor.panel.action.02.why' },
                  { tKey: 'editor.panel.action.03.t', whyKey: 'editor.panel.action.03.why' },
                ].map((a, i) => (
                  <div key={i} style={{ display:'flex', gap: 10, alignItems:'flex-start', padding:'8px 0', borderTop: i ? '1px dashed var(--rule)' : 'none' }}>
                    <span style={{ width: 22, height: 22, borderRadius: 6, background: accent, color:'var(--ink)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--mono)', fontWeight: 700, fontSize: 11, flexShrink: 0 }}>{i+1}</span>
                    <div style={{ fontSize: 13 }}>
                      <div style={{ fontWeight: 500 }}>{t(a.tKey)}</div>
                      <div style={{ color:'var(--ink-2)', fontSize: 11, fontFamily:'var(--mono)' }}>{t(a.whyKey)}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Footer toolbar */}
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 18px', borderTop:'1px solid var(--rule)', background:'var(--paper-2)', fontFamily:'var(--mono)', fontSize: 11, color:'var(--ink-2)' }}>
            <span>{t('editor.toolbar.formats')}</span>
            <span style={{ display:'flex', gap: 14 }}>
              <span>3,420 {t('editor.toolbar.tokens')}</span>
              <span style={{ color:'#22c55e' }}>{t('editor.toolbar.ready')}</span>
              <button className="btn btn-accent" style={{ padding:'6px 12px', fontSize: 12 }}>{t('editor.toolbar.publish')}</button>
            </span>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 3. PIPELINE BLOCK — animated 6-agent flow
// ─────────────────────────────────────────────────────────────────────
function PipelineBlock({ accent }) {
  const { t } = useT();
  const stages = [
    { nameKey: 'pipeline.agent.researcher.name', roleKey: 'pipeline.agent.researcher.role', tokens: 412,  status: 'done',    detailKey: 'pipeline.agent.researcher.detail' },
    { nameKey: 'pipeline.agent.planner.name',    roleKey: 'pipeline.agent.planner.role',    tokens: 286,  status: 'done',    detailKey: 'pipeline.agent.planner.detail' },
    { nameKey: 'pipeline.agent.writer.name',     roleKey: 'pipeline.agent.writer.role',     tokens: 1840, status: 'done',    detailKey: 'pipeline.agent.writer.detail' },
    { nameKey: 'pipeline.agent.editor.name',     roleKey: 'pipeline.agent.editor.role',     tokens: 410,  status: 'done',    detailKey: 'pipeline.agent.editor.detail' },
    { nameKey: 'pipeline.agent.seo.name',        roleKey: 'pipeline.agent.seo.role',        tokens: 220,  status: 'running', detailKey: 'pipeline.agent.seo.detail', pct: 62 },
    { nameKey: 'pipeline.agent.brand.name',      roleKey: 'pipeline.agent.brand.role',      tokens: 0,    status: 'queued',  detailKey: 'pipeline.agent.brand.detail' },
  ];

  return (
    <section style={{ padding:'96px 56px', background:'var(--ink)', color:'var(--paper)', borderBottom:'4px solid var(--ink)', position:'relative', overflow:'hidden' }}>
      <NatureBackdrop opacity={0.20} interval={6800} blend="screen"/>
      <div style={{ position:'relative', zIndex: 1 }}>
      <Reveal>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', flexWrap:'wrap', gap: 16, marginBottom: 48 }}>
          <div>
            <span className="tag" style={{ color: accent }}>{t('pipeline.tag')}</span>
            <h2 className="serif" style={{ fontSize: 'clamp(56px, 7vw, 108px)', lineHeight: 0.92, letterSpacing:'-0.025em', margin:'10px 0 0', color:'var(--paper)' }}>
              {t('pipeline.title.a')}<br/>
              <span className="ital" style={{ color: accent }}>{t('pipeline.title.b')}</span> {t('pipeline.title.hl')}
            </h2>
          </div>
          <p style={{ maxWidth: 360, color:'rgba(245,243,236,.7)', fontSize: 16, lineHeight: 1.5, margin: 0 }}>
            {t('pipeline.sub')}
          </p>
        </div>
      </Reveal>

      <Reveal delay={120}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap: 0, position:'relative' }}>
          {/* Connecting line */}
          <div style={{ position:'absolute', top: 36, left: '8%', right: '8%', height: 2, background:'rgba(245,243,236,.15)' }}></div>
          <div style={{ position:'absolute', top: 36, left: '8%', width: '60%', height: 2, background: accent }}></div>

          {stages.map((s, i) => (
            <div key={i} style={{ position:'relative', padding:'0 8px' }}>
              {/* Node */}
              <div style={{ width: 28, height: 28, borderRadius:'50%',
                background: s.status === 'done' ? accent : s.status === 'running' ? accent : 'var(--ink)',
                border:'2px solid ' + (s.status === 'queued' ? 'rgba(245,243,236,.3)' : accent),
                margin:'24px auto', position:'relative', zIndex: 2,
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'var(--mono)', fontSize: 12, fontWeight: 700, color: s.status === 'queued' ? 'rgba(245,243,236,.5)' : 'var(--ink)',
                animation: s.status === 'running' ? 'ruu-pulse 1.4s ease-in-out infinite' : 'none',
              }}>
                {s.status === 'done' ? '✓' : i + 1}
              </div>

              {/* Card */}
              <div style={{ padding: 16, background:'rgba(245,243,236,.05)', border:'1px solid rgba(245,243,236,.12)', borderRadius: 10, minHeight: 220 }}>
                <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color: accent, marginBottom: 4 }}>0{i+1}</div>
                <div className="serif" style={{ fontSize: 22, lineHeight: 1.05, letterSpacing:'-0.02em', marginBottom: 8 }}>{t(s.nameKey)}</div>
                <div className="mono" style={{ fontSize: 10, color:'rgba(245,243,236,.5)', marginBottom: 14 }}>{t(s.roleKey)}</div>

                {s.status === 'done' && (
                  <span className="mono" style={{ display:'inline-block', padding:'3px 8px', borderRadius: 999, background: accent, color:'var(--ink)', fontSize: 10, fontWeight: 600, marginBottom: 10 }}>{t('pipeline.status.done')}</span>
                )}
                {s.status === 'running' && (
                  <div style={{ marginBottom: 10 }}>
                    <span className="mono" style={{ display:'inline-flex', alignItems:'center', gap: 6, fontSize: 10, color: accent }}>
                      <span style={{ display:'inline-flex', gap: 2 }}>
                        <span style={{ width: 4, height: 4, borderRadius:'50%', background: accent, animation:'ruu-dot-bounce 1.2s infinite' }}></span>
                        <span style={{ width: 4, height: 4, borderRadius:'50%', background: accent, animation:'ruu-dot-bounce 1.2s .2s infinite' }}></span>
                        <span style={{ width: 4, height: 4, borderRadius:'50%', background: accent, animation:'ruu-dot-bounce 1.2s .4s infinite' }}></span>
                      </span>
                      {t('pipeline.status.running')}
                    </span>
                    <div style={{ marginTop: 6, height: 4, background:'rgba(245,243,236,.1)', borderRadius: 2, overflow:'hidden' }}>
                      <div style={{ width: s.pct + '%', height:'100%', background: accent, animation:'ruu-bar-grow 1.5s' }}></div>
                    </div>
                  </div>
                )}
                {s.status === 'queued' && (
                  <span className="mono" style={{ display:'inline-block', padding:'3px 8px', borderRadius: 999, border:'1px solid rgba(245,243,236,.2)', color:'rgba(245,243,236,.5)', fontSize: 10, marginBottom: 10 }}>{t('pipeline.status.queued')}</span>
                )}

                <div style={{ fontSize: 12, lineHeight: 1.45, color:'rgba(245,243,236,.7)', marginBottom: 12 }}>{t(s.detailKey)}</div>

                {s.tokens > 0 && (
                  <div className="mono" style={{ fontSize: 10, color:'rgba(245,243,236,.5)', paddingTop: 8, borderTop:'1px dashed rgba(245,243,236,.15)' }}>
                    {s.tokens.toLocaleString()} token
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </Reveal>

      <Reveal delay={300}>
        <div style={{ marginTop: 36, padding:'18px 24px', background:'rgba(245,243,236,.05)', borderRadius: 10, display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap: 16, fontFamily:'var(--mono)', fontSize: 13 }}>
          <span style={{ color:'rgba(245,243,236,.7)' }}>{t('pipeline.footer.cost.label')}</span>
          <span style={{ color: accent, fontWeight: 600 }}>{t('pipeline.footer.cost.value')}</span>
          <span style={{ color:'rgba(245,243,236,.7)' }}>{t('pipeline.footer.monolith.label')} <s>5,120 tokens</s></span>
          <span className="pill accent">{t('pipeline.footer.saving')}</span>
        </div>
      </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 4. REPURPOSE GRID — tweet, newsletter, linkedin, podcast
// ─────────────────────────────────────────────────────────────────────
function RepurposeBlock({ accent }) {
  const { t } = useT();
  return (
    <section style={{ padding:'96px 56px', borderBottom:'4px solid var(--ink)' }}>
      <Reveal>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', flexWrap:'wrap', gap: 16, marginBottom: 40 }}>
          <h2 className="serif" style={{ fontSize: 'clamp(56px, 7vw, 108px)', lineHeight: 0.92, letterSpacing:'-0.025em', margin: 0 }}>
            {t('repurpose.title.a')}<br/>
            <span className="ital">{t('repurpose.title.hl')}</span> {t('repurpose.title.b')}
          </h2>
          <p style={{ maxWidth: 360, color:'var(--ink-2)', fontSize: 16, lineHeight: 1.5, margin: 0 }}>
            {t('repurpose.sub')}
          </p>
        </div>
      </Reveal>

      <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr 1fr', gridTemplateRows:'auto auto', gap: 14 }}>
        <Reveal><TweetMock accent={accent}/></Reveal>
        <Reveal delay={100}><NewsletterMock accent={accent}/></Reveal>
        <Reveal delay={200}><LinkedInMock accent={accent}/></Reveal>
        <Reveal delay={300}><PodcastMock accent={accent}/></Reveal>
        <Reveal delay={400}><InstagramMock accent={accent}/></Reveal>
        <Reveal delay={500}><RepurposeCTA accent={accent}/></Reveal>
      </div>
    </section>
  );
}

function TweetMock({ accent }) {
  const { t } = useT();
  return (
    <div style={{ background:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 14, padding: 22, boxShadow:'4px 4px 0 var(--ink)', transform:'rotate(-0.5deg)', display:'flex', flexDirection:'column', gap: 10 }}>
      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
        <span style={{ width: 36, height: 36, borderRadius:'50%', background:'var(--ink)', color: accent, fontFamily:'var(--serif)', fontSize: 24, fontStyle:'italic', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>r</span>
        <div>
          <div style={{ fontWeight: 600, fontSize: 14 }}>{t('repurpose.tweet.handle')}</div>
          <div className="mono" style={{ fontSize: 10, color:'var(--ink-3)' }}>{t('repurpose.tweet.type')}</div>
        </div>
      </div>
      <div style={{ fontSize: 15, lineHeight: 1.45 }}>
        {t('repurpose.tweet.body.p1')}
        <br/><br/>
        {t('repurpose.tweet.body.p2')}
      </div>
      <div style={{ display:'flex', gap: 20, fontFamily:'var(--mono)', fontSize: 11, color:'var(--ink-2)', paddingTop: 8, borderTop:'1px dashed var(--rule)' }}>
        <span>↺ {t('repurpose.tweet.stats.replies')}</span>
        <span>♡ {t('repurpose.tweet.stats.likes')}</span>
        <span>👁 {t('repurpose.tweet.stats.views')}</span>
      </div>
    </div>
  );
}

function NewsletterMock({ accent }) {
  const { t } = useT();
  return (
    <div style={{ background:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 14, overflow:'hidden', boxShadow:'4px 4px 0 var(--ink)', transform:'rotate(0.4deg)' }}>
      <div style={{ background: accent, padding:'12px 18px', borderBottom:'2px solid var(--ink)' }}>
        <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em' }}>{t('repurpose.newsletter.kicker')}</div>
        <div className="serif" style={{ fontSize: 24, lineHeight: 1.1, marginTop: 4 }}>
          {t('repurpose.newsletter.title')}
        </div>
      </div>
      <div style={{ padding: 18 }}>
        <p style={{ margin:'0 0 12px', fontSize: 13, lineHeight: 1.55 }}>
          {t('repurpose.newsletter.body')}
        </p>
        <div style={{ display:'grid', gap: 6 }}>
          {[100,86,92,74,68].map((w,i) => (
            <div key={i} style={{ height: 4, background:'var(--paper-2)', borderRadius: 2, overflow:'hidden' }}>
              <div style={{ width: w + '%', height:'100%', background:'var(--ink-2)', opacity: .35 }}></div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, padding:'8px 12px', background:'var(--paper-2)', borderRadius: 6, fontFamily:'var(--mono)', fontSize: 11, display:'flex', justifyContent:'space-between' }}>
          <span>{t('repurpose.newsletter.open-rate')}</span><span style={{ color:'#22c55e' }}>48%</span>
        </div>
      </div>
    </div>
  );
}

function LinkedInMock({ accent }) {
  const { t } = useT();
  return (
    <div style={{ background:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 14, padding: 18, boxShadow:'4px 4px 0 var(--ink)', transform:'rotate(-0.3deg)' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 10 }}>
        <span style={{ width: 40, height: 40, borderRadius: 6, background:'#0a66c2', color:'#fff', fontFamily:'var(--mono)', fontWeight: 700, fontSize: 14, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>in</span>
        <div>
          <div style={{ fontWeight: 600, fontSize: 13 }}>{t('repurpose.linkedin.page')}</div>
          <div style={{ fontSize: 11, color:'var(--ink-3)' }}>{t('repurpose.linkedin.time')}</div>
        </div>
      </div>
      <div style={{ fontSize: 13.5, lineHeight: 1.5 }}>
        {t('repurpose.brand.body.p1')}
        <br/><br/>
        {t('repurpose.brand.body.p2')}
      </div>
      <div style={{ marginTop: 12, display:'flex', justifyContent:'space-between', fontFamily:'var(--mono)', fontSize: 11, color:'var(--ink-2)' }}>
        <span>👍 {t('repurpose.brand.stats.likes')} {t('repurpose.brand.stats.engagement')}</span>
        <span>↗ {t('repurpose.brand.stats.shares')} {t('repurpose.brand.stats.shares.label')}</span>
      </div>
    </div>
  );
}

function getPodcastLines(t) {
  return [
    { t: '00:00', txt: t('repurpose.podcast.line.01'), kind: 'cue' },
    { t: '00:08', txt: t('repurpose.podcast.line.02'), kind: 'vo' },
    { t: '01:24', txt: t('repurpose.podcast.line.03'), kind: 'seg' },
    { t: '03:50', txt: t('repurpose.podcast.line.04'), kind: 'seg' },
    { t: '05:30', txt: t('repurpose.podcast.line.05'), kind: 'seg' },
    { t: '07:00', txt: t('repurpose.podcast.line.06'), kind: 'cue' },
  ];
}

function PodcastMock({ accent }) {
  const { t } = useT();
  const podcastLines = getPodcastLines(t);
  const [visible, setVisible] = React.useState(1);
  const [typed, setTyped] = React.useState('');
  const [progress, setProgress] = React.useState(0);
  const [done, setDone] = React.useState(false);

  // Type the current line, then reveal the next
  React.useEffect(() => {
    if (visible > podcastLines.length) {
      const t = setTimeout(() => { setVisible(1); setTyped(''); setDone(false); }, 2200);
      return () => clearTimeout(t);
    }
    const target = podcastLines[visible - 1].txt;
    if (typed.length < target.length) {
      const speed = Math.max(14, 38 - target.length * 0.18);
      const t = setTimeout(() => setTyped(target.slice(0, typed.length + 1)), speed);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => {
      if (visible === podcastLines.length) { setDone(true); setVisible(v => v + 1); }
      else { setVisible(v => v + 1); setTyped(''); }
    }, 520);
    return () => clearTimeout(t);
  }, [typed, visible]);

  // Playback bar ticks while we're "recording"
  React.useEffect(() => {
    const t = setInterval(() => setProgress(p => (p + 0.7) % 100), 120);
    return () => clearInterval(t);
  }, []);

  const mm = Math.floor(progress * 0.08);
  const ss = Math.floor((progress * 4.8) % 60);
  const clock = `${String(mm).padStart(1,'0')}:${String(ss).padStart(2,'0')}`;

  return (
    <div style={{ background:'var(--ink)', color:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 14, padding: 20, boxShadow:'4px 4px 0 var(--ink)', transform:'rotate(0.6deg)', position:'relative', overflow:'hidden' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 10 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <span style={{
            display:'inline-block', width: 8, height: 8, borderRadius:'50%', background:'#ff3838',
            boxShadow:'0 0 0 4px rgba(255,56,56,.25)',
            animation:'ruu-rec-pulse 1.2s ease-in-out infinite',
          }}/>
          <span className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.12em', color: '#ff8a8a' }}>{t('repurpose.podcast.rec')}</span>
        </div>
        <span className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color: accent }}>{t('repurpose.podcast.label')}</span>
      </div>
      <div className="serif" style={{ fontSize: 22, lineHeight: 1.1, marginBottom: 14, color:'var(--paper)' }}>
        {t('repurpose.podcast.episode')} <span className="ital">€15,000</span>
      </div>
      <div style={{ fontSize: 12, lineHeight: 1.62, color:'rgba(245,243,236,.78)', fontFamily:'var(--mono)', minHeight: 130 }}>
        {podcastLines.slice(0, Math.min(visible, podcastLines.length)).map((ln, i) => {
          const isCurrent = i === visible - 1 && !done;
          const txt = isCurrent ? typed : ln.txt;
          return (
            <div key={i} style={{
              opacity: 0,
              animation: 'ruu-line-in .35s ease forwards',
              animationDelay: '40ms',
              marginBottom: 4,
            }}>
              <span style={{ color: accent }}>[{ln.t}]</span>{' '}
              {ln.kind === 'vo' ? <em style={{ color:'rgba(245,243,236,.92)', fontStyle:'normal' }}>{txt}</em> : <span>{txt}</span>}
              {isCurrent && <span style={{ display:'inline-block', width: 6, height: 12, marginLeft: 2, background: accent, verticalAlign:'middle', animation:'ruu-caret 0.9s steps(2) infinite' }}/>}
            </div>
          );
        })}
        {done && (
          <div style={{ marginTop: 8, color: accent, fontSize: 11 }}>
            {t('repurpose.podcast.done')}
          </div>
        )}
      </div>
      <div style={{ marginTop: 16, display:'flex', alignItems:'center', gap: 8 }}>
        <span style={{ width: 28, height: 28, borderRadius:'50%', background: accent, color:'var(--ink)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize: 12 }}>▶</span>
        <div style={{ flex: 1, height: 4, background:'rgba(245,243,236,.15)', borderRadius: 2, overflow:'hidden' }}>
          <div style={{ width: progress + '%', height:'100%', background: accent, borderRadius: 2, transition: 'width .12s linear' }}></div>
        </div>
        <span className="mono" style={{ fontSize: 10, color:'rgba(245,243,236,.55)' }}>{clock} / {t('repurpose.podcast.duration')}</span>
      </div>
    </div>
  );
}

function InstagramMock({ accent }) {
  const { t } = useT();
  return (
    <div style={{ background:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 14, padding: 18, boxShadow:'4px 4px 0 var(--ink)', transform:'rotate(-0.5deg)' }}>
      <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-3)', marginBottom: 10 }}>{t('repurpose.instagram.label')}</div>
      <div style={{ background:'var(--ink)', color:'var(--paper)', borderRadius: 10, padding: 18, position:'relative', minHeight: 180, fontFamily:'var(--serif)' }}>
        <div style={{ fontSize: 30, lineHeight: 1, letterSpacing:'-0.02em', marginBottom: 6 }}>
          {t('repurpose.tiktok.line1')}
        </div>
        <div style={{ fontSize: 44, lineHeight: 1, letterSpacing:'-0.025em', color: accent, fontStyle:'italic', marginBottom: 6 }}>
          {t('repurpose.tiktok.line2')}
        </div>
        <div style={{ fontSize: 30, lineHeight: 1, letterSpacing:'-0.02em' }}>
          {t('repurpose.tiktok.line3')}
        </div>
        <div style={{ position:'absolute', bottom: 14, right: 14, fontFamily:'var(--mono)', fontSize: 10, opacity: .6 }}>
          [0:00 / 0:45]
        </div>
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', marginTop: 10, fontFamily:'var(--mono)', fontSize: 11, color:'var(--ink-2)' }}>
        <span>♡ 24.1K</span>
        <span>💬 482</span>
        <span>↗ 1.8K</span>
      </div>
    </div>
  );
}

function RepurposeCTA({ accent }) {
  const { t } = useT();
  return (
    <div style={{ background: accent, border:'2px solid var(--ink)', borderRadius: 14, padding: 22, boxShadow:'4px 4px 0 var(--ink)', transform:'rotate(0.3deg)', display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
      <div>
        <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em' }}>{t('repurpose.cta.tag')}</div>
        <div className="serif" style={{ fontSize: 36, lineHeight: 0.95, letterSpacing:'-0.022em', marginTop: 8 }}>
          {t('repurpose.cta.title.a')}<br/><span className="ital">{t('repurpose.cta.title.b')}</span>
        </div>
      </div>
      <div>
        <div style={{ fontSize: 13, lineHeight: 1.45, marginBottom: 14 }}>
          {t('repurpose.cta.body')}
        </div>
        <button className="btn" style={{ background:'var(--ink)', color: accent, padding:'10px 14px', fontSize: 13 }}>
          <span>{t('repurpose.cta.btn')}</span><span className="arrow">→</span>
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 5. RESULTS BLOCK — SEO + GEO + AEO başarım panosu (definition below)
// ─────────────────────────────────────────────────────────────────────

// ─────────────────────────────────────────────────────────────────────
// 6. PRODUCT-SCREENS STRIP — user-droppable slots
// ─────────────────────────────────────────────────────────────────────
function ScreensBlock({ accent }) {
  const { t } = useT();
  return (
    <section style={{ padding:'96px 56px', borderBottom:'4px solid var(--ink)' }}>
      <Reveal>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', flexWrap:'wrap', gap: 16, marginBottom: 32 }}>
          <h2 className="serif" style={{ fontSize: 'clamp(48px, 6vw, 88px)', lineHeight: 0.95, letterSpacing:'-0.025em', margin: 0 }}>
            {t('screens.title.a')}<br/>
            <span className="ital">{t('screens.title.b')}</span>
          </h2>
          <p style={{ maxWidth: 360, color:'var(--ink-2)', fontSize: 15, lineHeight: 1.5, margin: 0 }}>
            {t('screens.sub')}
          </p>
        </div>
      </Reveal>

      <Reveal delay={120}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap: 16 }}>
          <div style={{ position:'relative', borderRadius: 14, overflow:'hidden', border:'2px solid var(--ink)', boxShadow:'6px 6px 0 var(--ink)', transform:'rotate(-0.6deg)', minHeight: 380 }}>
            <image-slot id="ruu-screen-1" shape="rect" placeholder="Editor UI · 1280×800" style={{ width:'100%', height:'100%', minHeight: 380, display:'block' }}></image-slot>
            <span style={{ position:'absolute', bottom: 12, left: 12, background:'var(--ink)', color:'var(--paper)', padding:'4px 8px', fontFamily:'var(--mono)', fontSize: 10, letterSpacing:'0.08em', textTransform:'uppercase', borderRadius: 4 }}>{t('screens.01.label')}</span>
          </div>
          <div style={{ position:'relative', borderRadius: 14, overflow:'hidden', border:'2px solid var(--ink)', boxShadow:'6px 6px 0 var(--ink)', transform:'rotate(0.8deg)', minHeight: 380 }}>
            <image-slot id="ruu-screen-2" shape="rect" placeholder="Citation Tracker · mobile" style={{ width:'100%', height:'100%', minHeight: 380, display:'block' }}></image-slot>
            <span style={{ position:'absolute', bottom: 12, left: 12, background: accent, color:'var(--ink)', padding:'4px 8px', fontFamily:'var(--mono)', fontSize: 10, letterSpacing:'0.08em', textTransform:'uppercase', borderRadius: 4 }}>{t('screens.02.label')}</span>
          </div>
          <div style={{ position:'relative', borderRadius: 14, overflow:'hidden', border:'2px solid var(--ink)', boxShadow:'6px 6px 0 var(--ink)', transform:'rotate(-0.4deg)', minHeight: 380 }}>
            <image-slot id="ruu-screen-3" shape="rect" placeholder="Token wallet panel" style={{ width:'100%', height:'100%', minHeight: 380, display:'block' }}></image-slot>
            <span style={{ position:'absolute', bottom: 12, left: 12, background:'var(--ink)', color:'var(--paper)', padding:'4px 8px', fontFamily:'var(--mono)', fontSize: 10, letterSpacing:'0.08em', textTransform:'uppercase', borderRadius: 4 }}>{t('screens.03.label')}</span>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// SEO + GEO + AEO BAŞARIM PANOSU
// ─────────────────────────────────────────────────────────────────────
function ResultsBlock({ accent }) {
  const { t } = useT();
  // Engine breakdown (citations last 30 days)
  const engines = [
    { name: 'ChatGPT',              short: 'GPT', n: 487, max: 500, trend: '+34%' },
    { name: 'Perplexity',           short: 'PPX', n: 314, max: 500, trend: '+58%' },
    { name: 'Google AI Overviews',  short: 'AIO', n: 248, max: 500, trend: '+19%' },
    { name: 'Claude',               short: 'CLD', n: 138, max: 500, trend: '+27%' },
    { name: 'Gemini',               short: 'GMN', n:  60, max: 500, trend: '+12%' },
  ];

  // Top articles — titles localized per lang
  const articles = [
    { n: '01', t: t('results.article.01.t'), cit: 142, eng: 5, hot: true },
    { n: '02', t: t('results.article.02.t'), cit:  96, eng: 4 },
    { n: '03', t: t('results.article.03.t'), cit:  84, eng: 4 },
    { n: '04', t: t('results.article.04.t'), cit:  71, eng: 3 },
    { n: '05', t: t('results.article.05.t'), cit:  58, eng: 5 },
    { n: '06', t: t('results.article.06.t'), cit:  47, eng: 3 },
  ];

  // Sparkline 30 days
  const W = 720, H = 80;
  const pts = [12,18,15,22,28,24,31,29,38,42,40,52,58,55,68,72,78,82,88,84,96,102,108,114,108,124,138,142,151,168];
  const max = Math.max(...pts);
  const step = W / (pts.length - 1);
  const path = pts.map((p, i) => `${i ? 'L' : 'M'} ${(i * step).toFixed(1)} ${(H - (p / max) * (H - 6) - 3).toFixed(1)}`).join(' ');
  const areaPath = path + ` L ${W} ${H} L 0 ${H} Z`;

  return (
    <section style={{ padding:'96px 56px', background:'var(--paper-2)', borderBottom:'4px solid var(--ink)' }}>
      <Reveal>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', flexWrap:'wrap', gap: 16, marginBottom: 40 }}>
          <div>
            <span className="tag">{t('results.tag')}</span>
            <h2 className="serif" style={{ fontSize: 'clamp(56px, 7vw, 108px)', lineHeight: 0.92, letterSpacing:'-0.025em', margin:'10px 0 0' }}>
              {t('results.title.a')} <span className="ital hl">{t('results.title.hl')}</span> {t('results.title.b')}<br/>
              {t('results.title.c')}
            </h2>
          </div>
          <p style={{ maxWidth: 380, color:'var(--ink-2)', fontSize: 16, lineHeight: 1.5, margin: 0 }}>
            {t('results.sub')}
          </p>
        </div>
      </Reveal>

      {/* Top stat band */}
      <Reveal delay={80}>
        <div style={{ background:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 16, boxShadow:'6px 6px 0 var(--ink)', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', marginBottom: 18, overflow:'hidden' }}>
          {[
            { k: t('results.stat.citations.label'), v: <Counter to={1247}/>, sub: t('results.stat.citations.sub'), em: true },
            { k: t('results.stat.keywords.label'), v: <><Counter to={317}/>+</>, sub: t('results.stat.keywords.sub') },
            { k: t('results.stat.first-citation.label'), v: <><Counter to={6}/>h</>, sub: t('results.stat.first-citation.sub') },
            { k: t('results.stat.retention.label'), v: <><Counter to={84}/>%</>, sub: t('results.stat.retention.sub') },
          ].map((s, i) => (
            <div key={i} style={{ padding:'28px 26px', borderRight: i < 3 ? '1px solid var(--rule)' : 'none', background: s.em ? accent : 'transparent' }}>
              <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color: s.em ? 'var(--ink)' : 'var(--ink-2)' }}>{s.k}</div>
              <div className="serif" style={{ fontSize: 72, lineHeight: 0.95, letterSpacing:'-0.022em', marginTop: 4 }}>{s.v}</div>
              <div className="mono" style={{ fontSize: 11, color: s.em ? 'var(--ink)' : '#22c55e', marginTop: 4, fontWeight: 600 }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </Reveal>

      {/* Main split */}
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 18 }}>
        {/* Trend chart + engine bars */}
        <Reveal delay={160}>
          <div style={{ background:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 16, boxShadow:'6px 6px 0 var(--ink)', padding: 28, transform:'rotate(-0.3deg)' }}>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 18 }}>
              <div>
                <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-3)' }}>{t('results.chart.label')}</div>
                <div className="serif" style={{ fontSize: 44, lineHeight: 0.95, marginTop: 6 }}>1,247 <span style={{ color:'var(--ink-2)', fontSize: 18 }}>{t('results.chart.unit')}</span></div>
              </div>
              <span className="mono" style={{ fontSize: 12, color:'#22c55e', fontWeight: 600 }}>↗ +148%</span>
            </div>
            <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display:'block', marginBottom: 14, overflow:'visible' }}>
              <defs>
                <linearGradient id="ruu-area" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor={accent} stopOpacity="0.45"/>
                  <stop offset="100%" stopColor={accent} stopOpacity="0"/>
                </linearGradient>
                <linearGradient id="ruu-scan" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%"  stopColor={accent} stopOpacity="0"/>
                  <stop offset="50%" stopColor={accent} stopOpacity=".55"/>
                  <stop offset="100%" stopColor={accent} stopOpacity="0"/>
                </linearGradient>
                <clipPath id="ruu-chart-clip"><path d={areaPath}/></clipPath>
              </defs>

              {/* Filled area */}
              <path d={areaPath} fill="url(#ruu-area)"/>

              {/* Looping sweep highlight — clipped to chart shape */}
              <g clipPath="url(#ruu-chart-clip)">
                <rect className="live-sweep" x="0" y="0" width={W * 0.18} height={H} fill="url(#ruu-scan)" style={{ width: W * 0.18 }}/>
              </g>

              {/* Trend line */}
              <path d={path} fill="none" stroke="var(--ink)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1200" style={{ animation: 'ruu-sparkline 2.4s ease-out forwards' }}/>

              {/* Per-point ticks that flash one-by-one to feel "live" */}
              {pts.map((p, i) => {
                const cx = (i * step).toFixed(1);
                const cy = (H - (p / max) * (H - 6) - 3).toFixed(1);
                return (
                  <circle key={i} cx={cx} cy={cy} r="2.4" fill={accent}
                          style={{ animation: 'ruu-tick-flash 4.2s linear infinite', animationDelay: ((i / pts.length) * 4.2).toFixed(2) + 's' }}/>
                );
              })}

              {/* Live cursor dot (latest) — halo + pulsing core */}
              <circle cx={W - 1} cy={H - (pts[pts.length-1] / max) * (H - 6) - 3} r="6"
                      fill={accent} fillOpacity=".55" className="live-halo"/>
              <circle cx={W - 1} cy={H - (pts[pts.length-1] / max) * (H - 6) - 3} r="5"
                      fill="var(--ink)" stroke={accent} strokeWidth="3" className="live-dot"/>
            </svg>
            <div className="mono" style={{ display:'flex', justifyContent:'space-between', fontSize: 10, color:'var(--ink-3)' }}>
              <span>{t('results.chart.x.start')}</span>
              <span>{t('results.chart.x.mid')}</span>
              <span>{t('results.chart.x.end')}</span>
            </div>

            <div style={{ marginTop: 24, paddingTop: 18, borderTop:'1px dashed var(--rule)' }}>
              <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-3)', marginBottom: 12 }}>{t('results.engines.label')}</div>
              <div style={{ display:'grid', gap: 10 }}>
                {engines.map((e, i) => (
                  <div key={e.name} style={{ display:'grid', gridTemplateColumns:'150px 1fr 64px 56px', alignItems:'center', gap: 12 }}>
                    <span style={{ fontSize: 13, fontWeight: 500 }}>{e.name}</span>
                    <div style={{ height: 14, background:'var(--paper-2)', borderRadius: 4, overflow:'hidden', border:'1px solid var(--rule)' }}>
                      <div style={{ width: (e.n / 500 * 100) + '%', height:'100%', background: accent, animation: 'ruu-bar-grow 1.4s ease-out', animationDelay: (i * 100) + 'ms' }}></div>
                    </div>
                    <span className="mono" style={{ fontSize: 13, textAlign:'right', fontVariantNumeric:'tabular-nums' }}>{e.n}</span>
                    <span className="mono" style={{ fontSize: 11, color:'#22c55e', textAlign:'right' }}>{e.trend}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>

        {/* Score rings + top articles */}
        <div style={{ display:'flex', flexDirection:'column', gap: 18 }}>
          {/* Triple-score rings */}
          <Reveal delay={220}>
            <div style={{ background:'var(--ink)', color:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 16, boxShadow:'6px 6px 0 var(--ink)', padding: 24, transform:'rotate(0.5deg)' }}>
              <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color: accent, marginBottom: 14 }}>{t('results.scores.label')}</div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 14 }}>
                {[
                  { k: 'SEO', v: 92, sub: t('results.score.seo.sub') },
                  { k: 'GEO', v: 88, sub: t('results.score.geo.sub') },
                  { k: 'AEO', v: 96, sub: t('results.score.aeo.sub') },
                ].map((r, i) => (
                  <ScoreRing key={r.k} k={r.k} v={r.v} sub={r.sub} accent={accent}/>
                ))}
              </div>
              <div style={{ marginTop: 14, padding:'10px 12px', background:'rgba(245,243,236,.06)', borderRadius: 8, fontSize: 12, lineHeight: 1.45, color:'rgba(245,243,236,.7)' }}>
                {t('results.scores.note')}
              </div>
            </div>
          </Reveal>

          {/* Top articles */}
          <Reveal delay={280}>
            <div style={{ background:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 16, boxShadow:'6px 6px 0 var(--ink)', padding: 24, transform:'rotate(-0.5deg)' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 }}>
                <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-3)' }}>{t('results.articles.label')}</div>
                <span className="mono" style={{ fontSize: 10, color:'var(--ink-2)' }}>{t('results.articles.sub')}</span>
              </div>
              <div style={{ display:'grid', gap: 0 }}>
                {articles.map((a, i) => (
                  <div key={a.n} style={{ display:'grid', gridTemplateColumns:'28px 1fr auto auto', alignItems:'center', gap: 12, padding:'10px 0', borderTop: i ? '1px dashed var(--rule)' : 0 }}>
                    <span className="mono" style={{ fontSize: 11, color:'var(--ink-3)' }}>{a.n}</span>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{a.t}</div>
                      <div className="mono" style={{ fontSize: 10, color:'var(--ink-2)', marginTop: 2 }}>{a.eng} {t('results.articles.cited-in')}</div>
                    </div>
                    {a.hot && <span style={{ padding:'3px 7px', background:'#dc2626', color:'#fff', fontFamily:'var(--mono)', fontSize: 9, letterSpacing:'0.08em', textTransform:'uppercase', borderRadius: 3 }}>{t('results.hot.label')}</span>}
                    <span className="mono" style={{ fontSize: 13, fontWeight: 600, fontVariantNumeric:'tabular-nums' }}>{a.cit}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>

      {/* Bottom strip — recent citations log */}
      <Reveal delay={360}>
        <div style={{ marginTop: 18, background:'var(--paper)', border:'2px solid var(--ink)', borderRadius: 12, padding:'18px 24px', boxShadow:'4px 4px 0 var(--ink)' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 12 }}>
            <span className="mono" style={{ fontSize: 11, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-2)', display:'inline-flex', alignItems:'center', gap: 8 }}>
              <span className="livedot"></span> {t('results.live.label')}
            </span>
            <span className="mono" style={{ fontSize: 11, color:'var(--ink-3)' }}>{t('results.live.refresh')}</span>
          </div>
          <div style={{ display:'grid', gap: 6 }}>
            {[
              { t: t('results.feed.01.t'), e: 'ChatGPT',    q: t('results.feed.01.q'), a: t('results.article.01.t') },
              { t: t('results.feed.02.t'), e: 'Perplexity', q: t('results.feed.02.q'), a: t('results.article.03.t') },
              { t: t('results.feed.03.t'), e: 'Google AI',  q: t('results.feed.03.q'), a: t('results.article.04.t') },
              { t: t('results.feed.04.t'), e: 'Claude',     q: t('results.feed.04.q'), a: t('results.article.05.t') },
            ].map((r, i) => (
              <div key={i} style={{ display:'grid', gridTemplateColumns:'70px 90px 1fr 1fr', gap: 14, alignItems:'center', padding:'6px 0', borderTop: i ? '1px dashed var(--rule)' : 0, fontSize: 12, fontFamily:'var(--mono)' }}>
                <span style={{ color:'var(--ink-3)' }}>{r.t}</span>
                <span style={{ fontWeight: 600 }}>{r.e}</span>
                <span style={{ color:'var(--ink-2)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{r.q}</span>
                <span style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>→ {r.a}</span>
              </div>
            ))}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// Score ring used inside ResultsBlock — with a looping radar sweep + gentle pulse.
function ScoreRing({ k, v, sub, accent }) {
  const r = 36, c = 2 * Math.PI * r;
  const dash = (v / 100) * c;
  // Position of the moving sweep dot — it orbits the ring once every 6s.
  // Calculated via a child <g> with a CSS rotation animation.
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 6 }}>
      <div className="ring-wrap" style={{ position:'relative', width: 96, height: 96 }}>
        <svg width="96" height="96" viewBox="0 0 96 96" style={{ overflow:'visible' }}>
          {/* Track */}
          <circle cx="48" cy="48" r={r} fill="none" stroke="rgba(245,243,236,.12)" strokeWidth="7"/>
          {/* Score arc */}
          <circle cx="48" cy="48" r={r} fill="none" stroke={accent} strokeWidth="7" strokeLinecap="round"
                  strokeDasharray={`${dash} ${c}`} transform="rotate(-90 48 48)"
                  style={{ transition: 'stroke-dasharray 1.4s cubic-bezier(.2,.7,.2,1)' }}/>
          {/* Looping radar sweep */}
          <g className="ring-sweep">
            <circle cx={48 + r} cy="48" r="3.5" fill={accent}/>
            <circle cx={48 + r} cy="48" r="7" fill={accent} fillOpacity=".35">
              <animate attributeName="r" values="3.5;9;3.5" dur="1.6s" repeatCount="indefinite"/>
              <animate attributeName="fill-opacity" values=".35;0;.35" dur="1.6s" repeatCount="indefinite"/>
            </circle>
          </g>
        </svg>
        <div style={{ position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column' }}>
          <span className="serif" style={{ fontSize: 32, lineHeight: 1 }}><Counter to={v}/></span>
          <span className="mono" style={{ fontSize: 9, color:'rgba(245,243,236,.5)', letterSpacing:'0.1em' }}>{k}</span>
        </div>
      </div>
      <span className="mono" style={{ fontSize: 10, color:'rgba(245,243,236,.6)' }}>{sub}</span>
    </div>
  );
}

Object.assign(window, {
  AISeenBlock, EditorBlock, PipelineBlock, RepurposeBlock, ResultsBlock, ScreensBlock,
  FlashCard, EngineBack,
});

// ───────────────────────────────────── FlashCard wrapper ─────────────────────
function FlashCard({ rot = 0, accent, back, children }) {
  return (
    <div className="flash" style={{ minHeight: 460, transform: 'rotate(' + rot + 'deg)', filter:'drop-shadow(6px 6px 0 var(--ink))' }}>
      <div className="flash-inner">
        <div className="flash-face flash-front">{children}</div>
        <div className="flash-face flash-back" style={{ background:'var(--ink)', color:'var(--paper)', border:'2px solid var(--ink)', padding: 26, display:'flex', flexDirection:'column', overflow:'hidden' }}>
          {back}
        </div>
      </div>
    </div>
  );
}

// Card-back content: title + subtitle + numbered feature list with little
// monospaced 'pro tip' labels. Pure data → uniform look across all 3 engines.
function EngineBack({ title, subtitle, items, accent }) {
  const { t } = useT();
  return (
    <>
      <div className="mono" style={{ fontSize: 10, textTransform:'uppercase', letterSpacing:'0.14em', color: accent, marginBottom: 6, display:'flex', alignItems:'center', gap: 8 }}>
        <span style={{ width: 8, height: 8, background: accent, borderRadius: 2 }}></span>
        {t('aiseen.engine.inside')}
      </div>
      <div className="serif" style={{ fontSize: 28, lineHeight: 1.05, letterSpacing:'-0.02em', marginBottom: 4, color:'var(--paper)' }}>
        {title}
      </div>
      <div className="mono" style={{ fontSize: 11, color:'rgba(245,243,236,.55)', marginBottom: 16 }}>
        {subtitle}
      </div>
      <div style={{ display:'grid', gap: 10, flex: 1 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display:'grid', gridTemplateColumns:'22px 1fr', gap: 10, alignItems:'baseline' }}>
            <span style={{ width: 20, height: 20, borderRadius: 5, background: accent, color:'var(--ink)', fontFamily:'var(--mono)', fontSize: 11, fontWeight: 700, display:'inline-flex', alignItems:'center', justifyContent:'center', alignSelf:'start', marginTop: 1 }}>{i+1}</span>
            <div>
              <div style={{ fontWeight: 600, fontSize: 13.5, color:'var(--paper)' }}>{it.k}</div>
              <div className="mono" style={{ fontSize: 11, color:'rgba(245,243,236,.6)', marginTop: 2, lineHeight: 1.5 }}>{it.d}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="mono" style={{ marginTop: 16, paddingTop: 12, borderTop:'1px dashed rgba(245,243,236,.2)', fontSize: 11, color:'rgba(245,243,236,.55)', display:'flex', justifyContent:'space-between' }}>
        <span>{t('aiseen.back.publish')}</span>
        <span style={{ color: accent }}>{t('aiseen.back.learn')}</span>
      </div>
    </>
  );
}