// Fees + Insurance + Format section

function FeesAndInsurance() {
  const insurers = [
    { name: "Bupa", color: "#0079C8" },
    { name: "Cigna", color: "#117EAF" },
    { name: "Aviva", color: "#FCC10F", textDark: true },
    { name: "Vitality", color: "#9B26AF" },
    { name: "Healix", color: "#E8514A" },
    { name: "AXA PPP", color: "#00008F" },
    { name: "WPA", color: "#2C7A4B" },
    { name: "Self-pay", color: "var(--ink)" },
  ];

  return (
    <section id="fees" className="s-pad" style={{ background: "var(--cream-2)" }} data-screen-label="06 Fees & Insurance">
      <SwirlDoodle style={{ top: 40, right: "10%" }} color="var(--teal)"/>
      <div className="wrap-wide">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="eyebrow eyebrow-c" style={{ justifyContent: "center" }}>Fees &amp; Format</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>
            Simple, transparent <span className="script">pricing.</span>
          </h2>
          <p className="lede" style={{ margin: "16px auto 0" }}>
            One straightforward fee. Online or face-to-face. Covered by most major UK private health insurers — I'll help you check your policy before we start.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 28, alignItems: "stretch" }} className="fee-grid">
          {/* Fee card */}
          <div style={{
            position: "relative",
            background: "linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%)",
            color: "#fff",
            borderRadius: "var(--radius-lg)",
            padding: "44px 40px",
            overflow: "hidden",
            boxShadow: "var(--shadow-floating)",
          }}>
            <div className="blob blob-yellow" style={{ width: 200, height: 200, top: -40, right: -60, opacity: .35 }}/>
            <SparkleDoodle style={{ top: 28, right: 28, color: "var(--yellow)" }}/>

            <div style={{ position: "relative", zIndex: 2 }}>
              <span style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "6px 14px", borderRadius: 999,
                background: "rgba(255,255,255,.14)", color: "var(--yellow)",
                fontSize: 11.5, fontWeight: 700, letterSpacing: ".14em", textTransform: "uppercase",
              }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--yellow)" }}></span>
                Standard Session
              </span>

              <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 28 }}>
                <span style={{ fontSize: 28, fontWeight: 700, opacity: .8 }}>£</span>
                <span style={{ fontSize: 96, fontWeight: 800, lineHeight: 1, letterSpacing: "-.04em" }}>110</span>
                <span style={{ fontSize: 16, fontWeight: 600, opacity: .8, marginLeft: 8 }}>/ 50 minutes</span>
              </div>

              <p style={{ marginTop: 18, fontSize: 15.5, lineHeight: 1.55, color: "rgba(255,255,255,.78)", maxWidth: 420 }}>
                A single, transparent rate for individual CBT sessions. The first 15-minute consultation is complimentary.
              </p>

              <div style={{ display: "grid", gap: 10, marginTop: 28 }}>
                {[
                  "50-minute one-to-one sessions",
                  "Online (Zoom) or in person at Kensington studio",
                  "Personalised CBT plan & between-session tools",
                  "Receipts provided for insurance reimbursement",
                ].map(p => (
                  <div key={p} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 14.5 }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: "50%",
                      background: "var(--yellow)", color: "var(--purple-deep)",
                      display: "grid", placeItems: "center", flexShrink: 0,
                    }}>
                      <Icon name="check" size={13} stroke={2.5}/>
                    </span>
                    <span style={{ color: "rgba(255,255,255,.92)" }}>{p}</span>
                  </div>
                ))}
              </div>

              <button
                className="btn btn-white"
                onClick={() => document.getElementById("booking")?.scrollIntoView({ behavior: "smooth", block: "start" })}
                style={{ marginTop: 32 }}
              >
                <span className="btn-icon-l" style={{ color: "var(--purple-deep)" }}><Icon name="calendar" size={16}/></span>
                Book Your Session
                <span className="btn-icon-r" style={{ background: "rgba(91,63,214,.12)", color: "var(--purple-deep)" }}>
                  <Icon name="arrow-right" size={14}/>
                </span>
              </button>
            </div>
          </div>

          {/* Format card */}
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <div className="card" style={{
              padding: "30px 28px", borderRadius: "var(--radius)",
              background: "linear-gradient(135deg, var(--teal-50) 0%, #fff 100%)",
              border: "1px solid rgba(45,175,160,.12)",
              flex: 1,
            }}>
              <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                <span style={{
                  width: 52, height: 52, borderRadius: 16,
                  background: "var(--teal)", color: "#fff",
                  display: "grid", placeItems: "center", flexShrink: 0,
                }}><Icon name="video" size={24}/></span>
                <div>
                  <h3 style={{ margin: 0, fontSize: 19, fontWeight: 800 }}>Online sessions</h3>
                  <p style={{ margin: "6px 0 0", fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)" }}>
                    Secure video sessions via Zoom — wherever you are in the UK. Same effectiveness as in-person, with more flexibility around your week.
                  </p>
                </div>
              </div>
            </div>

            <div className="card" style={{
              padding: "30px 28px", borderRadius: "var(--radius)",
              background: "linear-gradient(135deg, var(--coral-50) 0%, #fff 100%)",
              border: "1px solid rgba(255,139,126,.14)",
              flex: 1,
            }}>
              <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                <span style={{
                  width: 52, height: 52, borderRadius: 16,
                  background: "var(--coral)", color: "#fff",
                  display: "grid", placeItems: "center", flexShrink: 0,
                }}><Icon name="map" size={24}/></span>
                <div>
                  <h3 style={{ margin: 0, fontSize: 19, fontWeight: 800 }}>Face-to-face in London</h3>
                  <p style={{ margin: "6px 0 0", fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)" }}>
                    28 Willow Crescent, Kensington Green, London W8 4LA — a quiet, light-filled consulting room just minutes from Kensington High Street and Holland Park stations.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Insurance strip */}
        <div style={{
          marginTop: 36, padding: "28px 32px",
          borderRadius: "var(--radius)",
          background: "#fff",
          border: "1px solid var(--line)",
          boxShadow: "var(--shadow-card)",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap", marginBottom: 20 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{
                width: 40, height: 40, borderRadius: 12,
                background: "var(--purple-50)", color: "var(--purple-deep)",
                display: "grid", placeItems: "center",
              }}><Icon name="shield" size={20}/></span>
              <div>
                <div style={{ fontSize: 16, fontWeight: 800, color: "var(--ink)" }}>Recognised by major insurers</div>
                <div style={{ fontSize: 13, color: "var(--ink-mute)", fontWeight: 600 }}>
                  Most clients claim full or partial reimbursement
                </div>
              </div>
            </div>
            <div style={{ flex: 1 }}></div>
            <a href="#contact" style={{
              fontSize: 13, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase",
              color: "var(--purple-deep)", display: "inline-flex", alignItems: "center", gap: 6,
            }}>
              Check my policy <Icon name="arrow-right" size={12}/>
            </a>
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {insurers.map(ins => (
              <span key={ins.name} style={{
                padding: "10px 18px",
                borderRadius: 12,
                background: ins.color,
                color: ins.textDark ? "var(--ink)" : "#fff",
                fontSize: 14, fontWeight: 800, letterSpacing: ".02em",
              }}>{ins.name}</span>
            ))}
          </div>
          <p style={{ marginTop: 16, fontSize: 12.5, color: "var(--ink-mute)", fontWeight: 500 }}>
            Logos shown as text marks for illustrative purposes. Please confirm CBT cover and session limits with your provider before booking.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FeesAndInsurance });