// Trust bar (logos) + how-it-works + science + comparison sections

function TrustBar() {
  return (
    <section className="trust-bar">
      <div className="container">
        <div className="trust-row">
          <div className="trust-label">Used by:</div>
          <div className="trust-logos">
            {["Mayo Clinic", "Cleveland Clinic", "U.S. Department of Veterans Affairs", "U.S. Military", "Johns Hopkins"].map((n) => (
              <span key={n} className="trust-logo">{n}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "01", t: "Free 15-min consult", d: "Talk to a licensed provider. they'll see if Alpha-Stim is right for you. No obligation." },
    { n: "02", t: "Device ships in 3–5 days", d: "Discreet packaging. Setup takes 90 seconds. We include a quick-start protocol for your condition." },
    { n: "03", t: "Feel relief", d: "Read, work, watch TV. the ear clips are gentle and silent. Most patients feel results in 2–3 weeks." },
  ];
  return (
    <section className="section how">
      <div className="container">
        <div className="how-head">
          <span className="eyebrow">How it works</span>
          <h2 className="how-h2">Drug-free relief, in 3 steps.</h2>
          <p className="lede" style={{ marginTop: 12 }}>
            No appointments, no waiting rooms, no pills. A short daily session you can do anywhere. read, work, watch TV.
          </p>
        </div>

        <div className="how-grid">
          {steps.map((s, i) => (
            <div key={s.n} className="how-step">
              <div className="how-num">{s.n}</div>
              <div className={"how-illus how-illus-" + (i+1)}>
                {i === 0 && (
                  <svg viewBox="0 0 200 150" className="how-svg">
                    <rect x="50" y="20" width="100" height="110" rx="14" fill="#fff" stroke="#1B6478" strokeWidth="2"/>
                    <rect x="62" y="40" width="60" height="14" rx="7" fill="#DCEEF1"/>
                    <rect x="62" y="62" width="76" height="10" rx="5" fill="#DCEEF1"/>
                    <rect x="62" y="78" width="50" height="10" rx="5" fill="#DCEEF1"/>
                    <circle cx="100" cy="115" r="8" fill="#1F8A6E"/>
                    <path d="M30 80 q-10 0 -10 10 v20 q0 10 10 10 h10 v-40 z" fill="#E97F3D"/>
                    <path d="M170 80 q10 0 10 10 v20 q0 10 -10 10 h-10 v-40 z" fill="#E97F3D"/>
                  </svg>
                )}
                {i === 1 && (
                  <svg viewBox="0 0 200 150" className="how-svg">
                    <path d="M40 50 L100 30 L160 50 L160 120 L100 140 L40 120 Z" fill="#fff" stroke="#1B6478" strokeWidth="2"/>
                    <path d="M40 50 L100 70 L160 50" fill="none" stroke="#1B6478" strokeWidth="2"/>
                    <path d="M100 70 L100 140" stroke="#1B6478" strokeWidth="2"/>
                    <rect x="80" y="35" width="40" height="14" fill="#E97F3D"/>
                    <circle cx="100" cy="42" r="3" fill="#fff"/>
                    <path d="M70 90 q30 -8 60 0" stroke="#0F3B47" strokeWidth="2" fill="none" strokeLinecap="round"/>
                  </svg>
                )}
                {i === 2 && (
                  <img className="how-step-img" src="homepage/images/selfie.png" alt="Using Alpha-Stim at home" />
                )}
              </div>
              <h3 className="how-step-t">{s.t}</h3>
              <p className="how-step-d">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Science() {
  return (
    <section className="section science">
      <div className="container science-grid">
        <div>
          <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>The science</span>
          <h2 className="science-h2">CES, simply.</h2>
          <p className="science-lede">
            Cranial Electrotherapy Stimulation sends a microcurrent through gentle ear clips,
            calming overactive brain regions linked to anxiety, sleep, and mood.
          </p>
          <div className="science-stats">
            <div>
              <div className="big-num">140+</div>
              <div className="big-lab">peer-reviewed studies</div>
            </div>
            <div>
              <div className="big-num">40 yrs</div>
              <div className="big-lab">of clinical research</div>
            </div>
            <div>
              <div className="big-num">9/10</div>
              <div className="big-lab">patients get significant relief</div>
            </div>
          </div>
          <a className="science-link">Read the clinical evidence <Icon.arrow /></a>
        </div>
        <div className="science-visual">
          <div className="science-photo-wrap">
            <img className="science-photo-img" src="homepage/images/ear-macro.png" alt="Alpha-Stim ear clip in detail" />
          </div>
          <div className="science-callout">
            <span className="chip chip-warm"><Icon.bolt /> Microcurrent</span>
            <p>Less than what a 9V battery puts out. You feel a gentle pulse. that's it.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Comparison() {
  const rows = [
    ["Drug-free",         "yes", "no",  "yes"],
    ["No side effects",   "yes", "no",  "yes"],
    ["Works in 2–3 weeks","yes", "mid", "no" ],
    ["Use at home",       "yes", "yes", "no" ],
    ["No daily pill",     "yes", "no",  "yes"],
    ["Long-term safe",    "yes", "?",   "yes"],
  ];
  const Cell = ({ v, hl }) => {
    if (v === "yes") return <td className={"vs-cell yes" + (hl ? " hl" : "")}><Icon.check /></td>;
    if (v === "no")  return <td className="vs-cell no"><Icon.no /></td>;
    if (v === "mid") return <td className="vs-cell mid">~</td>;
    return <td className={"vs-cell" + (hl ? " hl" : "")}>{v}</td>;
  };
  return (
    <section className="section vs-section">
      <div className="container">
        <div className="vs-head">
          <span className="eyebrow">Compare</span>
          <h2 className="vs-h2">Why patients are switching from pills.</h2>
          <p className="lede" style={{ marginTop: 12 }}>
            Alpha-Stim is FDA Cleared for anxiety, insomnia, depression, and pain. without the side effects of medication.
          </p>
        </div>
        <div className="vs-table-wrap">
          <table className="vs-table">
            <thead>
              <tr>
                <th></th>
                <th className="vs-us">
                  <span className="vs-brand"><span className="brand-mark" style={{width:24,height:24,fontSize:15}}>α</span> Alpha-Stim</span>
                </th>
                <th>SSRIs / Pills</th>
                <th>Therapy</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td className="vs-rowlab">{r[0]}</td>
                  <Cell v={r[1]} hl />
                  <Cell v={r[2]} />
                  <Cell v={r[3]} />
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="vs-foot">Many patients use Alpha-Stim alongside therapy. the two work better together.</p>
      </div>
    </section>
  );
}

window.TrustBar = TrustBar;
window.HowItWorks = HowItWorks;
window.Science = Science;
window.Comparison = Comparison;