// 05 How It Works · 06 What's Covered (curriculum) — menopause version

function MenoProductHowItWorks() {
  const steps = [
    { n: "01", time: "Step 01", title: "Learn why this works",                    body: "A short explanation of the science behind Open Label Placebos prepares your mind before you begin.", img: "assets/kit-app.jpeg" },
    { n: "02", time: "Step 02", title: "Consume your OLP",                       body: "A guided practice where you will be led through taking your OLP gummy to help your brain respond more effectively.", img: "assets/photo-olp2standalone.webp" },
    { n: "03", time: "Step 03", title: "Write by hand to rewire your thoughts", body: "Complete a 5-minute guided cognitive writing exercise to help your brain process new patterns and scan your answers to receive personalized feedback.", img: "assets/kit-cards.jpeg" },
  ];
  return (
    <section id="how" className="how-sec" data-screen-label="Product · How it works" style={{ background: "#FFFDF7", borderBottom: "3px solid #000" }}>
      <div className="how-band" style={{
        borderTop: "3px solid #000", borderBottom: "3px solid #000",
        background: "#55A8FA", color: "#fff", padding: "60px 48px",
      }}>
        <div className="how-band-grid" style={{ maxWidth: 1160, margin: "0 auto",
          display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "end" }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)", marginBottom: 16 }}>How the protocol works</div>
            <h2 style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 0.98, margin: 0, color: "#fff" }}>
              A daily 3-part protocol designed to help your body and brain respond differently to hot flushes.
            </h2>
          </div>
          <span className="how-band-aside" style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 16 }}>
            <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)", whiteSpace: "nowrap" }}>15 min · 14 days</span>
            <a href="#" style={{
              padding: "14px 22px", borderRadius: 999, border: "1.5px solid #fff",
              background: "#fff", color: "#000", textDecoration: "none", fontSize: 14, fontWeight: 500,
              whiteSpace: "nowrap",
            }}>▶  Watch a 90-second unboxing</a>
          </span>
        </div>
      </div>

      <div className="how-steps-wrap" style={{ maxWidth: 1160, margin: "0 auto", padding: "72px 48px 96px" }}>
        <div className="how-steps" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          {steps.map((s) => (
            <div key={s.n} style={{
              background: "#FFF6EF", border: "2px solid #000", borderRadius: 16, overflow: "hidden",
              display: "flex", flexDirection: "column",
            }}>
              <div style={{ aspectRatio: "4/3", borderBottom: "2px solid #000", background: "#fff", overflow: "hidden" }}>
                <img src={s.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ padding: "26px 26px 28px" }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 999, border: "2px solid #000",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 14, fontWeight: 700, letterSpacing: "0.02em", marginBottom: 18,
                }}>{s.n}</div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "#DE541E", marginBottom: 6 }}>
                  {s.time}
                </div>
                <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em", margin: 0, lineHeight: 1.15 }}>{s.title}</h3>
                <p style={{ fontSize: 15, fontWeight: 300, lineHeight: 1.55, marginTop: 12, color: "#1B1C1C" }}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px){
        section.how-sec.how-sec{padding:0 !important}
        .how-sec .how-band.how-band{padding:44px 24px !important}
        .how-sec .how-band-grid.how-band-grid{grid-template-columns:1fr !important;gap:24px !important;align-items:start !important}
        .how-sec .how-band-aside.how-band-aside{flex-direction:row !important;align-items:center !important;flex-wrap:wrap !important;gap:14px !important}
        .how-sec .how-steps-wrap.how-steps-wrap{padding:48px 24px 60px !important}
        .how-sec .how-steps.how-steps{grid-template-columns:1fr !important;gap:18px !important}
        .how-sec .how-steps h3{font-size:20px !important}
      }`}</style>
    </section>
  );
}
window.MenoProductHowItWorks = MenoProductHowItWorks;

function MenoProductCurriculum() {
  const phases = [
    { days: "Days 1–3",   title: "Awareness & Triggers",            body: "Notice how stress, sleep, and daily triggers feed your hot flushes, and learn calming techniques to use when one starts." },
    { days: "Days 4–6",   title: "Reframing Hot Flush Thoughts",    body: "Identify the anxious or embarrassed thoughts that come with a flush and learn to balance them against the wider evidence." },
    { days: "Days 7–10",  title: "Sleep, Social Life & Resilience", body: "Build strategies for night sweats and social situations, and strengthen day-to-day resilience." },
    { days: "Days 11–14", title: "Action & Confidence",             body: "Turn insight into action — practise, plan, and lock in a toolkit you can keep using long after Day 14." },
  ];
  return (
    <section className="curr-sec" data-screen-label="Product · Curriculum" style={{
      background: "#FFF6EF", borderBottom: "3px solid #000", padding: "120px 48px",
    }}>
      <div style={{ maxWidth: 1160, margin: "0 auto" }}>
        <div className="curr-head" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "end", marginBottom: 48 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "#DE541E", marginBottom: 18 }}>The arc</div>
            <h2 style={{ fontSize: 60, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 0.95, margin: 0 }}>
              What's actually covered.
            </h2>
          </div>
          <p style={{ fontSize: 18, fontWeight: 300, lineHeight: 1.55, color: "#1B1C1C", maxWidth: 480, margin: 0 }}>
            A four-phase progression — notice the patterns, learn to challenge them, live beyond them, lock the skills in.
          </p>
        </div>

        {/* Visual day strip */}
        <div className="curr-strip keep-cols" style={{
          display: "grid", gridTemplateColumns: "repeat(14, 1fr)", gap: 4,
          marginBottom: 28, padding: "0 0",
        }}>
          {Array.from({length: 14}).map((_, i) => {
            const phaseColor = i < 3 ? "#55A8FA" : i < 6 ? "#F0BE38" : i < 10 ? "#DE541E" : "#000";
            return (
              <div key={i} style={{
                aspectRatio: "1", border: "1.5px solid #000", borderRadius: 8,
                background: phaseColor, color: phaseColor === "#000" ? "#fff" : "#000",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 14, fontWeight: 700,
              }}>{i + 1}</div>
            );
          })}
        </div>

        <div className="curr-phases" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {phases.map((p, i) => {
            const colors = ["#55A8FA", "#F0BE38", "#DE541E", "#000"];
            return (
              <div key={p.days} style={{
                background: "#FFFDF7", border: "2px solid #000", borderRadius: 14,
                padding: "22px 22px 26px", display: "flex", flexDirection: "column",
                position: "relative", overflow: "hidden",
              }}>
                <div style={{
                  position: "absolute", top: 0, left: 0, right: 0, height: 8,
                  background: colors[i],
                }} />
                <div style={{ marginTop: 8, fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "#DE541E" }}>
                  {p.days}
                </div>
                <h3 style={{ fontSize: 20, fontWeight: 700, letterSpacing: "-0.01em", lineHeight: 1.15, margin: "10px 0 12px" }}>{p.title}</h3>
                <p style={{ fontSize: 14, fontWeight: 300, lineHeight: 1.55, color: "#1B1C1C", margin: 0 }}>{p.body}</p>
              </div>
            );
          })}
        </div>
      </div>
      <style>{`@media (max-width: 900px){
        .curr-sec .curr-head.curr-head{grid-template-columns:1fr !important;gap:14px !important;margin-bottom:26px !important;align-items:start !important}
        .curr-sec .curr-strip.curr-strip{grid-template-columns:repeat(14, 1fr) !important;gap:3px !important;margin-bottom:20px !important}
        .curr-sec .curr-strip.curr-strip > div{border-width:1px !important;border-radius:5px !important;font-size:10px !important}
        .curr-sec .curr-phases.curr-phases{grid-template-columns:1fr !important;gap:12px !important}
        .curr-sec .curr-phases > div{padding:18px 20px 20px !important}
        .curr-sec .curr-phases h3{font-size:19px !important;margin:8px 0 8px !important}
      }`}</style>
    </section>
  );
}
window.MenoProductCurriculum = MenoProductCurriculum;