/* Direction A — "Cinematic / Question Stream"
   Full-bleed, dramatic. Hero is a looping question stream against a void.
   Episodes presented like a docuseries. Like Netflix meets a philosophy journal. */

const A_W = 1440;

function ANav({ accent }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 56px',
      background: 'linear-gradient(to bottom, rgba(11,11,15,0.95) 0%, rgba(11,11,15,0.6) 70%, transparent 100%)',
      backdropFilter: 'blur(8px)',
    }}>
      <TQLLogo size={16} />
      <div style={{ display: 'flex', gap: 36, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>
        <span className="link-line" style={{ color: '#fff' }}>Episodes</span>
        <span className="link-line">Question Index</span>
        <span className="link-line">Manifesto</span>
        <span className="link-line">Subscribe</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)' }}>EN / 中</div>
        <button style={{
          background: accent || 'var(--tql-accent)', color: '#0B0B0F', border: 'none',
          padding: '10px 18px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em',
          textTransform: 'uppercase', fontWeight: 600, cursor: 'pointer'
        }}>
          Latest EP.42 ↗
        </button>
      </div>
    </div>
  );
}

// Cycling question hero
const QUESTIONS = [
  { en: 'What does it mean to think?', tag: '— after Heidegger, 1954 / after GPT, 2026' },
  { en: 'Where does the self end and the model begin?', tag: '— a question for the augmented mind' },
  { en: 'Can a system that has never lived have an opinion about life?', tag: '— on simulation and authority' },
  { en: 'If meaning is statistical, was it ever yours?', tag: '— on language and inheritance' },
  { en: 'Who is responsible when no one decided?', tag: '— on agency in distributed systems' },
  { en: 'Is the question still human, even when the answer is not?', tag: '— the central wager of this lab' },
];

function AHero({ accent, mouse }) {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % QUESTIONS.length), 4200);
    return () => clearInterval(t);
  }, []);
  const q = QUESTIONS[idx];

  return (
    <div style={{ position: 'relative', height: 920, overflow: 'hidden', background: '#0B0B0F' }}>
      {/* Layered noise + grid */}
      <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
      {/* Vortex bg, subtle */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.6, transform: `translate(${(mouse?.x || 0) * 8}px, ${(mouse?.y || 0) * 8}px)` }}>
        <svg viewBox="0 0 1440 920" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
          <defs>
            <radialGradient id="a-hero-vortex" cx="50%" cy="55%" r="50%">
              <stop offset="0%" stopColor="#fff" stopOpacity="0.06" />
              <stop offset="35%" stopColor="#0B0B0F" />
              <stop offset="100%" stopColor="#000" />
            </radialGradient>
          </defs>
          <rect width="1440" height="920" fill="url(#a-hero-vortex)" />
          {Array.from({ length: 36 }).map((_, i) => (
            <circle key={i} cx="720" cy="500" r={20 + i * 22}
              fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth={0.5 + (i % 3) * 0.3} />
          ))}
          {/* signal lines */}
          {Array.from({ length: 8 }).map((_, i) => (
            <line key={`s${i}`} x1="0" x2="1440"
              y1={140 + i * 90} y2={140 + i * 90 + (i % 2 ? 4 : -4)}
              stroke="rgba(255,255,255,0.04)" />
          ))}
        </svg>
      </div>

      {/* Scanlines */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'repeating-linear-gradient(to bottom, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px)',
      }} />

      {/* Top status bar */}
      <div style={{
        position: 'absolute', top: 96, left: 56, right: 56,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.5)',
      }}>
        <div style={{ display: 'flex', gap: 24 }}>
          <span><span style={{ color: accent || 'var(--tql-accent)' }} className="pulse">●</span> &nbsp;LIVE — SEASON 03 / 2026</span>
          <span>42 EPISODES INDEXED</span>
        </div>
        <div>SIGNAL STRENGTH: <span style={{ color: '#fff' }}>0.91</span> / NOISE: <span style={{ color: '#fff' }}>0.34</span></div>
      </div>

      {/* Left rail rotated */}
      <div style={{
        position: 'absolute', left: 24, top: '50%',
        transform: 'rotate(-90deg) translateX(50%)', transformOrigin: 'left center',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.4em', color: 'rgba(255,255,255,0.4)',
      }}>
        QUESTION &nbsp; / &nbsp; THINK &nbsp; / &nbsp; RECONSTRUCT
      </div>

      {/* Main hero text */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 100px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.25em', color: 'rgba(255,255,255,0.55)', marginBottom: 28 }}>
          THE QUESTION LAB &nbsp;/&nbsp; A COGNITIVE EXPERIMENT &nbsp;/&nbsp; AFTER AI
        </div>
        <div style={{ minHeight: 280, position: 'relative' }}>
          <div key={idx} style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 88, lineHeight: 1.0, letterSpacing: '-0.035em',
            color: '#fff', maxWidth: 1100,
            animation: 'q-fade 4.2s ease forwards',
          }}>
            {q.en}
          </div>
          <div key={`tag-${idx}`} style={{
            fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.05em',
            color: 'rgba(255,255,255,0.55)', marginTop: 28,
            animation: 'q-fade 4.2s ease forwards',
          }}>
            {q.tag}
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 32, marginTop: 60 }}>
          <button style={{
            background: accent || 'var(--tql-accent)', color: '#0B0B0F', border: 'none',
            padding: '18px 28px', fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em',
            textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10
          }}>
            ▶ Watch latest episode <span style={{ opacity: 0.6 }}>· 42min</span>
          </button>
          <span className="link-line" style={{
            fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: '#fff'
          }}>Browse all episodes →</span>
        </div>

        {/* progress dots */}
        <div style={{ position: 'absolute', bottom: 80, left: 100, display: 'flex', gap: 8 }}>
          {QUESTIONS.map((_, i) => (
            <div key={i} style={{
              width: 32, height: 2,
              background: i === idx ? (accent || 'var(--tql-accent)') : 'rgba(255,255,255,0.2)',
              transition: 'background .3s'
            }} />
          ))}
        </div>
      </div>

      {/* corner crosshair marks */}
      {[
        { top: 80, left: 56 }, { top: 80, right: 56 },
        { bottom: 80, left: 56 }, { bottom: 80, right: 56 },
      ].map((pos, i) => (
        <div key={i} style={{ position: 'absolute', ...pos, width: 12, height: 12 }}>
          <div style={{ position: 'absolute', top: 0, left: 0, width: 1, height: 12, background: 'rgba(255,255,255,0.4)' }} />
          <div style={{ position: 'absolute', top: 0, left: 0, width: 12, height: 1, background: 'rgba(255,255,255,0.4)' }} />
        </div>
      ))}
    </div>
  );
}

