/* Visual primitives — themes, hero artwork, icons, copy-block */

/* ---------- THEMES ----------
   Three discrete visual directions, switched via Tweaks.
   Every theme exposes the same set of CSS vars so components stay clean. */
const FEAR_THEMES = {
  ritual: {
    name: "Ritual",
    blurb: "Cormorant serif, blood drips on the wordmark, soft vignette and grain.",
    vars: {
      "--bg": "#0a0a0b",
      "--bg-elev": "#14141a",
      "--bg-mid": "#1c1c24",
      "--panel": "#14141a",
      "--panel-2": "#1f2937",
      "--border": "#2d2d35",
      "--border-strong": "#3a3a44",
      "--blood": "#8b0000",
      "--blood-bright": "#b91c1c",
      "--blood-deep": "#4a0404",
      "--text": "#e5e5e5",
      "--text-2": "#9ca3af",
      "--text-3": "#6b7280",
      "--ok": "#22c55e",
      "--warn": "#f59e0b",
      "--font-display": "'Cormorant Garamond', 'EB Garamond', Georgia, serif",
      "--font-mark": "'Cinzel', 'Cormorant Garamond', Georgia, serif",
      "--font-body": "'Inter', system-ui, sans-serif",
      "--font-mono": "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace",
      "--mark-tracking": "0.18em",
      "--mark-weight": "600",
      "--vignette":
        "radial-gradient(ellipse at center, #1c1c24 0%, #14141a 45%, #0a0a0b 100%)",
      "--grain-opacity": "0.045",
      "--drip": "1",
    },
  },
  brutalist: {
    name: "Brutalist",
    blurb: "Monospace everything, hard rules, terminal-cold. Minimum effects.",
    vars: {
      "--bg": "#0b0b0c",
      "--bg-elev": "#101013",
      "--bg-mid": "#101013",
      "--panel": "#0e0e11",
      "--panel-2": "#15151a",
      "--border": "#26262d",
      "--border-strong": "#3a3a44",
      "--blood": "#a30000",
      "--blood-bright": "#cc1f1f",
      "--blood-deep": "#380303",
      "--text": "#ededed",
      "--text-2": "#9aa0a6",
      "--text-3": "#6b7280",
      "--ok": "#22c55e",
      "--warn": "#f59e0b",
      "--font-display": "'JetBrains Mono', ui-monospace, monospace",
      "--font-mark": "'JetBrains Mono', ui-monospace, monospace",
      "--font-body": "'JetBrains Mono', ui-monospace, monospace",
      "--font-mono": "'JetBrains Mono', ui-monospace, monospace",
      "--mark-tracking": "0.22em",
      "--mark-weight": "700",
      "--vignette": "linear-gradient(180deg, #0b0b0c 0%, #0b0b0c 100%)",
      "--grain-opacity": "0.02",
      "--drip": "0",
    },
  },
  steel: {
    name: "Steel",
    blurb: "Deep navy + steel-grey panels, white typography, top-menu product feel.",
    vars: {
      "--bg": "#1a2733",
      "--bg-elev": "#22303d",
      "--bg-mid": "#26323f",
      "--panel": "#2a3744",
      "--panel-2": "#37475a",
      "--border": "#3d4d5e",
      "--border-strong": "#506377",
      "--blood": "#5b8db8",
      "--blood-bright": "#7aa9d0",
      "--blood-deep": "#1e3a52",
      "--text": "#ffffff",
      "--text-2": "#cbd5e0",
      "--text-3": "#94a3b8",
      "--ok": "#86efac",
      "--warn": "#fbbf24",
      "--font-display": "'Inter', system-ui, sans-serif",
      "--font-mark": "'Inter', system-ui, sans-serif",
      "--font-body": "'Inter', system-ui, sans-serif",
      "--font-mono": "'JetBrains Mono', ui-monospace, monospace",
      "--mark-tracking": "0.18em",
      "--mark-weight": "600",
      "--vignette":
        "linear-gradient(180deg, #1a2733 0%, #22303d 60%, #1a2733 100%)",
      "--grain-opacity": "0",
      "--drip": "0",
    },
  },
  cathedral: {
    name: "Cathedral",
    blurb: "Cinzel mark, deep burgundy panels, thin gold-bone hairlines.",
    vars: {
      "--bg": "#0c0709",
      "--bg-elev": "#15090d",
      "--bg-mid": "#1d0a10",
      "--panel": "#150a0e",
      "--panel-2": "#1c0e13",
      "--border": "#3a1820",
      "--border-strong": "#5a2028",
      "--blood": "#9b1c1c",
      "--blood-bright": "#c52828",
      "--blood-deep": "#4a0404",
      "--text": "#e8e0d6",
      "--text-2": "#a89a8c",
      "--text-3": "#7a6e62",
      "--ok": "#86c08a",
      "--warn": "#d4a155",
      "--font-display": "'EB Garamond', 'Cormorant Garamond', Georgia, serif",
      "--font-mark": "'Cinzel', 'EB Garamond', Georgia, serif",
      "--font-body": "'EB Garamond', Georgia, serif",
      "--font-mono": "'JetBrains Mono', ui-monospace, monospace",
      "--mark-tracking": "0.42em",
      "--mark-weight": "500",
      "--vignette":
        "radial-gradient(ellipse at 50% 35%, #1d0a10 0%, #15090d 40%, #0c0709 100%)",
      "--grain-opacity": "0.05",
      "--drip": "0.6",
    },
  },
};

