// foyer-faq.jsx — Section 03 · Frequently Asked.
//
// Per direction: always-open editorial spread. Five Q&As, two
// columns, hairlined. Library-quiet. No accordion — nothing
// hides.

const FAQ_ITEMS = [
  {
    q: 'Do I need to know anything about AI or technology to start?',
    a: 'No. The 7 Days program is built for real life, not technical mastery. The Core Curriculum is written in plain language, and the live cohort meets you where you are.',
  },
  {
    q: 'How much time do I need each day?',
    a: 'Less than you think. Sessions are designed for the way you already live — short, intentional, and practical.',
  },
  {
    q: 'What if I miss a session?',
    a: 'Nothing is lost. The Core Curriculum is yours from day one, and the cohort container holds the work whether you\'re live every day or catching up between school pickups and dinner.',
  },
  {
    q: 'What\'s the difference between the three Levels?',
    a: 'Every Level shares the same Core Curriculum, the same live cohort, and the same community. The escalation lives in personalization: Level I gives you the foundation. Level II adds a custom prompt for your real life. Level III adds a personalized AI system built for the way you live every day.',
  },
  {
    q: 'What happens after the seven days?',
    a: 'The Tech Lifestyle continues. The community stays. The Core Curriculum stays in your hands. What you\'ve built is yours to keep.',
  },
];

const FoyerFAQ = () => (
  <section id="faq"
    data-screen-label="Foyer · 03 Frequently Asked"
    style={{
      background: 'var(--t-ground)',
      color: 'var(--t-text)',
      padding: '64px 24px 72px',
      borderTop: '1px solid var(--t-line)',
    }}>

    {/* eyebrow + headline */}
    <div style={{ maxWidth: 720, margin: '0 auto 36px' }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.36em', textTransform: 'uppercase',
        color: 'var(--t-accent)', marginBottom: 14,
      }}>Frequently Asked</div>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 'clamp(28px, 6vw, 40px)', lineHeight: 1.05,
        letterSpacing: '-0.014em',
        color: 'var(--t-text)', margin: 0,
        textWrap: 'balance',
      }}>
        Five answers,{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>
          before you ask.
        </em>
      </h2>
    </div>

    {/* two-column editorial spread */}
    <div style={{
      maxWidth: 1100, margin: '0 auto',
      display: 'grid',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gap: '0 48px',
    }} className="foyer-faq-grid">
      {FAQ_ITEMS.map((F, i) => (
        <article key={i} style={{
          padding: '24px 0',
          borderTop: '1px solid var(--t-line)',
          ...(i >= FAQ_ITEMS.length - 2 ? { borderBottom: '1px solid var(--t-line)' } : {}),
        }}>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 700,
            fontSize: 9.5, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'var(--t-accent)', marginBottom: 10,
          }}>0{i + 1}</div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontStyle: 'italic',
            fontSize: 'clamp(18px, 3vw, 21px)', lineHeight: 1.25,
            letterSpacing: '-0.008em',
            color: 'var(--t-text)', margin: '0 0 12px',
            textWrap: 'pretty',
          }}>{F.q}</h3>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.7,
            color: 'var(--t-text-2)', margin: 0,
            textWrap: 'pretty',
          }}>{F.a}</p>
        </article>
      ))}
    </div>

    <style>{`
      @media (max-width: 760px) {
        .foyer-faq-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
        .foyer-faq-grid > article:nth-last-child(2) { border-bottom: none !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { FoyerFAQ });