const { useState, useEffect, useRef } = React;

/* ----------------------------------------------------------------------------
   Tweaks — editable defaults (persisted through the host)
---------------------------------------------------------------------------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineVariant": "ai_teammate",
  "showProductPeek": true,
  "showStats": true,
  "ctaLabel": "Join the waitlist"
} /*EDITMODE-END*/;

const HEADLINE_VARIANTS = {
  ai_teammate: {
    kicker: "Employment law, on demand",
    head: ["Your new employment law ", { em: "teammate" }, "."],
    sub: "Counsl gathers the documents, pulls the employee file and hands your solicitor a complete brief — so you get a reliable, qualified answer in minutes, not days."
  },
  first_answer: {
    kicker: "Employment law, on demand",
    head: ["Get the ", { em: "right answer" }, " before lunch."],
    sub: "Ask in plain English — via the app, email or MS Teams. AI Counsl reviews the query, collects the facts and documents, and hands your solicitor everything they need to respond."
  },
  solicitor_signed: {
    kicker: "Solicitor-reviewed. Every time.",
    head: ["Every answer ", { em: "signed off" }, " by a solicitor."],
    sub: "AI Counsl handles the review and admin of every query — collecting the facts, documents and context. A qualified UK employment solicitor does the answering."
  }
};

/* ----------------------------------------------------------------------------
   Small building blocks
---------------------------------------------------------------------------- */

function Wordmark({ size = 26 }) {
  // Recreate the logo inline so it inherits the light theme's navy ink
  return (
    <div className="flex items-center" style={{ gap: size * 0.35 }}>
      <span
        className="status-pulse inline-block rounded-full flex-shrink-0"
        style={{ width: size * 0.5, height: size * 0.5, background: 'var(--counsl-green)' }}
        aria-hidden="true" />
      
      <span
        className="font-wordmark font-extrabold"
        style={{ fontSize: size, color: 'var(--app-fg)', lineHeight: 1 }}>
        
        Counsl
      </span>
    </div>);

}

function Pill({ children, tone = 'neutral' }) {
  const tones = {
    neutral: { bg: 'var(--chip-neutral-bg)', fg: 'var(--chip-neutral-fg)' },
    green: { bg: 'var(--chip-green-bg)', fg: 'var(--chip-green-fg)' },
    amber: { bg: 'var(--chip-amber-bg)', fg: 'var(--chip-amber-fg)' },
    blue: { bg: 'var(--chip-blue-bg)', fg: 'var(--chip-blue-fg)' },
    purple: { bg: 'var(--chip-purple-bg)', fg: 'var(--chip-purple-fg)' },
    red: { bg: 'var(--chip-red-bg)', fg: 'var(--chip-red-fg)' }
  };
  const t = tones[tone];
  return (
    <span
      className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap"
      style={{ background: t.bg, color: t.fg }}>
      {children}</span>);

}

function LivePill() {
  return (
    <span className="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-medium"
    style={{ background: 'var(--chip-green-bg)', color: 'var(--chip-green-fg)' }}>
      <span className="status-pulse inline-block h-1.5 w-1.5 rounded-full" style={{ background: 'var(--counsl-green)' }} />
      Waitlist opening soon
    </span>);

}

/* ----------------------------------------------------------------------------
   Nav
---------------------------------------------------------------------------- */

function Nav({ onJoin }) {
  return (
    <header className="relative z-10">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 pt-6 sm:px-10 sm:pt-8">
        <a href="#top" className="flex items-center" aria-label="Counsl home">
          <Wordmark size={24} />
        </a>
        <nav className="hidden items-center gap-6 text-sm lg:flex" style={{ color: 'var(--app-fg-muted)' }}>
          <a href="#how" className="whitespace-nowrap hover:text-[var(--app-fg)] transition-colors">How it works</a>
          <a href="#for-teams" className="whitespace-nowrap hover:text-[var(--app-fg)] transition-colors">For HR teams</a>
          <a href="#faq" className="whitespace-nowrap hover:text-[var(--app-fg)] transition-colors">FAQ</a>
        </nav>
      </div>
    </header>);

}

/* ----------------------------------------------------------------------------
   Hero
---------------------------------------------------------------------------- */

