// v3-faq.jsx — "Before you join" FAQ. Placement: after TrustStrip, before
// WaitlistSection — clears the last practical objections, then we ask for the email.
//
// Grouped accordion so 15 answers don't read as a wall. Brand voice: calm, plain,
// honest. Reuses window primitives from lantic-ui.jsx.

const { BRAND: FAQ_BRAND, SAT: FAQ_SAT, SF: FAQ_SF, MONO: FAQ_MONO } = window;

const FAQ_GROUPS = [
  {
    label: 'The product',
    items: [
      { q: 'Is this just another AI chatbot?',
        a: 'No. A chatbot waits for you to ask. Lantic works for you. It reads your day, drafts what’s needed, keeps an eye on your money, holds your calendar, and talks to your team. You stop writing prompts and start having an assistant.' },
      { q: 'What can Lantic actually do at launch?',
        a: 'At Beta, Lantic reads your email and calendar, watches your accounting, helps coordinate your team, drafts your replies, and quietly clears the admin pile. More integrations land after Beta. We won’t promise what we can’t do yet.' },
      { q: 'Will it sound like me?',
        a: 'Yes. Lantic learns how you write, your tone, your patterns, so anything it sends on your behalf reads like you, not like an AI. The voice it speaks back to you in is its own: calm and steady.' },
      { q: 'What happens when Lantic gets something wrong?',
        a: 'It will, especially early. So Lantic asks before anything important goes out, and you stay in control. Over time it learns what you’d approve and what you wouldn’t, and it gets quieter and sharper the longer you use it.' },
      { q: 'How long until it really understands my world?',
        a: 'A few days for the basics. A few weeks for your patterns. A few months for the judgement calls. By around month six, Lantic knows your world the way an assistant who’d been with you for years would.' },
    ],
  },
  {
    label: 'Getting in & pricing',
    items: [
      { q: 'When can I start?',
        a: 'Public Beta opens September 2026. Before then, we’re inviting waitlist members in early to help shape it. Leave your email and we’ll reach out as slots open.' },
      { q: 'What will it cost?',
        a: 'We haven’t locked pricing yet. Here’s how we think about it: if Lantic gives you back ten hours a week and lifts the weight of holding everything in your head, what’s that worth? We’ll price well under that. Early members keep founder pricing for life.' },
      { q: 'What’s the catch?',
        a: 'We’re early. Beta is months away, and you’ll watch Lantic learn, grow, and occasionally fumble. In return, founding members get founder pricing for life, a direct line to the team, and a real hand in shaping it.' },
      { q: 'What if I want to leave?',
        a: 'One tap and you’re out. We hand back what’s yours, then forget you. We’re not in the business of locking people in. The only reason to stay is that Lantic works.' },
    ],
  },
  {
    label: 'Your data, your control',
    items: [
      { q: 'Is my data safe, and who can see it?',
        a: 'Only you can see what Lantic knows. Not us, not your team. It connects only to what you allow, reads in real time, and keeps a private summary in your own memory. Even when your Lantic talks to your team’s assistants, it passes summaries, never raw content.' },
      { q: 'Where does my data live?',
        a: 'In Australia, on servers built to the Australian Privacy Principles. We don’t move it offshore.' },
      { q: 'Will my information train an AI?',
        a: 'Never. Your data is not used to train any model, ours or anyone’s. Lantic learns you, for you, and nothing leaves your stack.' },
      { q: 'Can I delete what Lantic knows?',
        a: 'Anytime. A moment, a person, a topic, or your whole history. Lantic forgets it for good. Not archived, not soft deleted, gone. We call it Forget, and it sits in plain sight, not buried in settings. Forgetting is a feature, not an admin task.' },
      { q: 'Is Lantic compliant for regulated work?',
        a: 'Lantic is built for the Australian Privacy Act 1988 and APP standards. For health, legal, and financial work, it respects the boundaries of your professional tools. It handles the admin around your work; it does not replace clinical, legal, or financial advice.' },
      { q: 'Does it work with WhatsApp, iMessage, or SMS?',
        a: 'Personal WhatsApp and iMessage are locked down by Meta and Apple, and we respect that. For business, Lantic handles email, drafts SMS for you to send, and connects to WhatsApp Business after Beta. We won’t claim a channel we can’t honestly support.' },
    ],
  },
];