/* ---------- ICONS (lucide-style monochrome) ---------- */
const Ic = {
  Lock: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="11" width="18" height="11" rx="2"/>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
    </svg>
  ),
  Network: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="5" r="2"/>
      <circle cx="5" cy="19" r="2"/>
      <circle cx="19" cy="19" r="2"/>
      <path d="M12 7v5M7 18l4-4M17 18l-4-4"/>
    </svg>
  ),
  Brace: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M8 4c-2 0-3 1-3 3v3c0 1.5-.7 2-2 2 1.3 0 2 .5 2 2v3c0 2 1 3 3 3"/>
      <path d="M16 4c2 0 3 1 3 3v3c0 1.5.7 2 2 2-1.3 0-2 .5-2 2v3c0 2-1 3-3 3"/>
    </svg>
  ),
  Shield: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/>
    </svg>
  ),
  Server: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="4" width="18" height="7" rx="1.5"/>
      <rect x="3" y="13" width="18" height="7" rx="1.5"/>
      <path d="M7 7.5h.01M7 16.5h.01"/>
    </svg>
  ),
  Github: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="currentColor" {...p}>
      <path d="M12 .5a11.5 11.5 0 0 0-3.63 22.41c.57.1.78-.25.78-.55v-2c-3.2.7-3.88-1.36-3.88-1.36-.52-1.34-1.27-1.7-1.27-1.7-1.04-.7.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.7 1.25 3.36.96.1-.75.4-1.25.73-1.54-2.55-.3-5.24-1.28-5.24-5.7 0-1.26.45-2.3 1.18-3.1-.12-.3-.51-1.47.11-3.07 0 0 .96-.31 3.16 1.18a10.9 10.9 0 0 1 5.74 0c2.2-1.49 3.16-1.18 3.16-1.18.62 1.6.23 2.77.11 3.07.74.8 1.18 1.84 1.18 3.1 0 4.43-2.7 5.4-5.27 5.69.41.36.78 1.06.78 2.14v3.17c0 .3.2.66.79.55A11.5 11.5 0 0 0 12 .5z"/>
    </svg>
  ),
  Download: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3v12M6 11l6 6 6-6M5 21h14"/>
    </svg>
  ),
  Copy: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="9" y="9" width="11" height="11" rx="1.5"/>
      <path d="M5 15V5a1.5 1.5 0 0 1 1.5-1.5H15"/>
    </svg>
  ),
  Chevron: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M6 9l6 6 6-6"/>
    </svg>
  ),
  Ext: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||14} height={p.size||14} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M7 17L17 7M9 7h8v8"/>
    </svg>
  ),
  Alert: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3l10 18H2L12 3z"/>
      <path d="M12 10v5M12 18v.01"/>
    </svg>
  ),
  Check: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12.5l4.5 4.5L19 7"/>
    </svg>
  ),
  Eye: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/>
      <circle cx="12" cy="12" r="3"/>
    </svg>
  ),
  EyeOff: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 3l18 18"/>
      <path d="M10.6 6.2A9.6 9.6 0 0 1 12 6c6.5 0 10 7 10 7a18 18 0 0 1-3.2 4M6.6 6.6C3.7 8.6 2 12 2 12s3.5 7 10 7c1.6 0 3-.3 4.3-.9"/>
    </svg>
  ),
};

