const { useEffect, useRef } = React;

// ==== PRIVATE NETWORK MODEL ====
function NetworkModel() {
  return (
    <svg
      viewBox="0 0 1100 620"
      fill="none"
      style={{ width: "100%", height: "auto", display: "block" }}
    >
      {/* Column titles */}
      <g
        fontFamily="JetBrains Mono, monospace"
        fontSize="10"
        fill="#B8B2A0"
        letterSpacing="0.26em"
      >
        <text x="140" y="52">
          ORIGIN · OPPORTUNITY
        </text>
        <text x="485" y="52">
          THE DEEPROCK NETWORK
        </text>
        <text x="860" y="52">
          EXECUTION · CAPITAL
        </text>
      </g>
      <g
        fontFamily="Manrope, sans-serif"
        fontSize="13"
        fill="#6E6A5E"
        letterSpacing="0.04em"
      >
        <text x="140" y="74">
          Founders, operators, family offices
        </text>
        <text x="485" y="74">
          The private connective tissue
        </text>
        <text x="860" y="74">
          Investors, partners, principals
        </text>
      </g>

      {/* Left nodes */}
      {[
        { y: 140, l: "Founders" },
        { y: 220, l: "Operators" },
        { y: 300, l: "Family Offices" },
        { y: 380, l: "Institutions" },
        { y: 460, l: "Sovereign" },
      ].map((n, i) => (
        <g key={"L" + i}>
          <rect
            x="80"
            y={n.y - 22}
            width="200"
            height="44"
            fill="#0A0E1A"
            stroke="#C9A961"
            strokeOpacity="0.28"
          />
          <line
            x1="80"
            y1={n.y}
            x2="96"
            y2={n.y}
            stroke="#C9A961"
            strokeOpacity="0.5"
          />
          <text
            x="106"
            y={n.y + 4}
            fontFamily="Cormorant Garamond, serif"
            fontSize="17"
            fill="#E8E4D8"
          >
            {n.l}
          </text>
          <text
            x="260"
            y={n.y + 4}
            fontFamily="JetBrains Mono, monospace"
            fontSize="9"
            fill="#6E6A5E"
            textAnchor="end"
            letterSpacing="0.18em"
          >
            {String(i + 1).padStart(2, "0")}
          </text>
        </g>
      ))}

      {/* Right nodes */}
      {[
        { y: 140, l: "Private Capital" },
        { y: 220, l: "Strategic Partners" },
        { y: 300, l: "Co-Investors" },
        { y: 380, l: "Operating Groups" },
        { y: 460, l: "Global Advisory" },
      ].map((n, i) => (
        <g key={"R" + i}>
          <rect
            x="820"
            y={n.y - 22}
            width="200"
            height="44"
            fill="#0A0E1A"
            stroke="#C9A961"
            strokeOpacity="0.28"
          />
          <line
            x1="1004"
            y1={n.y}
            x2="1020"
            y2={n.y}
            stroke="#C9A961"
            strokeOpacity="0.5"
          />
          <text
            x="994"
            y={n.y + 4}
            fontFamily="Cormorant Garamond, serif"
            fontSize="17"
            fill="#E8E4D8"
            textAnchor="end"
          >
            {n.l}
          </text>
          <text
            x="840"
            y={n.y + 4}
            fontFamily="JetBrains Mono, monospace"
            fontSize="9"
            fill="#6E6A5E"
            letterSpacing="0.18em"
          >
            {String(i + 1).padStart(2, "0")}
          </text>
        </g>
      ))}

      {/* Core — restrained */}
      <circle
        cx="550"
        cy="300"
        r="110"
        stroke="#C9A961"
        strokeOpacity="0.18"
        strokeDasharray="2 6"
      />
      <circle cx="550" cy="300" r="80" stroke="#C9A961" strokeOpacity="0.3" />
      <circle
        cx="550"
        cy="300"
        r="50"
        fill="#070A13"
        stroke="#C9A961"
        strokeOpacity="0.7"
      />
      <text
        x="550"
        y="296"
        textAnchor="middle"
        fontFamily="Cormorant Garamond, serif"
        fontSize="24"
        fill="#E8E4D8"
        fontStyle="italic"
      >
        DR
      </text>
      <text
        x="550"
        y="316"
        textAnchor="middle"
        fontFamily="JetBrains Mono, monospace"
        fontSize="7"
        fill="#C9A961"
        letterSpacing="0.3em"
      >
        NETWORK
      </text>

      {/* Flow lines — restrained */}
      {[140, 220, 300, 380, 460].map((y, i) => (
        <g key={"fl" + i}>
          <path
            d={`M 280 ${y} Q 420 ${y} 500 300`}
            stroke="#C9A961"
            strokeOpacity="0.16"
            strokeWidth="0.6"
            fill="none"
          />
          <circle r="1.8" fill="#E5C88F" opacity="0.9">
            <animateMotion
              dur={`${6 + i * 0.3}s`}
              repeatCount="indefinite"
              path={`M 280 ${y} Q 420 ${y} 500 300`}
            />
            <animate
              attributeName="opacity"
              values="0;0.9;0.9;0"
              dur={`${6 + i * 0.3}s`}
              repeatCount="indefinite"
            />
          </circle>
        </g>
      ))}
      {[140, 220, 300, 380, 460].map((y, i) => (
        <g key={"fr" + i}>
          <path
            d={`M 600 300 Q 680 ${y} 820 ${y}`}
            stroke="#C9A961"
            strokeOpacity="0.16"
            strokeWidth="0.6"
            fill="none"
          />
          <circle r="1.8" fill="#E5C88F" opacity="0.9">
            <animateMotion
              dur={`${6 + i * 0.3}s`}
              begin={`${-3 - i * 0.15}s`}
              repeatCount="indefinite"
              path={`M 600 300 Q 680 ${y} 820 ${y}`}
            />
            <animate
              attributeName="opacity"
              values="0;0.9;0.9;0"
              dur={`${6 + i * 0.3}s`}
              begin={`${-3 - i * 0.15}s`}
              repeatCount="indefinite"
            />
          </circle>
        </g>
      ))}
    </svg>
  );
}

