// 07 Why this works · 08 Who responds best · 09 Comparison table — anxiety version

function AnxProductMechanism() {
  const mechs = [
    { n: "01", title: "Conditioned Expectation", body: "A lifetime of taking pills that worked teaches your body to respond to the ritual itself — the act of taking something can begin to settle your stress response.", img: "assets/mech-dog-bell.png" },
    { n: "02", title: "Anxiety Loop Reset",       body: "Anxiety self-amplifies: worried thoughts trigger body signals, which trigger more worry. The protocol interrupts that loop, giving your nervous system a chance to recalibrate.",            img: "assets/mech-boy-thought.png" },
    { n: "03", title: "The Reward of Action",    body: "Doing something measurably feels better than doing nothing. The ritual gives you ownership over a condition that has felt out of your control.", img: "assets/mech-girl-present.png" },
  ];
  return (
    <section data-screen-label="Product · Why this works" style={{
      background: "#FFFDF7", borderBottom: "3px solid #000", padding: "120px 48px",
    }}>
      <div style={{ maxWidth: 1160, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "end", marginBottom: 56 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "#DE541E", marginBottom: 18 }}>The mechanism, in 60 seconds</div>
            <h2 style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 0.95, margin: 0 }}>
              Three ways your body responds — even when you know.
            </h2>
          </div>
          <p style={{ fontSize: 18, fontWeight: 300, lineHeight: 1.55, color: "#1B1C1C", maxWidth: 460, margin: 0 }}>
            Open-label placebos work through processes your body already uses every day. These three explain why the effect holds even when you know it's a placebo.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          {mechs.map((m) => (
            <div key={m.n} style={{
              background: "#FFF6EF", border: "2px solid #000", borderRadius: 16,
              overflow: "hidden", display: "flex", flexDirection: "column",
            }}>
              <div style={{ aspectRatio: "4 / 3", background: "#fff",
                borderBottom: "2px solid #000", overflow: "hidden",
                display: "flex", alignItems: "center", justifyContent: "center", padding: "18px" }}>
                <img src={m.img} alt="" style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
              </div>
              <div style={{ padding: "26px 30px 32px" }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "#DE541E", marginBottom: 8 }}>
                  Mechanism {m.n}
                </div>
                <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em", margin: 0, lineHeight: 1.15 }}>{m.title}</h3>
                <p style={{ fontSize: 15, fontWeight: 300, lineHeight: 1.55, marginTop: 12, color: "#1B1C1C" }}>{m.body}</p>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 36 }}>
          <a href="science.html" style={{
            fontSize: 14, fontWeight: 700, color: "#000", textDecoration: "none",
            borderBottom: "2px solid #000", paddingBottom: 4,
          }}>Read the full mechanism on the science page →</a>
        </div>
      </div>
    </section>
  );
}
window.AnxProductMechanism = AnxProductMechanism;

function AnxProductWhoFits() {
  const items = [
    { t: "You find the science credible.",   b: "You don't have to believe it'll work for you specifically — you just have to find the rationale plausible enough to engage." },
    { t: "You want to take action.",          b: "OLP works best for people in an active stance toward their condition rather than waiting it out passively." },
    { t: "You'll show up.",                   b: "The strongest predictor of OLP response is adherence. Show up daily and you get the protocol's effects." },
  ];
  return (
    <section data-screen-label="Product · Who responds best" style={{
      background: "#FFF6EF", borderBottom: "3px solid #000", padding: "120px 48px",
    }}>
      <div style={{ maxWidth: 1160, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "end", marginBottom: 56 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "#DE541E", marginBottom: 18 }}>Self-check</div>
            <h2 style={{ fontSize: 60, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 0.95, margin: 0 }}>
              Will this work for you?
            </h2>
          </div>
          <p style={{ fontSize: 18, fontWeight: 300, lineHeight: 1.55, color: "#1B1C1C", maxWidth: 480, margin: 0 }}>
            Three predictors have replicated across OLP trials. If those three are true for you, the literature predicts you'll respond.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: "#FFFDF7", border: "2px solid #000", borderRadius: 16,
              padding: "30px 30px 32px",
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8, border: "2px solid #000",
                display: "flex", alignItems: "center", justifyContent: "center",
                background: "#FFF6EF", marginBottom: 22,
              }}>
                <span style={{ fontSize: 22, fontWeight: 700, color: "#55A8FA" }}>✓</span>
              </div>
              <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em", margin: 0, lineHeight: 1.2 }}>{it.t}</h3>
              <p style={{ fontSize: 15, fontWeight: 300, lineHeight: 1.55, marginTop: 12, color: "#1B1C1C" }}>{it.b}</p>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 32, padding: "22px 26px", background: "#FFFDF7",
          border: "2px solid #000", borderRadius: 16,
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
        }}>
          <div style={{ fontSize: 16, fontWeight: 500, color: "#000" }}>
            Not sure? Take the 4-minute assessment to see if you're a good fit.
          </div>
          <a href="ibsquiz.html" style={{
            padding: "14px 22px", borderRadius: 999, background: "#000", color: "#fff",
            fontSize: 14, fontWeight: 500, textDecoration: "none",
          }}>Take the assessment →</a>
        </div>
      </div>
    </section>
  );
}
window.AnxProductWhoFits = AnxProductWhoFits;