/* ---------- GRAIN OVERLAY ---------- */
const GrainOverlay = () => (
  <div
    aria-hidden="true"
    className="pointer-events-none fixed inset-0 z-0 mix-blend-overlay"
    style={{
      opacity: "var(--grain-opacity)",
      backgroundImage:
        "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
    }}
  />
);

/* ---------- HERO ARTWORK ---------- */
/* The reaching hand + dripping F.E.A.R. wordmark, drawn entirely in SVG.
   When `bannerSrc` is provided, the SVG is replaced by an image banner
   that blends into the page via mask-gradients. */
const HeroBanner = ({ src }) => (
  <div className="relative w-full overflow-hidden mx-auto" style={{ aspectRatio: "512/376", maxWidth: "min(450px, 70vw)", maxHeight: "32vh" }}>
    <img
      src={src}
      alt="F.E.A.R."
      className="absolute inset-0 w-full h-full object-contain"
      onError={(e) => { e.currentTarget.style.display = "none"; }}
    />
    {/* Bottom fade so the banner blends into the page below */}
    <div
      className="absolute inset-x-0 bottom-0 h-32 pointer-events-none"
      style={{
        background:
          "linear-gradient(180deg, transparent 0%, var(--bg) 100%)",
      }}
    />
  </div>
);

const HeroArt = ({ variant = "ritual", showHand = true, bannerSrc = null }) => {
  const drip = FEAR_THEMES[variant]?.vars["--drip"] ?? "1";
  const showDrips = parseFloat(drip) > 0.3;
  const tracking = FEAR_THEMES[variant]?.vars["--mark-tracking"] || "0.18em";
  const markFont = FEAR_THEMES[variant]?.vars["--font-mark"] || "serif";

  if (bannerSrc) return <HeroBanner src={bannerSrc}/>;

  return (
    <div className="relative w-full select-none" style={{ aspectRatio: "16/9", maxHeight: "70vh" }}>
      {/* radial vignette + soft red glow */}
      <div
        className="absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse at 50% 65%, rgba(139,0,0,0.18) 0%, rgba(139,0,0,0) 45%), radial-gradient(ellipse at center, var(--bg-mid) 0%, var(--bg-elev) 50%, var(--bg) 100%)",
        }}
      />
      {/* faint radiating beams from the hand */}
      <svg
        className="absolute inset-0 w-full h-full"
        viewBox="0 0 1600 900"
        preserveAspectRatio="xMidYMid slice"
        aria-hidden="true"
      >
        <defs>
          <radialGradient id="beam" cx="50%" cy="78%" r="60%">
            <stop offset="0%" stopColor="#8b0000" stopOpacity="0.18" />
            <stop offset="60%" stopColor="#8b0000" stopOpacity="0" />
          </radialGradient>
          <linearGradient id="handStroke" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#3a0a0a" />
            <stop offset="100%" stopColor="#1a0303" />
          </linearGradient>
          <filter id="bloodBlur" x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="4" />
          </filter>
          <filter id="textBlood" x="-20%" y="-20%" width="140%" height="160%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="b1"/>
            <feOffset in="b1" dy="6" result="b2"/>
            <feFlood floodColor="#8b0000" floodOpacity="0.85" result="c1"/>
            <feComposite in="c1" in2="b2" operator="in" result="shadow"/>
            <feMerge>
              <feMergeNode in="shadow"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
          <linearGradient id="markFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#a40000" />
            <stop offset="55%" stopColor="#8b0000" />
            <stop offset="100%" stopColor="#5a0000" />
          </linearGradient>
        </defs>

        <rect x="0" y="0" width="1600" height="900" fill="url(#beam)"/>

        {/* HAND — stylised silhouette reaching up toward the wordmark from the bottom */}
        {showHand && (
          <g transform="translate(800 900)">
            <path
              d="M-260 0
                 C-260 -180 -240 -340 -210 -420
                 C-200 -440 -180 -445 -172 -425
                 L-150 -360
                 L-150 -480
                 C-150 -510 -120 -520 -105 -495
                 L-78 -440
                 L-78 -540
                 C-78 -575 -42 -580 -28 -550
                 L-2 -495
                 L-2 -560
                 C-2 -595 38 -598 50 -565
                 L80 -480
                 L88 -440
                 C100 -395 122 -355 142 -330
                 C188 -270 240 -220 240 -120
                 C240 -40 220 0 220 0 Z"
              fill="#0e0e12"
              stroke="url(#handStroke)"
              strokeWidth="1.5"
            />
            {/* fingertip glints */}
            <g fill="#3a0a0a" opacity="0.9">
              <ellipse cx="-150" cy="-470" rx="6" ry="10"/>
              <ellipse cx="-78" cy="-528" rx="6" ry="10"/>
              <ellipse cx="-2" cy="-548" rx="6" ry="10"/>
              <ellipse cx="58" cy="-540" rx="6" ry="10"/>
            </g>
            {/* knuckle shading */}
            <path
              d="M-150 -360 L-78 -440 L-2 -495 L80 -480"
              fill="none"
              stroke="#1a0405"
              strokeWidth="3"
              opacity="0.7"
            />
          </g>
        )}

        {/* WORDMARK F.E.A.R. */}
        <g filter="url(#textBlood)">
          <text
            x="800"
            y="430"
            textAnchor="middle"
            fontFamily={markFont}
            fontWeight="700"
            fontSize="280"
            letterSpacing={tracking}
            fill="url(#markFill)"
          >
            F.E.A.R.
          </text>
        </g>

        {/* drips under each letter — only on themes where drip > 0.3 */}
        {showDrips && (
          <g fill="#7a0000" opacity={drip}>
            {/* approximate x positions match each glyph centre after letter-spacing */}
            {[
              { x: 590, h: 90 },
              { x: 670, h: 38 },
              { x: 760, h: 120 },
              { x: 840, h: 60 },
              { x: 920, h: 78 },
              { x: 1000, h: 130 },
              { x: 1075, h: 50 },
            ].map((d, i) => (
              <g key={i}>
                <rect x={d.x - 2} y={440} width="4" height={d.h} rx="2" />
                <circle cx={d.x} cy={440 + d.h + 6} r="5" filter="url(#bloodBlur)"/>
              </g>
            ))}
          </g>
        )}
      </svg>

      {/* tagline + slogan */}
      <div className="absolute inset-x-0 bottom-0 flex flex-col items-center pb-2 sm:pb-4">
        <div
          className="text-[10px] sm:text-[11px] md:text-xs uppercase"
          style={{
            fontFamily: "var(--font-mono)",
            color: "var(--text-2)",
            letterSpacing: "0.5em",
            paddingLeft: "0.5em",
          }}
        >
          Fully · Encrypted · Anonymous · Routing
        </div>
      </div>
    </div>
  );
};

