// Process.jsx — "Our Process" — triangle diagram illustrating how partnerships scale:
// Expertise (First Time / Experiment) → Experience (2-n / Harden) → Efficiency (n² / Scale).
// Rendered as a single SVG so the geometry stays crisp and the typography matches the site system.

const Process = () => (
  <section className="pc-section pc-process" id="process">
    <div className="pc-section-head">
      <h2 className="pc-section-title">Our <em>Process</em></h2>
      <p className="pc-section-lede">
        Every engagement compounds. We start bespoke, harden the system, then
        scale it — so cost-per-video drops as the catalog grows.
      </p>
    </div>

    <div className="pc-proc-triangle-wrap">
      <ProcessTriangle />
      <div className="pc-proc-triangle-legend">
        <div>
          <span className="pc-rivet-sm">First time</span>
          <p>Custom strategy, original scripts, from-scratch visual system. We build a video factory by understanding your product at an engineering level — this is where the IP is built.</p>
        </div>
        <div>
          <span className="pc-rivet-sm">2 → n</span>
          <p>Harden the system. Templates, motion kits, and review loops kick in. Per-episode cost and timeline drop significantly.</p>
        </div>
        <div>
          <span className="pc-rivet-sm">n²</span>
          <p>Scale. Series, seasons, and localization run on rails — you get compounding output for a flat line on the spreadsheet.</p>
        </div>
      </div>
    </div>
  </section>
);

const ProcessTriangle = () => {
  // Base triangle coordinates in a 1200 x 600 viewport.
  // Apex shifted right so the left slope is long (First Time) and the right slope steep.
  const W = 1200, H = 600;
  const L = { x: 20,   y: 540 };   // bottom-left
  const R = { x: 1180, y: 540 };   // bottom-right
  const T = { x: 880,  y: 40  };   // apex (shifted right)

  // Interior vertical dividers — pick two x's along the base that split the
  // triangle into three zones (Expertise / Experience / Efficiency).
  const divX1 = 440;
  const divX2 = 770;

  // Interpolate where each divider hits the LEFT slope (L→T) — only divX1 hits
  // the left slope; divX2 hits the right slope (T→R).
  const onLeftSlope = (x) => {
    const t = (x - L.x) / (T.x - L.x);
    return { x, y: L.y + t * (T.y - L.y) };
  };
  const onRightSlope = (x) => {
    const t = (x - T.x) / (R.x - T.x);
    return { x, y: T.y + t * (R.y - T.y) };
  };
  const d1Top = onLeftSlope(divX1);
  const d2Top = onRightSlope(divX2);

  const stroke = "#000";
  const sw = 1.5;

  return (
    <svg
      className="pc-proc-triangle"
      viewBox={`0 0 ${W} ${H}`}
      role="img"
      aria-label="Process triangle — Expertise, Experience, Efficiency"
    >
      {/* Outer triangle */}
      <polygon
        points={`${L.x},${L.y} ${R.x},${R.y} ${T.x},${T.y}`}
        fill="none"
        stroke={stroke}
        strokeWidth={sw}
      />
      {/* Interior dividers (drop from the slopes down to the base) */}
      <line x1={d1Top.x} y1={d1Top.y} x2={divX1} y2={L.y} stroke={stroke} strokeWidth={sw} />
      <line x1={d2Top.x} y1={d2Top.y} x2={divX2} y2={L.y} stroke={stroke} strokeWidth={sw} />

      {/* Slope labels — sit just above each slope line, rotated along it. */}
      <g className="pc-proc-slope-labels">
        {(() => {
          // Helper: place a label offset perpendicularly "above" the segment a→b.
          const placeAbove = (a, b, offset = 16, tShift = 0.5) => {
            const ang = slopeAngle(a, b);
            const rad = (ang * Math.PI) / 180;
            // midpoint (with optional t-shift toward b)
            const mx = a.x + (b.x - a.x) * tShift;
            const my = a.y + (b.y - a.y) * tShift;
            // perpendicular "up" relative to slope direction
            const nx = -Math.sin(rad);
            const ny = Math.cos(rad);
            // "above" means the side that visually sits above the line going L→T.
            // Flip if the perpendicular points downward on screen (ny > 0).
            const sign = ny > 0 ? -1 : 1;
            return {
              x: mx + nx * offset * sign,
              y: my + ny * offset * sign,
              ang,
            };
          };

          const ft = placeAbove(L, T, 18, 0.5);
          const mid = placeAbove(d1Top, T, 18, 0.5);
          const n2 = placeAbove(T, R, 22, 0.5);

          return (
            <>
              <text x={ft.x} y={ft.y} textAnchor="middle"
                transform={`rotate(${ft.ang}, ${ft.x}, ${ft.y})`}>
                First time
              </text>
              <text x={mid.x} y={mid.y} textAnchor="middle"
                transform={`rotate(${mid.ang}, ${mid.x}, ${mid.y})`}>
                2 → n
              </text>
              <text x={n2.x} y={n2.y} textAnchor="middle"
                transform={`rotate(${n2.ang}, ${n2.x}, ${n2.y})`}>
                n²
              </text>
            </>
          );
        })()}
      </g>

      {/* Zone labels — inside each slice */}
      <g className="pc-proc-zone-labels">
        <text x={(L.x + divX1) / 2 + 30} y={L.y - 40} textAnchor="middle">Experiment</text>
        <text x={(divX1 + divX2) / 2}   y={L.y - 140} textAnchor="middle">Harden</text>
        <text x={(divX2 + R.x) / 2 - 20} y={L.y - 230} textAnchor="middle">Scale</text>
      </g>

      {/* Base labels (below the triangle) */}
      <g className="pc-proc-base-labels">
        <text x={(L.x + divX1) / 2} y={L.y + 44} textAnchor="middle">Expertise</text>
        <text x={(divX1 + divX2) / 2} y={L.y + 44} textAnchor="middle">Experience</text>
        <text x={(divX2 + R.x) / 2} y={L.y + 44} textAnchor="middle">Efficiency</text>
      </g>

      {/* Pink accent dots at the base breakpoints */}
      <g>
        <circle cx={L.x} cy={L.y} r="5" fill="var(--pc-pink)" />
        <circle cx={divX1} cy={L.y} r="5" fill="var(--pc-pink)" />
        <circle cx={divX2} cy={L.y} r="5" fill="var(--pc-pink)" />
        <circle cx={R.x} cy={L.y} r="5" fill="var(--pc-pink)" />
        <circle cx={T.x} cy={T.y} r="5" fill="var(--pc-pink)" />
      </g>
    </svg>
  );
};

function slopeAngle(a, b) {
  return (Math.atan2(b.y - a.y, b.x - a.x) * 180) / Math.PI;
}

window.Process = Process;