/* v2/bottom-v2.jsx — Compare, Pricing, FAQ, CTA, Footer */

const CompareV2 = () => {
  const logoRow = (items) => (
    <span style={{display:'inline-flex', gap:8, alignItems:'center', flexWrap:'wrap'}}>
      {items.map((It, i) => <It key={i} size={20} bg="transparent" pad={0} rounded={4}/>)}
    </span>
  );
  const rows = [
    { cat: 'Continuous AI visibility tracking',
      ae: {logos: [ChatGPT, Claude, Perplexity, Gemini, Grok, Copilot], yes: true, bold: true},
      aeo: {txt: 'Most', yes: true},
      seo: {txt: 'Add-on / missing', yes: false},
      listen: {txt: 'Limited', yes: true} },
    { cat: 'External citation publishing',
      ae: {logos: [Reddit, Quora, XLogo, Substack, PressLogo], yes: true, bold: true},
      aeo: {txt: 'None', yes: false},
      seo: {txt: 'None', yes: false},
      listen: {txt: 'None', yes: false} },
    { cat: 'Community-first strategy',
      ae: {txt: 'Yes — primary channel', yes: true, bold: true},
      aeo: {txt: 'No', yes: false},
      seo: {txt: 'No', yes: false},
      listen: {txt: 'Detection only', yes: false} },
    { cat: 'Content production',
      ae: {txt: 'Content creation & posting', yes: true},
      aeo: {txt: 'AI drafts for your site', yes: false},
      seo: {txt: 'Your team writes', yes: false},
      listen: {txt: 'None', yes: false} },
    { cat: 'Competitor answer intelligence',
      ae: {txt: 'Full model + source visibility', yes: true},
      aeo: {txt: 'Partial', yes: true},
      seo: {txt: 'SERP-only', yes: false},
      listen: {txt: 'Mention counts', yes: true} },
    { cat: 'Outcome guarantee',
      ae: {txt: 'Share-of-voice SLA', yes: true, bold: true},
      aeo: {txt: 'None', yes: false},
      seo: {txt: 'None', yes: false},
      listen: {txt: 'None', yes: false} },
  ];
  const Cell = ({c, us}) => (
    <td className={us ? 'us' : ''}>
      {c.logos
        ? logoRow(c.logos)
        : <><span className={c.yes ? 'dot-yes' : 'dot-no'}/><span style={{fontWeight: c.bold ? 600 : 500}}>{c.txt}</span></>}
    </td>
  );
  return (
    <section className="section" id="compare" style={{background:'var(--bg-soft)'}}>
      <div className="wrap">
        <div className="center-stack reveal">
          <span className="eyebrow">Competitive positioning</span>
          <h2 className="display-md" style={{margin: '24px 0px 46.48px'}}>
            The only platform that <span className="grad-text">publishes</span>, not just tracks.
          </h2>
          <p className="lede" style={{margin:'20px auto 0'}}>
            Thirteen tools surveyed. None publish across external third-party
            platforms. That's the moat — and exactly where AI citations come from.
          </p>
        </div>
        <div className="cmp-v2">
          <table>
            <thead>
              <tr>
                <th style={{width:'26%'}}>Capability</th>
                <th className="us"><span className="ae-wordmark ae-wordmark-black" role="img" aria-label="AnswerExposure"/></th>
                <th>AEO platforms<small>LLMPulse, RankPrompt</small></th>
                <th>SEO tools<small>Surfer, Frase</small></th>
                <th>Listening tools<small>Brand24, Mention</small></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} className={"reveal reveal-fast delay-f-" + Math.min(i, 11)}>
                  <td className="row-label">{r.cat}</td>
                  <Cell c={r.ae} us={true}/>
                  <Cell c={r.aeo}/>
                  <Cell c={r.seo}/>
                  <Cell c={r.listen}/>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="mono" style={{fontFamily:'Inter', marginTop:20, textAlign:'center', color:'var(--muted)', fontSize:12}}>
          Based on publicly available feature sets · updated Apr 2026
        </div>
      </div>
    </section>
  );
};

