/* Lojo — added content sections: ProofBand, Tiers (free vs full), FAQ.
   Copy per the content brief. Colin's voice: short, specific, active, no em dashes. */

// ---------------- Proof band: 3 stats ----------------
function ProofBand() {
  const stats = [
    { n: '94%', d: 'of B2B buyers use AI to research vendors before they talk to sales.', src: 'Chief Outsiders AI Search Report, 2026' },
    { n: '72%', d: 'of AI users make it their primary tool for researching products.', src: 'Capital One Shopping, 2026' },
    { n: '60%', d: 'of Google searches now end without a click to any website.', src: 'Bain & Company, 2025' },
  ];
  return (
    <section className="section" style={{ background: 'var(--navy)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(20px,3vw,44px)' }}>
          {stats.map((s, i) => (
            <div key={i} style={{ textAlign: 'center', position: 'relative',
              borderLeft: i === 0 ? 'none' : '1px solid var(--line)', paddingLeft: i === 0 ? 0 : 'clamp(16px,2vw,28px)' }}>
              <div className="display" style={{ fontSize: 'clamp(46px,6vw,80px)', color: 'var(--accent-deep)', lineHeight: 1, marginBottom: 14 }}>{s.n}</div>
              <p style={{ margin: '0 auto 12px', maxWidth: 280, fontSize: 'clamp(15px,1.5vw,17px)', color: 'var(--fg-muted)', lineHeight: 1.5 }}>{s.d}</p>
              <p className="mono" style={{ margin: 0, fontSize: 11, color: 'var(--fg-subtle)', letterSpacing: '0.03em' }}>{s.src}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Tiers: free vs full ----------------
function Tiers() {
  const toForm = () => document.getElementById('audit')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  const free = [
    'See how AI reads your site right now',
    'A sample report with your top issues',
    'Enough to start improving on your own',
  ];
  const full = [
    'Every finding across your site',
    'Step-by-step fixes for each one',
    'Re-run the analysis as you make changes and watch your AI visibility improve',
  ];
  const Check = ({ on }) => (
    <span style={{ flex: '0 0 auto', marginTop: 2, color: on ? 'var(--accent)' : 'var(--fg-subtle)' }}>
      <Icon name="check" size={17} stroke={2.4} />
    </span>
  );
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead over="What you get" center
          title='Start free.<br>Go deeper when you’re ready.'
          sub="See where you stand at no cost. Upgrade when you want every fix and the ability to track your progress." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'clamp(16px,2.4vw,28px)', maxWidth: 880, margin: '0 auto' }}>
          {/* Free */}
          <div className="card tier-card" style={{ padding: 'clamp(24px,3vw,36px)', display: 'flex', flexDirection: 'column' }}>
            <div className="overline" style={{ marginBottom: 12 }}>Free analysis</div>
            <div className="display" style={{ fontSize: 'clamp(26px,3vw,34px)', marginBottom: 20 }}>$0</div>
            <ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
              {free.map((f) => (
                <li key={f} style={{ display: 'flex', gap: 11, fontSize: 15.5, color: 'var(--fg)', lineHeight: 1.45 }}>
                  <Check on /> {f}
                </li>
              ))}
            </ul>
            <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center' }} onClick={toForm}>Run my free analysis</button>
            <p style={{ margin: '12px 0 0', textAlign: 'center', fontSize: 13, color: 'var(--fg-muted)' }}>
              Want the fixes? <span onClick={toForm} style={{ color: 'var(--accent)', fontWeight: 600, cursor: 'pointer' }}>Unlock the full report</span>
            </p>
          </div>
          {/* Full */}
          <div className="card tier-card" style={{ padding: 'clamp(24px,3vw,36px)', display: 'flex', flexDirection: 'column',
            border: '1px solid var(--accent)', background: 'var(--navy-2)', position: 'relative', boxShadow: 'var(--sh-accent)' }}>
            <div className="overline" style={{ marginBottom: 12 }}>Full version</div>
            <div className="display" style={{ fontSize: 'clamp(26px,3vw,34px)', marginBottom: 20 }}>Everything in the analysis</div>
            <ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
              {full.map((f) => (
                <li key={f} style={{ display: 'flex', gap: 11, fontSize: 15.5, color: 'var(--fg)', lineHeight: 1.45 }}>
                  <Check on /> {f}
                </li>
              ))}
            </ul>
            <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} onClick={toForm}>Unlock the full report</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- FAQ ----------------
const FAQS = [
  { q: 'What does “AI visibility” actually mean?', a: 'When someone asks ChatGPT, Gemini, or Perplexity for a recommendation, those tools name a handful of companies. AI visibility is whether you’re one of them. <span style="color: var(--accent); font-weight: 700;">Lojo</span> shows where you stand and why.' },
  { q: 'How is this different from SEO?', a: 'SEO gets you ranked on a results page so people click through. AI tools skip the results page and name a few companies inside the answer. The old SEO signals barely move them: backlinks, domain authority, and keywords have close to zero influence on what AI recommends.' },
  { q: 'How do AI tools decide who to recommend?', a: 'They lean on how often and how consistently you’re mentioned across the web, how recent that content is, and whether your own site is readable to them. Most cited content is from the last two to three years, and brands mentioned consistently across independent sources get cited far more often.' },
  { q: 'Why wouldn’t AI see my site?', a: 'Usually one of three things: your site blocks AI crawlers, the important content only loads through JavaScript, or your strongest material (research, comparisons, proof) isn’t written in a way AI can pull out. <span style="color: var(--accent); font-weight: 700;">Lojo</span> flags which one is hurting you.' },
  { q: 'Can’t I just ask ChatGPT myself?', a: 'You can, but doing it properly is a lot of work. <span style="color: var(--accent); font-weight: 700;">Lojo</span> runs the relevant queries for your business and kicks off a multi-step process that benchmarks you against your competitors, surfaces the issues, and recommends fixes. We help you turn what you already know about your business into the answers you want, then take it a step further: ready-to-use executables and artifacts your team or agency can act on today to improve your results. You could do it yourself, but it takes serious time. We get you results faster.' },
  { q: 'How long does the Lojo analysis take?', a: 'The analysis returns in a couple of minutes with a sample report covering select issues. Upgrade to the paid version to get the full list of fixes.' },
  { q: 'What’s free and what’s paid?', a: 'Free gives you a sample list of the issues holding back your AI visibility. The paid version turns those into recommended fixes, complete with ready-to-use executables and artifacts you can hand to your team or agency to improve your AI visibility fast.' },
  { q: 'Once I fix things, how fast does AI catch up?', a: 'Faster than SEO. Tools that pull live data, like Perplexity, can pick up changes in one to two weeks. ChatGPT updates on a slower cycle, closer to six to twelve weeks. Models keep shifting, so it’s worth re-running the analysis to track your progress.' },
  { q: 'Is this only for B2B or big brands?', a: 'No. Consumers research with AI before they buy too, across retail, services, and local. If buyers ask AI about your category, this applies to you.' },
];

function FAQItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderTop: '1px solid var(--line)' }}>
      <button onClick={onToggle} aria-expanded={open} style={{
        width: '100%', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '22px 0', color: 'var(--fg)' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(18px,2vw,22px)', fontWeight: 600, letterSpacing: '-0.01em' }}>{q}</span>
        <span style={{ flex: '0 0 auto', color: 'var(--accent-deep)', transition: 'transform .25s var(--ease)', transform: open ? 'rotate(45deg)' : 'none' }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
        </span>
      </button>
      <div style={{ maxHeight: open ? 400 : 0, overflow: 'hidden', transition: 'max-height .35s var(--ease)' }}>
        <p style={{ margin: 0, paddingBottom: 24, maxWidth: 680, fontSize: 16.5, color: 'var(--fg-muted)', lineHeight: 1.6 }} dangerouslySetInnerHTML={{ __html: a }}></p>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead over="FAQ" center
          title='Frequently asked<br>questions.' />
        <div style={{ maxWidth: 820, margin: '0 auto', borderBottom: '1px solid var(--line)' }}>
          {FAQS.map((f, i) => (
            <FAQItem key={i} q={f.q} a={f.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProofBand, Tiers, FAQ });