// TwoPillars — sits between BrandReel and Services on the homepage.
// Two parallel offerings: Digital Transformation (build software) +
// Digital Rebranding (modernise how the firm looks online).
//
// Plain English by design — short sentences, common words, technical terms
// only where they earn it (OCR, pipeline, deployment, dashboard, etc).

const PILLARS = [
  {
    code: "A",
    tag: "DIGITAL TRANSFORMATION",
    title: "Build the software your firm needs.",
    sub: "Custom web apps, OCR, AI, dashboards. Replace the spreadsheets, the paper, the email chains. You keep the code, the data, the keys.",
    bullets: [
      "Custom web apps for how you work",
      "OCR for scans, forms, old files",
      "AI that reads PDFs, drawings, photos",
      "Databases you can actually search",
      "Dashboards your partners will use",
    ],
    cta: "See the six services",
    href: "#services",
    art: "build",
  },
  {
    code: "B",
    tag: "DIGITAL REBRANDING",
    title: "Make your firm look modern online.",
    sub: "A new website, brand kit, and clean visual identity — for firms whose site still looks like 2007. We design, write, build and ship it.",
    bullets: [
      "New website — fast, clean, easy to update",
      "Brand kit — logo, colours, type, photos",
      "Copy that says what you actually do",
      "Email + document templates",
      "Linked-in and social-media starters",
    ],
    cta: "Talk to us about a refresh",
    href: "#contact",
    art: "refresh",
  },
];

// ---- Per-pillar SVG art ---------------------------------------------------
// "build" — stacked window + database cylinder, hinting at app + data work.
// "refresh" — wireframe to polished site transition, hinting at visual redo.

function PillarArtBuild() {
  return (
    <svg viewBox="0 0 320 220" width="100%" height="100%" fill="none"
      stroke="currentColor" strokeWidth="1" preserveAspectRatio="xMidYMid meet">
      {/* back: window */}
      <g strokeOpacity="0.45">
        <rect x="20" y="20" width="180" height="120" rx="4" />
        <line x1="20" y1="42" x2="200" y2="42" />
        <circle cx="34" cy="31" r="3" fill="currentColor" fillOpacity="0.5" />
        <circle cx="46" cy="31" r="3" fill="currentColor" fillOpacity="0.5" />
        <circle cx="58" cy="31" r="3" fill="currentColor" fillOpacity="0.5" />
        <rect x="36" y="60" width="60" height="6" />
        <rect x="36" y="76" width="100" height="4" strokeOpacity="0.6" />
        <rect x="36" y="88" width="80" height="4" strokeOpacity="0.6" />
        <rect x="36" y="108" width="40" height="20" />
        <rect x="84" y="108" width="40" height="20" />
      </g>
      {/* front: db cylinder */}
      <g strokeOpacity="0.8" transform="translate(140,80)">
        <ellipse cx="80" cy="0"  rx="60" ry="12" />
        <ellipse cx="80" cy="40" rx="60" ry="12" />
        <ellipse cx="80" cy="80" rx="60" ry="12" />
        <ellipse cx="80" cy="120" rx="60" ry="12" />
        <line x1="20"  y1="0" x2="20"  y2="120" />
        <line x1="140" y1="0" x2="140" y2="120" />
      </g>
      {/* connector */}
      <path d="M 140 100 C 180 100, 180 140, 220 140" strokeOpacity="0.55" strokeDasharray="3 4" />
    </svg>
  );
}

