// Simplified VSL hero: headline → video → big orange CTA → testimonial.
// Qualify modal handles name/email/WNY-veteran/contact-method.

function Nav({ onCTA }) {
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a className="brand">
          <span className="brand-mark">α</span>
          <span className="brand-name">alpha-stim</span>
        </a>
        <nav className="nav-links">
          <a>How it works</a>
          <a>The science</a>
          <a>Reviews</a>
          <a>FAQ</a>
        </nav>
        <div className="nav-cta">
          <a className="nav-link-quiet">Sign in</a>
          <a className="btn btn-accent btn-sm" onClick={onCTA}>See if I qualify <Icon.arrow /></a>
        </div>
      </div>
    </header>
  );
}

function Hero({ headline, sub, onCTA }) {
  const [playing, setPlaying] = React.useState(false);
  return (
    <section className="hero">
      <div className="hero-bg" aria-hidden="true">
        <div className="hero-bg-grad"></div>
        <svg className="hero-wave" viewBox="0 0 1440 120" preserveAspectRatio="none">
          <path d="M0,60 C240,120 480,0 720,60 C960,120 1200,0 1440,60 L1440,120 L0,120 Z" fill="#fff"/>
        </svg>
      </div>

      <div className="container hero-inner">
        <div className="hero-head">
          <div className="hero-logo">
            <img src="homepage/images/alpha-stim-logo.png" alt="Alpha-Stim" />
          </div>

          <div className="hero-badges">
            <FdaBadge />
            <span className="chip hero-chip-light">
              <Icon.shield /> Used by the VA &amp; U.S. Department of Defense
            </span>
          </div>
          <h1 className="hero-h1">{headline}</h1>
          <p className="hero-sub">{sub}</p>
        </div>

        <div className="vsl-stack">
          <div className="vsl-video" onClick={() => setPlaying(true)}>
            <img className="vsl-thumb" src="homepage/images/hero.png" alt="Alpha-Stim video introduction" />
            <div className="vsl-overlay"></div>
            {!playing && (
              <button className="vsl-play" aria-label="Play video">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5 v14 l11-7z"/></svg>
              </button>
            )}
            <div className="vsl-caption">
              <div className="vsl-caption-name">Dr. Daniel Kirsch</div>
              <div className="vsl-caption-role">Founder · 4-minute introduction</div>
            </div>
            <div className="vsl-controls">
              <div className="vsl-bar"><div className="vsl-bar-fill" style={{width: playing ? "32%" : "0%"}}></div></div>
              <span className="vsl-time">{playing ? "1:18" : "0:00"} / 4:02</span>
            </div>
          </div>

          <div className="vsl-cta-wrap">
            <a className="btn btn-accent btn-xl vsl-cta-big" onClick={onCTA}>
              See if I qualify
              <Icon.arrow />
            </a>
            <div className="vsl-cta-meta">
              <Icon.shield /> Prescription only · Takes 2 minutes · No obligation
            </div>
          </div>

          <div className="hero-testimonial">
            <img className="ht-avatar" src="homepage/images/garden.png" alt="" />
            <div className="ht-body">
              <Stars />
              <p className="ht-quote">"First night I slept through in three years. I cried. Six weeks in I started weaning off Lexapro. with my doctor. and I haven't looked back."</p>
              <div className="ht-meta">
                <strong>Sarah K.</strong> · 34, Buffalo NY · Anxiety + insomnia · Verified buyer
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function QualifyModal({ open, onClose }) {
  const [form, setForm] = React.useState({ name: "", email: "", veteran: "", contact: "" });
  const [submitted, setSubmitted] = React.useState(false);
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  // close on ESC
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  if (!open) return null;
  const valid = form.name && form.email.includes("@") && form.veteran && form.contact;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">×</button>

        {submitted ? (
          <div className="modal-success">
            <div className="modal-success-icon"><Icon.check width="32" height="32" /></div>
            <h3>You're in. We'll reach out shortly.</h3>
            <p>A member of our team will contact you within 1 business day via your preferred method. Watch for an email from <strong>care@alpha-stim.com</strong>.</p>
            <button className="btn btn-primary btn-lg" onClick={onClose}>Close</button>
          </div>
        ) : (
          <>
            <div className="modal-head">
              <span className="chip hero-chip-orange"><Icon.shield /> Western NY Veterans Program</span>
              <h3 className="modal-h">See if you qualify.</h3>
              <p className="modal-sub">Takes 2 minutes. We'll confirm eligibility and reach out to walk you through next steps. No obligation, no spam.</p>
            </div>

            <form className="modal-form" onSubmit={(e) => { e.preventDefault(); if (valid) setSubmitted(true); }}>
              <label className="field">
                <span className="field-label">Full name</span>
                <input
                  type="text"
                  value={form.name}
                  onChange={(e) => update("name", e.target.value)}
                  placeholder="Jane Doe"
                  required
                />
              </label>

              <label className="field">
                <span className="field-label">Email</span>
                <input
                  type="email"
                  value={form.email}
                  onChange={(e) => update("email", e.target.value)}
                  placeholder="you@email.com"
                  required
                />
              </label>

              <div className="field">
                <span className="field-label">Are you a Western New York veteran?</span>
                <div className="field-radios">
                  {[
                    ["yes", "Yes, I'm a veteran"],
                    ["active", "Active duty service member"],
                    ["family", "Family member of a veteran"],
                    ["no", "Not a veteran"],
                  ].map(([v, label]) => (
                    <label key={v} className={"radio" + (form.veteran === v ? " checked" : "")}>
                      <input
                        type="radio"
                        name="veteran"
                        value={v}
                        checked={form.veteran === v}
                        onChange={() => update("veteran", v)}
                      />
                      <span>{label}</span>
                    </label>
                  ))}
                </div>
              </div>

              <div className="field">
                <span className="field-label">Best way to reach you?</span>
                <div className="field-radios field-radios-row">
                  {[
                    ["phone", "📞 Phone"],
                    ["email", "📧 Email"],
                    ["text",  "💬 Text"],
                  ].map(([v, label]) => (
                    <label key={v} className={"radio radio-pill" + (form.contact === v ? " checked" : "")}>
                      <input
                        type="radio"
                        name="contact"
                        value={v}
                        checked={form.contact === v}
                        onChange={() => update("contact", v)}
                      />
                      <span>{label}</span>
                    </label>
                  ))}
                </div>
              </div>

              <button type="submit" className="btn btn-accent btn-xl modal-submit" disabled={!valid}>
                Check my eligibility <Icon.arrow />
              </button>
              <div className="modal-fine">
                By submitting, you agree to be contacted about Alpha-Stim. We never share your info.
              </div>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.QualifyModal = QualifyModal;