// Testimonials, FAQ, footer

function Testimonials() {
  const reviews = [
    { q: "First night I slept through in three years. I cried.", n: "Sarah K", a: "34, San Diego", c: "Anxiety + insomnia · 8 weeks in", img: "homepage/images/selfie.png", pos: "center 25%" },
    { q: "I'm off Lexapro and I haven't felt this clear in a decade.", n: "Maria G", a: "47, Austin",   c: "Depression · 12 weeks in", img: "homepage/images/garden.png", pos: "center 20%" },
    { q: "I was skeptical. My back pain is just… gone.",            n: "Lin T",  a: "52, Boston",     c: "Chronic pain · 6 weeks in", img: null },
    { q: "It works alongside my therapy. My therapist noticed first.", n: "David W", a: "29, Brooklyn", c: "Anxiety · 4 weeks in", img: null },
  ];
  return (
    <section className="section testimonials">
      <div className="container">
        <div className="t-head">
          <div>
            <span className="eyebrow">Real patients · real results</span>
            <h2 className="t-h2">12,400 reviews. 4.8 stars.</h2>
          </div>
          <div className="t-meta">
            <Stars />
            <div>
              <strong>4.8 / 5</strong> average · <a className="t-link">read all 12,400 reviews</a>
            </div>
          </div>
        </div>
        <div className="t-grid">
          {reviews.map((r, i) => (
            <div key={i} className="t-card">
              <Stars />
              <p className="t-q">"{r.q}"</p>
              <div className="t-meta-row">
                {r.img
                  ? <img className="t-avatar t-avatar-img" src={r.img} alt={r.n} style={{ objectPosition: r.pos }} />
                  : <div className="t-avatar t-avatar-init">{r.n.split(" ").map(s=>s[0]).join("")}</div>}
                <div>
                  <div className="t-name">{r.n}</div>
                  <div className="t-age muted">{r.a}</div>
                  <div className="t-cond">{r.c}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "Do I need a prescription?",
      a: "Yes. Alpha-Stim is FDA Cleared and prescription-only. We make it easy: a free 15-minute consult with a licensed provider, fully online. Most patients are approved same-day." },
    { q: "How long until I feel results?",
      a: "Most patients notice improvement within a few weeks of daily use. Clinical trials show 94% experience meaningful relief by week 5." },
    { q: "Are there side effects?",
      a: "Alpha-Stim is one of the few FDA-Cleared treatments with no known significant side effects. Some patients report mild skin tingling at the ear clips, which fades quickly." },
    { q: "What if it doesn't work for me?",
      a: "Send it back within 30 days for a full refund. no questions asked. We're confident enough in the science to put our money on it." },
    { q: "Can I use it with my current medication?",
      a: "Yes. Alpha-Stim is non-pharmaceutical and works alongside your existing treatment. Many patients use it to gradually reduce or replace medication, with their provider's guidance." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section faq">
      <div className="container faq-grid">
        <div>
          <span className="eyebrow">Common questions</span>
          <h2 className="faq-h2">Everything you're wondering.</h2>
          <p className="lede" style={{ marginTop: 12 }}>
            Still have questions? Our team has helped over 100,000 patients start their treatment.
          </p>
          <a className="btn btn-ghost" style={{ marginTop: 20 }}>Talk to our team <Icon.arrow /></a>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <button key={i} className={"faq-item" + (open === i ? " open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="faq-toggle">{open === i ? "−" : "+"}</span>
              </div>
              {open === i && <div className="faq-a">{it.a}</div>}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onCTA }) {
  return (
    <section className="section-lg final-cta">
      <div className="container final-cta-inner">
        <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>Start today</span>
        <h2 className="final-cta-h2">Pay once. Sleep again.</h2>
        <p className="final-cta-sub">
          One $882 device. 5-year warranty. Drug-free. FDA Cleared. Backed by 40 years of research
          and 12,400 patient reviews. Find out if Alpha-Stim is right for you in 2 minutes.
        </p>
        <div className="final-cta-row">
          <a className="btn btn-accent btn-xl" onClick={onCTA}>See if I qualify <Icon.arrow /></a>
        </div>
        <div className="final-cta-risk">
          <RiskReversal items={[
            "$882 one-time · 5-year warranty",
            "FDA Cleared, drug-free",
            "30-day money-back guarantee",
          ]} />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <div className="brand">
            <span className="brand-mark">α</span>
            <span className="brand-name" style={{color:"#fff"}}>alpha-stim</span>
          </div>
          <p className="footer-tag">FDA Cleared cranial electrotherapy stimulation. Prescribed for anxiety, insomnia, depression, and pain since 1981.</p>
          <FdaBadge />
        </div>
        <div className="footer-cols">
          {[
            ["Product",  ["How it works","The science","Conditions","For clinicians","Pricing"]],
            ["Support",  ["Get a prescription","Book a consult","Contact us","FAQ"]],
            ["Company",  ["About","Research","Press","Careers","Blog"]],
          ].map(([title, links]) => (
            <div key={title} className="footer-col">
              <div className="footer-col-h">{title}</div>
              {links.map(l => <a key={l}>{l}</a>)}
            </div>
          ))}
        </div>
      </div>
      <div className="footer-legal">
        <div className="container footer-legal-inner">
          <div>© Electromedical Products International, Inc. Alpha-Stim is a registered trademark.</div>
          <div className="footer-disc">
            FDA Cleared (Class II) for the treatment of anxiety, insomnia, depression, and pain.
            Prescription required. Individual results may vary. Consult your healthcare provider.
          </div>
        </div>
      </div>
    </footer>
  );
}

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