// ─── Atoms & small components ────────────────────────────────────

const Arrow = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const ArrowUpRight = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M5 11L11 5M11 5H5M11 5V11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Check = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Eyebrow = ({ num, children, accent = false }) => (
  <div className="eyebrow eyebrow-wrap">
    {num && <span className="num">{num}</span>}
    <span className={`eyebrow-line${accent ? " eyebrow-line--accent" : ""}`} />
    <span>{children}</span>
  </div>
);

// Section header with eyebrow + display title + optional lead
function SectionHeader({ eyebrowNum, eyebrow, title, lead, align = "left", max = 720 }) {
  return (
    <header className={`section-header section-header--${align}`} style={{ maxWidth: max }}>
      <Eyebrow num={eyebrowNum}>{eyebrow}</Eyebrow>
      <h2 className="h1 section-header__title">{title}</h2>
      {lead && <p className="lead section-header__lead">{lead}</p>}
    </header>
  );
}

// ─── Geometric hero ornament ──────────────────────────────
function HeroOrnament({ scale = 1 }) {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    let start = performance.now();
    const loop = (now) => {
      setT((now - start) / 1000);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  const rot = (t * 4) % 360;
  const pulse = 1 + Math.sin(t * 0.9) * 0.02;

  return (
    <svg
      viewBox="0 0 520 520"
      style={{ width: "100%", height: "100%", transform: `scale(${scale})`, transformOrigin: "center" }}
      aria-hidden="true"
    >
      <defs>
        <radialGradient id="ornGrad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="oklch(0.58 0.22 var(--accent-h))" stopOpacity="0.1" />
          <stop offset="100%" stopColor="oklch(0.58 0.22 var(--accent-h))" stopOpacity="0" />
        </radialGradient>
        <linearGradient id="ringGrad" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor="oklch(0.58 0.22 var(--accent-h))" />
          <stop offset="100%" stopColor="oklch(0.48 0.24 var(--accent-h))" />
        </linearGradient>
        <pattern id="dotgrid" width="20" height="20" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.8" fill="rgba(12,13,18,0.18)" />
        </pattern>
      </defs>

      <circle cx="260" cy="260" r="260" fill="url(#ornGrad)" />

      <g transform={`translate(260 260) rotate(${rot * 0.15}) translate(-260 -260)`} opacity="0.5">
        <rect x="0" y="0" width="520" height="520" fill="url(#dotgrid)" />
      </g>

      <g transform={`translate(260 260) scale(${pulse})`}>
        {[240, 200, 160, 120, 80].map((r, i) => (
          <circle
            key={r}
            r={r}
            fill="none"
            stroke={i === 2 ? "url(#ringGrad)" : "rgba(12,13,18,0.08)"}
            strokeWidth={i === 2 ? 1.5 : 0.6}
            strokeDasharray={i === 1 ? "3 6" : i === 4 ? "1 4" : "none"}
          />
        ))}
      </g>

      <g transform={`translate(260 260) rotate(${rot * 0.5})`} opacity="0.25">
        <line x1="-220" y1="0" x2="220" y2="0" stroke="currentColor" strokeWidth="0.5" />
        <line x1="0" y1="-220" x2="0" y2="220" stroke="currentColor" strokeWidth="0.5" />
      </g>

      <g transform={`translate(260 260) rotate(${-rot * 0.3})`}>
        <rect x="-100" y="-100" width="200" height="200" fill="none" stroke="oklch(0.58 0.22 var(--accent-h))" strokeWidth="1" />
        <rect x="-70" y="-70" width="140" height="140" fill="none" stroke="oklch(0.58 0.22 var(--accent-h) / 0.4)" strokeWidth="0.5" />
      </g>

      {[0, 72, 144, 216, 288].map((a, i) => {
        const rad = ((a + rot * 0.6) * Math.PI) / 180;
        const r = 160;
        const cx = 260 + Math.cos(rad) * r;
        const cy = 260 + Math.sin(rad) * r;
        return (
          <g key={i}>
            <circle cx={cx} cy={cy} r={i === 0 ? 5 : 2.5} fill="oklch(0.48 0.24 var(--accent-h))" />
            {i === 0 && <circle cx={cx} cy={cy} r="10" fill="none" stroke="oklch(0.58 0.22 var(--accent-h))" strokeWidth="0.8" />}
          </g>
        );
      })}

      <g transform="translate(260 260)">
        <circle r="3" fill="var(--ink)" />
        <circle r="18" fill="none" stroke="var(--ink)" strokeWidth="0.6" opacity="0.4" />
      </g>

      <g fontFamily="ui-monospace, SFMono-Regular, monospace" fontSize="8" fill="rgba(12,13,18,0.4)" letterSpacing="0.1em">
        <text x="20" y="28">N 35.6595°</text>
        <text x="20" y="40">E 139.7006°</text>
        <text x="500" y="28" textAnchor="end">UIARB / 2026</text>
        <text x="500" y="500" textAnchor="end">{`T+${t.toFixed(1)}s`}</text>
        <text x="20" y="500">SYSTEM · NOMINAL</text>
      </g>
    </svg>
  );
}

// Compact geometric mark used as case-card visual
function CaseGlyph({ hue = 222, pattern = 0 }) {
  const c = `oklch(0.58 0.2 ${hue})`;
  const c2 = `oklch(0.48 0.22 ${hue})`;
  const bg = `oklch(0.96 0.04 ${hue})`;
  return (
    <svg viewBox="0 0 200 140" style={{ width: "100%", height: "100%", background: bg, display: "block" }}>
      {pattern % 4 === 0 && (
        <>
          <circle cx="100" cy="70" r="42" fill="none" stroke={c} strokeWidth="1" />
          <circle cx="100" cy="70" r="28" fill={c} opacity="0.2" />
          <rect x="86" y="56" width="28" height="28" fill={c2} />
        </>
      )}
      {pattern % 4 === 1 && (
        <>
          {[0, 1, 2, 3, 4, 5].map(i => (
            <line key={i} x1={20 + i * 30} y1="20" x2={20 + i * 30} y2="120"
                  stroke={c} strokeWidth={i === 3 ? "3" : "0.8"} opacity={i === 3 ? 1 : 0.6} />
          ))}
          <circle cx="110" cy="70" r="8" fill={c2} />
        </>
      )}
      {pattern % 4 === 2 && (
        <>
          <polygon points="100,28 150,70 100,112 50,70" fill="none" stroke={c} strokeWidth="1" />
          <polygon points="100,48 130,70 100,92 70,70" fill={c} opacity="0.8" />
        </>
      )}
      {pattern % 4 === 3 && (
        <>
          <path d="M20 90 Q60 40 100 70 T180 60" fill="none" stroke={c} strokeWidth="1.5" />
          <path d="M20 100 Q60 50 100 80 T180 70" fill="none" stroke={c2} strokeWidth="0.8" opacity="0.6" />
          {[30, 70, 110, 150].map((x, i) => <circle key={i} cx={x} cy={70 + Math.sin(i) * 10} r="3" fill={c} />)}
        </>
      )}
    </svg>
  );
}

// Animated live counter
function AnimatedStat({ num, label, sub }) {
  return (
    <div>
      <div className="serif stat-num">{num}</div>
      <div className="stat-label">{label}</div>
      {sub && <div className="en stat-sub">{sub}</div>}
    </div>
  );
}

// Accordion
function Accordion({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="accordion">
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={i} className="accordion__item">
            <h3 className="accordion__heading">
            <button
              onClick={() => setOpen(isOpen ? -1 : i)}
              className="accordion__trigger"
            >
              <span className="accordion__trigger-label">
                <span className="en accordion__trigger-num">
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span>{it.q}</span>
              </span>
              <span className={`accordion__icon${isOpen ? " accordion__icon--open" : ""}`}>
                <svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 0v10M0 5h10" stroke="currentColor" strokeWidth="1.2" /></svg>
              </span>
            </button>
            </h3>
            <div className="accordion__body" style={{ maxHeight: isOpen ? 400 : 0 }}>
              <div className="accordion__content">{it.a}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Arrow, ArrowUpRight, Check, Eyebrow, SectionHeader, HeroOrnament, CaseGlyph, AnimatedStat, Accordion });
