/* =========================================================
   Hero — frank claim, supporting line, two CTAs, schematic.
   Light parchment surface; dark variant available via tweaks.
   ========================================================= */
function Hero({ surface = "light" }) {
  const dark = surface === "dark";
  const bg = dark ? "var(--az-malachite)" : "var(--az-parchment)";
  const fg = dark ? "var(--az-parchment)" : "var(--az-ink)";
  const fgMuted = dark ? "rgba(242,238,225,0.72)" : "var(--az-ink-soft)";
  const eyebrow = dark ? "var(--az-chartreuse)" : "var(--az-ink-soft)";

  return (
    <section
      id="top"
      data-screen-label="Hero"
      style={{
        background: bg,
        color: fg,
        padding: "72px 40px 96px",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          maxWidth: 1440,
          margin: "0 auto",
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
          gap: 64,
          alignItems: "center",
        }}
        className="hero-grid"
      >
        {/* Copy column */}
        <div>
          <h1
            style={{
              margin: 0,
              fontFamily: "var(--ff-display)",
              fontWeight: 300,
              fontSize: "clamp(56px, 7.4vw, 116px)",
              lineHeight: 0.92,
              letterSpacing: "-0.045em",
              color: fg,
              maxWidth: 880,
            }}
          >
            A public square
            <br />
            for{" "}
            <em
              style={{
                fontStyle: "italic",
                fontFamily: "var(--ff-display)",
                color: dark ? "var(--az-chartreuse)" : "var(--az-ink-soft)",
              }}
            >
              private trades.
            </em>
          </h1>

          <p
            style={{
              margin: "32px 0 0",
              fontFamily: "var(--ff-serif)",
              fontWeight: 300,
              fontSize: 22,
              lineHeight: 1.4,
              color: fgMuted,
              maxWidth: 580,
            }}
          >
            <a
              href="#bazaar"
              style={{
                color: "inherit",
                textDecoration: "none",
                borderBottom: `1px solid ${dark ? "rgba(242,238,225,0.45)" : "rgba(26,20,0,0.35)"}`,
                paddingBottom: 1,
              }}
            >
              BAZaar
            </a>{" "}
            is the first app built on the Aztec Escrow Kit: a peer-to-peer
            digital-items marketplace where buyer identity stays selectively
            disclosed to the matched seller, and funds release on a
            zero-knowledge proof of the trade itself. Build the next one with
            the same primitives.
          </p>

          <div style={{ marginTop: 40, display: "flex", flexWrap: "wrap", gap: 14 }}>
            <CTA as="a" href="https://escrow.aztec.network/bazaar">
              View live demo →
            </CTA>
            <CTA as="a" href="https://docs.aztec.network/escrow-kit/install-skill" variant={dark ? "ghost-dark" : "ghost"}>
              Read the skill docs →
            </CTA>
          </div>
        </div>

        {/* Schematic column */}
        <div style={{ position: "relative" }}>
          <HeroSchematic dark={dark} />
        </div>
      </div>

    </section>
  );
}

/* =========================================================
   HeroSchematic — Open → Locked → Released | Refunded
   The transition arrow Locked → Released is marked as a zkTLS proof.
   Renaissance vibe via the Aztec layered-diamond glyphs used as state markers.
   ========================================================= */
