/* Product page — additional sections + missing components.
 * Loaded after components.jsx. Exports to window.*
 */

const SubSelector = ({ value, onChange }) => (
  <div className="pp-sub">
    <button
      className={`pp-sub__option${value === "subscribe" ? " is-active" : ""}`}
      onClick={() => onChange("subscribe")}
      type="button"
    >
      <div className="pp-sub__label">
        <span>Monthly</span>
        <span className="pp-sub__badge">Save $8</span>
      </div>
      <div className="pp-sub__price">$30<span style={{fontFamily:"var(--font-sans)",fontSize:14,fontWeight:500,color:"var(--hb-mute)"}}>/mo</span></div>
      <div className="pp-sub__meta">Cancel any time. Skip a month any time.</div>
    </button>
    <button
      className={`pp-sub__option${value === "onetime" ? " is-active" : ""}`}
      onClick={() => onChange("onetime")}
      type="button"
    >
      <div className="pp-sub__label"><span>One-time</span></div>
      <div className="pp-sub__price">$38</div>
      <div className="pp-sub__meta">One bottle. One cycle. No commitment.</div>
    </button>
  </div>
);

const Toast = ({ message, visible }) => (
  <div className={`pp-toast${visible ? " is-visible" : ""}`} role="status" aria-live="polite">
    {message}
  </div>
);

const ProductHero = ({ subPlan, setSubPlan, onAdd }) => (
  <section className="pp-hero" id="top">
    <div className="hb-container">
      <div className="pp-hero__layout">
        <div>
          <div className="pp-hero__eyebrow">For day one and every day after</div>
          <h1 className="pp-hero__headline">Glycine-bound <em>magnesium.</em></h1>
          <p className="pp-hero__lead">Less prostaglandins. Less contraction. Less chaos.</p>
          <SubSelector value={subPlan} onChange={setSubPlan} />
          <div className="pp-hero__cta">
            <Button variant="primary" size="lg" onClick={onAdd}>
              {subPlan === "subscribe" ? "Start your 60 days — $30/mo" : "Add to cart — $38"}
            </Button>
            <div className="pp-hero__terms">60-day promise. No return required. <a href="#guarantee">How it works.</a></div>
          </div>
        </div>
        <div className="pp-hero__visual">
          <div className="pp-hero__photoLabel">Hero · morning light</div>
          <div className="pp-bottle">
            <div className="pp-bottle__cap" />
            <div className="pp-bottle__body">
              <div className="pp-bottle__brand">HerBalance</div>
              <div className="pp-bottle__line" />
              <div className="pp-bottle__title">Glycine-Bound<br/>Magnesium</div>
              <div className="pp-bottle__sub">275mg · 90 caps</div>
              <div className="pp-bottle__count">Take 3 daily</div>
            </div>
          </div>
          <div className="pp-hero__photoCaption">"On the bathroom shelf, next to the coffee that's gone cold."</div>
        </div>
      </div>
    </div>
  </section>
);