function PillarArtRefresh() {
  return (
    <svg viewBox="0 0 320 220" width="100%" height="100%" fill="none"
      stroke="currentColor" strokeWidth="1" preserveAspectRatio="xMidYMid meet">
      {/* left: rough wireframe */}
      <g strokeOpacity="0.45" strokeDasharray="3 4">
        <rect x="20" y="30" width="130" height="160" rx="2" />
        <rect x="32" y="44" width="60" height="6" />
        <rect x="32" y="58" width="100" height="4" strokeOpacity="0.6" />
        <rect x="32" y="68" width="80" height="4" strokeOpacity="0.6" />
        <rect x="32" y="84" width="40" height="24" />
        <rect x="80" y="84" width="40" height="24" />
        <rect x="32" y="120" width="100" height="4" strokeOpacity="0.6" />
        <rect x="32" y="130" width="100" height="4" strokeOpacity="0.6" />
        <rect x="32" y="140" width="60" height="4" strokeOpacity="0.6" />
        <rect x="32" y="170" width="50" height="10" />
      </g>

      {/* arrow */}
      <g strokeOpacity="0.7">
        <line x1="155" y1="110" x2="175" y2="110" strokeWidth="1.25" />
        <path d="M 175 110 l -5 -5 M 175 110 l -5 5" strokeWidth="1.25" />
      </g>

      {/* right: polished, solid version */}
      <g strokeOpacity="0.85">
        <rect x="180" y="22" width="130" height="176" rx="3" />
        <line x1="180" y1="46" x2="310" y2="46" strokeOpacity="0.5" />
        <circle cx="192" cy="34" r="2.5" fill="currentColor" fillOpacity="0.6" />
        <circle cx="200" cy="34" r="2.5" fill="currentColor" fillOpacity="0.6" />
        <circle cx="208" cy="34" r="2.5" fill="currentColor" fillOpacity="0.6" />
        <rect x="192" y="62"  width="80"  height="10" fill="currentColor" fillOpacity="0.85" stroke="none" />
        <rect x="192" y="80"  width="106" height="4"  fill="currentColor" fillOpacity="0.35" stroke="none" />
        <rect x="192" y="90"  width="106" height="4"  fill="currentColor" fillOpacity="0.35" stroke="none" />
        <rect x="192" y="100" width="70"  height="4"  fill="currentColor" fillOpacity="0.35" stroke="none" />
        <rect x="192" y="118" width="50"  height="32" fill="currentColor" fillOpacity="0.10" />
        <rect x="248" y="118" width="50"  height="32" fill="currentColor" fillOpacity="0.10" />
        <rect x="192" y="160" width="60"  height="14" fill="currentColor" fillOpacity="0.9" stroke="none" />
        <rect x="258" y="160" width="40"  height="14" strokeOpacity="0.6" />
      </g>
    </svg>
  );
}

const PILLAR_ART = {
  build: PillarArtBuild,
  refresh: PillarArtRefresh,
};