function HeroSchematic({ dark }) {
  const ink = dark ? "var(--az-parchment)" : "var(--az-ink)";
  const muted = dark ? "rgba(242,238,225,0.55)" : "rgba(26,20,0,0.55)";
  const faint = dark ? "rgba(242,238,225,0.3)" : "rgba(26,20,0,0.22)";
  const accent = "var(--az-chartreuse)";
  const accentText = dark ? "var(--az-chartreuse)" : "var(--az-ink-soft)";
  const labelStyle = {
    fontFamily: "var(--ff-display-alt)",
    fontSize: 10,
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    fill: muted,
  };
  const phaseTitle = {
    fontFamily: "ABC Arizona Serif, Georgia, serif",
    fontWeight: 300,
    fontSize: 22,
    letterSpacing: "-0.03em",
    fill: ink,
  };

  // Reusable phase node
  const PhaseNode = ({ x, y, num, name, state, kind = "default" }) => {
    const w = 132, h = 132;
    const isAccent = kind === "accent";
    return (
      <g transform={`translate(${x}, ${y})`}>
        <rect
          x={0}
          y={0}
          width={w}
          height={h}
          fill={dark ? "rgba(242,238,225,0.04)" : "rgba(26,20,0,0.025)"}
          stroke={ink}
          strokeWidth={1}
        />
        {/* corner mark */}
        <text x={10} y={20} style={labelStyle} fill={muted}>
          {num}
        </text>
        {/* diamond glyph */}
        <g transform={`translate(${w / 2}, ${h / 2 - 6})`}>
          <Diamond size={42} filled={isAccent} stroke={ink} fill={accent} />
        </g>
        <text
          x={w / 2}
          y={h - 14}
          style={phaseTitle}
          textAnchor="middle"
        >
          {name}
        </text>
        <text
          x={w / 2}
          y={h + 18}
          style={{ ...labelStyle, fontSize: 10 }}
          fill={muted}
          textAnchor="middle"
        >
          {state}
        </text>
      </g>
    );
  };

  return (
    <svg
      viewBox="0 0 620 580"
      width="100%"
      style={{ maxWidth: 620, display: "block", margin: "0 auto" }}
      role="img"
      aria-label="Three-phase escrow schematic: Open transitions to Locked on stake, Locked transitions to Released on a zkTLS proof or to Refunded on a 48h timeout."
    >
      {/* Border frame — chapter feel */}
      <rect
        x={0.5}
        y={0.5}
        width={619}
        height={579}
        fill="none"
        stroke={faint}
        strokeWidth={1}
      />
      <rect
        x={12}
        y={12}
        width={596}
        height={556}
        fill="none"
        stroke={faint}
        strokeWidth={1}
        strokeDasharray="2 3"
      />

      {/* Chapter label */}
      <text x={28} y={36} style={labelStyle} fill={muted}>
        Reference flow / BAZaar
      </text>
      <text x={28} y={56} style={labelStyle} fill={muted}>
        Phase shape: Open → Locked → Released | Refunded
      </text>

      {/* Three primary phases in a row */}
      <PhaseNode x={28} y={120} num="01" name="Open" state="entry: listing published" />
      <PhaseNode
        x={244}
        y={120}
        num="02"
        name="Locked"
        state="entry: buyer locks stablecoins"
        kind="accent"
      />
      <PhaseNode x={460} y={120} num="03" name="Released" state="exit: proof verified" />

      {/* Refunded — branch off Locked */}
      <PhaseNode x={460} y={344} num="03b" name="Refunded" state="exit: timeout fires" />

      {/* Connector: Open → Locked */}
      <g>
        <line x1={160} y1={186} x2={244} y2={186} stroke={ink} strokeWidth={1} />
        <polygon points="244,186 236,182 236,190" fill={ink} />
        <text x={202} y={176} textAnchor="middle" style={labelStyle} fill={muted}>
          lock
        </text>
      </g>

      {/* Connector: Locked → Released (the zkTLS one — annotated heavily) */}
      <g>
        <line x1={376} y1={186} x2={460} y2={186} stroke={ink} strokeWidth={1} />
        <polygon points="460,186 452,182 452,190" fill={ink} />
        {/* zkTLS pill on the line */}
        <g transform="translate(418, 168)">
          <rect
            x={-44}
            y={-12}
            width={88}
            height={24}
            fill={accent}
            stroke={ink}
            strokeWidth={1}
          />
          <text
            x={0}
            y={4}
            textAnchor="middle"
            style={{
              fontFamily: "var(--ff-display-alt)",
              fontSize: 11,
              letterSpacing: "0.06em",
              fill: "var(--az-ink)",
              fontWeight: 500,
            }}
          >
            zkTLS PROOF
          </text>
        </g>
      </g>

      {/* Connector: Locked → Refunded (timeout branch) */}
      <g>
        <path
          d={`M 310 252 L 310 410 L 460 410`}
          stroke={ink}
          strokeWidth={1}
          fill="none"
          strokeDasharray="3 3"
        />
        <polygon points="460,410 452,406 452,414" fill={ink} />
        <text x={324} y={330} style={{ ...labelStyle, fontSize: 10 }} fill={muted}>
          48h timeout
        </text>
      </g>

      {/* Legend block, bottom */}
      <g transform="translate(28, 524)">
        <line x1={0} y1={0} x2={564} y2={0} stroke={faint} strokeWidth={1} />
        <g transform="translate(0, 18)">
          <Diamond size={12} filled={true} stroke={ink} fill={accent} small />
          <text x={22} y={10} style={labelStyle} fill={muted}>
            Active phase
          </text>

          <g transform="translate(150, 0)">
            <Diamond size={12} filled={false} stroke={ink} fill={accent} small />
            <text x={22} y={10} style={labelStyle} fill={muted}>
              Idle / terminal phase
            </text>
          </g>

          <g transform="translate(360, 0)">
            <rect
              x={0}
              y={-8}
              width={16}
              height={16}
              fill={accent}
              stroke={ink}
              strokeWidth={1}
            />
            <text x={24} y={5} style={labelStyle} fill={muted}>
              zkTLS-triggered transition
            </text>
          </g>
        </g>
      </g>
    </svg>
  );
}

/* Layered-diamond glyph drawn in SVG (filled or outlined) */
function Diamond({ size = 40, filled, stroke, fill, small = false }) {
  // viewBox 100×100, centered on (0, 0) when caller translates
  const half = size / 2;
  return (
    <g transform={small ? undefined : `translate(${-half}, ${-half})`}>
      <svg width={size} height={size} viewBox="0 0 100 100" style={{ overflow: "visible" }}>
        {filled ? (
          <>
            <path
              d="M50 0 L100 50 L50 100 L0 50 Z"
              fill={fill}
              stroke={stroke}
              strokeWidth={2}
            />
            <path
              d="M50 16 L84 50 L50 84 L16 50 Z"
              fill="none"
              stroke={stroke}
              strokeWidth={1.5}
            />
            <path
              d="M50 30 L70 50 L50 70 L30 50 Z"
              fill={stroke}
              stroke="none"
            />
          </>
        ) : (
          <>
            <path
              d="M50 0 L100 50 L50 100 L0 50 Z"
              fill="none"
              stroke={stroke}
              strokeWidth={1.5}
            />
            <path
              d="M50 16 L84 50 L50 84 L16 50 Z"
              fill="none"
              stroke={stroke}
              strokeWidth={1}
              opacity={0.65}
            />
            <path
              d="M50 30 L70 50 L50 70 L30 50 Z"
              fill="none"
              stroke={stroke}
              strokeWidth={1}
              opacity={0.45}
            />
          </>
        )}
      </svg>
    </g>
  );
}

window.Hero = Hero;
window.HeroSchematic = HeroSchematic;
window.Diamond = Diamond;