const { useState } = React;

// ==== ESG ====
function ESG() {
  const items = [
    {
      L: "E",
      tag: "Environment",
      t: "Engineering a lower-carbon future.",
      items: [
        "Climate action infrastructure",
        "Circular recycling solutions",
        "Renewable energy co-investment",
        "Sustainable real estate",
      ],
    },
    {
      L: "S",
      tag: "Social",
      t: "Investing in people and place.",
      items: [
        "Higher education access",
        "Nutrition & food security",
        "Healthcare programmes",
        "Community partnerships",
      ],
    },
    {
      L: "G",
      tag: "Governance",
      t: "Stewardship, codified.",
      items: [
        "Independent oversight",
        "Alignment of incentives",
        "Transparent reporting",
        "Long-term accountability",
      ],
    },
  ];
  return (
    <section id="esg">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              Impact &amp; Stewardship
            </div>
            <h2 className="section-title">
              Returns, <em>measured</em> in more than currency.
            </h2>
          </div>
          <div className="right">
            <p className="body">
              The long horizon is only credible when returns are
              multi-dimensional. DeepRock measures the impact of its capital
              against environmental, social and governance frameworks — and
              reports against them with the same rigour as financial
              performance.
            </p>
          </div>
        </Reveal>
        <Reveal>
          <div className="esg-grid">
            {items.map((c) => (
              <div key={c.L} className="esg-card">
                <div className="letter">{c.L}</div>
                <div className="tag">{c.tag}</div>
                <h3>{c.t}</h3>
                <ul>
                  {c.items.map((label) => (
                    <li key={label}>
                      <span>{label}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ==== OUTLOOK ====
function Trajectory() {
  const [active, setActive] = React.useState(null);
  const [hover, setHover] = React.useState(null); // {x,y,year,mult} for scrubber
  const [drawn, setDrawn] = React.useState(false);
  const wrapRef = React.useRef(null);
  const svgRef = React.useRef(null);

  // Trigger the draw-in when the chart scrolls into view
  React.useEffect(() => {
    if (!wrapRef.current) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setDrawn(true);
        });
      },
      { threshold: 0.3 },
    );
    io.observe(wrapRef.current);
    return () => io.disconnect();
  }, []);

  // Marker data — positions + meaning
  const markers = [
    {
      x: 160,
      y: 308,
      year: "+5Y",
      mult: "0.4×",
      l: "Genesis",
      d: "Thesis crystallised. Founding mandates signed.",
    },
    {
      x: 260,
      y: 292,
      year: "+10Y",
      mult: "0.6×",
      l: "Expansion",
      d: "Co-investment platform institutionalised.",
    },
    {
      x: 360,
      y: 232,
      year: "+15Y",
      mult: "1.8×",
      l: "Integration",
      d: "Sector coverage extends across APAC & Gulf.",
    },
    {
      x: 460,
      y: 130,
      year: "+20Y",
      mult: "5×",
      l: "Platform",
      d: "ESG programmes measured portfolio-wide.",
    },
    {
      x: 560,
      y: 68,
      year: "+25Y",
      mult: "10×",
      l: "Horizon",
      d: "A self-sustaining, multi-generational ecosystem.",
    },
  ];

  // Sampled curve points so the cursor can snap to the line
  const curvePoints = React.useMemo(() => {
    // sample along the cubic from M60,320 through our control points
    const pts = [];
    const cubic = (t, p0, p1, p2, p3) => {
      const u = 1 - t;
      return (
        u * u * u * p0 +
        3 * u * u * t * p1 +
        3 * u * t * t * p2 +
        t * t * t * p3
      );
    };
    // split in two bezier segments matching the path
    // seg 1: M60,320 C 200,310 300,280 380,220
    // seg 2: continues S 520,80 600,50 → implicit c1 is reflected = 380 + (380-300)=460, 220+(220-280)=160
    const seg = [
      [
        [60, 320],
        [200, 310],
        [300, 280],
        [380, 220],
      ],
      [
        [380, 220],
        [460, 160],
        [520, 80],
        [600, 50],
      ],
    ];
    seg.forEach(([p0, p1, p2, p3]) => {
      for (let i = 0; i <= 60; i++) {
        const t = i / 60;
        pts.push([
          cubic(t, p0[0], p1[0], p2[0], p3[0]),
          cubic(t, p0[1], p1[1], p2[1], p3[1]),
        ]);
      }
    });
    return pts;
  }, []);

  function clientToSvg(clientX) {
    const svg = svgRef.current;
    if (!svg) return null;
    const rect = svg.getBoundingClientRect();
    const vx = ((clientX - rect.left) / rect.width) * 640;
    return vx;
  }

  function handleMove(e) {
    const vx = clientToSvg(e.clientX);
    if (vx == null || vx < 60 || vx > 600) {
      setHover(null);
      return;
    }
    // find closest sampled point
    let best = curvePoints[0],
      bd = 9999;
    for (const p of curvePoints) {
      const d = Math.abs(p[0] - vx);
      if (d < bd) {
        bd = d;
        best = p;
      }
    }
    // derive year and multiplier from x and y
    const pct = (best[0] - 60) / 540; // 0..1 across 0..25Y
    const years = pct * 25;
    // y: 320 bottom → 50 top; log scale 0..10×
    const yr = (320 - best[1]) / (320 - 50); // 0..1
    const mult = Math.max(0.2, yr * 10);
    setHover({
      x: best[0],
      y: best[1],
      year: `+${years.toFixed(1)}Y`,
      mult:
        mult >= 10
          ? "10×+"
          : mult >= 1
            ? mult.toFixed(1) + "×"
            : mult.toFixed(2) + "×",
    });
  }

  const detail = active != null ? markers[active] : null;

  return (
    <div className="traj-wrap" ref={wrapRef}>
      <svg
        ref={svgRef}
        viewBox="0 0 640 380"
        fill="none"
        onMouseMove={handleMove}
        onMouseLeave={() => setHover(null)}
        style={{
          width: "100%",
          height: "auto",
          display: "block",
          cursor: "crosshair",
        }}
      >
        <defs>
          <linearGradient id="trajFill" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#C9A961" stopOpacity="0.28" />
            <stop offset="1" stopColor="#C9A961" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="trajLine" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="#C9A961" stopOpacity="0.6" />
            <stop offset="0.5" stopColor="#E5C88F" stopOpacity="1" />
            <stop offset="1" stopColor="#F5E4B8" stopOpacity="1" />
          </linearGradient>
          <filter id="trajGlow" x="-10%" y="-10%" width="120%" height="120%">
            <feGaussianBlur stdDeviation="3" result="b" />
            <feMerge>
              <feMergeNode in="b" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        {/* axes */}
        <line
          x1="60"
          y1="320"
          x2="600"
          y2="320"
          stroke="#C9A961"
          strokeOpacity="0.25"
        />
        <line
          x1="60"
          y1="40"
          x2="60"
          y2="320"
          stroke="#C9A961"
          strokeOpacity="0.25"
        />

        {/* grid */}
        {[80, 140, 200, 260].map((y) => (
          <line
            key={y}
            x1="60"
            y1={y}
            x2="600"
            y2={y}
            stroke="#C9A961"
            strokeOpacity="0.06"
            strokeDasharray="2 3"
          />
        ))}
        {[160, 260, 360, 460, 540].map((x, i) => (
          <g key={x}>
            <line
              x1={x}
              y1="40"
              x2={x}
              y2="320"
              stroke="#C9A961"
              strokeOpacity="0.06"
              strokeDasharray="2 3"
            />
            <text
              x={x}
              y="340"
              textAnchor="middle"
              fontFamily="JetBrains Mono, monospace"
              fontSize="9"
              fill="#6E6A5E"
              letterSpacing="0.12em"
            >
              +{5 * (i + 1)}Y
            </text>
          </g>
        ))}

        {/* y labels */}
        {["1×", "2×", "5×", "10×"].map((l, i) => (
          <text
            key={l}
            x="48"
            y={320 - (i + 1) * 60}
            textAnchor="end"
            fontFamily="JetBrains Mono, monospace"
            fontSize="9"
            fill="#6E6A5E"
          >
            {l}
          </text>
        ))}

        {/* filled area — fades in after the line draws */}
        <path
          d="M 60 320 C 200 310, 300 280, 380 220 S 520 80, 600 50 L 600 320 Z"
          fill="url(#trajFill)"
          style={{
            opacity: drawn ? 1 : 0,
            transition: "opacity 1.4s ease 1.8s",
          }}
        />

        {/* the curve itself — draws in on scroll */}
        <path
          d="M 60 320 C 200 310, 300 280, 380 220 S 520 80, 600 50"
          stroke="url(#trajLine)"
          strokeWidth="1.8"
          fill="none"
          strokeLinecap="round"
          strokeDasharray="900"
          strokeDashoffset={drawn ? 0 : 900}
          style={{
            transition: "stroke-dashoffset 2.6s cubic-bezier(.2,.8,.2,1)",
          }}
          filter="url(#trajGlow)"
        />

        {/* invisible wider hit-path to catch the mouse near the curve */}
        <path
          d="M 60 320 C 200 310, 300 280, 380 220 S 520 80, 600 50"
          stroke="transparent"
          strokeWidth="40"
          fill="none"
          style={{ pointerEvents: "stroke" }}
        />

        {/* Markers (5 milestones) */}
        {markers.map((m, i) => {
          const isActive = active === i;
          return (
            <g
              key={m.l}
              style={{
                cursor: "pointer",
                opacity: drawn ? 1 : 0,
                transition: `opacity .6s ease ${1.4 + i * 0.12}s, transform .4s ease`,
                transform: isActive ? "scale(1.08)" : "scale(1)",
                transformOrigin: `${m.x}px ${m.y}px`,
              }}
              onClick={() => setActive(active === i ? null : i)}
              onMouseEnter={() => setActive(i)}
              onMouseLeave={() => setActive(null)}
            >
              {/* halo */}
              <circle
                cx={m.x}
                cy={m.y}
                r={isActive ? 16 : 10}
                fill="#E5C88F"
                opacity={isActive ? 0.18 : 0.08}
                style={{ transition: "r .35s ease, opacity .35s ease" }}
              />
              {/* tick + label */}
              <line
                x1={m.x}
                y1={m.y - 8}
                x2={m.x}
                y2={m.y - 30}
                stroke="#C9A961"
                strokeOpacity={isActive ? 0.9 : 0.5}
                style={{ transition: "stroke-opacity .3s" }}
              />
              <text
                x={m.x}
                y={m.y - 38}
                textAnchor="middle"
                fontFamily="Cormorant Garamond, serif"
                fontSize="13"
                fill={isActive ? "#F5E4B8" : "#E8E4D8"}
                fontStyle="italic"
                style={{ transition: "fill .3s" }}
              >
                {m.l}
              </text>
              {/* dot */}
              <circle
                cx={m.x}
                cy={m.y}
                r="4"
                fill={isActive ? "#E5C88F" : "#0A0E1A"}
                stroke="#E5C88F"
                strokeWidth="1.3"
                style={{ transition: "fill .3s" }}
              />
            </g>
          );
        })}

        {/* Hover scrubber */}
        {hover && (
          <g style={{ pointerEvents: "none" }}>
            <line
              x1={hover.x}
              y1={40}
              x2={hover.x}
              y2={320}
              stroke="#E5C88F"
              strokeOpacity="0.35"
              strokeDasharray="2 3"
            />
            <circle
              cx={hover.x}
              cy={hover.y}
              r="6"
              fill="#E5C88F"
              opacity="0.25"
            />
            <circle cx={hover.x} cy={hover.y} r="3" fill="#F5E4B8" />
            <g
              transform={`translate(${Math.min(hover.x + 10, 520)}, ${Math.max(hover.y - 40, 46)})`}
            >
              <rect
                x="0"
                y="0"
                width="108"
                height="36"
                rx="2"
                fill="#0A0E1A"
                stroke="#C9A961"
                strokeOpacity="0.4"
              />
              <text
                x="10"
                y="15"
                fontFamily="JetBrains Mono, monospace"
                fontSize="9"
                fill="#E5C88F"
                letterSpacing="0.14em"
              >
                {hover.year}
              </text>
              <text
                x="10"
                y="30"
                fontFamily="Cormorant Garamond, serif"
                fontSize="15"
                fill="#E8E4D8"
                fontStyle="italic"
              >
                {hover.mult} return
              </text>
            </g>
          </g>
        )}
      </svg>

      {/* Detail panel below chart — shows active milestone */}
      <div className={`traj-detail ${detail ? "is-active" : ""}`}>
        {detail ? (
          <>
            <div className="traj-detail-head">
              <span className="mono">{detail.year}</span>
              <span className="sep">·</span>
              <span className="mono gold">{detail.mult} projected return</span>
            </div>
            <div className="traj-detail-l">{detail.l}</div>
            <div className="traj-detail-d">{detail.d}</div>
          </>
        ) : (
          <div className="traj-detail-hint">
            <span className="mono">
              Hover the curve or any milestone to inspect projected compounding.
            </span>
          </div>
        )}
      </div>
    </div>
  );
}

function Outlook() {
  return (
    <section id="outlook">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              Outlook
            </div>
            <h2 className="section-title">
              An ecosystem designed to <em>compound</em>.
            </h2>
          </div>
          <div className="right">
            <p className="body">
              DeepRock is not an exit. It is a platform whose value is intended
              to be held — compounding across cycles, jurisdictions, and
              generations of members.
            </p>
          </div>
        </Reveal>
        <div className="outlook-grid">
          <Reveal>
            <div>
              <p className="lede" style={{ marginBottom: 32 }}>
                From a single strategic thesis — bridging opportunity and
                execution — the Network has grown into an architecture of
                capital, services and impact that reinforces itself at every
                horizon.
              </p>
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "auto 1fr",
                  gap: "16px 24px",
                  borderTop: "1px solid var(--hair-soft)",
                  paddingTop: 24,
                }}
              >
                {[
                  [
                    "+5Y",
                    "Deepen sector coverage across Asia-Pacific, Europe and Gulf.",
                  ],
                  [
                    "+10Y",
                    "Institutionalise the Network's co-investment platform.",
                  ],
                  [
                    "+15Y",
                    "Scale ESG programmes to portfolio-wide measurement.",
                  ],
                  [
                    "+25Y",
                    "A self-sustaining ecosystem — multi-generational by design.",
                  ],
                ].map(([k, v]) => (
                  <React.Fragment key={k}>
                    <div
                      className="mono"
                      style={{
                        color: "var(--gold)",
                        fontSize: 12,
                        letterSpacing: "0.18em",
                        paddingTop: 14,
                        borderTop: "1px solid var(--hair-soft)",
                      }}
                    >
                      {k}
                    </div>
                    <div
                      style={{
                        fontSize: 14,
                        color: "var(--ink-dim)",
                        paddingTop: 14,
                        borderTop: "1px solid var(--hair-soft)",
                        lineHeight: 1.6,
                      }}
                    >
                      {v}
                    </div>
                  </React.Fragment>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div className="panel gold" style={{ padding: "32px" }}>
              <Trajectory />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ==== FINAL CTA / CONTACT ====
function ClosingBridge() {
  return (
    <svg
      viewBox="0 0 1200 240"
      fill="none"
      preserveAspectRatio="xMidYMid slice"
      style={{ width: "100%", height: "100%", display: "block" }}
    >
      <defs>
        <linearGradient id="fcGold" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor="#C9A961" stopOpacity="0.02" />
          <stop offset="0.5" stopColor="#E5C88F" stopOpacity="0.9" />
          <stop offset="1" stopColor="#C9A961" stopOpacity="0.02" />
        </linearGradient>
        <radialGradient id="fcGlow" cx="0.5" cy="1" r="0.7">
          <stop offset="0" stopColor="#E5C88F" stopOpacity="0.22" />
          <stop offset="1" stopColor="#E5C88F" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="1200" height="240" fill="url(#fcGlow)" opacity="0.6" />
      {/* deck */}
      <line
        x1="0"
        y1="170"
        x2="1200"
        y2="170"
        stroke="url(#fcGold)"
        strokeWidth="1.3"
      />
      {/* pylons (mirrored from hero) */}
      {[400, 800].map((px) => (
        <g key={px}>
          <line
            x1={px}
            y1="30"
            x2={px}
            y2="170"
            stroke="#C9A961"
            strokeOpacity="0.55"
          />
          <line
            x1={px - 8}
            y1="30"
            x2={px + 8}
            y2="30"
            stroke="#E5C88F"
            strokeOpacity="0.7"
          />
          <circle cx={px} cy="26" r="2" fill="#E5C88F" />
        </g>
      ))}
      {/* cables */}
      {Array.from({ length: 9 }).map((_, i) => {
        const t = (i + 1) / 10;
        return (
          <g key={i}>
            <line
              x1="400"
              y1="30"
              x2={400 - 380 * t}
              y2="170"
              stroke="#C9A961"
              strokeOpacity={0.12 + t * 0.18}
              strokeWidth="0.5"
            />
            <line
              x1="400"
              y1="30"
              x2={400 + 200 * t}
              y2="170"
              stroke="#C9A961"
              strokeOpacity={0.3 - t * 0.15}
              strokeWidth="0.5"
            />
            <line
              x1="800"
              y1="30"
              x2={800 - 200 * t}
              y2="170"
              stroke="#C9A961"
              strokeOpacity={0.3 - t * 0.15}
              strokeWidth="0.5"
            />
            <line
              x1="800"
              y1="30"
              x2={800 + 380 * t}
              y2="170"
              stroke="#C9A961"
              strokeOpacity={0.12 + t * 0.18}
              strokeWidth="0.5"
            />
          </g>
        );
      })}
      {/* catenary */}
      <path
        d="M 20 110 Q 400 30 600 80 Q 800 30 1180 110"
        stroke="#E5C88F"
        strokeOpacity="0.75"
        strokeWidth="0.7"
        fill="none"
      />
      {/* node marks on deck */}
      {[200, 400, 600, 800, 1000].map((x) => (
        <g key={x}>
          <circle cx={x} cy="170" r="3" fill="#E5C88F" />
          <circle
            cx={x}
            cy="170"
            r="9"
            stroke="#C9A961"
            strokeOpacity="0.25"
            fill="none"
          />
        </g>
      ))}
      {/* traveling pulse */}
      <circle r="2" fill="#E5C88F">
        <animateMotion
          dur="9s"
          repeatCount="indefinite"
          path="M 0 170 L 1200 170"
        />
      </circle>
      <circle r="1.5" fill="#E5C88F" opacity="0.7">
        <animateMotion
          dur="9s"
          begin="-4.5s"
          repeatCount="indefinite"
          path="M 1200 170 L 0 170"
        />
      </circle>
    </svg>
  );
}

function FinalCTA() {
  const [status, setStatus] = useState("idle"); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    if (status === "sending") return;
    const fd = new FormData(e.currentTarget);
    const payload = {
      name: fd.get("name") || "",
      email: fd.get("email") || "",
      institution: fd.get("institution") || "",
      jurisdiction: fd.get("jurisdiction") || "",
      interest: fd.get("interest") || "",
      message: fd.get("message") || "",
      _subject: "New DeepRock Network enquiry",
      _captcha: "false",
      _template: "table",
    };
    setStatus("sending");
    setErrorMsg("");
    try {
      const res = await fetch(
        "https://formsubmit.co/ajax/deeprock.vc@gmail.com",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
          body: JSON.stringify(payload),
        },
      );
      // FormSubmit returns 200 even for the one-time "needs activation"
      // response. Anything in the 2xx range = the request was accepted on
      // their side; the inbox owner is responsible for the one-time activation
      // step. Only treat hard transport / non-2xx responses as user-visible
      // failures.
      if (!res.ok) {
        throw new Error("Submission failed (HTTP " + res.status + ")");
      }
      setStatus("sent");
    } catch (err) {
      setStatus("error");
      setErrorMsg(err.message || "Submission failed");
    }
  }

  return (
    <section id="contact" className="final-cta">
      <div className="grid-bg" />
      <div className="closing-bridge">
        <ClosingBridge />
      </div>
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div className="final-grid">
          <Reveal>
            <div>
              <div className="eyebrow" style={{ marginBottom: 32 }}>
                Invitation
              </div>
              <h2 className="section-title" style={{ marginBottom: 32 }}>
                Become part of the <em>Network</em>.
              </h2>
              <p className="lede" style={{ marginBottom: 40 }}>
                Membership is extended by invitation, following a considered
                review of strategic fit. Submit your interest and a member of
                the Principal Office will respond in confidence.
              </p>
              <div
                style={{
                  display: "flex",
                  gap: 40,
                  flexWrap: "wrap",
                  marginBottom: 32,
                }}
              >
                <div>
                  <div
                    className="mono"
                    style={{
                      color: "var(--ink-mute)",
                      fontSize: 10,
                      letterSpacing: "0.22em",
                      marginBottom: 8,
                    }}
                  >
                    PRINCIPAL OFFICE
                  </div>
                  <div
                    style={{
                      fontFamily: "Cormorant Garamond, serif",
                      fontSize: 22,
                      color: "var(--ink)",
                    }}
                  >
                    Zürich · Singapore
                  </div>
                </div>
                <div>
                  <div
                    className="mono"
                    style={{
                      color: "var(--ink-mute)",
                      fontSize: 10,
                      letterSpacing: "0.22em",
                      marginBottom: 8,
                    }}
                  >
                    CORRESPONDENCE
                  </div>
                  <div
                    style={{
                      fontFamily: "Cormorant Garamond, serif",
                      fontSize: 22,
                      color: "var(--ink)",
                    }}
                  >
                    deeprock.vc@gmail.com
                  </div>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <form className="form-panel" onSubmit={handleSubmit}>
              <div className="form-heading">Request an Introduction</div>
              {status === "sent" ? (
                <div style={{ padding: "40px 0", textAlign: "center" }}>
                  <div
                    style={{
                      fontFamily: "Cormorant Garamond, serif",
                      fontSize: 42,
                      fontStyle: "italic",
                      color: "var(--gold)",
                      marginBottom: 16,
                    }}
                  >
                    Received.
                  </div>
                  <p className="body">
                    Your enquiry has been lodged with the Principal Office. You
                    will hear from us within three business days.
                  </p>
                </div>
              ) : (
                <>
                  <div className="form-row">
                    <div className="field">
                      <label>Name</label>
                      <input
                        required
                        name="name"
                        type="text"
                        placeholder="Full name"
                      />
                    </div>
                    <div className="field">
                      <label>Institution</label>
                      <input
                        name="institution"
                        type="text"
                        placeholder="Organisation"
                      />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="field">
                      <label>Email</label>
                      <input
                        required
                        name="email"
                        type="email"
                        placeholder="name@organisation.com"
                      />
                    </div>
                    <div className="field">
                      <label>Jurisdiction</label>
                      <input
                        name="jurisdiction"
                        type="text"
                        placeholder="City, Country"
                      />
                    </div>
                  </div>
                  <div className="field" style={{ marginBottom: 24 }}>
                    <label>Area of interest</label>
                    <select name="interest" defaultValue="">
                      <option value="" disabled>
                        Select one
                      </option>
                      <option>Capital &amp; Growth</option>
                      <option>Elite &amp; Global Services</option>
                      <option>Sustainability &amp; Impact</option>
                      <option>Private Network Membership</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Message</label>
                    <textarea
                      name="message"
                      placeholder="Briefly describe the nature of your enquiry."
                    />
                  </div>
                  <button
                    type="submit"
                    className="btn primary form-cta"
                    disabled={status === "sending"}
                  >
                    {status === "sending" ? (
                      "Sending…"
                    ) : (
                      <>
                        Submit Enquiry <span className="arrow" />
                      </>
                    )}
                  </button>
                  {status === "error" && (
                    <p className="form-note" style={{ color: "#d88a8a" }}>
                      We could not lodge your enquiry just now. Please retry, or
                      write directly to deeprock.vc@gmail.com.
                    </p>
                  )}
                  <p className="form-note">
                    All correspondence is treated in strict confidence under the
                    DeepRock Network disclosure framework.
                  </p>
                </>
              )}
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HeritageSvg({ children }) {
  return (
    <svg
      viewBox="0 0 64 64"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{ width: "100%", height: "100%", display: "block" }}
    >
      {children}
    </svg>
  );
}

function SydneyOperaIcon() {
  return (
    <HeritageSvg>
      <line x1="6" y1="50" x2="58" y2="50" />
      <path d="M 10 50 C 12 34, 18 30, 24 50" />
      <path d="M 18 50 C 22 24, 30 20, 36 50" />
      <path d="M 30 50 C 36 26, 44 22, 50 50" />
      <path d="M 42 50 C 46 34, 52 32, 56 50" />
    </HeritageSvg>
  );
}

function HoustonRocketIcon() {
  return (
    <HeritageSvg>
      <path d="M 32 8 C 28 14, 26 20, 26 26 L 26 44 L 38 44 L 38 26 C 38 20, 36 14, 32 8 Z" />
      <circle cx="32" cy="24" r="2.6" />
      <path d="M 26 38 L 20 50 L 26 44" />
      <path d="M 38 38 L 44 50 L 38 44" />
      <path d="M 28 44 L 32 56 L 36 44" />
      <circle cx="12" cy="18" r="0.9" fill="currentColor" stroke="none" />
      <circle cx="52" cy="14" r="0.9" fill="currentColor" stroke="none" />
      <circle cx="50" cy="28" r="0.9" fill="currentColor" stroke="none" />
    </HeritageSvg>
  );
}

function DallasReunionIcon() {
  return (
    <HeritageSvg>
      <line x1="10" y1="54" x2="54" y2="54" />
      <line x1="29" y1="54" x2="29" y2="28" />
      <line x1="35" y1="54" x2="35" y2="28" />
      <circle cx="32" cy="20" r="8" />
      <ellipse cx="32" cy="20" rx="8" ry="2.6" />
      <line x1="32" y1="12" x2="32" y2="28" />
    </HeritageSvg>
  );
}

function NicosiaMosqueIcon() {
  return (
    <HeritageSvg>
      <line x1="4" y1="54" x2="60" y2="54" />
      <line x1="13" y1="54" x2="13" y2="20" />
      <path d="M 10 20 L 13 14 L 16 20" />
      <circle cx="13" cy="13" r="1.4" />
      <line x1="51" y1="54" x2="51" y2="20" />
      <path d="M 48 20 L 51 14 L 54 20" />
      <circle cx="51" cy="13" r="1.4" />
      <path d="M 20 54 L 20 32 L 44 32 L 44 54" />
      <path d="M 21 32 Q 32 16 43 32" />
      <path d="M 28 54 L 28 42 Q 32 38 36 42 L 36 54" />
    </HeritageSvg>
  );
}

function BangladeshMemorialIcon() {
  return (
    <HeritageSvg>
      <line x1="6" y1="54" x2="58" y2="54" />
      <path d="M 12 54 L 32 22 L 52 54" />
      <path d="M 18 54 L 32 30 L 46 54" />
      <path d="M 24 54 L 32 38 L 40 54" />
      <line x1="32" y1="12" x2="32" y2="54" />
    </HeritageSvg>
  );
}

const FOOTER_ADDRESSES = [
  { name: "Sydney, Australia", Icon: SydneyOperaIcon },
  { name: "Houston, TX, USA", Icon: HoustonRocketIcon },
  { name: "Dallas, TX, USA", Icon: DallasReunionIcon },
  { name: "Nicosia, Cyprus", Icon: NicosiaMosqueIcon },
  { name: "Bangladesh", Icon: BangladeshMemorialIcon },
];

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-addresses">
          <h5>Address</h5>
          <div className="footer-addresses-grid">
            {FOOTER_ADDRESSES.map(({ name, Icon }) => (
              <div key={name} className="footer-address">
                <div className="footer-address-icon">
                  <Icon />
                </div>
                <div className="footer-address-name">{name}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="footer-grid">
          <div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 12,
                marginBottom: 20,
              }}
            >
              <BrandMark />
              <span className="brand-name">
                Deep<em>rock</em>
              </span>
            </div>
            <p className="body" style={{ maxWidth: "40ch", fontSize: 13 }}>
              A private global network bridging opportunity and execution across
              eight jurisdictions.
            </p>
          </div>
          <div>
            <h5>Ecosystem</h5>
            <ul>
              <li>
                <a href="#pillars">Capital &amp; Growth</a>
              </li>
              <li>
                <a href="#pillars">Elite Services</a>
              </li>
              <li>
                <a href="#esg">Sustainability</a>
              </li>
              <li>
                <a href="#network">Private Network</a>
              </li>
            </ul>
          </div>
          <div>
            <h5>Enquiries</h5>
            <ul>
              <li>
                <a href="#contact">Membership</a>
              </li>
              <li>
                <a href="#contact">Advisory</a>
              </li>
              <li>
                <a href="#contact">Press</a>
              </li>
              <li>
                <a href="#contact">General</a>
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-base">
          <span>© 2026 The DeepRock Network. All rights reserved.</span>
          <span>Private · By invitation</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ESG, Outlook, FinalCTA, Footer });