const PricingV2 = () => {
  const [cycle, setCycle] = React.useState('monthly');
  const fmt = (n) => '$' + n.toLocaleString();
  const price = (m) => cycle === 'monthly' ? fmt(m) : fmt(Math.round(m * 0.8));

  const plans = [
    {
      name: 'Growth',
      monthly: 295,
      desc: 'Build a baseline of AI visibility and start appearing in answers.',
      features: [
        '20 brand mentions published/mo',
        '1 brand tracked, 50 keywords',
        'ChatGPT, Gemini, Perplexity',
        'Reddit, press, X, Substack, blogs',
        'Full AI brand audit',
        'Fully automated delivery',
      ],
    },
    {
      name: 'Scale',
      monthly: 595,
      desc: 'Drive high-intent AI traffic across every major engine.',
      badge: 'Most Popular',
      featured: true,
      features: [
        '45 brand mentions published/mo',
        '3 brands tracked, 150 keywords',
        'All 6 engines incl. Google AI Mode',
        'Reddit, press, X, Substack, blogs',
        'Google Search results tracked',
        'Full AI brand audit',
        'Fully automated delivery',
      ],
    },
    {
      name: 'Authority',
      monthly: 1195,
      desc: 'Dominate AI recommendations across your entire category.',
      features: [
        '90 brand mentions published/mo',
        '6 brands tracked, 300 keywords',
        'All 6 engines incl. Google AI Mode',
        'Reddit, press, X, Substack, blogs',
        'Premium PR: Yahoo Finance, AP News',
        'Google Search results tracked',
        'Full AI brand audit',
        'Fully automated delivery',
      ],
    },
  ];

  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="center-stack reveal">
          <span className="eyebrow">Pricing</span>
          <h2 className="display-md" style={{margin: '24px 0px 46.48px'}}>
            Tracking is $99/mo.<br/>
            <span className="grad-text">Fixing it</span> starts at $295.
          </h2>
          <p className="lede" style={{margin:'20px auto 0'}}>
            All plans include automated management. Brand mentions are published
            on your behalf across external platforms. No contracts, cancel
            anytime.
          </p>
          <div className="bill-toggle" role="tablist" aria-label="Billing cycle">
            <button role="tab" aria-selected={cycle==='monthly'}
              className={"bt " + (cycle==='monthly' ? 'active' : '')}
              onClick={() => setCycle('monthly')}>Monthly</button>
            <button role="tab" aria-selected={cycle==='annual'}
              className={"bt " + (cycle==='annual' ? 'active' : '')}
              onClick={() => setCycle('annual')}>
              Annually <span className="save">SAVE 20%</span>
            </button>
          </div>
        </div>

        <div className="pricing-v2">
          {plans.map((p, i) => (
            <div key={i} className={"plan-v2 reveal delay-" + Math.min(i+1, 6) + " " + (p.featured ? 'featured' : '')}>
              <div>
                <div className="p-name">
                  {p.name}
                  {p.badge && <span className="p-badge">{p.badge}</span>}
                </div>
                <div className="p-desc" style={{marginTop: 6}}>{p.desc}</div>
              </div>

              <div>
                <div className="p-price">{price(p.monthly)}<span className="per">/mo</span></div>
                <div className="p-billed" style={{fontFamily:'Inter'}}>{cycle === 'monthly' ? 'Billed monthly' : 'Billed annually · 20% off'}</div>
              </div>

              <ul>
                {p.features.map((f, j) => (
                  <li key={j}>
                    <span className="check">
                      <CheckIcon size={10} color={p.featured ? '#fff' : 'var(--violet)'}/>
                    </span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <a href="#cta" className={"btn " + (p.featured ? "btn-on-dark" : "btn-primary") + " plan-cta"}>
                Start free trial
                <ArrowRight size={14}/>
              </a>
            </div>
          ))}
        </div>

        <div className="extras-list-v2 reveal">
          <div className="extra-row-v2">
            <div className="extra-row-main">
              <h4>Free Trial <span className="extra-price-v2 free">$0</span></h4>
              <p>Check your AI visibility free. 1 brand, 5 keywords, 3 AI platforms tracked.</p>
            </div>
            <a href="#" className="btn btn-ghost btn-sm extra-row-cta">Start Free Trial <ArrowRight size={12}/></a>
          </div>
          <div className="extra-row-v2">
            <div className="extra-row-main">
              <h4>Tracking Only <span className="extra-price-v2">$99/mo</span></h4>
              <p>Monitor your brand across 6 AI engines in real-time. No publishing included.</p>
            </div>
            <a href="#" className="btn btn-ghost btn-sm extra-row-cta">Start Tracking <ArrowRight size={12}/></a>
          </div>
          <div className="extra-row-v2">
            <div className="extra-row-main">
              <h4>AEO Blog Posts <span className="extra-price-v2 addon">$99/mo · Add-on</span></h4>
              <p>Daily AI-written posts published to your site, optimized for AI visibility.</p>
            </div>
            <a href="#" className="btn btn-ghost btn-sm extra-row-cta">Add to any plan <ArrowRight size={12}/></a>
          </div>
        </div>

        <div className="pricing-inline-cta-v2">
          Not sure which plan?{' '}
          <a
            href="#check-visibility"
            onClick={() => window.dispatchEvent(new CustomEvent('highlight-check-visibility'))}
          >
            Check your AI visibility for free →
          </a>
        </div>
      </div>
    </section>
  );
};

const FAQV2 = () => {
  const items = [
    { cat:'Approach', q:'How is this different from Surfer SEO or Frase?',
      a:'Surfer and Frase optimize content on your own website. They don\u2019t publish externally. AnswerExposure places citations on the sources AI platforms actually read: Reddit, Quora, press, Substack and authority blogs. That is what actually changes how ChatGPT and Claude answer questions about you.'},
    { cat:'Approach', q:'Isn\u2019t Reddit hostile to brand content?',
      a:'Reddit is hostile to spam, not to practitioners. Our editorial team is made up of real operators who post with real accounts, authentic experience and long-term reputation. We don\u2019t shill \u2014 we contribute. That\u2019s why the citations compound.'},
    { cat:'Results', q:'How fast will we see results?',
      a:'Most clients see their first new AI citations within 30 days. Share-of-voice shifts meaningfully in 60\u201390 days depending on query competitiveness and AI platform refresh cadence.'},
    { cat:'Results', q:'Do you guarantee rankings?',
      a:'On the Growth and Enterprise plans we guarantee a share-of-voice uplift against a defined query basket within 90 days, or we work for free until we hit it.'},
    { cat:'Onboarding', q:'What data do you need from us to start?',
      a:'A short onboarding call covering ICP, top 10 competitors, differentiators and any existing content. We build the query set, benchmark current visibility and ship the first editorial calendar within the first week.'},
    { cat:'Billing', q:'Can we cancel any time?',
      a:'We operate on quarterly commitments so published citations have time to compound. Billing is monthly. Most campaigns stay on for 12+ months because the content keeps earning.'},
    { cat:'Approach', q:'Which AI engines do you optimize for?',
      a:'ChatGPT, Claude, Perplexity, Gemini (incl. Google AI Mode and AI Overviews) and Grok. We track citations across all six and tune editorial accordingly.'},
    { cat:'Onboarding', q:'Do we need to write any content ourselves?',
      a:'No. The full editorial workflow \u2014 research, drafting, publishing, account management and reporting \u2014 is run by our team. You review and approve. That\u2019s the whole lift.'},
    { cat:'Billing', q:'Is the AEO Blog Posts add-on required?',
      a:'No, it\u2019s optional. The core retainer covers external citation work. The blog add-on adds daily AI-written posts published to your own site, optimised for AI visibility.'},
    { cat:'Results', q:'How do you measure success?',
      a:'Three metrics: share-of-voice across tracked queries, brand citation count per engine, and qualified inbound attributed to AI traffic. Reported weekly, reviewed monthly.'},
  ];
  const [q, setQ] = React.useState('');
  const [open, setOpen] = React.useState(-1);
  const norm = s => s.toLowerCase();
  const filtered = q.trim() ? items.filter(i => norm(i.q+' '+i.a+' '+i.cat).includes(norm(q.trim()))) : items;
  const left = filtered.filter((_,i)=>i%2===0);
  const right = filtered.filter((_,i)=>i%2===1);
  const renderCol = (col, offset) => col.map((f,i) => {
    const realIdx = offset + i*2;
    return (
      <div key={f.q} className={"reveal reveal-fast delay-f-" + Math.min(i, 11)}>
      <div className={"faq-item-v2 " + (open===realIdx ? 'open' : '')} onClick={()=>setOpen(open===realIdx ? -1 : realIdx)}>
        <div className="faq-q">
          <div>
            <h4 style={{margin:'4px 0 0', fontFamily:'var(--font-display)', fontSize:17, fontWeight:600, letterSpacing:'-0.02em', color:'var(--ink)', lineHeight:1.3}}>{f.q}</h4>
          </div>
          <span className="faq-caret">
            <svg width="11" height="11" viewBox="0 0 14 14" fill="none">
              <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </span>
        </div>
        <div className="faq-a"><p style={{margin:0}}>{f.a}</p></div>
      </div>
      </div>
    );
  });
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="faq-header-v2">
          <div>
            <span className="eyebrow">FAQ</span>
            <h2 className="display-md" style={{marginTop:10}}>Questions, answered.</h2>
          </div>
        </div>
        <div className="faq-search-v2">
          <svg width="15" height="15" viewBox="0 0 16 16" fill="none">
            <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.5"/>
            <path d="M11 11l3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
          <input type="text" placeholder="Search questions…" value={q} onChange={e=>setQ(e.target.value)}/>
          {q && <button className="faq-clear-v2" onClick={()=>setQ('')} aria-label="Clear">×</button>}
          <button type="button" className="faq-search-btn" aria-label="Search">Search</button>
        </div>
        {filtered.length===0 ? (
          <div className="faq-empty-v2">
            <p>No answers match \u201c{q}\u201d.</p>
            <p style={{marginTop:8, fontSize:14, color:'var(--muted)'}}>Try a different keyword, or <a href="#cta" style={{color:'var(--violet)'}}>book a call</a>.</p>
          </div>
        ) : (
          <div className="faq-cols-v2">
            <div className="faq-col-v2">{renderCol(left,0)}</div>
            <div className="faq-col-v2">{renderCol(right,1)}</div>
          </div>
        )}
      </div>
    </section>
  );
};

const CTAV2 = () => (
  <section className="cta-v2" id="cta">
    <div className="wrap">
      <div className="center-stack reveal">
        <div className="cta-trust">
          <div className="cta-avatars">
            <span className="cta-av"><img src="/v2-assets/avatars/user-1.png" alt="" loading="lazy"/></span>
            <span className="cta-av"><img src="/v2-assets/avatars/user-2.png" alt="" loading="lazy"/></span>
            <span className="cta-av"><img src="/v2-assets/avatars/user-3.jpg" alt="" loading="lazy"/></span>
            <span className="cta-av"><img src="/v2-assets/avatars/user-4.png" alt="" loading="lazy"/></span>
            <span className="cta-av"><img src="/v2-assets/avatars/user-5.png" alt="" loading="lazy"/></span>
          </div>
          <div className="cta-stars" aria-hidden>
            <StarIcon/><StarIcon/><StarIcon/><StarIcon/><StarIcon/>
          </div>
          <span className="cta-trust-text">Joined by 500+ forward-thinking brands</span>
        </div>
        <h2 className="display-lg" style={{color:'#fff', margin: '30px 0px 20px'}}>
          Stop being invisible<br/>
          in AI answers.
        </h2>
        <p className="lede" style={{margin:'24px auto 40px', color:'rgba(255,255,255,0.75)'}}>
          Run a free visibility audit. See exactly which queries ignore your
          brand, and which competitors AI is recommending instead.
        </p>
        <div style={{display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap'}}>
          <a href="https://account.answerexposure.com/signup/" className="btn btn-on-dark btn-lg">
            Start Your Free 14-Day Trial
            <ArrowRight size={14} className="arrow"/>
          </a>
          <a
            href="#check-visibility"
            className="btn btn-ghost btn-lg cta-ghost-on-dark"
            style={{color:'#fff', borderColor:'rgba(255,255,255,0.25)'}}
            onClick={() => window.dispatchEvent(new CustomEvent('highlight-check-visibility'))}
          >
            Get Free AI Visibility Audit
          </a>
        </div>
        <div className="cta-fineprint">
          No credit card required · No contracts · Cancel anytime
        </div>
      </div>
    </div>
  </section>
);

const StarIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M8 1.5l2 4.2 4.5.6-3.3 3.1.8 4.5L8 11.8 3.9 13.9l.8-4.5L1.5 6.3l4.5-.6z" fill="#FFC83D"/>
  </svg>
);

const FooterV2 = () => (
  <footer className="footer-v2">
    <div className="wrap">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="fb-logo">
            <span className="ae-wordmark ae-wordmark-light nav-logo-svg" role="img" aria-label="AnswerExposure"/>
          </div>
          <p>The done-for-you Answer Engine Optimization platform. Get recommended by ChatGPT, Claude, Perplexity, Gemini and Google AI.</p>
        </div>
        <div className="footer-col">
          <h5>Product</h5>
          <ul>
            <li><a href="#how">How it works</a></li>
            <li><a href="#platforms">Platforms</a></li>
            <li><a href="#showcase">Dashboard</a></li>
            <li><a href="#pricing">Pricing</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Press kit</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Resources</h5>
          <ul>
            <li><a href="#">AEO playbook</a></li>
            <li><a href="#">Benchmarks</a></li>
            <li><a href="#">Case studies</a></li>
            <li><a href="#">Changelog</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Legal</h5>
          <ul>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Security</a></li>
            <li><a href="#">DPA</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 AnswerExposure, Inc.</div>
        <div className="footer-socials" style={{display:'flex', gap:10, alignItems:'center'}}>
          <a href="#" aria-label="LinkedIn" className="footer-social">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.27 2.38 4.27 5.47v6.27zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/>
            </svg>
          </a>
          <a href="#" aria-label="X (Twitter)" className="footer-social">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
            </svg>
          </a>
          <a href="#" aria-label="Facebook" className="footer-social">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.12 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { CompareV2, PricingV2, FAQV2, CTAV2, FooterV2 });