// ==== MOBILE VARIANT — vertical reflow of NetworkModel for ≤720px ====
function NetworkModelMobile() {
  const topNodes = [
    { x: 30, y: 100, l: "Founders" },
    { x: 220, y: 100, l: "Operators" },
    { x: 30, y: 160, l: "Family Offices" },
    { x: 220, y: 160, l: "Institutions" },
    { x: 125, y: 220, l: "Sovereign" },
  ];
  const btmNodes = [
    { x: 30, y: 495, l: "Private Capital" },
    { x: 220, y: 495, l: "Strategic Partners" },
    { x: 30, y: 555, l: "Co-Investors" },
    { x: 220, y: 555, l: "Operating Groups" },
    { x: 125, y: 615, l: "Global Advisory" },
  ];
  const topPaths = [
    "M 105 138 C 105 220 170 275 200 300",
    "M 295 138 C 295 220 230 275 200 300",
    "M 105 198 C 105 260 150 290 200 300",
    "M 295 198 C 295 260 250 290 200 300",
    "M 200 258 L 200 300",
  ];
  const btmPaths = [
    "M 200 450 C 170 480 120 490 105 495",
    "M 200 450 C 230 480 280 490 295 495",
    "M 200 450 C 150 500 115 540 105 555",
    "M 200 450 C 250 500 285 540 295 555",
    "M 200 450 L 200 615",
  ];
  return (
    <svg
      viewBox="0 0 400 700"
      fill="none"
      style={{ width: "100%", height: "auto", display: "block" }}
    >
      {/* Top eyebrow */}
      <text
        x="200"
        y="24"
        textAnchor="middle"
        fontFamily="JetBrains Mono, monospace"
        fontSize="10"
        fill="#B8B2A0"
        letterSpacing="0.26em"
      >
        ORIGIN · OPPORTUNITY
      </text>
      <text
        x="200"
        y="44"
        textAnchor="middle"
        fontFamily="Manrope, sans-serif"
        fontSize="11"
        fill="#6E6A5E"
        letterSpacing="0.04em"
      >
        Founders, operators, family offices
      </text>

      {/* Top nodes — 2/2/1 layout */}
      {topNodes.map((n, i) => (
        <g key={"mt" + i}>
          <rect
            x={n.x}
            y={n.y}
            width="150"
            height="38"
            fill="#0A0E1A"
            stroke="#C9A961"
            strokeOpacity="0.28"
          />
          <line
            x1={n.x}
            y1={n.y + 19}
            x2={n.x + 14}
            y2={n.y + 19}
            stroke="#C9A961"
            strokeOpacity="0.5"
          />
          <text
            x={n.x + 22}
            y={n.y + 24}
            fontFamily="Cormorant Garamond, serif"
            fontSize="14"
            fill="#E8E4D8"
          >
            {n.l}
          </text>
          <text
            x={n.x + 140}
            y={n.y + 24}
            fontFamily="JetBrains Mono, monospace"
            fontSize="8"
            fill="#6E6A5E"
            textAnchor="end"
            letterSpacing="0.18em"
          >
            {String(i + 1).padStart(2, "0")}
          </text>
        </g>
      ))}

      {/* Top flow lines — converge to DR top at (200, 300) */}
      {topPaths.map((p, i) => (
        <g key={"tp" + i}>
          <path
            d={p}
            stroke="#C9A961"
            strokeOpacity="0.16"
            strokeWidth="0.6"
            fill="none"
          />
          <circle r="1.8" fill="#E5C88F" opacity="0.9">
            <animateMotion
              dur={`${6 + i * 0.3}s`}
              repeatCount="indefinite"
              path={p}
            />
            <animate
              attributeName="opacity"
              values="0;0.9;0.9;0"
              dur={`${6 + i * 0.3}s`}
              repeatCount="indefinite"
            />
          </circle>
        </g>
      ))}

      {/* Core — DR circle at (200, 375) */}
      <circle
        cx="200"
        cy="375"
        r="80"
        stroke="#C9A961"
        strokeOpacity="0.18"
        strokeDasharray="2 6"
      />
      <circle cx="200" cy="375" r="58" stroke="#C9A961" strokeOpacity="0.3" />
      <circle
        cx="200"
        cy="375"
        r="40"
        fill="#070A13"
        stroke="#C9A961"
        strokeOpacity="0.7"
      />
      <text
        x="200"
        y="372"
        textAnchor="middle"
        fontFamily="Cormorant Garamond, serif"
        fontSize="22"
        fill="#E8E4D8"
        fontStyle="italic"
      >
        DR
      </text>
      <text
        x="200"
        y="390"
        textAnchor="middle"
        fontFamily="JetBrains Mono, monospace"
        fontSize="7"
        fill="#C9A961"
        letterSpacing="0.3em"
      >
        NETWORK
      </text>

      {/* Bottom flow lines — diverge from DR bottom at (200, 450) */}
      {btmPaths.map((p, i) => (
        <g key={"bp" + i}>
          <path
            d={p}
            stroke="#C9A961"
            strokeOpacity="0.16"
            strokeWidth="0.6"
            fill="none"
          />
          <circle r="1.8" fill="#E5C88F" opacity="0.9">
            <animateMotion
              dur={`${6 + i * 0.3}s`}
              begin={`${-3 - i * 0.15}s`}
              repeatCount="indefinite"
              path={p}
            />
            <animate
              attributeName="opacity"
              values="0;0.9;0.9;0"
              dur={`${6 + i * 0.3}s`}
              begin={`${-3 - i * 0.15}s`}
              repeatCount="indefinite"
            />
          </circle>
        </g>
      ))}

      {/* Bottom nodes */}
      {btmNodes.map((n, i) => (
        <g key={"mb" + i}>
          <rect
            x={n.x}
            y={n.y}
            width="150"
            height="38"
            fill="#0A0E1A"
            stroke="#C9A961"
            strokeOpacity="0.28"
          />
          <line
            x1={n.x + 136}
            y1={n.y + 19}
            x2={n.x + 150}
            y2={n.y + 19}
            stroke="#C9A961"
            strokeOpacity="0.5"
          />
          <text
            x={n.x + 128}
            y={n.y + 24}
            fontFamily="Cormorant Garamond, serif"
            fontSize="14"
            fill="#E8E4D8"
            textAnchor="end"
          >
            {n.l}
          </text>
          <text
            x={n.x + 10}
            y={n.y + 24}
            fontFamily="JetBrains Mono, monospace"
            fontSize="8"
            fill="#6E6A5E"
            letterSpacing="0.18em"
          >
            {String(i + 1).padStart(2, "0")}
          </text>
        </g>
      ))}

      {/* Bottom eyebrow */}
      <text
        x="200"
        y="676"
        textAnchor="middle"
        fontFamily="JetBrains Mono, monospace"
        fontSize="10"
        fill="#B8B2A0"
        letterSpacing="0.26em"
      >
        EXECUTION · CAPITAL
      </text>
      <text
        x="200"
        y="694"
        textAnchor="middle"
        fontFamily="Manrope, sans-serif"
        fontSize="11"
        fill="#6E6A5E"
        letterSpacing="0.04em"
      >
        Investors, partners, principals
      </text>
    </svg>
  );
}

