// Services — 6 cards with code/stack details. Each card has a unique SVG
// schematic in the background that hints at the discipline.

const SERVICE_LIST = [
  {
    code: "01", title: "Web Design",
    desc: "Brand kits and websites for traditional firms. New logo, colours, type and a site that loads fast — the works.",
    stack: ["Figma", "Webflow", "Astro", "GSAP", "Three.js"],
    art: "bezier",
  },
  {
    code: "02", title: "Web App Development",
    desc: "Custom apps for how your firm actually runs — intake, matter tracking, drawing review, billing.",
    stack: ["React", "TypeScript", "Next.js", "Node", "tRPC"],
    art: "windows",
  },
  {
    code: "03", title: "Database Revamp",
    desc: "15 years of spreadsheets and PDFs, turned into a system you can search. Audit trails. Dashboards your partners will use.",
    stack: ["PostgreSQL", "dbt", "Supabase", "Elastic", "Metabase"],
    art: "stack",
  },
  {
    code: "04", title: "Computer Vision",
    desc: "Read floor plans. Count rebar. Inspect scans. CV for the things your team checks by eye today.",
    stack: ["YOLO", "OpenCV", "Detectron2", "ONNX", "Triton"],
    art: "scan",
  },
  {
    code: "05", title: "Machine Learning",
    desc: "Classifiers, forecasters and recommenders trained on your data. Deployed where it lives — your cloud, your server, your edge.",
    stack: ["scikit-learn", "XGBoost", "MLflow", "FastAPI", "Modal"],
    art: "scatter",
  },
  {
    code: "06", title: "Deep Learning R&D",
    desc: "When off-the-shelf is not accurate enough — we fine-tune models on your data and report results honestly.",
    stack: ["PyTorch", "HuggingFace", "vLLM", "LangChain", "W&B"],
    art: "neural",
  },
];

// ---- Per-card schematic art ----------------------------------------------
// Each schematic is a 320×320 SVG positioned in the card's bottom-right.
// Strokes use currentColor so they tint with the card text.

function ArtBezier({ hover }) {
  // Type baseline grid + bezier curve — for "Web Design"
  return (
    <svg viewBox="0 0 320 320" width="320" height="320" fill="none" stroke="currentColor" strokeWidth="1">
      {/* baseline grid */}
      {[60, 100, 140, 180, 220, 260].map((y) => (
        <line key={y} x1="0" y1={y} x2="320" y2={y} strokeOpacity="0.25" />
      ))}
      {/* vertical type-spec marks */}
      <line x1="40"  y1="40" x2="40"  y2="280" strokeOpacity="0.4" strokeDasharray="2 4" />
      <line x1="280" y1="40" x2="280" y2="280" strokeOpacity="0.4" strokeDasharray="2 4" />
      {/* bezier curve */}
      <path
        d="M 20 240 C 90 80, 180 320, 300 100"
        strokeWidth="1.5"
        strokeOpacity="0.9"
        style={{
          strokeDasharray: 600,
          strokeDashoffset: hover ? 0 : 600,
          transition: "stroke-dashoffset 1400ms cubic-bezier(0.16,1,0.3,1)",
        }}
      />
      {/* handles */}
      <circle cx="20" cy="240" r="4" fill="currentColor" fillOpacity="0.7" />
      <circle cx="300" cy="100" r="4" fill="currentColor" fillOpacity="0.7" />
      <circle cx="90"  cy="80"  r="2.5" fill="currentColor" fillOpacity="0.5" />
      <circle cx="180" cy="320" r="2.5" fill="currentColor" fillOpacity="0.5" />
      <line x1="20"  y1="240" x2="90"  y2="80"  strokeOpacity="0.3" strokeDasharray="2 3" />
      <line x1="300" y1="100" x2="180" y2="320" strokeOpacity="0.3" strokeDasharray="2 3" />
    </svg>
  );
}