/* ---------- COPY BLOCK ---------- */
const CopyBlock = ({ value, label = "Copy", copied = "Copied", multiline = false, className = "" }) => {
  const [done, setDone] = React.useState(false);
  const onCopy = async () => {
    try {
      await navigator.clipboard.writeText(value);
      setDone(true);
      setTimeout(() => setDone(false), 1400);
    } catch (e) {}
  };
  return (
    <div
      className={"group relative flex items-start gap-2 rounded-sm border " + className}
      style={{
        borderColor: "var(--border)",
        background: "var(--panel)",
        fontFamily: "var(--font-mono)",
      }}
    >
      <pre
        className={"flex-1 m-0 px-3 py-2.5 text-[12px] leading-relaxed " + (multiline ? "whitespace-pre overflow-x-auto" : "truncate")}
        style={{ color: "var(--text-2)" }}
      >
        {value}
      </pre>
      <button
        type="button"
        onClick={onCopy}
        aria-label={label}
        className="m-1.5 flex shrink-0 items-center gap-1.5 rounded-sm border px-2 py-1.5 text-[11px] uppercase tracking-wider transition-colors"
        style={{
          color: done ? "var(--ok)" : "var(--text-2)",
          borderColor: done ? "var(--ok)" : "var(--border)",
          background: "var(--bg)",
        }}
      >
        {done ? <Ic.Check size={14}/> : <Ic.Copy size={14}/>}
        <span className="hidden sm:inline">{done ? copied : label}</span>
      </button>
    </div>
  );
};

window.FEAR_THEMES = FEAR_THEMES;
window.Ic = Ic;
window.GrainOverlay = GrainOverlay;
window.HeroBanner = HeroBanner;
window.HeroArt = HeroArt;
window.CopyBlock = CopyBlock;