function Hero({ variant, ctaLabel, onJoin }) {
  const v = HEADLINE_VARIANTS[variant] ?? HEADLINE_VARIANTS.ai_teammate;
  return (
    <section id="top" className="relative">
      <div className="hero-ornament absolute inset-0 -z-0" />
      <div className="relative mx-auto max-w-6xl px-6 pb-20 pt-14 sm:px-10 sm:pt-20">
        <div className="max-w-3xl">
          <LivePill />
          <h1 className="font-display mt-6 text-5xl font-normal leading-[1.05] tracking-tight text-balance sm:text-6xl md:text-7xl"
          style={{ color: 'var(--app-fg)' }}>
            {v.head.map((part, i) => typeof part === 'string' ?
            <React.Fragment key={i}>{part}</React.Fragment> :
            <em key={i} className="italic" style={{ color: 'var(--app-accent)' }}>{part.em}</em>
            )}
          </h1>
          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-pretty sm:text-xl"
          style={{ color: 'var(--app-fg-muted)' }}>
            {v.sub}
          </p>

          <p className="mt-8 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm" style={{ color: 'var(--app-fg-subtle)' }}>
            <span>Private beta · UK only at launch · Waitlist opening spring 2026</span>
          </p>
        </div>
      </div>
    </section>);

}

/* ----------------------------------------------------------------------------
   Waitlist form — realistic validation + success state
---------------------------------------------------------------------------- */

