// 01 — Hero / Buy Box. Menopause version of product-ibs/ProductHero.jsx (same media).
function MenoProductHero() {
  const VIDEO = "assets/product-gallery.webm";
  const media = [
    { type: "video", src: VIDEO, alt: "The 14-Day Menopause Protocol — watch" },
    { type: "image", src: "assets/photo-preorder-0.webp", alt: "The 14-Day Menopause Protocol kit — bottle, cards, tracker and pen" },
    { type: "image", src: "assets/photo-preorder-1.webp", alt: "Gummies poured into a hand from the OLP-2 bottle" },
    { type: "image", src: "assets/photo-preorder-2.webp", alt: "Filling out a protocol card by hand with the Copables pen" },
    { type: "image", src: "assets/photo-preorder-3.webp", alt: "The full kit laid out on a desk — bottle, tracker, cards and app" },
    { type: "image", src: "assets/photo-preorder-4.webp", alt: "Copables companion app, Day 1 of 14" },
    { type: "image", src: "assets/photo-preorder-5.webp", alt: "Daily protocol cards fanned out beside the box" },
    { type: "image", src: "assets/photo-preorder-6.webp", alt: "Progress tracker with stickers, on a shelf" },
  ];
  const [selected, setSelected] = React.useState(0);
  const [plan, setPlan] = React.useState("kit");
  const go = (i) => setSelected(((i % media.length) + media.length) % media.length);
  const current = media[selected];

  const plans = [
    { id: "kit", label: "14-Day Menopause Protocol Standard",     sub: "One bottle · 14 cards · App access · Welcome guide", price: "$99" },
    { id: "veg", label: "14-Day Menopause Protocol (Plant-Based)", sub: "Vegan formula · 14 cards · App access · Welcome guide", price: "$99" },
  ];

  return (
    <section className="product-hero" data-screen-label="Product · Hero / Buy Box">
      <div className="ph-wrap">
        <div className="ph-grid">
          {/* GALLERY */}
          <div className="ph-gallery">
            <div className="ph-thumbs">
              {media.map((m, i) => (
                <button key={i} onClick={() => go(i)}
                  className={"ph-thumb" + (m.type === "video" ? " ph-thumb--video" : "") + (selected === i ? " is-selected" : "")}
                  aria-label={m.type === "video" ? "Play video" : `View image ${i}`}>
                  {m.type === "video"
                    ? <><video src={m.src} muted playsInline preload="metadata" tabIndex={-1} />
                        <span className="ph-play" aria-hidden="true">
                          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span></>
                    : <img src={m.src} alt="" />}
                </button>
              ))}
            </div>
            <div className="ph-main-wrap">
              <div className="ph-main">
                {current.type === "video"
                  ? <video key={current.src} src={current.src} muted loop autoPlay playsInline preload="auto" />
                  : <img src={current.src} alt={current.alt} />}
                <div className="ph-nav">
                  <button className="ph-nav-btn" onClick={() => go(selected - 1)} aria-label="Previous image">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                  </button>
                  <button className="ph-nav-btn" onClick={() => go(selected + 1)} aria-label="Next image">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* BUY BOX */}
          <div className="ph-buybox">
            <div className="ph-pill">14-day protocol · For hot flushes</div>

            <h1 className="ph-title">The 14-Day<br/>Menopause Protocol.</h1>

            <p className="ph-sub">A science-informed kit designed to ease menopausal hot flushes — without hormones, prescriptions, or a doctor's office.</p>

            <div className="ph-rating">
              <span className="ph-stars">★★★★★</span>
              <a href="#testimonials" className="ph-rating-link">Read what people are saying</a>
            </div>

            <ul className="ph-checks">
              <li><span className="ph-ck">✓</span>Built on Harvard-pioneered open-label placebo research</li>
              <li><span className="ph-ck">✓</span>15 minutes a day for 14 days</li>
              <li><span className="ph-ck">✓</span>Less than the cost of a single specialist visit</li>
            </ul>

            <div className="ph-plans">
              {plans.map((p) => (
                <button key={p.id} onClick={() => setPlan(p.id)}
                  className={"ph-plan" + (plan === p.id ? " is-selected" : "")}
                  type="button">
                  <span className="ph-radio" />
                  <div className="ph-plan-meta">
                    <div className="ph-plan-label">{p.label}</div>
                    <div className="ph-plan-sub">{p.sub}</div>
                  </div>
                  <div className="ph-plan-price">
                    <div className="ph-plan-amt">{p.price}</div>
                  </div>
                </button>
              ))}
            </div>

            <div className="ph-actions">
              <button className="ph-cta" type="button">Pre-order now — $99</button>
              <p className="ph-cta-sub">You won't be charged until your order ships. Cancel any time before dispatch.</p>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .product-hero { background: #FFFDF7; border-bottom: 3px solid #000; padding: 56px 48px 96px; color: #000; font-family: "Sawton Circular", system-ui, sans-serif; }
        .product-hero .ph-wrap { max-width: 1160px; margin: 0 auto; }
        .product-hero .ph-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
        @media (max-width: 900px) { .product-hero { padding: 40px 22px 64px; } .product-hero .ph-grid { grid-template-columns: 1fr; gap: 36px; } }

        /* Gallery */
        .product-hero .ph-gallery { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: stretch; }
        @media (max-width: 700px) {
          .product-hero .ph-gallery { grid-template-columns: 1fr; gap: 12px; }
          .product-hero .ph-gallery .ph-main-wrap { order: 1; }
          .product-hero .ph-gallery .ph-thumbs { order: 2; flex-direction: row; flex-wrap: wrap; gap: 8px; }
          .product-hero .ph-gallery .ph-thumb { flex: 0 0 calc((100% - 32px) / 5); height: auto; aspect-ratio: 1; }
          .product-hero .ph-gallery .ph-main { width: 100%; max-height: none; }
        }
        .product-hero .ph-main-wrap { display: flex; flex-direction: column; min-width: 0; }
        .product-hero .ph-thumbs { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
        .product-hero .ph-thumb { flex: 1 1 0; min-height: 0; padding: 0; cursor: pointer; overflow: hidden; border: none; border-radius: 10px; background: #FFF6EF; outline: none; outline-offset: -3px; }
        .product-hero .ph-thumb.is-selected { border: none; outline: 3px solid #DE541E; }
        .product-hero .ph-thumb img, .product-hero .ph-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
        .product-hero .ph-thumb--video { position: relative; }
        .product-hero .ph-thumb--video .ph-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
        .product-hero .ph-thumb--video .ph-play::before { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 999px; background: rgba(0,0,0,0.55); }
        .product-hero .ph-thumb--video .ph-play svg { position: relative; color: #fff; transform: translateX(1px); }
        .product-hero .ph-main video { width: 100%; height: 100%; object-fit: cover; display: block; background: #FFF6EF; }
        .product-hero .ph-main { position: relative; aspect-ratio: 3 / 4; width: min(100%, calc(80vh * 3 / 4)); max-height: 80vh; border: none; border-radius: 22px; overflow: hidden; background: #FFF6EF; box-shadow: none; }
        .product-hero .ph-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .product-hero .ph-nav { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 10px; z-index: 2; }
        .product-hero .ph-nav-btn { width: 40px; height: 40px; border-radius: 999px; border: none; background: rgba(255,255,255,0.9); color: #000; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: background .15s ease; }
        .product-hero .ph-nav-btn:hover { background: #fff; }

        /* Buy box */
        .product-hero .ph-buybox { padding-top: 4px; }
        .product-hero .ph-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; background: #DE541E; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 22px; }
        .product-hero .ph-title { font-size: 68px; font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; margin: 0; color: #000; }
        @media (max-width: 900px) { .product-hero .ph-title { font-size: 48px; } }
        .product-hero .ph-sub { margin-top: 22px; font-size: 19px; font-weight: 300; line-height: 1.5; color: #1B1C1C; max-width: 520px; }
        .product-hero .ph-rating { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
        .product-hero .ph-stars { color: #F0BE38; font-size: 18px; letter-spacing: 1px; }
        .product-hero .ph-rating-link { font-size: 13px; font-weight: 500; color: #000; text-decoration: underline; text-underline-offset: 3px; }

        .product-hero .ph-checks { list-style: none; padding: 0; margin: 32px 0; }
        .product-hero .ph-checks li { position: relative; padding: 10px 0 10px 34px; font-size: 16px; font-weight: 500; line-height: 1.4; color: #000; border-bottom: 1px solid rgba(0,0,0,0.08); }
        .product-hero .ph-ck { position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 999px; background: #55A8FA; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

        /* Plans */
        .product-hero .ph-plans { border: 2px solid #000; border-radius: 18px; overflow: hidden; background: #FFF6EF; }
        .product-hero .ph-plan { width: 100%; text-align: left; padding: 20px 22px; background: transparent; border: none; cursor: pointer; display: grid; grid-template-columns: 26px 1fr auto; gap: 16px; align-items: center; font: inherit; color: inherit; }
        .product-hero .ph-plan + .ph-plan { border-top: 1.5px solid #000; }
        .product-hero .ph-plan.is-selected { background: #fff; }
        .product-hero .ph-radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid #000; background: transparent; display: inline-block; }
        .product-hero .ph-plan.is-selected .ph-radio { background: radial-gradient(circle, #000 30%, #fff 35%); }
        .product-hero .ph-plan-label { font-size: 16px; font-weight: 700; letter-spacing: -0.005em; }
        .product-hero .ph-plan-sub { font-size: 13px; font-weight: 400; color: #525252; margin-top: 4px; }
        .product-hero .ph-plan-price { text-align: right; }
        .product-hero .ph-plan-amt { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

        /* Actions */
        .product-hero .ph-actions { display: block; margin-top: 22px; }
        .product-hero .ph-cta { display: block; width: 100%; padding: 22px 26px; border-radius: 999px; background: #DE541E; color: #fff; font-size: 19px; font-weight: 800; border: none; cursor: pointer; letter-spacing: -0.005em; font-family: inherit; box-shadow: 0 6px 0 #B3451A; transition: transform .12s ease, box-shadow .12s ease; }
        .product-hero .ph-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #B3451A; opacity: 1; }
        .product-hero .ph-cta:active { transform: translateY(2px); box-shadow: 0 3px 0 #B3451A; }
        .product-hero .ph-cta-sub { margin: 18px 0 0; font-size: 14.5px; color: #525252; font-weight: 500; line-height: 1.45; text-align: center; }
        @media (min-width: 900px) { .product-hero .ph-cta-sub { white-space: nowrap; font-size: 13.5px; } }
      `}</style>
    </section>
  );
}
window.MenoProductHero = MenoProductHero;