/* global React, Icon, useReveal */
const { useState } = React;

/* ── FAQ ───────────────────────────────────────────────────── */
const FAQS = [
  {
    q: 'What does Next Wave actually do?',
    a: 'You give it a product name or a photo. It returns three scores — growth, demand, and momentum — backed by competitive set, pricing, recent metrics from social and search, and a written summary. Average call is under 30 seconds.',
  },
  {
    q: 'Where do the scores come from?',
    a: 'Claude (Sonnet 4.6 for vision and reasoning, Haiku 4.5 for routing). Live signals are pulled by Apify actors that scrape TikTok and Reddit, then hand their output to Claude for summarization. Every score traces back to model output you can inspect.',
  },
  {
    q: 'How do we access it?',
    a: 'Your team gets a private, protected login — no public signup. Sessions are secure and expire automatically, and access can be revoked or rotated at any time.',
  },
  {
    q: 'Is our data private?',
    a: 'Yes. Anything you analyze stays confidential — it is never shared or sold, and reports are kept only in your own history for a limited window. We are glad to operate under your NDA.',
  },
];

function FAQ() {
  const ref = useReveal();
  const [open, setOpen] = useState(0);

  return (
    <section className="section faq" id="faq" ref={ref}>
      <div className="container-wide faq-shell">
        <div className="faq-side">
          <span className="eyebrow"><span className="dot" />FAQ</span>
          <h2 className="heading-l reveal" style={{ marginTop: 18 }}>
            Common <em>questions.</em>
          </h2>
          <p className="muted reveal reveal-delay-1" style={{ marginTop: 16, fontSize: 15, maxWidth: 320 }}>
            Don't see yours? Reach out anytime — happy to walk your team through it.
          </p>
          <div className="faq-side-stats reveal reveal-delay-2">
            <div className="row between">
              <span className="eyebrow">Per report</span>
              <span className="mono">~30s</span>
            </div>
            <div className="row between">
              <span className="eyebrow">Core scores</span>
              <span className="mono">3</span>
            </div>
            <div className="row between">
              <span className="eyebrow">Live sources</span>
              <span className="mono">TikTok · Reddit · web</span>
            </div>
          </div>
        </div>

        <div className="faq-list">
          {FAQS.map((item, i) => (
            <details
              key={item.q}
              className="faq-item"
              open={open === i}
              onToggle={(e) => { if (e.target.open) setOpen(i); }}
            >
              <summary className="faq-q">
                <span className="faq-num mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="faq-q-text">{item.q}</span>
                <span className="faq-toggle">
                  <Icon name={open === i ? 'minus' : 'plus'} size={14} />
                </span>
              </summary>
              <div className="faq-a">{item.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Final CTA + Footer ────────────────────────────────────── */
function CTAFooter() {
  const ref = useReveal();
  const year = new Date().getFullYear();

  return (
    <>
      <section className="section-tight cta" ref={ref}>
        <div className="container-wide">
          <div className="cta-card">
            <div className="cta-card-bg" />
            <div className="cta-card-noise" />

            <div className="cta-card-inner">
              <span className="eyebrow reveal" style={{ color: '#fff8' }}>
                <span className="dot" style={{ background: '#fff' }} />
                Get started
              </span>
              <h2 className="heading-xl cta-h reveal reveal-delay-1">
                Run your <em>first report.</em>
              </h2>
              <p className="cta-sub reveal reveal-delay-2">
                Your first scored report in about thirty seconds.
              </p>
              <div className="row gap reveal reveal-delay-3" style={{ marginTop: 32, flexWrap: 'wrap', justifyContent: 'center' }}>
                <a href="/login" className="btn btn-lg cta-btn-primary">
                  Open the app
                  <Icon name="arrow" size={16} />
                </a>
                <a href="#demo" className="btn btn-lg cta-btn-secondary">
                  <Icon name="play" size={14} />
                  Watch a demo
                </a>
              </div>

              <div className="cta-tick mono">
                <span><Icon name="check" size={12} /> Live in ~30 seconds</span>
                <span><Icon name="check" size={12} /> Every score sourced</span>
                <span><Icon name="check" size={12} /> Your data stays private</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer className="foot">
        <div className="container-wide foot-inner">
          <div className="foot-brand">
            <span className="brand-mark"><span className="brand-dot" /></span>
            <span className="display foot-word">Next Wave</span>
            <span className="mono subtle" style={{ fontSize: 11 }}>v2.6 · {year}</span>
          </div>

          <div className="foot-cols">
            <div className="foot-col">
              <div className="eyebrow">Product</div>
              <a href="#demo">Live demo</a>
              <a href="#scorecard">Scorecard</a>
              <a href="#trends">Live trends</a>
              <a href="#how">How it works</a>
            </div>
            <div className="foot-col">
              <div className="eyebrow">Company</div>
              <a href="#faq">FAQ</a>
              <a href="mailto:cinarozkan@outlook.com.tr">Contact</a>
              <a href="privacy.html">Privacy</a>
              <a href="terms.html">Terms</a>
            </div>
            <div className="foot-col">
              <div className="eyebrow">Powered by</div>
              <span className="mono">Claude Sonnet 4.6</span>
              <span className="mono">Next.js 16</span>
              <span className="mono">Upstash + Apify</span>
              <span className="mono">Vercel</span>
            </div>
          </div>
        </div>

        <div className="foot-rule" />

        <div className="container-wide foot-bot">
          <span className="mono subtle" style={{ fontSize: 11 }}>
            © {year} The CB Studio · <a href="mailto:cinarozkan@outlook.com.tr" style={{ color: 'inherit' }}>cinarozkan@outlook.com.tr</a>
          </span>
          <span className="mono subtle" style={{ fontSize: 11 }}>
            All scores are model output. Not financial advice.
          </span>
        </div>

        {/* Giant brand watermark */}
        <div className="foot-watermark display" aria-hidden="true">Next Wave</div>
      </footer>
    </>
  );
}

window.FAQ = FAQ;
window.CTAFooter = CTAFooter;