// 03 — Medical School Berlin evidence (Schaefer & Enge 2024). Anxiety version of IbsProductFlagshipStat.
function AnxProductFlagshipStat() {
  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 · Berlin 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 Medical School Berlin study showed that an <span style={{ color: "#DE541E" }}>honest placebo</span> could <span style={{ color: "#2F95F2" }}>actually reduce</span> anxiety before a high-stakes test.<sup style={{ fontSize: "0.32em" }}><a href="#cite-schaefer-2024" style={{ color: "inherit" }}>[1]</a></sup>
          </h2>
          <p id="cite-schaefer-2024" 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>Schaefer M. &amp; Enge S. (2024).</strong> "Open-label placebos enhance test performance and reduce anxiety in learner drivers: a randomized controlled trial." <em>Scientific Reports</em> 14:6684. <a href="https://www.nature.com/articles/s41598-024-56600-6" 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 — STAI change */}
          <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}>Reduced anxiety</span>
              </div>
              {nBadge(68)}
            </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 }}>A gap of</div>
                  <div style={{ fontSize: "clamp(100px,14vw,168px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.9, color: "#2F95F2" }}>11.5</div>
                </div>
                <div style={{ marginTop: 6, fontSize: 20, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "#2F95F2" }}>Points of anxiety</div>
                <div style={{ ...bodyText, marginTop: 22, maxWidth: 380 }}>
                  As the driving test approached, anxiety rose in the no-treatment group and fell in the open-label placebo group.
                </div>
              </div>
              <div>
                <svg viewBox="0 0 560 280" width="100%" height="auto" style={{ display: "block" }} aria-label="Change in state anxiety (STAI-S) over the two weeks before the driving test">
                  <defs>
                    <linearGradient id="olpFillAnxProd" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#2F95F2" stopOpacity="0.08"/>
                      <stop offset="100%" stopColor="#2F95F2" stopOpacity="0.32"/>
                    </linearGradient>
                  </defs>
                  <text x="48" y="14" fill="rgba(20,19,15,0.55)" fontSize="10" letterSpacing="2" style={{ textTransform: "uppercase" }}>Change in state anxiety (STAI-S)</text>
                  <text x="40" y="33" fill="rgba(20,19,15,0.42)" fontSize="10" textAnchor="end">+10</text>
                  <line x1="48" y1="30" x2="458" y2="30" stroke="rgba(20,19,15,0.07)" strokeWidth="1"/>
                  <text x="40" y="99.9" fill="rgba(20,19,15,0.42)" fontSize="10" textAnchor="end">+5</text>
                  <line x1="48" y1="96.9" x2="458" y2="96.9" stroke="rgba(20,19,15,0.07)" strokeWidth="1"/>
                  <text x="40" y="166.75" fill="rgba(20,19,15,0.42)" fontSize="10" textAnchor="end">0</text>
                  <line x1="48" y1="163.75" x2="458" y2="163.75" stroke="rgba(20,19,15,0.22)" strokeWidth="1"/>
                  <text x="40" y="233.6" fill="rgba(20,19,15,0.42)" fontSize="10" textAnchor="end">−5</text>
                  <line x1="48" y1="230.6" x2="458" y2="230.6" stroke="rgba(20,19,15,0.07)" strokeWidth="1"/>
                  <line x1="48" y1="244" x2="458" y2="244" stroke="rgba(20,19,15,0.18)" strokeWidth="1"/>
                  <text x="48" y="266" fill="rgba(20,19,15,0.5)" fontSize="10" textAnchor="start">2 weeks before test</text>
                  <text x="450" y="266" fill="rgba(20,19,15,0.5)" fontSize="10" textAnchor="end">Day before test</text>
                  <path d="M 48 163.75 L 450 217.25 L 450 163.75 Z" fill="url(#olpFillAnxProd)"/>
                  <path d="M 48 163.75 L 450 62.77" fill="none" stroke="rgba(20,19,15,0.45)" strokeWidth="1.8" strokeDasharray="5 5" strokeLinecap="round"/>
                  <path d="M 48 163.75 L 450 217.25" fill="none" stroke="#14130F" strokeWidth="2.4" strokeLinecap="round"/>
                  <circle cx="48" cy="163.75" r="3.6" fill="#14130F" stroke="#fff" strokeWidth="1.5"/>
                  <circle cx="450" cy="62.77" r="3.6" fill="rgba(20,19,15,0.45)" stroke="#fff" strokeWidth="1.5"/>
                  <circle cx="450" cy="217.25" r="4.6" fill="#D9760A" stroke="#fff" strokeWidth="1.6"/>
                  <text x="462" y="60" fill="#544F43" fontSize="15" fontWeight="700">Control</text>
                  <text x="462" y="76" fill="#544F43" fontSize="11" fontWeight="500">(+7.6 points)</text>
                  <text x="462" y="214" fill="#2F95F2" fontSize="22" fontWeight="700" letterSpacing="-0.01em">OLP</text>
                  <text x="462" y="230" fill="#544F43" fontSize="11" fontWeight="500">(−4.0 points)</text>
                </svg>
              </div>
            </div>
            <div style={{ ...strip, padding: "14px clamp(20px,3vw,28px)" }}>
              The honest placebo group's state anxiety <strong style={{ color: "#B3451A", fontWeight: 800 }}>fell 4 points</strong>, while the control group's rose 7.6 points
            </div>
          </div>

          <div className="hev-pair" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 24 }}>
            {/* Left mini — pass rate */}
            <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}>Passed the test</span>
                </div>
                {nBadge(34)}
              </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="7 in 10 learner drivers in the open-label placebo group passed their driving test">
                  {[...Array(10)].map((_, i) => (
                    <span key={i} className={"ppl " + (i < 7 ? "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 }}>7 in 10</strong> in the honest placebo group passed their driving test.
                </div>
              </div>
              <div style={{ ...strip, padding: "14px 18px" }}>
                Compared with fewer than <strong style={{ color: "#B3451A", fontWeight: 800 }}>5 in 10</strong> in the no-treatment group
              </div>
            </div>

            {/* Right mini — failure rate */}
            <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}>Fewer failed tests</span>
                </div>
                {nBadge(34)}
              </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 }}>Nearly</div>
                <div style={{ fontSize: "clamp(88px,11vw,140px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.9, color: "#2F95F2" }}>44%</div>
                <div style={{ ...bodyText, marginTop: 22 }}>fewer learner drivers failed their test.</div>
              </div>
              <div style={{ ...strip, padding: "14px 18px" }}>
                A failure rate of <strong style={{ color: "#B3451A", fontWeight: 800 }}>29%</strong>, vs. 53% 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.AnxProductFlagshipStat = AnxProductFlagshipStat;