// Marquee ticker of all questions
function ATicker({ accent }) {
  const items = QUESTIONS.concat(QUESTIONS).map((q, i) => (
    <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 16, marginRight: 60 }}>
      <span style={{ color: accent || 'var(--tql-accent)' }}>◇</span>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400, color: 'rgba(255,255,255,0.85)' }}>{q.en}</span>
    </span>
  ));
  return (
    <div style={{ borderTop: '1px solid var(--tql-line)', borderBottom: '1px solid var(--tql-line)', padding: '20px 0', overflow: 'hidden', background: '#0B0B0F' }}>
      <div className="marquee-track">
        {items}
        {items}
      </div>
    </div>
  );
}

// Featured episode (full-bleed, large)
function AFeatured({ accent }) {
  const ep = EPISODES.find(e => e.ep === 42);
  return (
    <div style={{ padding: '100px 56px 80px', background: '#0B0B0F' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 36 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.25em', color: accent || 'var(--tql-accent)' }}>
            ◆ NEW THIS WEEK
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 36, letterSpacing: '-0.025em', marginTop: 10, color: '#fff' }}>
            Featured episode
          </div>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)' }}>
          PUBLISHED 22 APR 2026 · 42 MIN
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40, alignItems: 'stretch' }}>
        <div style={{ position: 'relative' }}>
          <EpisodeCard {...ep} title={ep.title} titleAccent={ep.accent} size="xl" />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '20px 0' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.5)' }}>
              EP.42 · ON INQUIRY
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 46, lineHeight: 1.05, letterSpacing: '-0.03em', color: '#fff', marginTop: 24 }}>
              The question is the only thing left that is{' '}
              <span style={{ color: accent || 'var(--tql-accent)' }}>still human.</span>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.7)', marginTop: 28, maxWidth: 480 }}>
              For 2,500 years philosophy was a discipline of asking. Then knowledge became searchable, opinions became autocompleted, and answers arrived before we noticed we needed them. We examine what is left when the asking is the work.
            </div>
            <div style={{ display: 'flex', gap: 20, marginTop: 36, flexWrap: 'wrap' }}>
              {['Inquiry', 'Selfhood', 'After-AI', 'Heidegger', 'Wittgenstein'].map(t => (
                <span key={t} style={{
                  border: '1px solid var(--tql-line-2)', padding: '6px 12px',
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase',
                  color: 'rgba(255,255,255,0.7)'
                }}>{t}</span>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginTop: 40 }}>
            <button style={{
              background: accent || 'var(--tql-accent)', color: '#0B0B0F', border: 'none',
              padding: '16px 24px', fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em',
              textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer'
            }}>▶ Watch · 42min</button>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)' }}>
              ▢ TRANSCRIPT &nbsp; ▢ NOTES &nbsp; ▢ READING LIST
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

