/* global React, Arrow, WhatsAppIcon, Logo, Check */

// ============================================================
// Why-choose strip + CTA + Contact + Footer
// ============================================================

const WhyStrip = () => {
  const items = [
    { n: "01", t: "Senior partners, not pitch-deck juniors", d: "The advisor in the room on Day 1 is the advisor in the room on Day 90." },
    { n: "02", t: "We bill outcomes, not slides", d: "Fixed-scope engagements with explicit decision milestones." },
    { n: "03", t: "Embedded, not on-the-side", d: "We work inside your Slack, your standups, your finance reviews." },
    { n: "04", t: "Cross-discipline by default", d: "IT, ops, and legal already share notes before they sit across from you." },
  ];
  return (
    <section className="section-tight" style={{ background: "var(--cream)" }}>
      <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 36 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 18, flexWrap: "wrap", justifyContent: "space-between" }}>
          <h2 className="h2" style={{ margin: 0, maxWidth: 720 }}>
            Why teams keep us on retainer.{" "}
            <span style={{ color: "var(--ink-mute)", fontWeight: 400 }}>Four reasons, repeated honestly.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
          {items.map((it, i) => (
            <div key={i} className="reveal" style={{
              padding: "28px 24px 28px 0",
              borderRight: i < items.length - 1 ? "1px solid var(--line)" : "none",
              paddingLeft: i === 0 ? 0 : 24,
              display: "flex", flexDirection: "column", gap: 12,
            }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--bel-orange)", fontWeight: 600, letterSpacing: "0.1em" }}>{it.n}</span>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, letterSpacing: "-0.015em" }}>{it.t}</div>
              <div style={{ fontSize: 14, color: "var(--ink-soft)" }}>{it.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// CTA strip
// ============================================================
const CTA = () => (
  <section style={{ paddingBlock: "clamp(36px, 4vw, 64px)" }}>
    <div className="wrap">
      <div className="reveal" style={{
        background: "var(--ink)",
        color: "var(--cream)",
        borderRadius: 28,
        padding: "clamp(36px, 5vw, 72px)",
        display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 36, alignItems: "center",
        position: "relative", overflow: "hidden",
      }}>
        <div aria-hidden style={{
          position: "absolute", right: -120, bottom: -120,
          width: 380, height: 380, borderRadius: "50%",
          background: "var(--bel-orange)", opacity: 0.18, filter: "blur(40px)",
        }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 18, position: "relative" }}>
          <span className="eyebrow" style={{ color: "var(--bel-orange)" }}>STEP INTO THE FUTURE WITH US</span>
          <h2 className="h2" style={{ margin: 0, color: "var(--cream)" }}>
            Bring us the decision you&apos;ve been avoiding.<br />
            <span style={{ color: "#A1A1A8", fontWeight: 400 }}>We&apos;ll come back with three options and a recommendation.</span>
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14, position: "relative" }}>
          <a href="#contact" className="btn btn--accent" style={{ height: 56, fontSize: 16, justifyContent: "space-between", paddingInline: 26 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
              <WhatsAppIcon size={16} />
              Get Expert Advice on WhatsApp
            </span>
            <Arrow size={13} />
          </a>
          <a href="#contact" className="btn" style={{
            height: 56, fontSize: 16, background: "transparent", color: "var(--cream)",
            border: "1px solid #3A3A40", justifyContent: "space-between", paddingInline: 26,
          }}>
            <span>Email us a brief</span>
            <Arrow size={13} />
          </a>
          <span style={{ fontSize: 13, color: "#A1A1A8", marginTop: 4 }}>
            Avg response: under 4 working hours · No call-centres, no chatbots
          </span>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { WhyStrip, CTA });