// Approach.jsx — "How I Think" — toolbox hero + three woodcut principle cards
function Approach() {
  const principles = [
    {
      n: "01", tag: "Research", img: "wc-monocular.png", panel: "var(--gm-paper)",
      t: "Research over intuition",
      d: "I run the customer research, the competitive analysis, and the market work before I build the plan. Gut feel is great for picking lunch. It's a terrible way to bet a budget."
    },
    {
      n: "02", tag: "Efficiency", img: "wc-scale.png", panel: "var(--gm-paper-edge)",
      t: "Efficiency over big teams",
      d: "I've built and led a 16-person org. I've also run the whole thing with three people and the right systems. Headcount isn't the flex. Output is."
    },
    {
      n: "03", tag: "Endurance", img: "wc-pantheon.png", panel: "var(--gm-paper)",
      t: "Brands that hold up",
      d: "I build positioning and growth systems that still make sense six months out. Anyone can make something that looks good in a pitch. The test is whether it survives contact with the market."
    },
  ];
  return (
    <section id="approach" className="sec" style={{ background: "var(--gm-ink)", color: "var(--gm-paper)", position: "relative", overflow: "hidden" }}>
      <div className="halftone" style={{ position: "absolute", inset: 0, opacity: .07, pointerEvents: "none" }}></div>

      <div className="wrap" style={{ position: "relative" }}>
        {/* ── HERO: toolbox + thesis ── */}
        <div style={{ display: "grid", gridTemplateColumns: "1.04fr .96fr", gap: 48, alignItems: "center" }} className="about-grid">
          <div>
            <Kicker onDark>How I Think</Kicker>
            <h2 className="sec-title" style={{ color: "var(--gm-paper)", marginTop: 14, maxWidth: 620 }}>
              I use power tools. I don't let them <span style={{ color: "var(--gm-orange)" }}>do the thinking.</span>
            </h2>
            <p style={{ fontSize: 17.5, lineHeight: 1.6, color: "var(--fg-on-dark-2)", marginTop: 18, maxWidth: 560 }}>
              I use AI and automation every day. But I use them the way a good carpenter uses power
              tools: to work faster and more precisely, not to skip the thinking. The strategy comes
              first. Then the tools make it sharper, quicker, and more connected to what's actually
              happening in your market.
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 26 }}>
              <span style={{
                display: "inline-flex", alignItems: "center", gap: 9, background: "var(--gm-yellow)", color: "var(--gm-ink)",
                border: "var(--stroke) solid var(--gm-ink)", padding: "9px 15px",
                fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", fontSize: 17, letterSpacing: ".02em"
              }}>
                <i className="ph-fill ph-wrench" style={{ fontSize: 19 }}></i>Strategy first. Tools second.
              </span>
            </div>
          </div>

          {/* toolbox */}
          <div style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "center", minHeight: 300 }} className="approach-toolbox">
            <img src="assets/wc-toolbox.png" alt="A box of tools" style={{ position: "relative", width: "100%", maxWidth: 460, display: "block", filter: "drop-shadow(8px 10px 0 rgba(0,0,0,.45))" }} />
          </div>
        </div>

        {/* ── divider ── */}
        <div style={{ display: "flex", alignItems: "center", gap: 16, margin: "52px 0 30px" }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", fontSize: 16, letterSpacing: ".14em", color: "var(--gm-orange)", whiteSpace: "nowrap" }}>
            Three things I won't compromise on
          </span>
          <span style={{ flex: 1, height: 3, background: "rgba(242,239,232,.25)" }}></span>
        </div>

        {/* ── three principle cards ── */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }} className="principles-grid">
          {principles.map((p, i) => (
            <div key={i} className="card" style={{ background: "var(--gm-paper)", padding: 0, display: "flex", flexDirection: "column", boxShadow: "var(--shadow-block-lg)" }}>
              {/* image panel */}
              <div style={{
                position: "relative", background: p.panel, borderBottom: "var(--stroke) solid var(--gm-ink)",
                height: 196, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", padding: 18
              }}>
                <span style={{
                  position: "absolute", top: 12, left: 14, fontFamily: "var(--font-wide)", fontStretch: "125%",
                  fontWeight: 800, fontSize: 30, lineHeight: 1, color: "var(--gm-orange)"
                }}>{p.n}</span>
                <span style={{
                  position: "absolute", top: 14, right: 14, fontFamily: "var(--font-display)", fontWeight: 700,
                  textTransform: "uppercase", fontSize: 13, letterSpacing: ".1em", color: "var(--gm-stone)"
                }}>{p.tag}</span>
                <img src={"assets/" + p.img} alt={p.t} style={{ maxWidth: "92%", maxHeight: "100%", objectFit: "contain", display: "block" }} />
              </div>
              {/* content */}
              <div style={{ padding: "22px 22px 26px", display: "flex", flexDirection: "column", flex: 1 }}>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", fontSize: 25, lineHeight: .98, margin: 0, color: "var(--gm-ink)" }}>{p.t}</h3>
                <div style={{ width: 44, height: 3, background: "var(--gm-orange)", margin: "12px 0 14px" }}></div>
                <p style={{ fontSize: 15.5, lineHeight: 1.58, color: "var(--fg-2)", margin: 0 }}>{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Approach });