function ArtWindows({ hover }) {
  // Stacked browser/app windows — for "Web App Development"
  return (
    <svg viewBox="0 0 320 320" width="320" height="320" fill="none" stroke="currentColor" strokeWidth="1">
      {/* back window */}
      <g style={{
        transform: hover ? "translate(-6px, -6px)" : "translate(0,0)",
        transition: "transform 600ms cubic-bezier(0.16,1,0.3,1)",
      }}>
        <rect x="40" y="40" width="220" height="160" rx="4" strokeOpacity="0.45" />
        <line x1="40" y1="66" x2="260" y2="66" strokeOpacity="0.35" />
        <circle cx="54"  cy="53" r="3" fill="currentColor" fillOpacity="0.45" />
        <circle cx="66"  cy="53" r="3" fill="currentColor" fillOpacity="0.45" />
        <circle cx="78"  cy="53" r="3" fill="currentColor" fillOpacity="0.45" />
        <rect x="56" y="86" width="80" height="8" strokeOpacity="0.4" />
        <rect x="56" y="104" width="140" height="6" strokeOpacity="0.3" />
        <rect x="56" y="118" width="120" height="6" strokeOpacity="0.3" />
        <rect x="56" y="142" width="50" height="40" strokeOpacity="0.4" />
        <rect x="116" y="142" width="50" height="40" strokeOpacity="0.4" />
        <rect x="176" y="142" width="50" height="40" strokeOpacity="0.4" />
      </g>
      {/* front window */}
      <g style={{
        transform: hover ? "translate(8px, 8px)" : "translate(0,0)",
        transition: "transform 600ms cubic-bezier(0.16,1,0.3,1)",
      }}>
        <rect x="100" y="120" width="200" height="160" rx="4"
              fill="var(--bg-1)" fillOpacity="0.95" strokeOpacity="0.7" />
        <line x1="100" y1="146" x2="300" y2="146" strokeOpacity="0.5" />
        <rect x="116" y="166" width="90" height="8" strokeOpacity="0.5" />
        <rect x="116" y="184" width="160" height="6" strokeOpacity="0.4" />
        <rect x="116" y="198" width="140" height="6" strokeOpacity="0.4" />
        <rect x="116" y="218" width="60" height="20" strokeOpacity="0.55" />
        <rect x="186" y="218" width="60" height="20" strokeOpacity="0.55" />
      </g>
    </svg>
  );
}

function ArtStack({ hover }) {
  // Stacked database cylinders — for "Database Revamp"
  const Cyl = ({ y, op }) => (
    <g strokeOpacity={op}>
      <ellipse cx="160" cy={y}      rx="100" ry="18" />
      <ellipse cx="160" cy={y + 38} rx="100" ry="18" />
      <line x1="60"  y1={y} x2="60"  y2={y + 38} />
      <line x1="260" y1={y} x2="260" y2={y + 38} />
    </g>
  );
  return (
    <svg viewBox="0 0 320 320" width="320" height="320" fill="none" stroke="currentColor" strokeWidth="1">
      <g style={{
        transform: hover ? "translateY(-6px)" : "translateY(0)",
        transition: "transform 700ms cubic-bezier(0.16,1,0.3,1)",
      }}>
        <Cyl y={70}  op={0.35} />
      </g>
      <g style={{
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        transition: "transform 800ms cubic-bezier(0.16,1,0.3,1)",
        transitionDelay: "60ms",
      }}>
        <Cyl y={140} op={0.55} />
      </g>
      <g style={{
        transform: hover ? "translateY(4px)" : "translateY(0)",
        transition: "transform 900ms cubic-bezier(0.16,1,0.3,1)",
        transitionDelay: "120ms",
      }}>
        <Cyl y={210} op={0.8} />
      </g>
      {/* flow arrows */}
      <path d="M 290 110 L 305 110 L 305 230 L 290 230" strokeOpacity="0.5" />
      <path d="M 305 230 l -4 -4 M 305 230 l 4 -4" strokeOpacity="0.6" />
    </svg>
  );
}

function ArtScan({ hover }) {
  // Bounding boxes + crosshair scan — for "Computer Vision"
  return (
    <svg viewBox="0 0 320 320" width="320" height="320" fill="none" stroke="currentColor" strokeWidth="1">
      {/* outer frame */}
      <rect x="30" y="30" width="260" height="260" strokeOpacity="0.4" strokeDasharray="3 4" />
      {/* bounding boxes with confidence labels (no text) */}
      <g strokeOpacity="0.7">
        <rect x="60"  y="80"  width="90"  height="70" />
        <rect x="170" y="60"  width="90"  height="50" />
        <rect x="120" y="170" width="120" height="90" />
        <rect x="50"  y="200" width="50"  height="50" />
      </g>
      {/* confidence ticks */}
      {[
        [60, 80], [170, 60], [120, 170], [50, 200],
      ].map(([x, y], i) => (
        <g key={i}>
          <line x1={x} y1={y - 6} x2={x + 14} y2={y - 6} strokeOpacity="0.8" strokeWidth="2" />
          <line x1={x + 14} y1={y - 6} x2={x + 22} y2={y - 6} strokeOpacity="0.35" strokeWidth="2" />
        </g>
      ))}
      {/* scan line */}
      <line
        x1="30" x2="290"
        y1="0" y2="0"
        strokeOpacity="0.9" strokeWidth="1"
        style={{
          transform: hover ? "translateY(280px)" : "translateY(60px)",
          transition: "transform 1800ms cubic-bezier(0.65,0,0.35,1)",
        }}
      />
      {/* center crosshair */}
      <g strokeOpacity="0.6">
        <line x1="155" y1="155" x2="165" y2="155" />
        <line x1="160" y1="150" x2="160" y2="160" />
        <circle cx="160" cy="155" r="14" strokeOpacity="0.3" />
      </g>
    </svg>
  );
}

