// 03 — Hot flush evidence (Pan et al. 2020, UMC Hamburg-Eppendorf). Menopause version of IbsProductFlagshipStat.
function MenoProductFlagshipStat() {
  const cardStyle = { background: "#FFFDF7", border: "2px solid #14130F", boxShadow: "6px 8px 0 rgba(20,19,15,0.10)", borderRadius: 18, overflow: "hidden", display: "flex", flexDirection: "column" };
  const iconBox = { flex: "none", width: 34, height: 34, border: "2px solid #14130F", borderRadius: 9, display: "grid", placeItems: "center", color: "#14130F" };
  const headLabel = { fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "#14130F" };
  const nBadge = (n) => (
    <span style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "#544F43", whiteSpace: "nowrap" }}>
      <span style={{ flex: "none", width: 9, height: 9, borderRadius: "50%", background: "#D9760A" }}></span>n={n}
    </span>
  );
  const strip = { background: "rgba(217,118,10,0.08)", borderTop: "2px solid #14130F", fontSize: 15, fontWeight: 400, lineHeight: 1.4, color: "#544F43" };
  const bodyText = { fontSize: "clamp(14px,1.5vw,18px)", fontWeight: 300, lineHeight: 1.5, color: "#544F43" };

  return (
    <section data-screen-label="Product · Hot flush evidence" style={{
      background: "#FFF6EF", color: "#14130F", borderBottom: "3px solid #000",
      fontFamily: "'Sawton Circular', system-ui, sans-serif",
    }}>
      <div style={{ padding: "clamp(72px,9vw,120px) 24px 0" }}>
        <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
          <h2 className="hev-h2">
            A randomized clinical trial showed that an <span style={{ color: "#DE541E" }}>honest placebo</span> could <span style={{ color: "#2F95F2" }}>actually reduce</span> menopausal hot flushes.<sup style={{ fontSize: "0.32em" }}><a href="#cite-pan-2020" style={{ color: "inherit" }}>[1]</a></sup>
          </h2>
          <p id="cite-pan-2020" style={{ maxWidth: 580, margin: "28px auto 0", textAlign: "center", fontSize: 13, lineHeight: 1.5, color: "#544F43" }}>
            <strong style={{ color: "#DE541E", fontWeight: 800 }}>[1]</strong> <strong>Pan Y. et&nbsp;al. (2020).</strong> "Open-label placebos for menopausal hot flushes: a randomized controlled trial." <em>Scientific Reports</em> 10:20090. <a href="https://www.nature.com/articles/s41598-020-77255-z" target="_blank" rel="noopener" style={{ color: "#14130F" }}>View study →</a>
          </p>
        </div>
      </div>

      <div style={{ padding: "clamp(40px,5vw,64px) 24px clamp(72px,9vw,120px)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>

          {/* Main card — hot flush score */}
          <div style={cardStyle}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "14px clamp(20px,3vw,28px)", borderBottom: "2px solid #14130F" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={iconBox}>
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8l5 5 4-4 7 8"/><path d="M20 17h-5"/><path d="M20 17v-5"/></svg>
                </span>
                <span style={headLabel}>Fewer, milder hot flushes</span>
              </div>
              {nBadge(100)}
            </div>
            <div className="hev-mainbody" style={{ padding: "clamp(30px,4vw,52px) clamp(28px,4vw,56px)", display: "grid", gridTemplateColumns: "0.7fr 1.3fr", gap: 56, alignItems: "center" }}>
              <div>
                <div style={{ display: "inline-block", textAlign: "center" }}>
                  <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "#544F43", marginBottom: 4 }}>More than</div>
                  <div style={{ fontSize: "clamp(100px,14vw,168px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.9, color: "#2F95F2" }}>2x</div>
                </div>
                <div style={{ marginTop: 6, fontSize: 20, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "#2F95F2" }}>More Improvement</div>
                <div style={{ ...bodyText, marginTop: 22, maxWidth: 380 }}>
                  Open-label placebo reduced hot flush scores by 43% in four weeks, vs. 19% with no treatment.
                </div>
              </div>
              <div>
                <svg viewBox="0 0 560 280" width="100%" height="auto" style={{ display: "block" }} aria-label="Hot flush score at baseline and week 4">
                  <defs>
                    <linearGradient id="olpFillMenoProd" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#2F95F2" stopOpacity="0.28"/>
                      <stop offset="100%" stopColor="#2F95F2" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  <text x="48" y="14" fill="rgba(20,19,15,0.55)" fontSize="10" letterSpacing="2" style={{ textTransform: "uppercase" }}>Hot flush score (frequency × intensity)</text>
                  <line x1="48" y1="244" x2="458" y2="244" stroke="rgba(20,19,15,0.18)" strokeWidth="1"/>
                  <text x="40" y="33" fill="rgba(20,19,15,0.42)" fontSize="10" textAnchor="end">20</text>
                  <line x1="48" y1="30" x2="458" y2="30" stroke="rgba(20,19,15,0.07)" strokeWidth="1"/>
                  <text x="40" y="104.33" fill="rgba(20,19,15,0.42)" fontSize="10" textAnchor="end">16</text>
                  <line x1="48" y1="101.33" x2="458" y2="101.33" stroke="rgba(20,19,15,0.07)" strokeWidth="1"/>
                  <text x="40" y="175.67" fill="rgba(20,19,15,0.42)" fontSize="10" textAnchor="end">12</text>
                  <line x1="48" y1="172.67" x2="458" y2="172.67" stroke="rgba(20,19,15,0.07)" strokeWidth="1"/>
                  <text x="48" y="266" fill="rgba(20,19,15,0.5)" fontSize="10" textAnchor="middle">Baseline</text>
                  <text x="450" y="266" fill="rgba(20,19,15,0.5)" fontSize="10" textAnchor="middle">Wk 4</text>
                  <path d="M 48 88.14 L 450 195.49 L 450 244 L 48 244 Z" fill="url(#olpFillMenoProd)"/>
                  <path d="M 48 58.35 L 450 116.49" fill="none" stroke="rgba(20,19,15,0.45)" strokeWidth="1.8" strokeDasharray="5 5" strokeLinecap="round"/>
                  <path d="M 48 88.14 L 450 195.49" fill="none" stroke="#14130F" strokeWidth="2.4" strokeLinecap="round"/>
                  <circle cx="48" cy="58.35" r="3.6" fill="rgba(20,19,15,0.45)" stroke="#fff" strokeWidth="1.5"/>
                  <circle cx="48" cy="88.14" r="3.6" fill="#14130F" stroke="#fff" strokeWidth="1.5"/>
                  <circle cx="450" cy="116.49" r="3.6" fill="rgba(20,19,15,0.45)" stroke="#fff" strokeWidth="1.5"/>
                  <circle cx="450" cy="195.49" r="4.6" fill="#D9760A" stroke="#fff" strokeWidth="1.6"/>
                  <text x="462" y="114" fill="#544F43" fontSize="15" fontWeight="700">Control</text>
                  <text x="462" y="130" fill="#544F43" fontSize="11" fontWeight="500">(19% decrease)</text>
                  <text x="462" y="193" fill="#2F95F2" fontSize="22" fontWeight="700" letterSpacing="-0.01em">OLP</text>
                  <text x="462" y="209" fill="#544F43" fontSize="11" fontWeight="500">(43% decrease)</text>
                </svg>
              </div>
            </div>
            <div style={{ ...strip, padding: "14px clamp(20px,3vw,28px)" }}>
              The honest placebo group had <strong style={{ color: "#B3451A", fontWeight: 800 }}>33% fewer hot flushes</strong> per day after four weeks
            </div>
          </div>

          <div className="hev-pair" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 24 }}>
            {/* Left mini — overall improvement */}
            <div style={cardStyle}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "14px 18px", borderBottom: "2px solid #14130F" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span style={iconBox}>
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4.5 4.5L19 7"/></svg>
                  </span>
                  <span style={headLabel}>Felt better overall</span>
                </div>
                {nBadge(100)}
              </div>
              <div style={{ flex: "1 1 auto", padding: "clamp(26px,3vw,40px)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center" }}>
                <div className="hev-people" role="img" aria-label="6 in 10 women reported overall improvement">
                  {[...Array(10)].map((_, i) => (
                    <span key={i} className={"ppl " + (i < 6 ? "on" : "off")}>
                      <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M12 11.6a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2Z"/>
                        <path d="M3.4 21.6c0-4.3 3.85-7.4 8.6-7.4s8.6 3.1 8.6 7.4a.8.8 0 0 1-.8.8H4.2a.8.8 0 0 1-.8-.8Z"/>
                      </svg>
                    </span>
                  ))}
                </div>
                <div style={{ ...bodyText, marginTop: 24 }}>
                  <strong style={{ color: "#2F95F2", fontWeight: 800 }}>6 in 10</strong> women taking honest placebos reported overall improvement.
                </div>
              </div>
              <div style={{ ...strip, padding: "14px 18px" }}>
                Compared with <strong style={{ color: "#B3451A", fontWeight: 800 }}>4 in 10</strong> in the no-treatment group
              </div>
            </div>

            {/* Right mini — clinically meaningful */}
            <div style={cardStyle}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "14px 18px", borderBottom: "2px solid #14130F" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span style={iconBox}>
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2c.5 4.4 3.4 7.3 7.8 7.8C15.4 10.3 12.5 13.2 12 17.6 11.5 13.2 8.6 10.3 4.2 9.8 8.6 9.3 11.5 6.4 12 2z"/></svg>
                  </span>
                  <span style={headLabel}>Clinically meaningful relief</span>
                </div>
                {nBadge(100)}
              </div>
              <div style={{ flex: "1 1 auto", padding: "clamp(26px,3vw,40px)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center" }}>
                <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "#544F43", marginBottom: 8 }}>Four times as many</div>
                <div style={{ fontSize: "clamp(88px,11vw,140px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.9, color: "#2F95F2" }}>4x</div>
                <div style={{ ...bodyText, marginTop: 22 }}>women cut their daily hot flushes in half.</div>
              </div>
              <div style={{ ...strip, padding: "14px 18px" }}>
                <strong style={{ color: "#B3451A", fontWeight: 800 }}>24%</strong> of the honest placebo group had 50%+ fewer hot flushes, vs. 6% with no treatment
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hev-h2 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: #14130F; text-wrap: balance; }
        .hev-people { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px 13px; width: 100%; max-width: 300px; margin: 0 auto; }
        .hev-people .ppl { display: block; }
        .hev-people .ppl svg { width: 100%; height: auto; display: block; }
        .hev-people .ppl.on svg { fill: #2F95F2; }
        .hev-people .ppl.off svg { fill: rgba(20,19,15,0.16); }
        @media (max-width: 900px) {
          .hev-mainbody { grid-template-columns: 1fr !important; gap: 32px !important; }
          .hev-pair { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}
window.MenoProductFlagshipStat = MenoProductFlagshipStat;