function PrivateNetwork() {
  return (
    <section id="network">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              The Network
            </div>
            <h2 className="section-title">
              The <em>connective</em> tissue
              <br />
              between ideas and capital.
            </h2>
          </div>
          <div className="right">
            <p className="body">
              At the centre sits the Network — a curated, confidential layer
              where founders meet long-horizon investors and operators meet the
              capital to realise what they have built. Nothing moves loudly.
              Everything moves deliberately.
            </p>
          </div>
        </Reveal>
        <Reveal>
          <div className="network-stage panel">
            <div className="network-desktop">
              <NetworkModel />
            </div>
            <div className="network-mobile">
              <NetworkModelMobile />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ==== PRINCIPLES ====
function Principles() {
  const list = [
    {
      n: "01",
      t: "Own It",
      d: "Accountability at every seat. We do not outsource judgement, nor diffuse responsibility. A principal reality at all levels.",
    },
    {
      n: "02",
      t: "Deliver Value Fast",
      d: "Velocity with discipline. We compress the distance between conviction and execution without compromising craft.",
    },
    {
      n: "03",
      t: "Stay Humble",
      d: "Conviction tempered by inquiry. The moment we stop listening is the moment we stop compounding.",
    },
  ];
  const Mark = ({ i }) =>
    i === 0 ? (
      // Own It — open palm raised (accountability gesture)
      <svg
        className="mark"
        viewBox="0 0 64 64"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.4"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {/* Pinky */}
        <path d="M19 36 L19 23 C 19 20 22 18 24 19 C 26 19 28 21 28 23 L 28 36" />
        {/* Ring */}
        <path d="M28 36 L28 16 C 28 13 30 11 33 11 C 35 11 37 13 37 16 L 37 36" />
        {/* Middle (tallest) */}
        <path d="M37 36 L37 13 C 37 10 39 8 42 8 C 44 8 46 10 46 13 L 46 36" />
        {/* Index */}
        <path d="M46 36 L46 18 C 46 15 48 13 50 13 C 52 13 54 15 54 18 L 54 36" />
        {/* Thumb (curling out left) */}
        <path d="M19 32 C 14 30 11 33 12 37 C 13 40 16 41 19 41" />
        {/* Palm + lower hand */}
        <path d="M19 36 L19 42 C 19 51 26 58 35 58 C 47 58 54 50 54 40 L 54 36" />
        {/* Subtle palm crease */}
        <path d="M24 46 C 30 50 38 50 46 46" opacity="0.5" strokeWidth="1.1" />
      </svg>
    ) : i === 1 ? (
      // Deliver Value Fast — clock with motion lines (speed)
      <svg
        className="mark"
        viewBox="0 0 64 64"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.4"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {/* Motion lines on the left */}
        <line x1="3" y1="20" x2="17" y2="20" />
        <line x1="2" y1="32" x2="18" y2="32" />
        <line x1="3" y1="44" x2="17" y2="44" />
        {/* Clock face */}
        <circle cx="42" cy="32" r="18" />
        {/* Hour ticks (12, 3, 6, 9) */}
        <line x1="42" y1="16" x2="42" y2="19" />
        <line x1="58" y1="32" x2="55" y2="32" />
        <line x1="42" y1="48" x2="42" y2="45" />
        <line x1="26" y1="32" x2="29" y2="32" />
        {/* Hour hand (12 o'clock) */}
        <path d="M42 32 L42 21" strokeWidth="1.6" />
        {/* Minute hand (3 o'clock — implies "go fast") */}
        <path d="M42 32 L52 32" strokeWidth="1.6" />
        {/* Center pivot */}
        <circle cx="42" cy="32" r="1.6" fill="currentColor" stroke="none" />
      </svg>
    ) : (
      // Stay Humble — heart held in open hand
      <svg
        className="mark"
        viewBox="0 0 64 64"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.4"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {/* Heart on top */}
        <path
          d="M32 24
             C 28 18 19 19 19 27
             C 19 33 32 41 32 41
             C 32 41 45 33 45 27
             C 45 19 36 18 32 24 Z"
        />
        {/* Open hand cradling — curved bowl */}
        <path
          d="M10 42
             C 10 40 12 38 14 38
             L 50 38
             C 52 38 54 40 54 42
             L 54 46
             C 54 52 48 57 41 57
             L 23 57
             C 16 57 10 52 10 46 Z"
        />
        {/* Subtle palm-line for liveliness */}
        <path d="M16 47 C 24 50 40 50 48 47" opacity="0.5" strokeWidth="1.1" />
      </svg>
    );
  return (
    <section
      id="principles"
      style={{
        background:
          "linear-gradient(to bottom, transparent, rgba(15,21,36,0.35), transparent)",
      }}
    >
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              Leadership Principles
            </div>
            <h2 className="section-title">
              How we <em>operate</em>.
            </h2>
          </div>
          <div className="right">
            <p className="body">
              Three statements that govern every decision — from capital
              allocation to the smallest interaction with a member of the
              Network.
            </p>
          </div>
        </Reveal>
        <Reveal>
          <div className="principles-grid">
            {list.map((p, i) => (
              <div key={p.n} className="principle">
                <Mark i={i} />
                <div className="principle-body">
                  <h3>{p.t}</h3>
                  <p>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { PrivateNetwork, Principles });