// Sections part 3: Testimonials, FAQ, Final CTA, Footer

function Testimonials() {
  const featurePhoto = usePexelsOne('woodworker workshop saw');
  const [featured, ...rest] = TESTIMONIALS;

  return (
    <section className="testimonials">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              <span className="dot"></span>Brand-side
            </div>
            <h2 className="section-title">What partners<br/><em>actually say</em>.</h2>
          </div>
          <p className="section-desc">
            We measure success in repeat campaigns. The majority of brands re-up within 90 days of campaign close.
          </p>
        </div>

        <div className="testimonial-grid">
          <div className="testimonial-feature">
            <div>
              <div className="quote-mark">"</div>
              <p className="testimonial-quote">
                NicheBridge found us <em>bow-hunting creators</em> a generic platform couldn't. Our first campaign sold out three SKUs.
              </p>
            </div>
            <div className="testimonial-attribution">
              <div className="attribution-avatar">
                {featurePhoto && <img src={featurePhoto.src} alt={featured.name} />}
              </div>
              <div>
                <div className="attribution-name">{featured.name}</div>
                <div className="attribution-title">{featured.title}</div>
              </div>
            </div>
          </div>

          <div className="testimonial-side">
            {rest.map((t, i) => (
              <div className="testimonial-mini" key={i}>
                <p className="testimonial-mini-quote">"{t.quote}"</p>
                <div className="testimonial-mini-attr">— {t.name}, {t.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              <span className="dot"></span>FAQ
            </div>
            <h2 className="section-title">Quick<br/><em>answers</em>.</h2>
          </div>
          <p className="section-desc">
            Most asked. If yours isn't here, our team replies in under four hours during business days.
          </p>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle">+</span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section className="final-cta" id="contact">
      <div className="wrap">
        <div className="final-cta-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 32, color: 'var(--navy)', opacity: 1 }}>
              <span className="dot" style={{ background: 'var(--navy)' }}></span>Start a campaign
            </div>
            <h2>
              Ready to<br/>
              grow <em>your</em><br/>sales?
            </h2>
            <p style={{ fontSize: '1.1rem', marginTop: 24, maxWidth: '40ch', color: 'rgba(255,255,255,0.95)' }}>
              Tell us a little about your brand. We'll come back with a tier recommendation and a creator slate within two business days.
            </p>
          </div>

          <form className="cta-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
            {submitted ? (
              <div style={{ padding: '40px 0', textAlign: 'center' }}>
                <div className="serif" style={{ fontSize: '2rem', color: 'var(--navy)', marginBottom: 8 }}>Got it.</div>
                <div style={{ color: 'var(--muted)' }}>We'll be in touch within two business days.</div>
              </div>
            ) : (
              <React.Fragment>
                <div className="cta-form-row">
                  <div>
                    <label>Name</label>
                    <input type="text" required placeholder="Your name" />
                  </div>
                  <div>
                    <label>Brand</label>
                    <input type="text" required placeholder="Brand name" />
                  </div>
                </div>
                <div>
                  <label>Work email</label>
                  <input type="email" required placeholder="you@brand.com" />
                </div>
                <div className="cta-form-row">
                  <div>
                    <label>Tier</label>
                    <select defaultValue="scale">
                      <option value="starter">Starter — $10K</option>
                      <option value="scale">Scale — $25K</option>
                      <option value="momentum">Momentum — $50K</option>
                      <option value="flagship">Flagship — $100K</option>
                      <option value="unsure">Not sure yet</option>
                    </select>
                  </div>
                  <div>
                    <label>Niche</label>
                    <select defaultValue="">
                      <option value="" disabled>Select niche</option>
                      {PRIMARY_NICHES.map(n => <option key={n.id}>{n.label}</option>)}
                      <option>Other</option>
                    </select>
                  </div>
                </div>
                <button type="submit" className="btn btn-dark" style={{ marginTop: 8 }}>
                  Send brief <ArrowIcon />
                </button>
              </React.Fragment>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            Niche<em>Bridge</em>.
            <div style={{ fontSize: '0.95rem', fontFamily: 'Inter Tight', marginTop: 16, maxWidth: '38ch', color: 'rgba(244,239,230,0.7)', lineHeight: 1.5 }}>
              Influencer marketing made possible for hobby brands. Find, hire, manage, and track creators who specialize in your industry.
            </div>
          </div>
          <div className="footer-col">
            <h5>Product</h5>
            <a href="#how">How it works</a>
            <a href="#pricing">Pricing</a>
            <a href="#niches">Niches</a>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <a href="#">About</a>
            <a href="#contact">Contact</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="footer-col">
            <h5>Connect</h5>
            <a href="#">LinkedIn</a>
            <a href="#">Instagram</a>
            <a href="#">TikTok</a>
          </div>
        </div>
        <div className="footer-bot">
          <div>© 2026 NicheBridge Inc.</div>
          <div>Made for hobby brands. Powered by creators.</div>
        </div>
      </div>
    </footer>
  );
}

window.Testimonials = Testimonials;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;