// ── one accordion row ────────────────────────────────────────────────────────
function FaqRow({ item, open, onToggle, phone }) {
  return (
    <div style={{ borderBottom: `1px solid ${FAQ_BRAND.hair}` }}>
      <button onClick={onToggle} aria-expanded={open} style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18,
        padding: phone ? '20px 0' : '24px 0', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
        <span style={{ fontFamily: FAQ_SAT, fontWeight: 500, fontSize: phone ? 17 : 20, letterSpacing: -0.4,
          lineHeight: 1.3, color: open ? FAQ_BRAND.ink : FAQ_BRAND.sub, transition: 'color 240ms ease' }}>{item.q}</span>
        <span aria-hidden style={{ flex: '0 0 auto', width: 26, height: 26, position: 'relative', marginTop: 2 }}>
          <span style={{ position: 'absolute', top: '50%', left: '50%', width: 14, height: 1.6, background: open ? FAQ_BRAND.skyLight : FAQ_BRAND.dim,
            transform: 'translate(-50%,-50%)', transition: 'background 240ms ease' }}/>
          <span style={{ position: 'absolute', top: '50%', left: '50%', width: 14, height: 1.6, background: open ? FAQ_BRAND.skyLight : FAQ_BRAND.dim,
            transform: `translate(-50%,-50%) rotate(${open ? 0 : 90}deg)`, transition: 'transform 300ms cubic-bezier(.22,1,.36,1), background 240ms ease' }}/>
        </span>
      </button>
      {/* grid-rows trick animates height cleanly */}
      <div style={{ display: 'grid', gridTemplateRows: open ? '1fr' : '0fr',
        transition: 'grid-template-rows 360ms cubic-bezier(.22,1,.36,1)' }}>
        <div style={{ overflow: 'hidden' }}>
          <div style={{ paddingBottom: phone ? 20 : 26, paddingRight: phone ? 0 : 40,
            fontFamily: FAQ_SF, fontSize: phone ? 15 : 16.5, lineHeight: 1.6, color: FAQ_BRAND.sub,
            maxWidth: 640, textWrap: 'pretty',
            opacity: open ? 1 : 0, transition: 'opacity 300ms ease' }}>{item.a}</div>
        </div>
      </div>
    </div>
  );
}

function FAQSection() {
  const ref = React.useRef(null);
  const vw = window.useViewport();
  const phone = vw < 860;
  // open one at a time per group; default first row of first group open.
  const [open, setOpen] = React.useState('0-0');

  return (
    <section ref={ref} id="faq" style={{
      position: 'relative', padding: phone ? '92px 20px 96px' : '140px 32px 150px',
      background: FAQ_BRAND.canvasDeep, borderTop: `1px solid ${FAQ_BRAND.hair}`, overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 50% 42% at 50% 0%, ${FAQ_BRAND.skyDark}24 0%, transparent 60%)` }}/>

      <div style={{ maxWidth: 820, margin: '0 auto', position: 'relative' }}>

        {/* centered header */}
        <div style={{ textAlign: 'center', marginBottom: phone ? 44 : 64 }}>
          <div style={{ fontFamily: FAQ_MONO, fontSize: 11, color: FAQ_BRAND.skyMist,
            letterSpacing: '0.26em', fontWeight: 600, textTransform: 'uppercase', marginBottom: 18 }}>Before you join</div>
          <h2 style={{ margin: 0, fontFamily: FAQ_SAT, fontWeight: 600,
            fontSize: phone ? 'clamp(32px, 8vw, 42px)' : 'clamp(40px, 4.4vw, 58px)',
            letterSpacing: -2, lineHeight: 1.04, color: FAQ_BRAND.ink, textWrap: 'balance' }}>
            A few honest answers.
          </h2>
          <div style={{ marginTop: 16, fontFamily: FAQ_SF, fontSize: phone ? 15.5 : 17.5, lineHeight: 1.55,
            color: FAQ_BRAND.sub, maxWidth: 540, marginLeft: 'auto', marginRight: 'auto', textWrap: 'pretty' }}>
            No marketing, no fine print. If something’s still on your mind, just ask when we reach out.
          </div>
        </div>

        {/* the groups */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: phone ? 40 : 52 }}>
          {FAQ_GROUPS.map((g, gi) => (
            <div key={g.label}>
              <div style={{ fontFamily: FAQ_MONO, fontSize: 10.5, color: FAQ_BRAND.skyLight,
                letterSpacing: '0.22em', fontWeight: 700, textTransform: 'uppercase', marginBottom: 4,
                paddingBottom: 10, borderBottom: `1px solid ${FAQ_BRAND.skyDark}55` }}>{g.label}</div>
              {g.items.map((item, ii) => {
                const key = `${gi}-${ii}`;
                return <FaqRow key={key} item={item} phone={phone}
                  open={open === key} onToggle={() => setOpen(open === key ? null : key)}/>;
              })}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQSection = FAQSection;