function ArtScatter({ hover }) {
  // Scatter plot with regression — for "Machine Learning"
  const pts = [
    [40, 250], [60, 230], [80, 240], [90, 210], [110, 215],
    [130, 195], [145, 200], [155, 175], [170, 165], [185, 170],
    [200, 155], [215, 140], [225, 145], [245, 120], [260, 110],
    [275, 100], [290, 80],
  ];
  return (
    <svg viewBox="0 0 320 320" width="320" height="320" fill="none" stroke="currentColor" strokeWidth="1">
      {/* axes */}
      <line x1="30" y1="30"  x2="30"  y2="280" strokeOpacity="0.5" />
      <line x1="30" y1="280" x2="300" y2="280" strokeOpacity="0.5" />
      {/* ticks */}
      {[80, 130, 180, 230].map((y) => (
        <line key={y} x1="26" y1={y} x2="30" y2={y} strokeOpacity="0.5" />
      ))}
      {[80, 130, 180, 230, 280].map((x) => (
        <line key={x} x1={x} y1="280" x2={x} y2="284" strokeOpacity="0.5" />
      ))}
      {/* scatter points */}
      {pts.map(([x, y], i) => (
        <circle
          key={i}
          cx={x} cy={y} r="3"
          fill="currentColor"
          fillOpacity={hover ? 0.85 : 0.55}
          style={{
            transition: `fill-opacity 400ms ease-out ${i * 30}ms, transform 600ms cubic-bezier(0.16,1,0.3,1) ${i * 30}ms`,
            transform: hover ? "translateY(-2px)" : "translateY(0)",
            transformOrigin: `${x}px ${y}px`,
          }}
        />
      ))}
      {/* regression line */}
      <line
        x1="35" y1="260" x2="295" y2="80"
        strokeOpacity="0.9" strokeWidth="1.5"
        strokeDasharray="240"
        style={{
          strokeDashoffset: hover ? 0 : 240,
          transition: "stroke-dashoffset 1400ms cubic-bezier(0.16,1,0.3,1)",
        }}
      />
      {/* confidence band */}
      <path
        d="M 35 270 L 295 90 L 295 70 L 35 250 Z"
        fill="currentColor" fillOpacity="0.06"
        strokeOpacity="0"
      />
    </svg>
  );
}

function ArtNeural({ hover }) {
  // Neural net node graph — for "Deep Learning R&D"
  const layers = [
    [{ x: 50, y: 80 }, { x: 50, y: 140 }, { x: 50, y: 200 }, { x: 50, y: 260 }],
    [{ x: 140, y: 70 }, { x: 140, y: 130 }, { x: 140, y: 190 }, { x: 140, y: 250 }, { x: 140, y: 310 }],
    [{ x: 230, y: 100 }, { x: 230, y: 170 }, { x: 230, y: 240 }],
    [{ x: 300, y: 170 }],
  ];
  // edges connect every node in layer N to every node in layer N+1
  const edges = [];
  for (let l = 0; l < layers.length - 1; l++) {
    for (const a of layers[l]) {
      for (const b of layers[l + 1]) edges.push([a, b]);
    }
  }
  return (
    <svg viewBox="0 0 320 320" width="320" height="320" fill="none" stroke="currentColor" strokeWidth="1">
      {edges.map(([a, b], i) => (
        <line
          key={i}
          x1={a.x} y1={a.y} x2={b.x} y2={b.y}
          strokeOpacity={hover ? 0.25 : 0.12}
          style={{ transition: `stroke-opacity 600ms ease-out ${i * 8}ms` }}
        />
      ))}
      {layers.map((layer, li) =>
        layer.map((n, ni) => (
          <circle
            key={`${li}-${ni}`}
            cx={n.x} cy={n.y} r={li === layers.length - 1 ? 6 : 4}
            fill="currentColor"
            fillOpacity={li === layers.length - 1 ? 0.9 : 0.6}
            style={{
              transition: `r 500ms ease-out ${li * 80 + ni * 30}ms`,
            }}
          />
        ))
      )}
      {/* pulse on output node */}
      <circle
        cx="300" cy="170"
        r={hover ? 18 : 10}
        strokeOpacity="0.5"
        style={{ transition: "r 900ms ease-out" }}
      />
    </svg>
  );
}

