// schematics.jsx — Architectural diagrams in new dark/green/gold palette.
// Each diagram is a structured grid/layer composition, not abstract marketing shape.

// — Three-layer architecture (Demand / Conversion / Systems) —
function HeroArchitecture({ lang = "tr" }) {
  // Closed-loop decision cycle — diagram only, no peripheral text.
  const cx = 320,cy = 320,R = 210;
  const nodes = [
  { key: "olcum", name: "ÖLÇÜM", a: -90, hi: true },
  { key: "strateji", name: "STRATEJİ", a: 0 },
  { key: "sistem", name: "SİSTEM", a: 90 },
  { key: "operasyon", name: "OPERASYON", a: 180 }];

  const pt = (a, r = R) => [cx + r * Math.cos(a * Math.PI / 180), cy + r * Math.sin(a * Math.PI / 180)];
  const segs = [[-90, 0], [0, 90], [90, 180], [180, 270]].map(([a1, a2]) => pt(a2 - 24));

  return (
    <svg viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" role="img"
    aria-label="Büyüme Mimarisi · kapalı karar döngüsü"
    style={{ display: "block", width: "100%", height: "auto", background: "var(--hp-bg)" }}>
      <defs>
        <pattern id="ga-grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(187,203,198,0.05)" strokeWidth="0.6" />
        </pattern>
        <style>{`
          @keyframes ga-orbit { to { stroke-dashoffset: -34; } }
          @keyframes ga-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
          .ga-orbit { stroke-dasharray: 5 11; animation: ga-orbit 1.6s linear infinite; }
          .ga-node { animation: ga-pulse 2.8s ease-in-out infinite; }
          .ga-cell rect.ga-box { transition: fill .15s, stroke .15s; cursor: default; }
          .ga-cell:hover rect.ga-box { fill: var(--hp-green); stroke: var(--hp-gold); }
          @media (prefers-reduced-motion: reduce) { .ga-orbit, .ga-node { animation: none; } }
        `}</style>
      </defs>
      <rect width="640" height="640" fill="url(#ga-grid)" />

      {/* orbit guide ring */}
      <circle cx={cx} cy={cy} r={R} fill="none" stroke="var(--hp-line)" strokeWidth="1" />
      <circle className="ga-orbit" cx={cx} cy={cy} r={R} fill="none" stroke="var(--hp-green-3)" strokeWidth="1.5" opacity="0.6" />

      {/* directional arrowheads at each quadrant end */}
      {segs.map(([hx, hy], i) => {
        const a = ((i === 0 ? 0 : i === 1 ? 90 : i === 2 ? 180 : 270) - 24 + 90) * Math.PI / 180;
        const ax = Math.cos(a),ay = Math.sin(a),px = -ay,py = ax,L = 11,Wd = 6;
        const col = i === 3 ? "var(--hp-gold)" : "var(--hp-green-3)";
        return (
          <polygon key={i}
          points={`${hx + ax * L},${hy + ay * L} ${hx - ax * 2 + px * Wd},${hy - ay * 2 + py * Wd} ${hx - ax * 2 - px * Wd},${hy - ay * 2 - py * Wd}`}
          fill={col} />);
      })}

      {/* centre title */}
      <text x={cx} y={cy - 6} textAnchor="middle" fontFamily="'Inter Tight', sans-serif"
      fontSize="22" fontWeight="600" letterSpacing="-0.02em" fill="var(--hp-ink-strong)">Karar</text>
      <text x={cx} y={cy + 22} textAnchor="middle" fontFamily="'Inter Tight', sans-serif"
      fontSize="22" fontWeight="600" letterSpacing="-0.02em" fill="var(--hp-ink-strong)">Döngüsü</text>

      {/* nodes */}
      {nodes.map((n) => {
        const [nx, ny] = pt(n.a);
        const w = 184,h = 64,x = nx - w / 2,y = ny - h / 2;
        return (
          <g key={n.key} className="ga-cell">
            <rect className="ga-box" x={x} y={y} width={w} height={h}
            fill="var(--hp-bg-2)" stroke="var(--hp-line-strong)" strokeWidth="1" />
            <text x={nx} y={ny + 6} textAnchor="middle" fontFamily="'IBM Plex Mono', monospace"
            fontSize="18" fontWeight="700" letterSpacing="0.06em" fill="var(--hp-ink-strong)">{n.name}</text>
          </g>);
      })}
    </svg>);

}

