/* global React, Icon */
// Social proof + FAQ + Final CTA

const Quotes = () => {
  const quotes = [
    {
      stars: '★★★★★',
      body: '3-hour prep is now 20 minutes. Showed up to my last live with 50% more inventory and still had time to eat dinner.',
      name: 'Marcus T.',
      handle: '@marckicks',
      sales: '4.2K sold',
      initials: 'MT',
    },
    {
      stars: '★★★★★',
      body: "The sell scripts alone are worth it. I never freeze on live anymore. The fun facts have legit doubled my chat engagement.",
      name: 'Dre L.',
      handle: '@solesnareddre',
      sales: '1.8K sold',
      initials: 'DL',
    },
    {
      stars: '★★★★★',
      body: 'Bought a lot of 200 pairs blind. Scanned the whole pile in an afternoon. Cost match told me which ones to flip on Whatnot vs hold for StockX.',
      name: 'Jess R.',
      handle: '@jrkicks',
      sales: '6.7K sold',
      initials: 'JR',
    },
  ];

  return (
    <section style={{ padding: '120px 0', background: 'var(--bg-deep)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, gap: 32, flexWrap: 'wrap' }}>
          <div>
            <span className="section-label"><span className="dot"></span>05 / In the wild</span>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '20px 0 0' }}>
              From the<br/>beta group.
            </h2>
          </div>
          <div className="mono upper" style={{ fontSize: 11, color: 'var(--muted-fg)', letterSpacing: '0.08em', textAlign: 'right' }}>
            32 active testers<br/>
            <span style={{ color: 'var(--brand)' }}>+12K pairs scanned</span>
          </div>
        </div>

        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {quotes.map((q, i) => (
            <div key={i} className="quote-card">
              <div className="stars">{q.stars}</div>
              <blockquote>"{q.body}"</blockquote>
              <div className="by">
                <div className="avatar">{q.initials}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{q.name}</div>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--muted-fg)' }}>
                    {q.handle} · {q.sales}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- FAQ ----------
const FAQS = [
  {
    q: 'Do I need to download an app?',
    a: 'No. KickScanner runs in your browser — phone or laptop. Just open the link.',
  },
  {
    q: 'Does it work for non-Whatnot platforms?',
    a: 'Whatnot CSV export today. TikTok Shop, eBay, and StockX export are next on the roadmap.',
  },
  {
    q: 'How accurate is the AI identification?',
    a: 'It tells you. Every scan gets a confidence score. Low or medium confidence? One tap to re-scan with a hint, and we lean on your input.',
  },
  {
    q: 'Where does the pricing come from?',
    a: 'Live StockX and GOAT data, refreshed within the last 7 days. We default to the lowest comp across sources to keep you safe.',
  },
  {
    q: 'What does it cost?',
    a: "We're working with early sellers on pricing. Reach out — if you run shows regularly we'll get you in.",
  },
];

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ padding: '120px 0' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'flex-start' }} className="grid-2">
          <div>
            <span className="section-label"><span className="dot"></span>06 / FAQ</span>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '20px 0 0' }}>
              Common<br/>questions.
            </h2>
          </div>
          <div>
            {FAQS.map((f, i) => (
              <div key={i} className={'faq-item' + (open === i ? ' open' : '')} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{f.q}</span>
                  <span className="faq-toggle">{open === i ? '−' : '+'}</span>
                </div>
                {open === i && <div className="faq-a">{f.a}</div>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Final CTA ----------
const FinalCTA = () => {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSubmitted(true);
    try {
      await fetch('/api/request-access', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, source: 'cta' }),
      });
    } catch (err) {
      console.error('signup failed', err);
    }
  };

  return (
    <section id="cta" style={{ padding: '140px 0 120px', position: 'relative', overflow: 'hidden' }}>
      {/* Big lime gradient backdrop block */}
      <div style={{
        position: 'absolute', inset: '0 0 0 0',
        background: `radial-gradient(ellipse at 50% 100%, oklch(0.963 0.166 113.862 / 0.18) 0%, transparent 60%)`,
        pointerEvents: 'none',
      }}></div>
      <div className="bg-grid" style={{
        position: 'absolute', inset: 0, opacity: 0.3,
        maskImage: 'radial-gradient(ellipse at 50% 50%, black 20%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 50%, black 20%, transparent 70%)',
      }}></div>

      <div className="wrap" style={{ position: 'relative', textAlign: 'center' }}>
        <span className="section-label" style={{ justifyContent: 'center' }}>
          <span className="dot"></span>
          07 / Last thing
        </span>
        <h2 className="display" style={{
          fontSize: 'clamp(56px, 9vw, 144px)',
          margin: '32px auto 0',
          maxWidth: '14ch',
        }}>
          Stop prepping.<br/>
          <span className="display-italic" style={{ color: 'var(--brand)' }}>Start selling.</span>
        </h2>

        <form onSubmit={submit} style={{
          marginTop: 48, maxWidth: 540, marginInline: 'auto',
        }}>
          <div style={{ display: 'flex', gap: 8 }}>
            <input
              type="email"
              className="input"
              placeholder="your@email.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={submitted}
              required
            />
            <button type="submit" className="btn btn-primary btn-lg" disabled={submitted}>
              {submitted ? <>You're in <Icon name="check" size={16}/></> : <>Request access <Icon name="arrow-right" size={16}/></>}
            </button>
          </div>
          <div style={{ marginTop: 14, fontSize: 13, color: 'var(--muted-fg)' }}>
            We'll get back within 48 hours. No drip campaigns, no spam.
          </div>
        </form>
      </div>
    </section>
  );
};

Object.assign(window, { Quotes, FAQ, FinalCTA });