// DIRECTION 2 — LIVING DIAGRAM (continued)

function LdSplitLive({ lang }) {
  const vp = useViewport();
  return (
    <section className="nf-section" style={{ borderTop: '1px solid var(--nf-line)' }}>
      <div style={{ textAlign: 'center', marginBottom: vp.isMobile ? 40 : 80 }}>
        <div className="nf-eyebrow">{lang === 'cz' ? 'ROZDĚLENÍ PRÁCE' : 'THE BREAKDOWN'}</div>
        <h2 className="nf-display" style={{ margin: '14px 0 0', fontSize: 'clamp(40px, 10vw, 72px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.05 }}>
          {lang === 'cz' ? 'Kdo co vlastně dělá.' : 'Who actually does what.'}
        </h2>
      </div>

      <div style={{
        maxWidth: 1000, margin: '0 auto',
        display: vp.isMobile ? 'flex' : 'grid',
        flexDirection: vp.isMobile ? 'column' : undefined,
        gridTemplateColumns: vp.isMobile ? undefined : '4fr 1fr',
        gap: vp.isMobile ? 8 : 2,
        height: vp.isMobile ? undefined : 64,
        borderRadius: 10, overflow: 'hidden',
      }}>
        <div style={{ background: 'var(--nf-blue-elec)', display: 'flex', alignItems: 'center', padding: vp.isMobile ? '14px 20px' : '0 24px', justifyContent: 'space-between', minHeight: vp.isMobile ? 56 : undefined, gap: 12 }}>
          <span className="nf-mono" style={{ fontSize: 12, color: '#fff', letterSpacing: '0.15em' }}>AI · 80%</span>
          <span className="nf-display" style={{ fontSize: vp.isMobile ? 18 : 22, color: '#fff' }}>{lang === 'cz' ? 'exekuce' : 'the execution'}</span>
        </div>
        <div style={{ background: 'var(--nf-yellow)', display: 'flex', alignItems: 'center', padding: vp.isMobile ? '12px 20px' : '0 20px', justifyContent: 'space-between', minHeight: vp.isMobile ? 48 : undefined, gap: 12 }}>
          <span className="nf-mono" style={{ fontSize: vp.isMobile ? 11 : 12, color: '#1a1400', letterSpacing: '0.15em' }}>{lang === 'cz' ? 'ARCHITEKT · 20%' : 'ARCHITECT · 20%'}</span>
          <span className="nf-display" style={{ fontSize: vp.isMobile ? 14 : 16, color: '#1a1400' }}>{lang === 'cz' ? 'úsudek' : 'judgment'}</span>
        </div>
      </div>

      <div className="nf-grid-2" style={{ maxWidth: 1000, margin: '40px auto 0', gap: 20 }}>
        <div style={{ padding: 28, border: '1px solid var(--nf-blue-glow)', borderRadius: 14, background: 'linear-gradient(180deg, var(--nf-blue-glow), transparent 70%)' }}>
          <div className="nf-mono" style={{ fontSize: 11, color: 'var(--nf-blue-elec)', letterSpacing: '0.15em', marginBottom: 18 }}>{lang === 'cz' ? 'AI ŘEŠÍ' : 'AI HANDLES'}</div>
          {SPLIT.ai.map((item, i) => (
            <div key={i} style={{ padding: '10px 0', borderBottom: i < SPLIT.ai.length - 1 ? '1px solid var(--nf-line)' : 'none', fontSize: 14, color: 'var(--nf-ink)' }}>
              <span style={{ color: 'var(--nf-blue-elec)', marginRight: 10 }}>→</span>{L(item, lang)}
            </div>
          ))}
        </div>
        <div style={{ padding: 28, border: '1px solid rgba(247,214,74,0.3)', borderRadius: 14, background: 'linear-gradient(180deg, rgba(247,214,74,0.08), transparent 70%)' }}>
          <div className="nf-mono" style={{ fontSize: 11, color: 'var(--nf-yellow)', letterSpacing: '0.15em', marginBottom: 18 }}>{lang === 'cz' ? 'ARCHITEKT' : 'ARCHITECT'}</div>
          {SPLIT.me.map((item, i) => (
            <div key={i} style={{ padding: '10px 0', borderBottom: i < SPLIT.me.length - 1 ? '1px solid var(--nf-line)' : 'none', fontSize: 14, color: 'var(--nf-ink)' }}>
              <span style={{ color: 'var(--nf-yellow)', marginRight: 10 }}>→</span>{L(item, lang)}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LdPrompts({ lang }) {
  const prompts = lang === 'cz' ? [
    { role: 'me', text: 'Mám faktury v příloze e-mailu. Páruj s objednávkami v SAPu, hlásí rozdíly nad 50 Kč.' },
    { role: 'ai', text: 'Rozumím. Návrh: 1) IMAP listener → 2) extractor z PDF přes Claude Vision → 3) SAP BAPI match → 4) rozdíly do Slacku. Postavím prototyp?' },
    { role: 'me', text: 'Ano. Dávej pozor na dobropisy — tam je znaménko obráceně.' },
    { role: 'ai', text: 'Zachyceno. Přidám kontrolu na "CREDIT NOTE" v hlavičce. Test suite běží, 3 / 47 pass. Debugguji format date.' },
  ] : [
    { role: 'me', text: 'I get invoices as email attachments. Match against POs in SAP, flag diffs over 50 CZK.' },
    { role: 'ai', text: 'Got it. Proposed: 1) IMAP listener → 2) PDF extract via Claude Vision → 3) SAP BAPI match → 4) diffs to Slack. Build prototype?' },
    { role: 'me', text: 'Yes. Watch out for credit notes — sign is flipped.' },
    { role: 'ai', text: 'Captured. Adding "CREDIT NOTE" header check. Test suite running, 3 / 47 pass. Debugging date format.' },
  ];
  const vp = useViewport();
  return (
    <section className="nf-section" style={{ background: 'var(--nf-bg-soft)', borderTop: '1px solid var(--nf-line)', borderBottom: '1px solid var(--nf-line)' }}>
      <div className="nf-grid-2-asym" style={{ maxWidth: 1100, margin: '0 auto', alignItems: 'start' }}>
        <div style={{ position: vp.isMobile ? 'static' : 'sticky', top: 100 }}>
          <div className="nf-eyebrow">{lang === 'cz' ? 'ZA OPONOU' : 'BEHIND THE SCENES'}</div>
          <h2 className="nf-display" style={{ margin: '14px 0 20px', fontSize: 'clamp(32px, 7vw, 56px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05 }}>
            {lang === 'cz' ? 'Takhle vypadá ten vztah.' : 'This is what the partnership looks like.'}
          </h2>
          <p style={{ fontSize: 15, color: 'var(--nf-ink-60)', lineHeight: 1.6, maxWidth: 420 }}>
            {lang === 'cz'
              ? 'Žádná tajemství. Tohle je skutečná konverzace během stavění automatizace. AI píše kód, já vedu.'
              : 'No secrets. This is a real conversation mid-build. AI writes the code. I steer.'}
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {prompts.map((p, i) => <PromptBubble key={i} p={p} />)}
          <div style={{
            marginTop: 8, padding: '14px 18px', background: 'rgba(59,130,246,0.08)', border: '1px dashed var(--nf-blue-elec)',
            borderRadius: 10, fontFamily: 'var(--nf-mono)', fontSize: 12, color: 'var(--nf-blue-sky)',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span className="nf-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--nf-blue-elec)' }} />
            {lang === 'cz' ? 'AI pracuje · přepis testů · 42s' : 'AI working · rewriting tests · 42s'}
          </div>

          {/* Layman TL;DR — reframes the chat for non-technical readers */}
          <div style={{
            marginTop: 24,
            padding: '24px 28px',
            borderLeft: '3px solid var(--nf-yellow)',
            background: 'rgba(247,214,74,0.04)',
            borderRadius: '0 10px 10px 0',
          }}>
            <div className="nf-mono" style={{
              fontSize: 10, color: 'var(--nf-yellow)',
              letterSpacing: '0.18em', marginBottom: 10,
            }}>
              {lang === 'cz' ? 'V LIDŠTINĚ' : 'IN PLAIN LANGUAGE'}
            </div>
            <p style={{
              margin: 0, fontSize: 15, lineHeight: 1.6,
              color: 'var(--nf-ink-80)', textWrap: 'pretty',
            }}>
              {lang === 'cz' ? (
                <>Popisuju AI požadavek <span style={{ color: 'var(--nf-ink-60)' }}>(„páruj faktury s objednávkami")</span>. AI navrhne postup. Opravím detail z účetnictví <span style={{ color: 'var(--nf-ink-60)' }}>(dobropisy)</span>. AI to zapracuje a testuje. Celé to trvá <span style={{ color: 'var(--nf-ink)', fontWeight: 500 }}>42 vteřin</span> — ne dvě schůzky.</>
              ) : (
                <>I describe what I need <span style={{ color: 'var(--nf-ink-60)' }}>("match invoices to orders")</span>. AI proposes the approach. I correct the accounting detail <span style={{ color: 'var(--nf-ink-60)' }}>(credit notes)</span>. AI integrates it and runs tests. All in <span style={{ color: 'var(--nf-ink)', fontWeight: 500 }}>42 seconds</span> — not two meetings.</>
              )}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function PromptBubble({ p }) {
  const vp = useViewport();
  const isMe = p.role === 'me';
  return (
    <div style={{ display: 'flex', justifyContent: isMe ? 'flex-end' : 'flex-start' }}>
      <div style={{
        maxWidth: vp.isMobile ? '100%' : '85%',
        width: vp.isMobile ? '100%' : undefined,
        padding: '14px 18px',
        borderRadius: 14,
        background: isMe ? 'rgba(247,214,74,0.1)' : 'var(--nf-bg)',
        border: `1px solid ${isMe ? 'rgba(247,214,74,0.3)' : 'var(--nf-line)'}`,
        fontSize: 14, lineHeight: 1.5,
      }}>
        <div className="nf-mono" style={{ fontSize: 10, color: isMe ? 'var(--nf-yellow)' : 'var(--nf-blue-elec)', letterSpacing: '0.15em', marginBottom: 6 }}>
          {isMe ? 'TD' : 'CLAUDE'}
        </div>
        <div style={{ color: 'var(--nf-ink)' }}>{p.text}</div>
      </div>
    </div>
  );
}

function LdCases({ lang }) {
  return (
    <section className="nf-section">
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, justifyContent: 'space-between', alignItems: 'end', maxWidth: 1200, margin: '0 auto 48px' }}>
        <div>
          <div className="nf-eyebrow">{lang === 'cz' ? 'VÝSLEDKY' : 'THE LEDGER'}</div>
          <h2 className="nf-display" style={{ margin: '14px 0 0', fontSize: 'clamp(32px, 7vw, 56px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05 }}>
            {lang === 'cz' ? '17+ robotů. Naživo.' : '17+ bots. Live.'}
          </h2>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="nf-display" style={{ fontSize: 'clamp(36px, 7vw, 56px)', color: 'var(--nf-blue-elec)', lineHeight: 1 }}>{METRICS.hoursSaved.toLocaleString()}</div>
          <div className="nf-mono" style={{ fontSize: 11, color: 'var(--nf-ink-60)', letterSpacing: '0.15em' }}>{lang === 'cz' ? 'HODIN / ROK ELIMINOVÁNO' : 'HRS / YR ELIMINATED'}</div>
        </div>
      </div>
      <div className="nf-grid-2" style={{ maxWidth: 1200, margin: '0 auto', gap: 20 }}>
        {CASES.map((c, i) => <CaseCard key={c.id} c={c} lang={lang} idx={i} />)}
      </div>
    </section>
  );
}

function CaseCard({ c, lang, idx }) {
  return (
    <div className="nf-card" style={{ padding: 28, position: 'relative', overflow: 'hidden' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 20 }}>
        <div>
          <div className="nf-mono" style={{ fontSize: 10, color: 'var(--nf-ink-40)', letterSpacing: '0.15em', marginBottom: 6 }}>{lang === 'cz' ? 'PŘÍPAD' : 'CASE'} / {String(idx + 1).padStart(2, '0')}</div>
          <div className="nf-display" style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>{L(c.name, lang)}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="nf-display" style={{ fontSize: 36, color: 'var(--nf-blue-elec)', lineHeight: 1 }}>{c.save.hours}h</div>
          <div className="nf-mono" style={{ fontSize: 10, color: 'var(--nf-ink-40)', letterSpacing: '0.1em' }}>{lang === 'cz' ? '/ ROK' : '/ YR'}</div>
        </div>
      </div>
      <div style={{ fontSize: 14, color: 'var(--nf-ink-60)', marginBottom: 20, lineHeight: 1.5 }}>{L(c.blurb, lang)}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 0', borderTop: '1px solid var(--nf-line)' }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', height: 6, borderRadius: 3, overflow: 'hidden' }}>
            <div style={{ width: `${c.aiShare}%`, background: 'var(--nf-blue-elec)' }} />
            <div style={{ width: `${100 - c.aiShare}%`, background: 'var(--nf-yellow)' }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
            <span className="nf-mono" style={{ fontSize: 10, color: 'var(--nf-blue-elec)' }}>{c.aiShare}% AI</span>
            <span className="nf-mono" style={{ fontSize: 10, color: 'var(--nf-yellow)' }}>{100 - c.aiShare}% TD</span>
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="nf-display" style={{ fontSize: 18, color: 'var(--nf-ink)' }}>{fmtMoney(c.save.money, lang)}</div>
        </div>
      </div>
    </div>
  );
}

function LdStack({ lang }) {
  const vp = useViewport();
  return (
    <section className="nf-section" style={{ borderTop: '1px solid var(--nf-line)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', textAlign: 'center' }}>
        <div className="nf-eyebrow" style={{ marginBottom: 28 }}>{lang === 'cz' ? 'STACK V PROVOZU' : 'STACK IN PROD'}</div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: vp.isMobile ? 8 : 0, flexWrap: 'wrap' }}>
          {STACK.map((s, i) => (
            <div key={i} className="nf-display nf-tap-44" style={{
              padding: vp.isMobile ? '12px 18px' : '20px 32px',
              fontSize: vp.isMobile ? 18 : 24, fontWeight: 500, letterSpacing: '-0.02em',
              borderRight: !vp.isMobile && i < STACK.length - 1 ? '1px solid var(--nf-line)' : 'none',
              border: vp.isMobile ? '1px solid var(--nf-line)' : undefined,
              borderRadius: vp.isMobile ? 999 : undefined,
              color: 'var(--nf-ink-60)',
              display: 'inline-flex', alignItems: 'center',
            }}>{s}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LdCTA({ copy, ctaText, lang }) {
  const vp = useViewport();
  const [task, setTask] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | sending | success | error
  const placeholder = lang === 'cz'
    ? 'např.: Každé pondělí stahujeme výpis z banky do Excelu, přeparujeme na účty a posíláme do SAPu…'
    : 'e.g.: Every Monday we download a bank statement, re-parse it into accounts, and push to SAP…';
  const emailPlaceholder = lang === 'cz' ? 'Váš e-mail' : 'Your email';
  const buttonText = lang === 'cz' ? 'Chci AI posouzení' : 'Get my AI assessment';
  const sendingText = lang === 'cz' ? 'Odesílám…' : 'Sending…';
  const subText = lang === 'cz' ? 'Zdarma · odpověď do 24 h · bez závazku' : 'Free · reply in 24 h · no commitment';
  const errorText = lang === 'cz'
    ? <>Něco se pokazilo. Zkuste to znovu nebo napište přímo na <a href="mailto:info@nextoflow.com" style={{ color: 'var(--nf-blue-elec)' }}>info@nextoflow.com</a>.</>
    : <>Something went wrong. Try again or email <a href="mailto:info@nextoflow.com" style={{ color: 'var(--nf-blue-elec)' }}>info@nextoflow.com</a> directly.</>;
  const successTitle = lang === 'cz' ? 'Díky! Ozvu se vám do 24 hodin e-mailem.' : 'Thanks! I\'ll reply within 24 hours by email.';
  const successBody = lang === 'cz'
    ? 'Dostanete první posouzení — co jde automatizovat, co ne a kolik hodin týdně to ušetří.'
    : 'You\'ll get the first assessment — what\'s automatable, what isn\'t, and how many hours a week it saves.';
  const isValid = email.includes('@') && task.trim().length >= 5;

  const submit = async () => {
    if (!isValid || status === 'sending') return;
    setStatus('sending');
    try {
      const res = await fetch('https://formspree.io/f/xeevvqlp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({ email, task, language: lang, page: 'landing' }),
      });
      if (!res.ok) throw new Error('bad response');
      setStatus('success');
    } catch {
      setStatus('error');
    }
  };
  return (
    <section id="contact" className="nf-section" style={{ borderTop: '1px solid var(--nf-line)', position: 'relative', overflow: 'hidden', scrollMarginTop: 80 }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, var(--nf-blue-glow), transparent 60%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1000, margin: '0 auto', textAlign: 'center' }}>
        <h2 className="nf-display nf-h1-fluid" style={{ margin: 0, fontWeight: 500, letterSpacing: '-0.04em' }}>
          {lang === 'cz' ? 'Popište úkol.' : 'Describe the task.'}
          <span style={{ color: 'var(--nf-blue-elec)' }}> {lang === 'cz' ? 'AI ho posoudí.' : 'AI assesses.'}</span>
          <br />
          <span style={{ color: 'var(--nf-ink-60)', fontStyle: 'italic', fontWeight: 400 }}>{lang === 'cz' ? 'Do 24 hodin máte odpověď.' : 'You have an answer in 24 hours.'}</span>
        </h2>

        {status === 'success' ? (
          <div style={{
            marginTop: 56, maxWidth: 720, marginInline: 'auto',
            background: 'var(--nf-bg-soft)',
            border: '1px solid rgba(247,214,74,0.35)',
            borderRadius: 14,
            padding: '44px 40px',
            boxShadow: '0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(247,214,74,0.08)',
            textAlign: 'center',
          }}>
            <div style={{
              width: 54, height: 54, borderRadius: '50%',
              margin: '0 auto 20px',
              background: 'var(--nf-yellow)', color: '#1a1400',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 26, fontWeight: 600,
              boxShadow: '0 0 40px rgba(247,214,74,0.35)',
            }}>✓</div>
            <div className="nf-display" style={{
              fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em',
              lineHeight: 1.1, marginBottom: 14,
            }}>{successTitle}</div>
            <p style={{
              margin: '0 auto', maxWidth: 480,
              fontSize: 15, lineHeight: 1.6,
              color: 'var(--nf-ink-60)', textWrap: 'pretty',
            }}>{successBody}</p>
          </div>
        ) : (
        <div style={{
          marginTop: 56, maxWidth: 720, marginInline: 'auto',
          background: 'var(--nf-bg-soft)',
          border: '1px solid var(--nf-line)',
          borderRadius: 14,
          padding: 6,
          boxShadow: '0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px var(--nf-blue-glow)',
          transition: 'box-shadow .2s',
        }}>
          <input
            type="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder={emailPlaceholder}
            required
            disabled={status === 'sending'}
            style={{
              width: '100%', boxSizing: 'border-box',
              padding: '16px 20px',
              background: 'transparent', border: 'none', outline: 'none',
              borderBottom: '1px solid var(--nf-line)',
              color: 'var(--nf-ink)',
              fontFamily: "'Inter Tight', sans-serif", fontSize: 16, lineHeight: 1.4,
              opacity: status === 'sending' ? 0.5 : 1,
            }}
          />
          <textarea
            value={task}
            onChange={(e) => setTask(e.target.value)}
            onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') submit(); }}
            placeholder={placeholder}
            rows={3}
            disabled={status === 'sending'}
            style={{
              width: '100%', boxSizing: 'border-box',
              padding: '18px 20px',
              background: 'transparent', border: 'none', outline: 'none',
              color: 'var(--nf-ink)',
              fontFamily: "'Inter Tight', sans-serif", fontSize: 17, lineHeight: 1.5,
              resize: 'none', textAlign: 'left',
              opacity: status === 'sending' ? 0.5 : 1,
            }}
          />
          <div style={{
            display: 'flex',
            flexDirection: vp.isMobile ? 'column' : 'row',
            alignItems: vp.isMobile ? 'stretch' : 'center',
            justifyContent: 'space-between',
            gap: vp.isMobile ? 12 : 0,
            padding: vp.isMobile ? '14px' : '10px 14px 10px 20px',
            borderTop: '1px solid var(--nf-line)',
          }}>
            <span className="nf-mono" style={{ fontSize: 11, color: 'var(--nf-ink-40)', letterSpacing: '0.1em', textAlign: vp.isMobile ? 'center' : 'left' }}>
              {lang === 'cz' ? 'JEDNA VĚTA STAČÍ' : 'ONE SENTENCE IS ENOUGH'}
            </span>
            <button
              className="nf-btn nf-btn-primary nf-tap-44"
              onClick={submit}
              disabled={!isValid || status === 'sending'}
              style={{
                padding: '12px 22px', fontSize: 15,
                opacity: (!isValid || status === 'sending') ? 0.5 : 1,
                cursor: (!isValid || status === 'sending') ? 'not-allowed' : 'pointer',
                transition: 'opacity .2s',
                display: vp.isMobile ? 'flex' : 'inline-flex',
                alignItems: 'center', gap: 8,
                width: vp.isMobile ? '100%' : undefined,
                justifyContent: 'center',
              }}>
              {status === 'sending' && (
                <span style={{
                  width: 12, height: 12, borderRadius: '50%',
                  border: '1.5px solid currentColor', borderTopColor: 'transparent',
                  animation: 'nf-spin 0.8s linear infinite',
                  display: 'inline-block',
                }} />
              )}
              {status === 'sending' ? sendingText : <>{buttonText} →</>}
            </button>
          </div>
        </div>
        )}
        {status === 'error' && (
          <div style={{
            marginTop: 14, maxWidth: 720, marginInline: 'auto',
            padding: '10px 16px',
            border: '1px solid rgba(239,68,68,0.35)',
            background: 'rgba(239,68,68,0.06)',
            borderRadius: 10,
            fontSize: 13, color: 'var(--nf-ink-80)',
            textAlign: 'left',
          }}>{errorText}</div>
        )}
        <div className="nf-mono" style={{ marginTop: 20, fontSize: 12, color: 'var(--nf-ink-60)', letterSpacing: '0.1em' }}>
          {subText}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────── PULL QUOTE ─────────────────────────
function LdQuote({ lang }) {
  return (
    <section className="nf-section" style={{ borderTop: '1px solid var(--nf-line)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 80% at 50% 50%, rgba(247,214,74,0.06), transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--nf-display)', fontSize: 'clamp(72px, 14vw, 120px)', lineHeight: 0.6, color: 'var(--nf-yellow)', opacity: 0.5, marginBottom: 20 }}>“</div>
        <blockquote className="nf-display" style={{
          margin: 0, fontSize: 'clamp(36px, 9vw, 80px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.05,
          textWrap: 'balance',
        }}>
          {lang === 'cz' ? (
            <><span style={{ color: 'var(--nf-blue-elec)' }}>AI píše kód.</span>{' '}
            <span style={{ color: 'var(--nf-ink)' }}>Já píšu, </span>
            <span style={{ color: 'var(--nf-yellow)', fontStyle: 'italic' }}>co se nesmí stát</span>
            <span style={{ color: 'var(--nf-ink)' }}>.</span></>
          ) : (
            <><span style={{ color: 'var(--nf-blue-elec)' }}>AI writes the code.</span>{' '}
            <span style={{ color: 'var(--nf-ink)' }}>I write </span>
            <span style={{ color: 'var(--nf-yellow)', fontStyle: 'italic' }}>what must not happen</span>
            <span style={{ color: 'var(--nf-ink)' }}>.</span></>
          )}
        </blockquote>
        <div className="nf-mono" style={{ marginTop: 36, fontSize: 11, color: 'var(--nf-ink-40)', letterSpacing: '0.2em' }}>
          — TADEÁŠ DULÍNEK · {lang === 'cz' ? 'ZAKLADATEL' : 'FOUNDER'}
        </div>
      </div>
    </section>
  );
}

function LdFooter({ lang }) {
  const vp = useViewport();
  return (
    <footer style={{
      padding: vp.isMobile ? '32px 16px' : '48px 40px',
      borderTop: '1px solid var(--nf-line)',
      display: 'flex',
      flexDirection: vp.isMobile ? 'column' : 'row',
      gap: vp.isMobile ? 20 : 0,
      justifyContent: 'space-between',
      alignItems: 'center',
      textAlign: 'center',
    }}>
      <NextoflowMark size={56} />
      <div className="nf-mono" style={{ fontSize: 11, color: 'var(--nf-ink-40)', letterSpacing: '0.1em' }}>
        © 2026 NEXTOFLOW · INFO@NEXTOFLOW.COM
      </div>
    </footer>
  );
}

// ───────────────────────── PROCESS — 4 steps, 2 weeks ─────────────────────────
function LdProcess({ lang }) {
  const steps = lang === 'cz' ? [
    { n: '01', day: 'Den 1', title: 'Hovor', body: 'Popíšete proces. Společně mapujeme, co se dá automatizovat a co ne. 30–45 minut.' },
    { n: '02', day: 'Dny 2–5', title: 'Prototyp', body: 'AI píše první verzi. Já kontroluji, jak je to postavené, co se může pokazit, a jestli data nikam neuniknou.' },
    { n: '03', day: 'Dny 6–10', title: 'Test', body: 'Běží na vašich reálných datech v izolovaném prostředí. Chytáme výjimky, ladíme.' },
    { n: '04', day: 'Dny 11–14', title: 'Nasazení', body: 'Produkce. Monitoring. Návod k obsluze (runbook). Předání. Další dva týdny hotfixy zdarma.' },
  ] : [
    { n: '01', day: 'Day 1', title: 'Call', body: 'You describe the process. We map what can be automated, what can\'t. 30–45 min.' },
    { n: '02', day: 'Days 2–5', title: 'Prototype', body: 'AI writes the first version. I check how it\'s built, what can go wrong, and whether data stays safe.' },
    { n: '03', day: 'Days 6–10', title: 'Test', body: 'Runs on your real data in isolation. We catch exceptions, tune behavior.' },
    { n: '04', day: 'Days 11–14', title: 'Deploy', body: 'Production. Monitoring. Operating manual (runbook). Handover. Two more weeks of hotfixes on the house.' },
  ];
  const vp = useViewport();
  return (
    <section className="nf-section" style={{ borderTop: '1px solid var(--nf-line)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, justifyContent: 'space-between', alignItems: 'end', marginBottom: vp.isMobile ? 40 : 60 }}>
          <div>
            <div className="nf-eyebrow">{lang === 'cz' ? 'OD ZAVOLÁNÍ DO PROVOZU' : 'CALL TO PRODUCTION'}</div>
            <h2 className="nf-display" style={{ margin: '14px 0 0', fontSize: 'clamp(40px, 10vw, 72px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.05 }}>
              {lang === 'cz' ? 'Dva týdny.' : 'Two weeks.'}
            </h2>
          </div>
          <div className="nf-mono" style={{ fontSize: 12, color: 'var(--nf-ink-40)', letterSpacing: '0.15em', maxWidth: 280, textAlign: vp.isMobile ? 'left' : 'right', lineHeight: 1.5, whiteSpace: 'pre-line' }}>
            {lang === 'cz'
              ? '↳ NE MĚSÍCE.\nNE "KONZULTACE".\nFUNGUJÍCÍ ROBOT V PROVOZU.'
              : '↳ NOT MONTHS.\nNOT "CONSULTING".\nA WORKING BOT IN PROD.'}
          </div>
        </div>

        {/* Timeline */}
        <div className="nf-grid-4" style={{ position: 'relative' }}>
          {/* Horizontal track — desktop/tablet only */}
          {!vp.isMobile && (
            <div style={{
              position: 'absolute', top: 22, left: '6%', right: '6%', height: 1,
              background: 'linear-gradient(90deg, var(--nf-blue-elec) 0%, var(--nf-blue-elec) 70%, var(--nf-yellow) 100%)',
              opacity: 0.35,
            }} />
          )}
          {steps.map((s, i) => (
            <div key={s.n} style={{ position: 'relative' }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%',
                background: 'var(--nf-bg)', border: `1px solid ${i === 3 ? 'var(--nf-yellow)' : 'var(--nf-blue-elec)'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--nf-mono)', fontSize: 12, color: i === 3 ? 'var(--nf-yellow)' : 'var(--nf-blue-elec)',
                letterSpacing: '0.05em',
                boxShadow: `0 0 20px ${i === 3 ? 'rgba(247,214,74,0.2)' : 'var(--nf-blue-glow)'}`,
              }}>{s.n}</div>
              <div className="nf-mono" style={{ fontSize: 10, color: 'var(--nf-ink-40)', letterSpacing: '0.15em', marginTop: 28, textTransform: 'uppercase' }}>{s.day}</div>
              <div className="nf-display" style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 6 }}>{s.title}</div>
              <p style={{ fontSize: 14, color: 'var(--nf-ink-60)', lineHeight: 1.55, marginTop: 10, maxWidth: 260 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────── DIY OBJECTION — tight, not a big section ─────────────────────────
function LdDIY({ lang }) {
  return (
    <section className="nf-section" style={{ borderTop: '1px solid var(--nf-line)', background: 'var(--nf-bg-soft)' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div className="nf-eyebrow" style={{ marginBottom: 20 }}>{lang === 'cz' ? 'ČASTÁ NÁMITKA' : 'THE OBJECTION'}</div>
        <h2 className="nf-display" style={{ margin: 0, fontSize: 'clamp(32px, 7vw, 56px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05 }}>
          {lang === 'cz'
            ? <>„Proč tohle nenapíšu <span style={{ fontStyle: 'italic', color: 'var(--nf-ink-60)' }}>s ChatGPT</span> sám?“</>
            : <>"Why can't I just do this <span style={{ fontStyle: 'italic', color: 'var(--nf-ink-60)' }}>with ChatGPT</span> myself?"</>}
        </h2>
        <p style={{ fontSize: 18, color: 'var(--nf-ink-80)', lineHeight: 1.55, marginTop: 28, textWrap: 'pretty' }}>
          {lang === 'cz'
            ? <>Můžete. A pro jednorázový skript to je skvělá cesta. Ale <span style={{ color: 'var(--nf-ink)' }}>produkční automatizace</span> není skript na laptopu. Je to <span style={{ color: 'var(--nf-blue-elec)' }}>SAP autentizace, která vyprší o půlnoci</span>. <span style={{ color: 'var(--nf-blue-elec)' }}>Dobropis, který převrátí znaménko</span>. <span style={{ color: 'var(--nf-blue-elec)' }}>Monitoring, který vás ve tři ráno zavolá, když pošta rozbije API</span>. To jsou věci, které AI napoprvé nenapíše správně — a které rozhodují, jestli to šlape rok bez dohledu, nebo padá každý třetí den.</>
            : <>You can. For a one-off script, it's the right call. But <span style={{ color: 'var(--nf-ink)' }}>production-grade automation</span> isn't a laptop script. It's <span style={{ color: 'var(--nf-blue-elec)' }}>SAP auth that expires at midnight</span>. <span style={{ color: 'var(--nf-blue-elec)' }}>A credit note that flips the sign</span>. <span style={{ color: 'var(--nf-blue-elec)' }}>Monitoring that pages you at 3 AM when the mail server rotates its API</span>. These are the things AI doesn't get right on the first pass — and they decide whether it runs for a year unattended, or breaks every third day.</>}
        </p>
        <p style={{ fontSize: 18, color: 'var(--nf-ink-60)', lineHeight: 1.55, marginTop: 18, textWrap: 'pretty' }}>
          {lang === 'cz'
            ? <>Moje práce je <span style={{ color: 'var(--nf-yellow)' }}>vědět, co se porouchá</span> dřív, než to pustíte do ostrého provozu.</>
            : <>My job is <span style={{ color: 'var(--nf-yellow)' }}>knowing what breaks</span> before it touches production.</>}
        </p>
      </div>
    </section>
  );
}

// ───────────────────────── FAQ — 6 questions, collapse/expand ─────────────────────────
function LdFAQ({ lang }) {
  const vp = useViewport();
  const [open, setOpen] = React.useState(0);
  const faqs = lang === 'cz' ? [
    { q: 'Jak dlouho trvá první konzultace?', a: '30 až 45 minut. Popíšete proces, já řeknu, co z toho se dá realisticky automatizovat a co ne. Bez prezentací, bez marketingu.' },
    { q: 'Je první konzultace zdarma?', a: 'Ano. Platíte, jen když se rozhodneme stavět. A první dva týdny po nasazení jsou hotfixy v ceně.' },
    { q: 'Musím měnit nástroje, které používám?', a: 'Ne. Stavím na tom, co máte — SAP, M-Files, Excel, GOLD, pošta. AI se adaptuje na váš stack, ne naopak.' },
    { q: 'Jak rychle to pojede?', a: 'Typicky zpracuje to, co člověku trvá den, za minuty. Reálné příklady: 480 min/týden → plně automatizováno, 245 min/týden → plně automatizováno.' },
    { q: 'Co když budu potřebovat něco změnit později?', a: 'Každá automatizace má runbook a čitelnou logiku. Úpravy dělám já, nebo vám předám tak, aby je zvládl i váš interní člověk.' },
    { q: 'Garantujete, že to bude fungovat?', a: 'Garantuji, že to dotáhnu do funkčního stavu na vašich reálných datech, jinak neplatíte. Garantovat 100% bezchybnost u procesu, který dělá člověk s chybovostí 3–5 %, by bylo nepoctivé.' },
  ] : [
    { q: 'How long is the first consultation?', a: '30 to 45 minutes. You describe the process, I tell you what can realistically be automated and what can\'t. No slides, no pitch.' },
    { q: 'Is the first consultation free?', a: 'Yes. You only pay if we decide to build. And the first two weeks after deploy include hotfixes.' },
    { q: 'Do I have to change the tools I use?', a: 'No. I build on what you have — SAP, M-Files, Excel, GOLD, email. AI adapts to your stack, not the other way around.' },
    { q: 'How fast will it run?', a: 'Typically it processes what takes a person a full day in minutes. Real examples: 480 min/week → fully automated, 245 min/week → fully automated.' },
    { q: 'What if I need to change something later?', a: 'Every automation ships with a runbook and readable logic. I handle edits, or hand it over so your internal person can.' },
    { q: 'Do you guarantee it will work?', a: 'I guarantee I\'ll get it to a working state on your real data, or you don\'t pay. Guaranteeing 100% error-free output on a process a human runs at 3–5% error would be dishonest.' },
  ];
  return (
    <section className="nf-section" style={{ borderTop: '1px solid var(--nf-line)' }}>
      <div style={{ maxWidth: 960, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'baseline', justifyContent: 'space-between', marginBottom: vp.isMobile ? 32 : 48 }}>
          <h2 className="nf-display" style={{ margin: 0, fontSize: 'clamp(48px, 10vw, 72px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1 }}>FAQ</h2>
          <div className="nf-mono" style={{ fontSize: 11, color: 'var(--nf-ink-40)', letterSpacing: '0.15em' }}>
            {String(faqs.length).padStart(2, '0')} {lang === 'cz' ? 'OTÁZEK' : 'QUESTIONS'}
          </div>
        </div>
        <div>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: '1px solid var(--nf-line)', ...(i === faqs.length - 1 ? { borderBottom: '1px solid var(--nf-line)' } : {}) }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  className="nf-tap-44"
                  aria-expanded={isOpen}
                  style={{
                    width: '100%', padding: vp.isMobile ? '20px 0' : '28px 0', background: 'none', border: 'none', cursor: 'pointer',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: vp.isMobile ? 12 : 20, textAlign: 'left',
                    color: 'var(--nf-ink)', fontFamily: 'inherit',
                  }}>
                  <span style={{ display: 'flex', alignItems: 'baseline', gap: vp.isMobile ? 12 : 20, minWidth: 0, flex: 1 }}>
                    <span className="nf-mono" style={{ fontSize: 12, color: 'var(--nf-ink-40)', letterSpacing: '0.1em', flexShrink: 0 }}>
                      {String(i + 1).padStart(2, '0')}
                    </span>
                    <span className="nf-display" style={{ fontSize: vp.isMobile ? 18 : 24, fontWeight: 500, letterSpacing: '-0.015em' }}>{f.q}</span>
                  </span>
                  <span style={{
                    width: 32, height: 32, flexShrink: 0, borderRadius: '50%',
                    border: '1px solid var(--nf-line)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 14, color: isOpen ? 'var(--nf-blue-elec)' : 'var(--nf-ink-60)',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'all .2s',
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 600 : 0, overflow: 'hidden', transition: 'max-height .3s ease',
                }}>
                  <p style={{
                    margin: 0,
                    padding: vp.isMobile ? '0 0 20px 36px' : '0 56px 28px 52px',
                    fontSize: vp.isMobile ? 15 : 16, color: 'var(--nf-ink-60)', lineHeight: 1.6, maxWidth: 720, textWrap: 'pretty',
                  }}>{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LdSplitLive, LdPrompts, LdCases, LdStack, LdCTA, LdFooter, LdProcess, LdDIY, LdFAQ, LdQuote });