const HowItWorks = () => {
  const steps = [
    { n: "01", title: "Take three, daily.", body: "Three vegan capsules with food. Anytime — most women take them with dinner so it builds before sleep." },
    { n: "02", title: "Cycle one: notice it.", body: "Most women report a softer day-one by their first cycle. Sleep often shifts first." },
    { n: "03", title: "Cycle two: keep it.", body: "By cycle two, the spike that used to take the wheel doesn't. That's the goal. That's the brief." },
  ];
  return (
    <section className="pp-how" id="how">
      <div className="hb-container">
        <div className="hb-section__eyebrow">How to take it</div>
        <h2 className="hb-section__title">Three capsules. <em>Two cycles.</em></h2>
        <p className="hb-section__lead">No loading dose. No timed protocol. No app.</p>
        <div className="pp-how__grid">
          {steps.map((s) => (
            <div className="pp-how__step" key={s.n}>
              <div className="pp-how__num">{s.n}</div>
              <h3 className="pp-how__title">{s.title}</h3>
              <p className="pp-how__body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const WhatsInside = () => (
  <section className="pp-inside" id="inside">
    <div className="hb-container">
      <div className="pp-inside__layout">
        <div>
          <div className="hb-section__eyebrow">What's inside</div>
          <h2 className="hb-section__title" style={{marginBottom: 16}}>Three ingredients. <em>That's it.</em></h2>
          <p className="hb-section__lead" style={{marginBottom: 40}}>No fillers. No flow agents. No surprise additives reading like a chemistry midterm.</p>
          <div className="pp-ingredients">
            <div className="pp-ing">
              <div className="pp-ing__icon"><Icon name="droplet" size={26} stroke={1.75} /></div>
              <div>
                <h4 className="pp-ing__title">Magnesium glycinate</h4>
                <p className="pp-ing__body">2,500mg providing 275mg of elemental magnesium. Fully chelated — bound to the amino acid glycine for absorption that's gentle on a gut already in disruption.</p>
              </div>
            </div>
            <div className="pp-ing">
              <div className="pp-ing__icon"><Icon name="leaf" size={26} stroke={1.75} /></div>
              <div>
                <h4 className="pp-ing__title">Vegan capsule</h4>
                <p className="pp-ing__body">Hydroxypropyl methylcellulose (HPMC). Plant-derived, no gelatin, no animal products.</p>
              </div>
            </div>
            <div className="pp-ing">
              <div className="pp-ing__icon"><Icon name="wheat" size={26} stroke={1.75} /></div>
              <div>
                <h4 className="pp-ing__title">Organic rice flour</h4>
                <p className="pp-ing__body">A small amount as a flow aid. Nothing synthetic. Nothing you wouldn't recognise on a label.</p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div className="pp-facts">
            <div className="pp-facts__title">Supplement Facts</div>
            <div style={{fontSize: 13, color: "var(--hb-ink-soft)", marginBottom: 8}}>Serving Size: 3 capsules · Servings Per Container: 30</div>
            <div className="pp-facts__row pp-facts__row--strong" style={{whiteSpace:"nowrap"}}><span>Amount per serving</span><span>% DV</span></div>
            <div className="pp-facts__row"><span className="pp-facts__label">Magnesium <span style={{color:"var(--hb-mute)",fontWeight:400}}>(as glycinate)</span></span><span className="pp-facts__val">275mg <span style={{color:"var(--hb-mute)",fontWeight:500,marginLeft:8}}>65%</span></span></div>
            <div className="pp-facts__row"><span className="pp-facts__label">Magnesium glycinate (total)</span><span className="pp-facts__val">2,500mg <span style={{color:"var(--hb-mute)",fontWeight:500,marginLeft:8}}>†</span></span></div>
            <div className="pp-facts__note">† Daily Value not established. Other ingredients: vegetable capsule (HPMC), organic rice flour. GMP certified. Made in the USA.</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const WhyThisForm = () => (
  <section className="pp-why" id="why">
    <div className="hb-container">
      <div className="pp-why__intro">
        <div className="hb-section__eyebrow">Why glycinate</div>
        <h2 className="hb-section__title">Not all magnesium <em>is the same.</em></h2>
        <p className="hb-section__lead">Most magnesium is famous for sending you straight back to the bathroom. We'd never sell you that.</p>
      </div>
      <div className="pp-compare">
        <div className="pp-compare__row pp-compare__row--muted">
          <div className="pp-compare__name">Magnesium citrate</div>
          <div className="pp-compare__verdict">Known to cause diarrhoea. Often used as a laxative on purpose.</div>
        </div>
        <div className="pp-compare__row pp-compare__row--muted">
          <div className="pp-compare__name">Magnesium oxide</div>
          <div className="pp-compare__verdict">Poorly absorbed. Frequently causes loose stools at clinical doses.</div>
        </div>
        <div className="pp-compare__row pp-compare__row--win">
          <div className="pp-compare__name">Magnesium glycinate</div>
          <div className="pp-compare__verdict">Fully chelated. Gentle on a gut already in chaos. Designed for women whose digestive system is the whole problem.</div>
        </div>
      </div>
    </div>
  </section>
);

const ProductTestimonials = () => {
  const items = [
    { initial: "M", name: "Maya R.", meta: "Verified · 8 weeks in", quote: "I made it to work on day one for the first time in three years." },
    { initial: "J", name: "Jess B.", meta: "Verified · 4 months in", quote: "I cancelled my dentist and a wedding within six months. Now I keep both. That's the review." },
    { initial: "P", name: "Priya S.", meta: "Verified · 11 weeks in", quote: "I didn't know magnesium could do this. I didn't know anything could do this." },
  ];
  return (
    <section className="hb-section hb-section--cream" id="testimonials">
      <div className="hb-container">
        <div className="hb-section__eyebrow">Real women. Specific outcomes.</div>
        <h2 className="hb-section__title">Day-one reports. <em>Not five-star graphics.</em></h2>
        <p className="hb-section__lead">No incentives. No gifted bottles. Just the actual sentence she sent us.</p>
        <div className="hb-testimonials">
          {items.map((t) => (
            <div className="hb-testimonial" key={t.name}>
              <p className="hb-testimonial__quote">"{t.quote}"</p>
              <div className="hb-testimonial__who">
                <div className="hb-testimonial__avatar">{t.initial}</div>
                <div>
                  <div className="hb-testimonial__name">{t.name}</div>
                  <div className="hb-testimonial__meta">{t.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ScienceCitation = () => (
  <section className="pp-cite">
    <div className="hb-container">
      <div className="pp-cite__inner">
        <div className="hb-section__eyebrow" style={{textAlign:"center"}}>The receipt</div>
        <p className="pp-cite__quote">"Magnesium supplementation appears to be effective in reducing the severity of menstrual pain — likely via reduction of prostaglandin synthesis."</p>
        <div className="pp-cite__source"><strong>Cochrane Review</strong> · Dietary supplements for dysmenorrhoea · Pattanittum et al.</div>
      </div>
    </div>
  </section>
);

const GuaranteeBlock = ({ onCta }) => (
  <section className="hb-section hb-section--deep" id="guarantee">
    <div className="hb-container">
      <div className="hb-guarantee">
        <div className="hb-guarantee__seal">
          <div className="hb-guarantee__seal-num">60</div>
          <div className="hb-guarantee__seal-label">Day Promise</div>
        </div>
        <div className="hb-section__eyebrow" style={{ color: "var(--hb-pink-soft)" }}>The final word</div>
        <h2 className="hb-section__title" style={{ margin: "0 auto 24px", color: "#fff" }}>Sixty days. <em>No questions.</em><br/>No return required.</h2>
        <p className="hb-section__lead" style={{ margin: "0 auto 40px", color: "rgba(255,255,255,.78)", maxWidth: "52ch" }}>Take it for two cycles. If it doesn't change your day one — keep the bottle, get a full refund, and we move on.</p>
        <Button variant="primary" size="lg" onClick={onCta}>Get yours risk free</Button>
      </div>
    </div>
  </section>
);

const ProductFAQ = () => {
  const items = [
    { q: "Will this make me run to the bathroom?", a: "No. That's exactly why we use glycinate instead of citrate or oxide. Glycinate is the form designed for sensitive guts — and our audience is, by definition, a sensitive gut at the worst possible moment." },
    { q: "Can I take this with other supplements or medication?", a: "Magnesium glycinate is gentle and pairs well with most things. If you're on a prescription, send your doctor the label. We'll happily email you a copy." },
    { q: "Is this safe long-term?", a: "275mg of elemental magnesium per serving sits well within the established safe upper intake. Most women take it daily, indefinitely. Many report better sleep within the first two weeks." },
    { q: "Why three capsules instead of one big one?", a: "A clinical dose of magnesium glycinate is a lot of physical material. Three smaller capsules are easier to swallow than one horse pill — and let you split the dose if you prefer." },
    { q: "What if it doesn't work for me?", a: "Email us within 60 days, we refund you in full. You keep the bottle. We don't require a return because we don't want you spending another minute on this." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="hb-section hb-section--tight" id="faq">
      <div className="hb-container">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div className="hb-section__eyebrow">Honest answers</div>
          <h2 className="hb-section__title" style={{ margin: "0 auto" }}>The questions <em>she actually asks.</em></h2>
        </div>
        <div className="hb-faq">
          {items.map((it, i) => (
            <div className={`hb-faq__item${open === i ? " is-open" : ""}`} key={i}>
              <button className="hb-faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="hb-faq__icon"><Icon name="plus" size={22} stroke={1.75} /></span>
              </button>
              <div className="hb-faq__a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCta = ({ subPlan, setSubPlan, onAdd }) => (
  <section className="pp-final">
    <div className="hb-container">
      <div className="pp-final__inner">
        <div className="hb-section__eyebrow" style={{color:"var(--hb-pink-soft)"}}>One last thing</div>
        <h2 className="pp-final__title">You stopped suffering in silence the moment you <em>found us.</em></h2>
        <p className="pp-final__sub">Two cycles. One bottle. The 60-day promise.</p>
        <div className="pp-final__sub-card" style={{textAlign:"left", maxWidth: 460, margin: "0 auto"}}>
          <SubSelector value={subPlan} onChange={setSubPlan} />
          <div style={{marginTop: 20, display:"flex", flexDirection:"column", gap: 10}}>
            <Button variant="primary" size="lg" onClick={onAdd} style={{width: "100%"}}>
              {subPlan === "subscribe" ? "Start your 60 days — $30/mo" : "Add to cart — $38"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  SubSelector, Toast, ProductHero, HowItWorks, WhatsInside, WhyThisForm,
  ProductTestimonials, ScienceCitation, GuaranteeBlock, ProductFAQ, FinalCta,
});
