// FeaturedPOV — long-form feature spread on terracotta, now the 3-step process (Audit / Build / Handoff)
const PROCESS = [
  {
    n: "01", name: "The Audit", sub: "No tools. Just clarity.",
    items: [
      "We get on a call and I learn how your business actually runs, not how you think it runs",
      "I map your full sales and marketing flow end to end",
      "I find where leads are dropping, where time is being wasted, and where revenue is leaking",
      "We decide together what should be automated and what shouldn't",
    ],
  },
  {
    n: "02", name: "The Build", sub: "Custom to you. Nothing off the shelf.",
    items: [
      "I prioritize the highest-impact automations from your audit",
      "I build your system using the tools that fit your stack, not whatever's trending",
      "You see it working on real data before it goes live",
      "I explain every decision in plain English, no tech jargon",
    ],
  },
  {
    n: "03", name: "The Handoff", sub: "You own it. Forever.",
    items: [
      "We launch with clear metrics so you know what \"working\" looks like",
      "I document everything so your team can use it without me",
      "I train you on the system so you're never dependent on anyone to run it",
      "I stay available for 30 days to fix, tweak, and optimize",
    ],
  },
];

function FeaturedPOV() {
  return (
    <ColorBlock id="the-process" bg="#DD6B3A" style={{ color: "#FBF6EF" }}>
      <div className="pov-shell" style={{ maxWidth: 1240, margin: "0 auto", padding: "80px 32px 88px" }}>
        <div className="pov-featured-top-grid" style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 36,
          borderTop: "1px solid #FBF6EF", paddingTop: 26,
        }}>
          {/* Left — feature title */}
          <div className="pov-featured-title-col" style={{ gridColumn: "1 / span 2" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "#F4E36A" }}>FEATURE · THE PROCESS</span>
              <span style={{ width: 60, height: 1, background: "#F4E36A" }}/>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "#FBF6EF" }}>FILE № 001</span>
            </div>
            <Headline size={84} color="#FBF6EF" className="pov-featured-headline" style={{ letterSpacing: "-0.02em", lineHeight: 0.96 }}>
              Find the money<br/>
              you're already<br/>
              <span style={{ color: "#F4E36A" }}>losing.</span>
            </Headline>
          </div>

          {/* Right — pull quote box */}
          <div style={{
            border: "1px solid #FBF6EF", padding: "24px 22px",
            display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 18,
          }}>
            <div className="pov-featured-quote-mark" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 90, lineHeight: 0.6, color: "#F4E36A" }}>"</div>
            <div className="pov-featured-quote-text" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, lineHeight: 1.2, color: "#FBF6EF", fontStyle: "italic" }}>
              Building more automations on a broken process just breaks things faster.
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "#F4E36A" }}>ON WHY AUDITS COME FIRST</div>
          </div>
        </div>

        {/* Body — three column process: Audit, Build, Handoff */}
        <div className="pov-featured-steps-grid" style={{
          marginTop: 42, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 36,
        }}>
          {PROCESS.map((s, i) => (
            <div key={s.n} className="pov-featured-step" style={{
              borderRight: i < 2 ? "1px solid rgba(251,246,239,0.4)" : "none",
              paddingRight: i < 2 ? 24 : 0,
              display: "flex", flexDirection: "column",
            }}>
              <div className="pov-featured-step-num" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 44, lineHeight: 1, color: "#F4E36A", opacity: 0.85, marginBottom: 6 }}>{s.n}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, lineHeight: 1.1, color: "#FBF6EF", marginBottom: 6 }}>{s.name}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 14, fontStyle: "italic", color: "#F2C3C5", marginBottom: 16 }}>{s.sub}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {s.items.map((it, j) => (
                  <div key={j} style={{ display: "flex", gap: 8, fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.55, color: "#FBF6EF", opacity: 0.95 }}>
                    <span style={{ opacity: 0.7 }}>•</span><span>{it}</span>
                  </div>
                ))}
              </div>
              {i === 2 && (
                <div style={{ marginTop: 22 }}>
                  <BlockButton bg="#F4E36A" fg="#1A1714" onClick={openCalendly}>Book the audit call</BlockButton>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </ColorBlock>
  );
}

Object.assign(window, { FeaturedPOV });