// — 3×4 Hornpiper Matrix —
function HeroMatrix({ lang = "tr" }) {
  const M = {
    rows: ["Demand", "Conversion", "Systems"],
    cols: ["Diagnose", "Design", "Implement", "Optimize"],
    // 3 rows × 4 phases — short cell labels make the matrix legible, not empty.
    cells: [
    ["Kanal denetimi", "ICP & konumlandırma", "Demand engine", "Kanal kalibrasyonu"],
    ["Funnel denetimi", "Offer & akış", "Funnel kurulumu", "CRO"],
    ["Veri denetimi", "Veri & CRM mimarisi", "Automation & lifecycle", "Attribution & retention"]]

  };
  const W = 1320,H = 540;
  const padL = 210,padT = 168;
  const cw = (W - padL - 48) / 4;
  const ch = (H - padT - 56) / 3;

  return (
    <svg viewBox={`0 0 ${W} ${H}`} xmlns="http://www.w3.org/2000/svg" role="img"
    aria-label="Üç katman, dört faz · Demand × Conversion × Systems / Diagnose × Design × Implement × Optimize"
    style={{ display: "block", width: "100%", height: "auto", background: "var(--hp-bg)" }}>
      <defs>
        <pattern id="m-grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(187,203,198,0.04)" strokeWidth="0.6" />
        </pattern>
        <style>{`
          .m-cell rect.m-box { transition: fill .15s, stroke .15s; cursor: default; }
          .m-cell:hover rect.m-box { fill: var(--hp-green); stroke: var(--hp-gold); }
        `}</style>
      </defs>
      <rect width={W} height={H} fill="url(#m-grid)" data-comment-anchor="1191cb5c42-rect-105-7" />

      {/* dominant heading */}
      <text x="32" y="64" fontFamily="'Space Grotesk', sans-serif" fontSize="48" fontWeight="600"
      letterSpacing="-0.03em" fill="var(--hp-ink-strong)"><tspan fill="var(--hp-green-3)">Üç katman</tspan>, dört faz.</text>
      <text x="32" y="98" fontFamily="'Space Grotesk', sans-serif" fontSize="17" fontWeight="400"
      fill="var(--hp-gray-2)"><tspan fill="var(--hp-green-3)">Bottleneck</tspan> hangi hücrede ise, <tspan fill="var(--hp-green-3)">müdahale</tspan> oradan başlar.</text>

      {/* column headers — phase names only */}
      {M.cols.map((c, i) =>
      <text key={c} x={padL + cw * i + cw / 2} y={padT - 18} textAnchor="middle"
      fontFamily="'Space Grotesk', sans-serif" fontSize="19" fontWeight="600"
      letterSpacing="-0.015em" fill="var(--hp-gold)">{c}</text>
      )}

      {/* row headers — layer names only */}
      {M.rows.map((r, i) =>
      <text key={r} x={padL - 28} y={padT + ch * i + ch / 2 + 6} textAnchor="end"
      fontFamily="'Space Grotesk', sans-serif" fontSize="22" fontWeight="600"
      letterSpacing="-0.015em" fill="var(--hp-ink-strong)">{r}</text>
      )}

      {/* cells — uniform treatment, glow on hover */}
      {M.cells.map((row, r) => row.map((label, c) => {
        const x = padL + cw * c;
        const y = padT + ch * r;
        return (
          <g key={`${r}-${c}`} className="m-cell">
            <rect className="m-box" x={x + 5} y={y + 5} width={cw - 10} height={ch - 10}
            fill="var(--hp-bg-2)" stroke="var(--hp-line-strong)" strokeWidth="1" />
            {/* gold top accent bar */}
            <rect x={x + 5} y={y + 5} width={cw - 10} height="2" fill="var(--hp-gold)" opacity="0.5" />
            <text x={x + 20} y={y + ch / 2 + 6} fontFamily="'Space Grotesk', sans-serif"
            fontSize="15" fontWeight="500" letterSpacing="-0.01em"
            fill="var(--hp-ink-strong)">{label}</text>
          </g>);

      }))}
    </svg>);

}

// — DDIO methodology track —
function HeroMethodology({ lang = "tr" }) {
  const steps = HP_DATA.home.approach.steps;
  const W = 1320,H = 360;
  const step_w = (W - 80) / 4;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} xmlns="http://www.w3.org/2000/svg"
    style={{ display: "block", width: "100%", height: "auto", background: "var(--hp-bg)" }}>
      <text x={W - 32} y="36" textAnchor="end" fontFamily="'IBM Plex Mono', monospace" fontSize="11"
      letterSpacing="0.12em" fill="var(--hp-gold)">DDIO Methodology</text>
      <line x1="32" y1="50" x2={W - 32} y2="50" stroke="var(--hp-line)" />

      <line x1="40" y1="190" x2={W - 40} y2="190" stroke="var(--hp-line-strong)" strokeWidth="1" />

      {steps.map((s, i) => {
        const x = 40 + i * step_w;
        const cx = x + step_w / 2;
        const isFirst = i === 0;
        return (
          <g key={s.n}>
            {/* tick */}
            <line x1={cx} y1="180" x2={cx} y2="200" stroke="var(--hp-gold)" strokeWidth="2" />
            <circle cx={cx} cy="190" r="7" fill={isFirst ? "var(--hp-gold)" : "var(--hp-bg)"} stroke="var(--hp-gold)" strokeWidth="2" />

            {/* name above */}
            <text x={cx} y="120" textAnchor="middle" fontFamily="'IBM Plex Mono', monospace"
            fontSize="11" letterSpacing="0.12em" fill="var(--hp-gold)">PHASE {s.n}</text>
            <text x={cx} y="160" textAnchor="middle" fontFamily="'Inter Tight', sans-serif"
            fontSize="32" fontWeight="600" letterSpacing="-0.02em"
            fill="var(--hp-ink-strong)">{s.name}</text>

            {/* short below */}
            <foreignObject x={x + 24} y="220" width={step_w - 48} height="120">
              <div xmlns="http://www.w3.org/1999/xhtml" style={{
                fontFamily: "'Inter Tight', sans-serif", fontSize: 13.5, fontWeight: 400,
                lineHeight: 1.55, color: "var(--hp-ink)", textAlign: "center"
              }}>
                {["Identifies the Growth Bottleneck.", "Builds the architecture.", "Turns architecture into an operating system.", "Measures, calibrates, compounds."][i]}
              </div>
            </foreignObject>
          </g>);

      })}
    </svg>);

}