const ART_MAP = {
  bezier: ArtBezier,
  windows: ArtWindows,
  stack: ArtStack,
  scan: ArtScan,
  scatter: ArtScatter,
  neural: ArtNeural,
};

function CardSchematic({ kind, hover }) {
  const Art = ART_MAP[kind] || ArtBezier;
  return (
    <div aria-hidden="true" style={{
      position: "absolute",
      right: -40, bottom: -40,
      width: 320, height: 320,
      pointerEvents: "none",
      color: "var(--fg-1)",
      opacity: hover ? 0.32 : 0.18,
      transition: "opacity var(--dur-base) var(--ease-out)",
    }}>
      <Art hover={hover} />
    </div>
  );
}

// ---- Card ----------------------------------------------------------------

function ServiceCard({ s, i }) {
  const [hover, setHover] = React.useState(false);

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

        {/* Unique discipline schematic — bottom-right */}
        <CardSchematic kind={s.art} hover={hover} />

        {/* Giant ghost code number — bottom-left */}
        <span aria-hidden="true" style={{
          position: "absolute",
          left: -8, bottom: -28,
          fontFamily: "var(--font-display)",
          fontSize: 180, fontWeight: 500,
          lineHeight: 1,
          letterSpacing: "-0.04em",
          color: hover ? "var(--site-accent, var(--flame))" : "var(--fg-1)",
          opacity: hover ? 0.08 : 0.04,
          transition: "color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out)",
          pointerEvents: "none",
          userSelect: "none",
        }}>{s.code}</span>

        {/* Hover accent 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",
        }}/>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }}>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 12,
            letterSpacing: "0.16em", color: "var(--fg-3)", textTransform: "uppercase",
            fontWeight: 500,
          }}>SERVICE / {s.code}</span>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 18,
            color: hover ? "var(--site-accent, var(--flame))" : "var(--fg-2)",
            transform: hover ? "translate(2px, -2px)" : "translate(0,0)",
            transition: "transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)",
          }}>↗</span>
        </div>

        <h3 style={{
          fontFamily: "var(--font-display)",
          fontSize: 30, fontWeight: 500,
          letterSpacing: "-0.02em", lineHeight: 1.05,
          margin: 0, color: "var(--fg-1)",
          position: "relative",
        }}>
          {s.title}
          {hover && <span style={{ color: "var(--site-accent, var(--flame))" }}>.</span>}
        </h3>

        <p style={{
          fontSize: 15.5, lineHeight: 1.6,
          color: "var(--fg-2)", margin: 0,
          fontFamily: "var(--font-sans)", flex: 1,
          position: "relative",
        }}>{s.desc}</p>

        {/* Stack list */}
        <div style={{
          display: "flex", flexWrap: "wrap", gap: 6,
          paddingTop: 18,
          borderTop: "1px dashed var(--border-1)",
          position: "relative",
        }}>
          {s.stack.map((t, k) => (
            <span key={k} style={{
              fontFamily: "var(--font-mono)", fontSize: 11.5,
              fontWeight: 500,
              letterSpacing: "0.06em", color: "var(--fg-2)",
              padding: "4px 9px",
              border: "1px solid var(--border-2)",
              borderRadius: 4,
              background: "var(--bg-1)",
              transition: "color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast)",
              ...(hover ? { color: "var(--fg-1)", borderColor: "var(--border-3)", background: "var(--bg-2)" } : {}),
            }}>{t}</span>
          ))}
        </div>
      </article>
  );
}

function Services() {
  return (
    <section id="services" style={{
      padding: "120px 0 96px",
      position: "relative",
      background: "var(--bg-2)",
      borderTop: "1px solid var(--border-1)",
      borderBottom: "1px solid var(--border-1)",
      overflow: "hidden",
    }}>
      {/* Drifting sphere — subtle section backdrop (parallax) */}
      <Parallax speed={0.12} style={{
        position: "absolute", left: "-180px", bottom: 60,
        width: 460, opacity: 0.10, pointerEvents: "none",
      }}>
        <img
          src="assets/motif-wireframe-sphere.svg" alt=""
          className="drift-x"
          style={{ width: "100%", display: "block" }}/>
      </Parallax>

      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 64, position: "relative" }}>
        <SectionHeader
          eyebrow="// SERVICES · 01 — 06"
          title={<>Six services<AccentDot /> One team.</>}
        />

        <div className="grid-3" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 24,
          alignItems: "stretch",
        }}>
          {SERVICE_LIST.map((s, i) => (
            <Reveal key={s.code} className="reveal-tilt" delay={i * 80}
              style={{ display: "flex", flexDirection: "column" }}>
              <ServiceCard s={s} i={i} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, ServiceCard });