// Episode grid
function AGrid({ accent }) {
  const eps = EPISODES.filter(e => e.ep !== 42).slice(0, 6);
  return (
    <div style={{ padding: '60px 56px 100px', background: '#0B0B0F' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 36, borderTop: '1px solid var(--tql-line)', paddingTop: 40 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 36, letterSpacing: '-0.025em', color: '#fff' }}>
          Recent transmissions
        </div>
        <span className="link-line" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>
          ALL 42 EPISODES →
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {eps.map((e) => (
          <div key={e.ep}>
            <EpisodeCard {...e} title={e.title} titleAccent={e.accent} size="md" />
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.6)' }}>
              <span>EP.{String(e.ep).padStart(2, '0')} · {e.theme.toUpperCase()}</span>
              <span>{20 + (e.ep % 30)}MIN</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Question Index — by theme
function AQuestionIndex({ accent }) {
  const themes = [
    { name: 'Cognition', count: 7, q: 'What does it mean to think when something else is doing it for you?' },
    { name: 'Self', count: 5, q: 'Where does the self end and the model begin?' },
    { name: 'Truth', count: 4, q: 'Can a system that has never lived testify to what is real?' },
    { name: 'Language', count: 6, q: 'Whose words are these, exactly?' },
    { name: 'Free Will', count: 3, q: 'Is freedom computable?' },
    { name: 'Meaning', count: 5, q: 'Where does meaning come from when production is automated?' },
    { name: 'Ethics', count: 6, q: 'Who is responsible when no one decided?' },
    { name: 'Reality', count: 4, q: 'Is reality a consensus or a renderer?' },
  ];
  return (
    <div style={{ padding: '100px 56px', background: '#0B0B0F', borderTop: '1px solid var(--tql-line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.25em', color: accent || 'var(--tql-accent)' }}>
            ◇ THE QUESTION INDEX
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.03em', color: '#fff', marginTop: 24 }}>
            Eight territories of inquiry.
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)', marginTop: 28, maxWidth: 360 }}>
            Every episode is filed under one of the perennial questions of philosophy — re-asked under the conditions of artificial intelligence.
          </div>
        </div>
        <div>
          {themes.map((t, i) => (
            <div key={t.name} style={{
              display: 'grid', gridTemplateColumns: '60px 220px 1fr 80px',
              alignItems: 'center', gap: 24,
              padding: '22px 0',
              borderTop: '1px solid var(--tql-line)',
              borderBottom: i === themes.length - 1 ? '1px solid var(--tql-line)' : 'none',
              cursor: 'pointer',
              transition: 'background .2s'
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(198,255,0,0.03)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.4)' }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', color: '#fff' }}>
                {t.name}
              </span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, color: 'rgba(255,255,255,0.6)', fontStyle: 'italic' }}>
                "{t.q}"
              </span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: accent || 'var(--tql-accent)', textAlign: 'right' }}>
                {t.count} EPS →
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// AI question deconstruction box
function AAskBox({ accent }) {
  const [q, setQ] = React.useState('');
  const [out, setOut] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const samples = [
    'Will AI replace creativity?',
    'Is consciousness just computation?',
    'Can a machine be wise?',
  ];

  async function ask() {
    if (!q.trim()) return;
    setLoading(true);
    setOut(null);
    try {
      const text = await window.claude.complete(
        `You are a philosophical interrogator for "The Question Lab" — cold, precise, skeptical. The user has asked a question about AI and human cognition. Do NOT answer it. Instead, deconstruct it: identify the assumption hidden inside, then return TWO sharper sub-questions that re-pose it without the assumption.

User question: "${q}"

Reply as JSON only, no markdown fences: {"assumption": "the hidden assumption in <20 words", "sub_a": "first reframed question, <16 words, end with ?", "sub_b": "second reframed question, <16 words, end with ?"}`
      );
      const json = JSON.parse(text.replace(/```json\n?|\n?```/g, '').trim());
      setOut(json);
    } catch (e) {
      setOut({ assumption: 'The question itself contains a frame we have not yet examined.', sub_a: 'What would it look like if the opposite were true?', sub_b: 'Whose definitions are we using when we ask it this way?' });
    }
    setLoading(false);
  }

  return (
    <div style={{ padding: '100px 56px', background: '#0B0B0F', borderTop: '1px solid var(--tql-line)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.25em', color: accent || 'var(--tql-accent)' }}>
          ◊ INTERROGATION ENGINE
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 64, lineHeight: 1.0, letterSpacing: '-0.035em', color: '#fff', marginTop: 24, textWrap: 'pretty' }}>
          Ask us a question.<br />
          <span style={{ color: 'rgba(255,255,255,0.5)' }}>We will not answer it.</span>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: 'rgba(255,255,255,0.6)', marginTop: 24, maxWidth: 600, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
          We will return it to you, sharper. Type a question about minds, machines, or meaning. The lab will surface its hidden assumption and re-pose it.
        </div>
      </div>

      <div style={{ maxWidth: 900, margin: '60px auto 0', border: '1px solid var(--tql-line-2)', background: '#0E0E12' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderBottom: '1px solid var(--tql-line)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)' }}>
          <span style={{ color: accent || 'var(--tql-accent)' }} className="pulse">●</span>
          INPUT &nbsp;/&nbsp; YOUR QUESTION
        </div>
        <div style={{ display: 'flex', alignItems: 'stretch' }}>
          <span style={{ display: 'flex', alignItems: 'center', padding: '0 18px', color: accent || 'var(--tql-accent)', fontFamily: 'var(--font-mono)', fontSize: 18 }}>?</span>
          <input
            value={q}
            onChange={e => setQ(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && ask()}
            placeholder="Will AI replace creativity?"
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              fontFamily: 'var(--font-display)', fontSize: 22, color: '#fff',
              padding: '24px 0', letterSpacing: '-0.01em'
            }}
          />
          <button onClick={ask} style={{
            background: accent || 'var(--tql-accent)', color: '#0B0B0F', border: 'none',
            padding: '0 32px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em',
            fontWeight: 700, textTransform: 'uppercase', cursor: 'pointer'
          }}>
            {loading ? 'PARSING…' : 'INTERROGATE →'}
          </button>
        </div>
        {!out && !loading && (
          <div style={{ borderTop: '1px solid var(--tql-line)', padding: '14px 18px', display: 'flex', gap: 8, flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>
            <span style={{ letterSpacing: '0.15em' }}>TRY:</span>
            {samples.map(s => (
              <span key={s} onClick={() => setQ(s)} style={{ cursor: 'pointer', color: 'rgba(255,255,255,0.7)' }} className="link-line">"{s}"</span>
            ))}
          </div>
        )}
        {out && (
          <div style={{ borderTop: '1px solid var(--tql-line)', padding: '32px 24px' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>HIDDEN ASSUMPTION</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: '#fff', lineHeight: 1.4, marginBottom: 28 }}>{out.assumption}</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 24, paddingTop: 24, borderTop: '1px dashed var(--tql-line-2)' }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: accent || 'var(--tql-accent)', marginBottom: 10 }}>RE-POSED · A</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: '#fff', lineHeight: 1.3, fontWeight: 500, letterSpacing: '-0.02em' }}>{out.sub_a}</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: accent || 'var(--tql-accent)', marginBottom: 10 }}>RE-POSED · B</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: '#fff', lineHeight: 1.3, fontWeight: 500, letterSpacing: '-0.02em' }}>{out.sub_b}</div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// Manifesto block