// — Bottleneck diagnostic (problem section) —
function HeroBottleneck({ lang = "tr" }) {
  return (
    <svg viewBox="0 0 1320 460" xmlns="http://www.w3.org/2000/svg"
    style={{ display: "block", width: "100%", height: "auto", background: "var(--hp-bg)" }}>
      <line x1="32" y1="50" x2="1288" y2="50" stroke="var(--hp-line)" />
      <text x="1288" y="36" textAnchor="end" fontFamily="'IBM Plex Mono', monospace" fontSize="11"
      letterSpacing="0.12em" fill="var(--hp-gold)">Bottleneck Teşhisi</text>

      {/* surface row */}
      <text x="32" y="86" fontFamily="'IBM Plex Mono', monospace" fontSize="11"
      letterSpacing="0.12em" fill="var(--hp-ink-mute)">GÖRÜNEN SEMPTOM</text>
      {["Reklam çalışmıyor", "Lead düşük conversion", "SEO zayıf", "Ekip yetişmiyor"].map((s, i) =>
      <g key={s}>
          <rect x={32 + i * 320} y="100" width="296" height="80" fill="var(--hp-bg-2)" stroke="var(--hp-line-strong)" strokeWidth="1" />
          <text x={32 + i * 320 + 16} y="146" fontFamily="'Inter Tight', sans-serif"
        fontSize="17" fontWeight="500" fill="var(--hp-ink)">{s}</text>
        </g>
      )}

      {/* arrow */}
      {[0, 1, 2, 3].map((i) =>
      <g key={i}>
          <line x1={32 + i * 320 + 148} y1="190" x2={32 + i * 320 + 148} y2="240" stroke="var(--hp-gold)" strokeWidth="1.5" />
          <path d={`M ${32 + i * 320 + 144} 236 L ${32 + i * 320 + 148} 242 L ${32 + i * 320 + 152} 236 Z`} fill="var(--hp-gold)" />
        </g>
      )}

      {/* root row */}
      <text x="32" y="276" fontFamily="'IBM Plex Mono', monospace" fontSize="11"
      letterSpacing="0.12em" fill="var(--hp-gold)">GERÇEK KÖKEN</text>
      {[
      "Mesaj mimarisi",
      "Funnel yapısı",
      "Kategori & content architecture",
      "Systems katmanı"].
      map((s, i) =>
      <g key={s}>
          <rect x={32 + i * 320} y="290" width="296" height="80" fill="var(--hp-green)" stroke="var(--hp-gold)" strokeWidth="1.5" />
          <text x={32 + i * 320 + 16} y="316" fontFamily="'IBM Plex Mono', monospace"
        fontSize="11" letterSpacing="0.12em" fill="var(--hp-gold)">L/{String(i + 1).padStart(2, "0")}</text>
          <text x={32 + i * 320 + 16} y="346" fontFamily="'Inter Tight', sans-serif"
        fontSize="17" fontWeight="600" letterSpacing="-0.01em" fill="var(--hp-ink-strong)">{s}</text>
        </g>
      )}

      <line x1="32" y1="410" x2="1288" y2="410" stroke="var(--hp-line)" />
      <text x="32" y="438" fontFamily="'IBM Plex Mono', monospace" fontSize="10"
      letterSpacing="0.12em" fill="var(--hp-ink-mute)">Semptomun altında yapısal bir sorun vardır.</text>
      <text x="1288" y="438" textAnchor="end" fontFamily="'IBM Plex Mono', monospace" fontSize="10"
      letterSpacing="0.12em" fill="var(--hp-ink-mute)">Semptom → Kök → Mimari</text>
    </svg>);

}

Object.assign(window, { HeroArchitecture, HeroMatrix, HeroMethodology, HeroBottleneck });