function WaitlistForm({ ctaLabel, onJoin }) {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle'); // idle | loading | ok | error
  const [err, setErr] = useState(null);
  const inputRef = useRef(null);

  useEffect(() => {
    // allow parent to focus us
    const h = (e) => {if (e?.detail === 'focus-waitlist') inputRef.current?.focus();};
    window.addEventListener('counsl-focus', h);
    return () => window.removeEventListener('counsl-focus', h);
  }, []);

  const submit = (e) => {
    e.preventDefault();
    setErr(null);
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
    if (!ok) {setErr('Please enter a valid work email.');return;}
    setStatus('loading');
    // simulated network delay
    setTimeout(() => {
      setStatus('ok');
    }, 800);
  };

  if (status === 'ok') {
    return (
      <div className="ds-card flex items-center gap-3 px-5 py-4 max-w-xl"
      style={{ background: 'var(--card-bg)' }}>
        <span className="flex h-8 w-8 items-center justify-center rounded-full flex-shrink-0"
        style={{ background: 'var(--chip-green-bg)' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--chip-green-fg)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </span>
        <div className="min-w-0">
          <p className="text-sm font-semibold" style={{ color: 'var(--app-fg)' }}>You're on the list.</p>
          <p className="text-xs" style={{ color: 'var(--app-fg-muted)' }}>
            We'll be in touch at <span style={{ color: 'var(--app-fg)', fontWeight: 500 }}>{email}</span> as soon as access opens.
          </p>
        </div>
      </div>);

  }

  return (
    <form onSubmit={submit} className="max-w-xl">
      <div className="flex flex-col gap-2 sm:flex-row">
        <label className="sr-only" htmlFor="email">Work email</label>
        <input
          ref={inputRef}
          id="email"
          type="email"
          inputMode="email"
          autoComplete="email"
          value={email}
          onChange={(e) => {setEmail(e.target.value);if (err) setErr(null);}}
          placeholder="you@company.co.uk"
          className="ds-field flex-1 rounded-md px-4 py-3 text-sm"
          style={{ minWidth: 0 }}
          disabled={status === 'loading'} />
        
        <button
          type="submit"
          disabled={status === 'loading'}
          className="ds-btn-primary rounded-md text-sm font-semibold"
          style={{ padding: '0.75rem 1.2rem' }}>
          
          {status === 'loading' ?
          <span className="inline-flex items-center gap-2">
              <span className="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2" style={{ borderColor: 'rgba(255,255,255,0.35)', borderTopColor: '#fff' }} />
              Joining…
            </span> :
          ctaLabel}
        </button>
      </div>
      <div className="min-h-[18px] mt-2 text-xs" style={{ color: 'var(--chip-red-fg)' }}>
        {err || '\u00A0'}
      </div>
    </form>);

}

/* ----------------------------------------------------------------------------
   Product peek — mocked Cases list using kit's visual language
---------------------------------------------------------------------------- */

const PEEK_CASES = [
{ title: 'Disciplinary — persistent lateness (Jane Smith)', type: 'Disciplinary & Grievance', updated: '2h ago', urgency: 'time_sensitive', status: 'approved' },
{ title: 'TUPE transfer — logistics outsourcing', type: 'TUPE', updated: '1h ago', urgency: 'urgent', status: 'pending_review' },
{ title: 'Grievance against line manager — bullying', type: 'Disciplinary & Grievance', updated: '6h ago', urgency: null, status: 'processing' }];


const STATUS_LABEL = {
  approved: { label: 'Response Ready', tone: 'green' },
  pending_review: { label: 'Under Review', tone: 'amber' },
  processing: { label: 'Processing', tone: 'blue' }
};

function ProductPeek() {
  return (
    <section className="relative -mt-8 mb-12 sm:mb-20">
      <div className="mx-auto max-w-6xl px-6 sm:px-10">
        <div className="relative peek-fade" style={{ maxHeight: 420, overflow: 'hidden' }}>
          <div className="ds-card overflow-hidden" style={{ padding: 0 }}>
            {/* Window chrome */}
            <div className="flex items-center justify-between px-5 py-3 border-b" style={{ borderColor: 'var(--divider)', background: '#FBFCFE' }}>
              <div className="flex items-center gap-2">
                <span className="h-2.5 w-2.5 rounded-full" style={{ background: '#E5E9EF' }} />
                <span className="h-2.5 w-2.5 rounded-full" style={{ background: '#E5E9EF' }} />
                <span className="h-2.5 w-2.5 rounded-full" style={{ background: '#E5E9EF' }} />
              </div>
              <div className="flex items-center gap-2 text-xs" style={{ color: 'var(--app-fg-subtle)' }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0110 0v4" /></svg>
                <span>counsl.uk</span>
              </div>
              <div style={{ width: 50 }} />
            </div>

            {/* App body */}
            <div className="grid" style={{ gridTemplateColumns: '220px 1fr', minHeight: 360 }}>
              {/* Sidebar (dark, per design system) */}
              <aside className="hidden md:block" style={{ background: '#0b1326', color: '#94A3B8' }}>
                <div className="flex items-center gap-2 px-4 py-4 border-b" style={{ borderColor: 'rgba(255,255,255,0.06)' }}>
                  <span className="status-pulse inline-block h-2 w-2 rounded-full" style={{ background: 'var(--counsl-green)' }} />
                  <span className="font-wordmark font-extrabold text-white text-[17px]" style={{ letterSpacing: '-0.04em' }}>Counsl</span>
                </div>
                <nav className="p-2 text-[13px]">
                  {[
                  { label: 'Dashboard', active: false },
                  { label: 'Cases', active: true },
                  { label: 'Documents', active: false },
                  { label: 'Employees', active: false },
                  { label: 'Settings', active: false }].
                  map((item) =>
                  <div key={item.label} className="relative flex items-center gap-2 rounded-md px-3 py-2"
                  style={{ color: item.active ? '#fff' : '#94A3B8', background: item.active ? '#1a2236' : 'transparent' }}>
                      <span className="h-3.5 w-3.5 rounded-sm" style={{ border: '1.5px solid currentColor', opacity: 0.75 }} />
                      <span>{item.label}</span>
                      {item.active && <span className="absolute right-1 top-1 bottom-1 w-[3px] rounded-full" style={{ background: 'var(--counsl-green)' }} />}
                    </div>
                  )}
                </nav>
              </aside>

              {/* Main */}
              <div className="px-6 py-6" style={{ background: 'var(--app-bg)' }}>
                <h3 className="font-display text-xl" style={{ color: 'var(--app-fg)' }}>Cases</h3>
                <p className="text-xs mt-1" style={{ color: 'var(--app-fg-muted)' }}>5 total</p>
                <div className="mt-5 space-y-2">
                  {PEEK_CASES.map((c, i) => {
                    const s = STATUS_LABEL[c.status];
                    return (
                      <div key={i} className="ds-card flex items-center justify-between gap-4 px-4 py-3" style={{ padding: '0.9rem 1.1rem' }}>
                        <div className="min-w-0">
                          <p className="truncate font-display text-[15px] font-semibold" style={{ color: 'var(--app-fg)' }}>{c.title}</p>
                          <p className="text-xs mt-0.5" style={{ color: 'var(--app-fg-muted)' }}>
                            {c.type} <span style={{ color: 'var(--divider)' }}>·</span> Updated {c.updated}
                          </p>
                        </div>
                        <div className="flex items-center gap-2 flex-shrink-0">
                          {c.urgency === 'urgent' && <Pill tone="red">Urgent</Pill>}
                          {c.urgency === 'time_sensitive' && <Pill tone="amber">Time-sensitive</Pill>}
                          <Pill tone={s.tone}>{s.label}</Pill>
                        </div>
                      </div>);

                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ----------------------------------------------------------------------------
   How it works
---------------------------------------------------------------------------- */

function HowItWorks() {
  const steps = [
  {
    n: '01',
    title: 'Ask in plain English',
    body: 'Describe the situation — in the app, by email or through MS Teams. Type @ to mention a specific employee so AI Counsl links the case to the right person.',
    chip: { tone: 'blue', label: 'Processing' }
  },
  {
    n: '02',
    title: 'AI Counsl does the legwork',
    body: 'AI Counsl reviews the query, gathers every relevant document and pulls the employee file — handing your solicitor a complete brief with all the facts and context.',
    chip: { tone: 'purple', label: 'AI Counsl' }
  },
  {
    n: '03',
    title: 'A solicitor gives the answer',
    body: 'With everything they need in one place, a qualified UK employment solicitor responds quickly and reliably. Escalations become cases; nothing falls between the cracks.',
    chip: { tone: 'green', label: 'Response Ready' }
  }];

  return (
    <section id="how" className="py-20" style={{ background: 'var(--app-bg-inset)', borderTop: '1px solid var(--divider)', borderBottom: '1px solid var(--divider)' }}>
      <div className="mx-auto max-w-6xl px-6 sm:px-10">
        <div className="max-w-2xl">
          <p className="text-xs font-semibold uppercase tracking-[0.14em]" style={{ color: 'var(--app-fg-muted)' }}>How Counsl works</p>
          <h2 className="font-display mt-3 text-4xl sm:text-5xl" style={{ color: 'var(--app-fg)' }}>
            AI does the admin. A <em className="italic" style={{ color: 'var(--app-accent)' }}>solicitor</em> does the answering.
          </h2>
        </div>

        <div className="mt-12 grid gap-5 md:grid-cols-3">
          {steps.map((s) =>
          <div key={s.n} className="ds-card p-6 flex flex-col">
              <div className="flex items-center justify-between">
                <span className="font-display text-2xl" style={{ color: 'var(--app-fg-subtle)' }}>{s.n}</span>
                <Pill tone={s.chip.tone}>{s.chip.label}</Pill>
              </div>
              <h3 className="font-display mt-5 text-xl" style={{ color: 'var(--app-fg)' }}>{s.title}</h3>
              <p className="mt-2 text-sm leading-relaxed" style={{ color: 'var(--app-fg-muted)' }}>{s.body}</p>
            </div>
          )}
        </div>

        {/* quote-style example */}
        <div className="ds-card mt-8 p-6 sm:p-8">
          <p className="text-xs font-medium uppercase tracking-[0.14em]" style={{ color: 'var(--app-fg-muted)' }}>A typical query</p>
          <p className="mt-3 text-base sm:text-lg leading-relaxed" style={{ color: 'var(--app-fg)' }}>
            <span style={{ color: 'var(--app-fg-muted)' }}>e.g.</span> {' '}
            We have a warehouse operative{' '}
            <span style={{ color: 'var(--app-accent)', fontWeight: 500 }}>@Jane Smith</span>{' '}
            who has been late on 6 occasions in the past 3 months. Line manager wants to move to a formal disciplinary — is that proportionate?
          </p>
          <p className="mt-4 text-xs flex flex-wrap items-center gap-x-3 gap-y-1" style={{ color: 'var(--app-fg-subtle)' }}>
            <span>Submitted 2m ago</span>
            <span>·</span>
            <span>Response ready in ~9 minutes</span>
            <span>·</span>
            <span className="inline-flex items-center gap-1">Press <span className="ds-kbd">⌘</span><span className="ds-kbd">↵</span> to send</span>
          </p>
        </div>
      </div>
    </section>);

}

/* ----------------------------------------------------------------------------
   Stats band
---------------------------------------------------------------------------- */

function Stats() {
  const items = [
  { n: '100%', l: 'Solicitor-reviewed' },
  { n: 'MS Teams', l: 'Integration available' },
  { n: 'UK & EU', l: 'Data residency' },
  { n: '20+', l: 'HRIS systems supported' }];

  return (
    <section className="py-14">
      <div className="mx-auto max-w-6xl px-6 sm:px-10">
        <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
          {items.map((i, idx) =>
          <div key={idx} className="flex flex-col">
              <p className="font-display text-3xl sm:text-4xl" style={{ color: 'var(--app-fg)', backgroundColor: "rgba(255, 255, 255, 0)" }}>{i.n}</p>
              <p className="mt-1 text-xs uppercase tracking-[0.14em]" style={{ color: 'var(--app-fg-muted)' }}>{i.l}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ----------------------------------------------------------------------------
   For HR teams / Matter types
---------------------------------------------------------------------------- */

function MatterTypes() {
  const types = [
  'Disciplinary & Grievance',
  'Unfair Dismissal',
  'TUPE',
  'Redundancy',
  'Discrimination',
  'Contracts',
  'Absence',
  'Performance',
  'General'];

  return (
    <section id="for-teams" className="py-20" style={{ background: 'var(--app-bg-inset)', borderTop: '1px solid var(--divider)', borderBottom: '1px solid var(--divider)' }}>
      <div className="mx-auto max-w-6xl px-6 sm:px-10 grid gap-12 md:grid-cols-[1fr,1.2fr]">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.14em]" style={{ color: 'var(--app-fg-muted)' }}>Built for HR</p>
          <h2 className="font-display mt-3 text-4xl sm:text-5xl leading-[1.05]" style={{ color: 'var(--app-fg)' }}>
            The matters you handle, handled.
          </h2>
          <p className="mt-5 text-base leading-relaxed" style={{ color: 'var(--app-fg-muted)' }}>
            From informal lateness chats to contested TUPE transfers — Counsl covers the full spectrum of day-to-day employment law, with a solicitor-reviewed response every time.
          </p>
          <p className="mt-4 text-sm" style={{ color: 'var(--app-fg-subtle)' }}>
            Instruct Counsl from the app, by forwarding an email to{' '}
            <span className="ds-kbd">{'{'}your-org{'}'}@hr.counsl.uk</span>, or straight from MS Teams.
          </p>
        </div>

        <div className="flex flex-wrap gap-2 content-start self-start">
          {types.map((t) =>
          <span key={t}
          className="inline-flex items-center rounded-full px-4 py-2 text-sm"
          style={{ background: 'var(--card-bg)', border: '1px solid var(--card-border)', color: 'var(--app-fg)' }}>
              {t}
            </span>
          )}
        </div>
      </div>
    </section>);

}

/* ----------------------------------------------------------------------------
   Trust / Team
---------------------------------------------------------------------------- */

function Team() {
  return (
    <section id="team" className="py-20">
      <div className="mx-auto max-w-6xl px-6 sm:px-10">
        <div className="grid gap-10 md:grid-cols-[1.2fr,1fr] items-center">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.14em]" style={{ color: 'var(--app-fg-muted)' }}>A real firm. With AI.</p>
            <h2 className="font-display mt-3 text-4xl sm:text-5xl leading-[1.05]" style={{ color: 'var(--app-fg)' }}>
              Counsl will be <em className="italic" style={{ color: 'var(--app-accent)' }}>regulated</em>, not just clever.
            </h2>
            <p className="mt-5 text-base leading-relaxed" style={{ color: 'var(--app-fg-muted)' }}>
              We will be a UK law firm with employment solicitors on staff — AI handles the review and admin so the team can focus their time on the answers, not the legwork. Every response you see will be reviewed and signed off by a qualified solicitor.
            </p>
            <div className="mt-6 flex flex-wrap gap-2">
              <Pill tone="neutral">SRA approval pending</Pill>
              <Pill tone="neutral">UK & EU data residency</Pill>
              <Pill tone="neutral">Encrypted at rest</Pill>
              <Pill tone="neutral">SOC 2 in progress</Pill>
            </div>
          </div>

          <div className="ds-card p-6">
            <div className="flex items-start gap-4">
              <div className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full text-sm font-semibold"
              style={{ background: 'var(--chip-neutral-bg)', color: 'var(--app-fg)' }}>
                RP
              </div>
              <div className="min-w-0">
                <p className="font-display text-base" style={{ color: 'var(--app-fg)' }}>Rachel Pemberton</p>
                <p className="text-xs mt-0.5" style={{ color: 'var(--app-fg-muted)' }}>Solicitor · Employment · 11 yrs PQE</p>
              </div>
              <span className="ml-auto">
                <Pill tone="green">Reviewed by solicitor</Pill>
              </span>
            </div>
            <div className="mt-5 text-sm leading-relaxed" style={{ color: 'var(--app-fg)' }}>
              <p>
                "Yes, moving to a formal disciplinary is proportionate on these facts — you've followed your own attendance policy, given two informal opportunities to improve, and the pattern has continued."
              </p>
              <p className="mt-3" style={{ color: 'var(--app-fg-muted)' }}>
                Reply here if you'd like me to draft the invite letter.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ----------------------------------------------------------------------------
   FAQ
---------------------------------------------------------------------------- */

function FAQ() {
  const faqs = [
  { q: 'When does the waitlist open?',
    a: 'The waitlist will open in spring 2026, with invites rolling out in late 2026. Join the list and we\'ll write personally when a seat opens — priority goes to UK HR teams of 50–500 people.' },
  { q: 'Is this legal advice?',
    a: 'Yes — each response will be reviewed and signed off by a qualified UK employment solicitor at Counsl before it reaches you. AI does the admin; humans do the advising.' },
  { q: 'How do I instruct Counsl?',
    a: 'From the in-app composer, by forwarding emails to {your-org}@hr.counsl.uk, or directly from MS Teams. Whichever channel HR already lives in — Counsl meets you there.' },
  { q: 'Who\'s behind the AI?',
    a: 'The latest AI models, running in European data centres, paired with your org\'s own employee register and uploaded policies. We will continually improve AI Counsl\'s knowledge and workflows to improve Counsl.' },
  { q: 'What about my data?',
    a: 'Your queries, documents and employee data stay inside UK & EU-hosted infrastructure. We don\'t train third-party models on your matters. Full DPA available on request.' }];

  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="py-20" style={{ background: 'var(--app-bg-inset)', borderTop: '1px solid var(--divider)' }}>
      <div className="mx-auto max-w-3xl px-6 sm:px-10">
        <p className="text-xs font-semibold uppercase tracking-[0.14em]" style={{ color: 'var(--app-fg-muted)' }}>Common questions</p>
        <h2 className="font-display mt-3 text-4xl sm:text-5xl" style={{ color: 'var(--app-fg)' }}>Before you sign up.</h2>

        <div className="mt-10 divide-y" style={{ borderColor: 'var(--divider)' }}>
          {faqs.map((f, i) =>
          <div key={i} className="py-5" style={{ borderTop: i === 0 ? '1px solid var(--divider)' : '' }}>
              <button
              onClick={() => setOpen(open === i ? -1 : i)}
              className="flex w-full items-start justify-between gap-6 text-left"
              aria-expanded={open === i}>
                <span className="font-display text-lg" style={{ color: 'var(--app-fg)' }}>{f.q}</span>
                <span className="mt-1 flex-shrink-0 transition-transform" style={{ color: 'var(--app-fg-muted)', transform: open === i ? 'rotate(45deg)' : 'none' }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                </span>
              </button>
              {open === i &&
            <p className="mt-3 text-sm leading-relaxed pr-10" style={{ color: 'var(--app-fg-muted)' }}>{f.a}</p>
            }
            </div>
          )}
          <div style={{ borderTop: '1px solid var(--divider)' }} />
        </div>
      </div>
    </section>);

}

/* ----------------------------------------------------------------------------
   Final CTA + Footer
---------------------------------------------------------------------------- */

function FinalCta({ ctaLabel, onJoin }) {
  return (
    <section className="py-20">
      <div className="mx-auto max-w-5xl px-6 sm:px-10">
        <div className="ds-card p-10 sm:p-14 text-center">
          <LivePill />
          <h2 className="font-display mt-5 text-4xl sm:text-5xl" style={{ color: 'var(--app-fg)' }}>
            Be first in the door.
          </h2>
          <p className="mt-4 text-base sm:text-lg mx-auto max-w-xl" style={{ color: 'var(--app-fg-muted)' }}>
            The Counsl waitlist will open in spring 2026. Check back soon — or drop us a note at <a href="mailto:hello@counsl.uk" style={{ color: 'var(--app-fg)', textDecoration: 'underline', textUnderlineOffset: 3 }}>hello@counsl.uk</a>.
          </p>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="py-10" style={{ borderTop: '1px solid var(--divider)' }}>
      <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 sm:flex-row sm:items-center sm:justify-between sm:px-10">
        <Wordmark size={20} />
        <p className="text-xs" style={{ color: 'var(--app-fg-subtle)' }}>
          © 2026 Counsl · Ability to provide legal advice pending SRA approval.
        </p>
      </div>
    </footer>);

}

/* ----------------------------------------------------------------------------
   Tweaks panel
---------------------------------------------------------------------------- */

function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const set = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    try {window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');} catch (_) {}
  };
  return (
    <div className="tweaks-panel">
      <div className="flex items-center justify-between mb-3">
        <span className="font-display" style={{ fontSize: 15 }}>Tweaks</span>
        <span className="label" style={{ letterSpacing: '0.1em' }}>Live</span>
      </div>

      <div className="mb-3">
        <div className="label mb-1">Headline</div>
        <select value={tweaks.headlineVariant} onChange={(e) => set({ headlineVariant: e.target.value })}>
          <option value="ai_teammate">AI teammate</option>
          <option value="first_answer">First right answer</option>
          <option value="solicitor_signed">Solicitor-signed</option>
        </select>
      </div>

      <div className="mb-3">
        <div className="label mb-1">CTA label</div>
        <select value={tweaks.ctaLabel} onChange={(e) => set({ ctaLabel: e.target.value })}>
          <option>Join the waitlist</option>
          <option>Request access</option>
          <option>Get early access</option>
          <option>Save my seat</option>
        </select>
      </div>

      <label className="flex items-center gap-2 mb-2 text-sm">
        <input type="checkbox" checked={tweaks.showProductPeek} onChange={(e) => set({ showProductPeek: e.target.checked })} />
        Show product peek
      </label>
      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" checked={tweaks.showStats} onChange={(e) => set({ showStats: e.target.checked })} />
        Show stats band
      </label>
    </div>);

}

/* ----------------------------------------------------------------------------
   App
---------------------------------------------------------------------------- */

function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [tweaksVisible, setTweaksVisible] = useState(false);

  useEffect(() => {
    const handler = (e) => {
      const t = e?.data?.type;
      if (t === '__activate_edit_mode') setTweaksVisible(true);
      if (t === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', handler);
    try {window.parent.postMessage({ type: '__edit_mode_available' }, '*');} catch (_) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  const focusWaitlist = () => {
    window.dispatchEvent(new CustomEvent('counsl-focus', { detail: 'focus-waitlist' }));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <div>
      <Nav onJoin={focusWaitlist} />
      <Hero variant={tweaks.headlineVariant} ctaLabel={tweaks.ctaLabel} onJoin={focusWaitlist} />
      {tweaks.showProductPeek && <ProductPeek />}
      <HowItWorks />
      {tweaks.showStats && <Stats />}
      <MatterTypes />
      <Team />
      <FAQ />
      <FinalCta ctaLabel={tweaks.ctaLabel} onJoin={focusWaitlist} />
      <Footer />
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={tweaksVisible} />
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);