// Cost comparison + educational narrative sections

function CostCompare({ onCTA }) {
  // 5 years of cost projection
  const years = [1, 2, 3, 4, 5];
  const stimCost = 882;
  const medMonthly = 40;
  return (
    <section className="section cost">
      <div className="container">
        <div className="cost-head">
          <span className="eyebrow">The math nobody shows you</span>
          <h2 className="cost-h2">Pay once. Or pay forever.</h2>
          <p className="lede" style={{ marginTop: 12, marginInline: "auto", textAlign: "center", maxWidth: "60ch" }}>
            Alpha-Stim is a one-time $882 with a 5-year warranty. Most psychiatric medications are $40+ per month. for life.
          </p>
        </div>

        <div className="cost-grid">
          <div className="cost-card cost-card-us">
            <div className="cost-card-tag">Alpha-Stim</div>
            <div className="cost-price">
              <span className="cost-amount">$882</span>
              <span className="cost-period">one-time</span>
            </div>
            <ul className="cost-list">
              <li><Icon.check /> 5-year manufacturer warranty</li>
              <li><Icon.check /> No prescription refills</li>
              <li><Icon.check /> No doctor visits required after setup</li>
              <li><Icon.check /> 30-day money-back guarantee</li>
            </ul>
            <div className="cost-foot">
              <div className="cost-foot-label">5-year total</div>
              <div className="cost-foot-num">$882</div>
            </div>
          </div>

          <div className="cost-vs">vs</div>

          <div className="cost-card cost-card-them">
            <div className="cost-card-tag muted">Daily medication</div>
            <div className="cost-price">
              <span className="cost-amount">$40</span>
              <span className="cost-period">every month</span>
            </div>
            <ul className="cost-list">
              <li><Icon.no /> Recurring monthly script</li>
              <li><Icon.no /> Quarterly doctor visits ($75-200 each)</li>
              <li><Icon.no /> Side effects: weight, sleep, libido, fog</li>
              <li><Icon.no /> Withdrawal if you stop</li>
              <li><Icon.no /> Tolerance often grows over years</li>
            </ul>
            <div className="cost-foot cost-foot-warn">
              <div className="cost-foot-label">5-year total</div>
              <div className="cost-foot-num">$2,400+</div>
            </div>
          </div>
        </div>

        <div className="cost-chart">
          <div className="cost-chart-h">
            Cumulative cost · over 5 years
          </div>
          <svg viewBox="0 0 600 240" className="cost-svg" preserveAspectRatio="none">
            {/* gridlines */}
            {[0, 1, 2, 3, 4].map(i => (
              <line key={i} x1="40" x2="580" y1={40 + i * 40} y2={40 + i * 40} stroke="#E4E2DA" strokeWidth="1" />
            ))}
            {/* y-axis labels */}
            {[2400, 1800, 1200, 600, 0].map((v, i) => (
              <text key={v} x="32" y={48 + i * 40} fontSize="11" fill="#5E6E76" textAnchor="end" fontFamily="Inter">${v}</text>
            ))}
            {/* x-axis labels */}
            {years.map((y, i) => (
              <text key={y} x={80 + i * 120} y="220" fontSize="12" fill="#5E6E76" textAnchor="middle" fontFamily="Inter" fontWeight="600">Year {y}</text>
            ))}
            {/* meds line */}
            <polyline
              points={years.map((y, i) => `${80 + i * 120},${200 - (medMonthly * 12 * y) / 2400 * 160}`).join(" ")}
              fill="none" stroke="#C0392B" strokeWidth="3" strokeLinecap="round"
            />
            {/* meds area */}
            <polygon
              points={`80,200 ${years.map((y, i) => `${80 + i * 120},${200 - (medMonthly * 12 * y) / 2400 * 160}`).join(" ")} 560,200`}
              fill="#C0392B" fillOpacity="0.1"
            />
            {years.map((y, i) => (
              <circle key={y} cx={80 + i * 120} cy={200 - (medMonthly * 12 * y) / 2400 * 160} r="4" fill="#C0392B" />
            ))}
            <text x="560" y={200 - (medMonthly * 12 * 5) / 2400 * 160 - 12} fontSize="12" fill="#C0392B" textAnchor="end" fontWeight="700" fontFamily="Inter">Meds: $2,400</text>

            {/* alpha-stim line. flat after year 1 */}
            <polyline
              points={`80,${200 - 882/2400*160} 200,${200 - 882/2400*160} 320,${200 - 882/2400*160} 440,${200 - 882/2400*160} 560,${200 - 882/2400*160}`}
              fill="none" stroke="#1B6478" strokeWidth="3" strokeLinecap="round"
            />
            {years.map((y, i) => (
              <circle key={y} cx={80 + i * 120} cy={200 - 882/2400*160} r="4" fill="#1B6478" />
            ))}
            <text x="80" y={200 - 882/2400*160 - 12} fontSize="12" fill="#1B6478" fontWeight="700" fontFamily="Inter">Alpha-Stim: $882 (one-time)</text>
          </svg>
        </div>

        <div className="cost-savings">
          <div>
            <div className="cost-savings-num">$1,518</div>
            <div className="cost-savings-label">saved in 5 years</div>
          </div>
          <div className="cost-savings-cta">
            <a className="btn btn-accent btn-lg" onClick={onCTA}>See if I qualify <Icon.arrow /></a>
            <div className="cost-savings-fine">Prescription only · 30-day money-back guarantee</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Problem → Agitate → Solution storyline
function ProblemSolve() {
  return (
    <section className="section problem">
      <div className="container">
        <div className="problem-grid">
          <div className="problem-side">
            <span className="eyebrow">Why this exists</span>
            <h2 className="problem-h2">Pills weren't built for nervous-system disorders.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Most psychiatric medications were discovered by accident in the 1950s.
              We've spent 70 years tweaking the chemistry. and patients are still
              trading one set of symptoms for another.
            </p>
          </div>
          <div className="problem-stats">
            <div className="problem-stat">
              <div className="problem-stat-num">1 in 4</div>
              <div>U.S. adults takes a psychiatric medication</div>
            </div>
            <div className="problem-stat">
              <div className="problem-stat-num">60%</div>
              <div>experience side effects that affect daily life</div>
            </div>
            <div className="problem-stat">
              <div className="problem-stat-num">2-4 wks</div>
              <div>typical withdrawal when stopping SSRIs</div>
            </div>
            <div className="problem-stat">
              <div className="problem-stat-num">$280B</div>
              <div>spent annually in the U.S. on these prescriptions</div>
            </div>
          </div>
        </div>
        <div className="problem-divider"></div>
        <div className="problem-bridge">
          <span className="eyebrow">There is another way</span>
          <h3 className="problem-bridge-h">
            Alpha-Stim works on the nervous system directly. not the chemistry around it.
          </h3>
        </div>
      </div>
    </section>
  );
}

// Educational explainer. how it works at a system level
function EducationalHow() {
  return (
    <section className="section ed-how">
      <div className="container">
        <div className="ed-head">
          <span className="eyebrow">Cranial Electrotherapy Stimulation</span>
          <h2 className="ed-h2">A gentle, drug-free signal that resets your nervous system.</h2>
        </div>

        <div className="ed-grid">
          <div className="ed-step">
            <div className="ed-step-num">01</div>
            <div className="ed-step-title">Clip onto your earlobes</div>
            <p>Two soft conductive clips, like earrings. Comfortable enough to forget you're wearing them.</p>
          </div>
          <div className="ed-arrow">→</div>
          <div className="ed-step">
            <div className="ed-step-num">02</div>
            <div className="ed-step-title">Microcurrent flows through</div>
            <p>A signal weaker than a 9V battery passes through the cranial nerves into the brain stem.</p>
          </div>
          <div className="ed-arrow">→</div>
          <div className="ed-step">
            <div className="ed-step-num">03</div>
            <div className="ed-step-title">Nervous system recalibrates</div>
            <p>The signal calms overactive brain regions linked to anxiety, sleep, mood and pain processing.</p>
          </div>
        </div>

        <div className="ed-callout">
          <div className="ed-callout-mark">FDA</div>
          <div>
            <strong>FDA Cleared (Class II)</strong> for anxiety, insomnia, depression, and pain.
            That means clinically tested, documented, and held to medical-device manufacturing standards -
            not the wellness aisle.
          </div>
        </div>
      </div>
    </section>
  );
}

window.CostCompare = CostCompare;
window.ProblemSolve = ProblemSolve;
window.EducationalHow = EducationalHow;