function AManifesto({ accent }) {
  return (
    <div style={{ padding: '120px 56px', background: '#0B0B0F', borderTop: '1px solid var(--tql-line)', position: 'relative', overflow: 'hidden' }}>
      <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.3 }} />
      <div style={{ position: 'relative', maxWidth: 1100 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.25em', color: accent || 'var(--tql-accent)' }}>
          ◇ MANIFESTO &nbsp;/&nbsp; 01
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 56, lineHeight: 1.1, letterSpacing: '-0.03em', color: '#fff', marginTop: 36 }}>
          For 2,500 years, philosophy was a discipline <br/>of asking.
          <br /><br />
          Then knowledge became searchable.<br />
          Opinions became autocompleted. <br />
          Answers arrived before <br />the question was finished.
          <br /><br />
          <span style={{ color: 'rgba(255,255,255,0.55)' }}>This lab does not provide answers. </span>
          <span style={{ color: accent || 'var(--tql-accent)' }}>It re-poses the question.</span>
        </div>
        <div style={{ display: 'flex', gap: 36, marginTop: 64, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)' }}>
          <span>— THE QUESTION LAB</span>
          <span>EST. 2026 · BEIJING / BERLIN / SF</span>
        </div>
      </div>
    </div>
  );
}

// Subscribe / footer
function ASubscribe({ accent }) {
  return (
    <div style={{ padding: '100px 56px', background: '#0B0B0F', borderTop: '1px solid var(--tql-line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-end' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.25em', color: accent || 'var(--tql-accent)' }}>
            ◇ SUBSCRIBE
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 64, lineHeight: 1.0, letterSpacing: '-0.035em', color: '#fff', marginTop: 24 }}>
            One question, every Sunday.
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.6)', marginTop: 24, maxWidth: 460 }}>
            New episodes arrive with a 4-minute reading note: a primary text, a counter-text, and a question to take into the week.
          </div>
        </div>
        <div>
          <div style={{ display: 'flex', borderBottom: '2px solid #fff', paddingBottom: 12, alignItems: 'baseline' }}>
            <span style={{ color: accent || 'var(--tql-accent)', fontFamily: 'var(--font-mono)', fontSize: 14, marginRight: 12 }}>{'>'}</span>
            <input placeholder="your.address@elsewhere.net" style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              fontFamily: 'var(--font-display)', fontSize: 22, color: '#fff',
            }} />
            <button style={{
              background: 'transparent', color: accent || 'var(--tql-accent)',
              border: 'none', fontFamily: 'var(--font-mono)', fontSize: 12,
              letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer'
            }}>SUBSCRIBE →</button>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.4)', marginTop: 16, textTransform: 'uppercase' }}>
            12,407 readers · No tracking · Unsubscribe with one click
          </div>
        </div>
      </div>
    </div>
  );
}