function AnxProductCompare() {
  const rows = [
    { label: "No side effects", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.5 2.7c0 5.6-7.5 10.2-7.5 10.2z"/></svg>
    ) },
    { label: "No prescription required", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M8.5 3.5a4.95 4.95 0 1 1 7 7l-7 7a4.95 4.95 0 1 1-7-7z"/><path d="M5 12l7-7"/></svg>
    ) },
    { label: "No therapist appointments", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M8 3v4"/><path d="M16 3v4"/></svg>
    ) },
    { label: "Daily structured guidance", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M8 2v4"/><path d="M16 2v4"/><path d="M7 12l2 2 4-4"/><path d="M7 17h6"/></svg>
    ) },
    { label: "Money-back guarantee", icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/></svg>
    ) },
  ];
  const CheckIcon = () => (
    <svg viewBox="0 0 24 24" style={{ width: 22, height: 22, color: "#1F7A3A" }} aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
  );
  const XIcon = () => (
    <svg viewBox="0 0 24 24" style={{ width: 22, height: 22, color: "#D7261E" }} aria-hidden="true"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/></svg>
  );
  return (
    <section data-screen-label="Product · Comparison" style={{
      background: "#FFFDF7", borderBottom: "3px solid #000", padding: "120px 48px",
    }}>
      <div style={{ maxWidth: 1160, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 38 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "#DE541E", marginBottom: 18 }}>A low stakes intervention</div>
          <h2 style={{ fontSize: 60, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 0.95, margin: 0 }}>
            The usual anxiety playbook vs. Copables.
          </h2>
        </div>

        <div className="cmp-wrap" style={{ fontFamily: "'Sawton Circular', system-ui, sans-serif", maxWidth: 720, margin: "0 auto" }}>
          <div style={{ border: "1.5px solid #000", borderRadius: 22, background: "#FFFDF7", overflow: "hidden" }}>
            <table style={{ width: "100%", minWidth: 560, borderCollapse: "collapse", fontSize: 16, color: "#000", tableLayout: "fixed" }}>
              <thead>
                <tr>
                  <th style={{ padding: "14px 20px", background: "#FFFDF7", borderBottom: "1.5px solid #000" }}></th>
                  <th style={{ padding: "14px 20px", background: "rgba(255,240,225,0.55)", borderBottom: "1.5px solid #000", borderLeft: "1px solid rgba(20,19,15,0.14)", textAlign: "center", width: "28%" }}>
                    <img src="assets/logo-copables.png" alt="Copables" style={{ height: 22, width: "auto", display: "block", margin: "0 auto" }} />
                  </th>
                  <th style={{ padding: "14px 20px", background: "#FFFDF7", borderBottom: "1.5px solid #000", borderLeft: "1px solid rgba(20,19,15,0.14)", textAlign: "center", width: "28%", fontSize: 12, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>
                    Traditional Anxiety Solutions
                  </th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r, i) => (
                  <tr key={r.label} style={{ borderBottom: i === rows.length - 1 ? "none" : "1px solid rgba(20,19,15,0.08)" }}>
                    <th style={{ padding: "11px 20px", fontWeight: 700, fontSize: 15, textAlign: "left", background: "#FFFDF7", width: "44%" }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                        <span style={{ width: 20, height: 20, flex: "0 0 20px", color: "#DE541E", opacity: 0.85, display: "inline-block" }}>{r.icon}</span>
                        <span>{r.label}</span>
                      </span>
                    </th>
                    <td style={{ padding: "11px 20px", textAlign: "center", background: "rgba(255,240,225,0.55)", borderLeft: "1px solid rgba(20,19,15,0.14)" }}>
                      <CheckIcon />
                    </td>
                    <td style={{ padding: "11px 20px", textAlign: "center", borderLeft: "1px solid rgba(20,19,15,0.14)" }}>
                      <XIcon />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p style={{ marginTop: 14, fontSize: 12, color: "rgba(20,19,15,0.6)" }}>
            For severe anxiety or anxiety that interferes with daily functioning, talk to your physician. Copables is not a replacement for prescribed treatment.
          </p>
        </div>
      </div>
      <style>{`@media (max-width: 760px){
        .cmp-wrap table{min-width:0 !important;font-size:14px !important}
        .cmp-wrap thead th{padding:12px 10px !important}
        .cmp-wrap tbody th{padding:10px 12px !important;font-size:13px !important}
        .cmp-wrap tbody td{padding:10px 6px !important}
        .cmp-wrap thead th:nth-child(3){font-size:10px !important;letter-spacing:0.04em !important;line-height:1.25 !important}
        .cmp-wrap thead th:nth-child(2) img{height:18px !important}
        .cmp-wrap th:first-child{width:52% !important}
        .cmp-wrap thead th:nth-child(2),.cmp-wrap thead th:nth-child(3){width:24% !important}
        .cmp-wrap tbody th span span:first-child{display:none !important}
        .cmp-wrap svg{width:19px !important;height:19px !important}
      }`}</style>
    </section>
  );
}
window.AnxProductCompare = AnxProductCompare;