function PillarCard({ p, i }) {
  const [hover, setHover] = React.useState(false);
  const Art = PILLAR_ART[p.art] || PillarArtBuild;

  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        padding: 40,
        border: "1px solid",
        borderColor: hover ? "var(--border-3)" : "var(--border-2)",
        borderRadius: 10,
        background: "var(--bg-1)",
        display: "flex",
        flexDirection: "column",
        gap: 24,
        overflow: "hidden",
        transition: "border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)",
        boxShadow: hover ? "0 28px 60px -28px rgba(10,10,10,0.20)" : "0 1px 0 var(--border-1)",
        minHeight: 460,
      }}
    >
      {/* Soft tint that brightens on hover */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: hover
          ? "radial-gradient(circle at 100% 0%, var(--site-accent-soft) 0%, transparent 55%)"
          : "transparent",
        transition: "background var(--dur-base) var(--ease-out)",
        pointerEvents: "none",
      }}/>

      {/* Hover-only flame edge */}
      <span style={{
        position: "absolute", left: 0, top: 0, bottom: 0,
        width: 3,
        background: "var(--site-accent, var(--flame))",
        transform: hover ? "scaleY(1)" : "scaleY(0)",
        transformOrigin: "top",
        transition: "transform var(--dur-base) var(--ease-out)",
        borderRadius: "10px 0 0 10px",
      }}/>

      {/* Header row: tag + code letter */}
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        position: "relative",
      }}>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 12,
          letterSpacing: "0.18em", color: "var(--fg-3)",
          textTransform: "uppercase", fontWeight: 500,
        }}>// PILLAR_{p.code} · {p.tag}</span>
        <span aria-hidden="true" style={{
          fontFamily: "var(--font-display)",
          fontSize: 64, fontWeight: 500,
          lineHeight: 0.85, letterSpacing: "-0.04em",
          color: hover ? "var(--site-accent, var(--flame))" : "var(--fg-1)",
          opacity: hover ? 0.85 : 0.10,
          transition: "color var(--dur-base), opacity var(--dur-base)",
        }}>{p.code}</span>
      </div>

      {/* SVG art panel */}
      <div style={{
        position: "relative",
        width: "100%",
        aspectRatio: "320 / 160",
        color: "var(--fg-1)",
        opacity: hover ? 0.55 : 0.32,
        transition: "opacity var(--dur-base) var(--ease-out)",
        marginTop: -4,
      }}>
        <Art />
      </div>

      {/* Title + sub */}
      <div style={{ display: "flex", flexDirection: "column", gap: 12, position: "relative" }}>
        <h3 style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(28px, 2.6vw, 36px)",
          fontWeight: 500, letterSpacing: "-0.02em",
          lineHeight: 1.05, margin: 0,
          color: "var(--fg-1)", textWrap: "balance",
        }}>
          {p.title}
          {hover && <span style={{ color: "var(--site-accent, var(--flame))" }}>.</span>}
        </h3>
        <p style={{
          fontFamily: "var(--font-sans)",
          fontSize: 15.5, lineHeight: 1.6,
          color: "var(--fg-2)", margin: 0,
          maxWidth: "46ch",
        }}>{p.sub}</p>
      </div>

      {/* Bullet list */}
      <ul style={{
        listStyle: "none", margin: 0, padding: 0,
        display: "flex", flexDirection: "column", gap: 8,
        position: "relative",
      }}>
        {p.bullets.map((b, k) => (
          <li key={k} style={{
            display: "flex", alignItems: "baseline", gap: 12,
            fontFamily: "var(--font-sans)", fontSize: 14.5,
            color: "var(--fg-1)", lineHeight: 1.5,
          }}>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--site-accent, var(--flame))",
              letterSpacing: "0.12em",
              minWidth: 24,
            }}>0{k + 1}</span>
            <span>{b}</span>
          </li>
        ))}
      </ul>

      {/* CTA */}
      <div style={{
        marginTop: "auto", paddingTop: 14,
        borderTop: "1px dashed var(--border-1)",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        position: "relative",
        gap: 12,
      }}>
        <a href={p.href}
          onClick={(e) => {
            // smooth-scroll for same-page anchors
            if (p.href.startsWith("#")) {
              e.preventDefault();
              const el = document.getElementById(p.href.slice(1));
              if (el) window.scrollTo({ top: el.offsetTop - 84, behavior: "smooth" });
            }
          }}
          style={{
            fontFamily: "var(--font-sans)", fontSize: 14,
            color: "var(--fg-1)", textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 8,
            borderBottom: `1px solid ${hover ? "var(--site-accent, var(--flame))" : "var(--border-2)"}`,
            paddingBottom: 2,
            transition: "border-color var(--dur-fast)",
          }}>
          {p.cta} <ArrowGlyph />
        </a>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 11,
          letterSpacing: "0.14em", color: "var(--fg-3)",
          textTransform: "uppercase",
        }}>{p.code === "A" ? "BUILD" : "REFRESH"}</span>
      </div>
    </article>
  );
}

function TwoPillars() {
  return (
    <section id="pillars" style={{
      padding: "120px 0 96px",
      background: "var(--bg-1)",
      position: "relative",
      overflow: "hidden",
      borderTop: "1px solid var(--border-1)",
    }}>
      <Parallax speed={0.14} style={{
        position: "absolute", right: "-120px", top: 60,
        width: 380, opacity: 0.10, pointerEvents: "none",
      }}>
        <img
          src="assets/motif-wireframe-cube.svg" alt=""
          className="drift-y"
          style={{ width: "100%", display: "block" }}/>
      </Parallax>

      <div className="container" style={{
        display: "flex", flexDirection: "column", gap: 56,
        position: "relative",
      }}>
        <SectionHeader
          eyebrow="// WHAT_WE_DO · 02 PILLARS"
          title={<>Two things<AccentDot /> Pick one. Or both.</>}
        />

        <div className="grid-2" style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
          gap: 24,
          alignItems: "stretch",
        }}>
          {PILLARS.map((p, i) => (
            <Reveal key={p.code} className="reveal-up" delay={i * 120}
              style={{ display: "flex" }}>
              <PillarCard p={p} i={i} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TwoPillars });