function AFooter({ accent }) {
  return (
    <div style={{ padding: '60px 56px 40px', background: '#08080B', borderTop: '1px solid var(--tql-line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40, alignItems: 'flex-start' }}>
        <div>
          <TQLLogo size={20} />
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)', marginTop: 18, textTransform: 'uppercase' }}>
            A cognitive experiment after AI.
          </div>
        </div>
        {[
          { h: 'Episodes', l: ['All seasons', 'Question index', 'Reading lists', 'Transcripts'] },
          { h: 'Lab', l: ['Manifesto', 'Method', 'Contributors', 'Press'] },
          { h: 'Listen', l: ['YouTube', 'Spotify', 'Apple Pod.', 'RSS feed'] },
          { h: 'Reach', l: ['Newsletter', 'Twitter / X', 'Bilibili', 'hello@tql.fm'] },
        ].map(col => (
          <div key={col.h}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent || 'var(--tql-accent)', marginBottom: 16 }}>{col.h}</div>
            {col.l.map(it => (
              <div key={it} style={{ fontFamily: 'var(--font-display)', fontSize: 14, color: 'rgba(255,255,255,0.7)', marginBottom: 10 }}>
                <span className="link-line">{it}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 60, paddingTop: 24, borderTop: '1px solid var(--tql-line)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase' }}>
        <span>© 2026 The Question Lab — All questions reserved.</span>
        <span>Recorded in Beijing · Released globally · No tracking, ever.</span>
      </div>
    </div>
  );
}

// Mouse-tracking signal-interference layer
function useMouse(ref) {
  const [m, setM] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      setM({
        x: ((e.clientX - r.left) / r.width - 0.5) * 2,
        y: ((e.clientY - r.top) / r.height - 0.5) * 2,
      });
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);
  return m;
}

function DirectionA({ accent }) {
  const ref = React.useRef(null);
  const mouse = useMouse(ref);
  return (
    <div ref={ref} className="tql-root" style={{ width: A_W, background: '#0B0B0F', color: '#EDEDED', overflow: 'hidden', position: 'relative' }}>
      <ANav accent={accent} />
      <AHero accent={accent} mouse={mouse} />
      <ATicker accent={accent} />
      <AFeatured accent={accent} />
      <AGrid accent={accent} />
      <AQuestionIndex accent={accent} />
      <AAskBox accent={accent} />
      <AManifesto accent={accent} />
      <ASubscribe accent={accent} />
      <AFooter accent={accent} />
    </div>
  );
}

Object.assign(window, { DirectionA, A_W });
