// parts.jsx — placeholder imagery, icons, and small atoms shared across sections.

// --- Striped placeholder. Stands in for drone/site/architecture photography.
//     Caption uses a mono label so the user knows what to drop in. ---
function Placeholder({ label = "", angle = -28, stripes = true, intensity = 0.18, mono = "drone footage", ratio, style, children }) {
  const id = React.useId().replace(/:/g, "_");
  const r = ratio ? { aspectRatio: ratio } : null;
  return (
    <div style={{ position: "relative", overflow: "hidden", background: "#1c1a16", color: "var(--fg)", ...r, ...style }}>
      <svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <defs>
          <pattern id={`p-${id}`} patternUnits="userSpaceOnUse" width="14" height="14" patternTransform={`rotate(${angle})`}>
            <rect width="14" height="14" fill="transparent" />
            <rect width="1" height="14" fill={`rgba(241,237,229,${intensity})`} />
          </pattern>
          <linearGradient id={`g-${id}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#23201a" />
            <stop offset="100%" stopColor="#0f0e0b" />
          </linearGradient>
        </defs>
        <rect width="400" height="300" fill={`url(#g-${id})`} />
        {stripes && <rect width="400" height="300" fill={`url(#p-${id})`} />}
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", padding: 14, justifyContent: "space-between", alignItems: "flex-start", pointerEvents: "none" }}>
        <span style={{ font: "500 10px/1 var(--mono)", letterSpacing: ".08em", textTransform: "uppercase", color: "var(--fg-2)", background: "rgba(14,13,11,.55)", padding: "5px 7px", border: "1px solid var(--line)" }}>{mono}</span>
        {label && <span style={{ font: "500 10px/1 var(--mono)", letterSpacing: ".08em", color: "var(--fg-3)" }}>{label}</span>}
      </div>
      {children}
    </div>
  );
}

// Light-theme variant
function PlaceholderLight({ mono = "site photography", label = "", ratio, style, children }) {
  const id = React.useId().replace(/:/g, "_");
  const r = ratio ? { aspectRatio: ratio } : null;
  return (
    <div style={{ position: "relative", overflow: "hidden", background: "#e7e2d6", ...r, ...style }}>
      <svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <defs>
          <pattern id={`pl-${id}`} patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(-28)">
            <rect width="14" height="14" fill="transparent" />
            <rect width="1" height="14" fill="rgba(14,13,11,.18)" />
          </pattern>
        </defs>
        <rect width="400" height="300" fill="#e7e2d6" />
        <rect width="400" height="300" fill={`url(#pl-${id})`} />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", padding: 14, justifyContent: "space-between", alignItems: "flex-start", pointerEvents: "none" }}>
        <span style={{ font: "500 10px/1 var(--mono)", letterSpacing: ".08em", textTransform: "uppercase", color: "#0e0d0b", background: "rgba(255,255,255,.55)", padding: "5px 7px", border: "1px solid rgba(14,13,11,.15)" }}>{mono}</span>
        {label && <span style={{ font: "500 10px/1 var(--mono)", letterSpacing: ".08em", color: "rgba(14,13,11,.5)" }}>{label}</span>}
      </div>
      {children}
    </div>
  );
}

// --- Animated cinematic placeholder for the hero. Subtly pans + a faint vignette so it
//     reads as "video", not a static graphic. ---
function HeroFilm() {
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      <div className="hero-pan" style={{ position: "absolute", inset: "-6%", background:
        "radial-gradient(60% 50% at 30% 40%, rgba(217,138,77,.18), transparent 70%),"+
        "radial-gradient(50% 40% at 78% 65%, rgba(72,108,140,.22), transparent 75%),"+
        "linear-gradient(180deg, #0a0907 0%, #1a1612 55%, #0a0907 100%)" }} />
      {/* striped 'film grain' as drone footage stand-in */}
      <svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1600 900" style={{ position: "absolute", inset: 0, mixBlendMode: "screen", opacity: .35 }}>
        <defs>
          <pattern id="hero-stripe" patternUnits="userSpaceOnUse" width="22" height="22" patternTransform="rotate(-22)">
            <rect width="22" height="22" fill="transparent" />
            <rect width="1" height="22" fill="rgba(241,237,229,.14)" />
          </pattern>
          <linearGradient id="hero-fade" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(241,237,229,.0)" />
            <stop offset="50%" stopColor="rgba(241,237,229,.05)" />
            <stop offset="100%" stopColor="rgba(241,237,229,.0)" />
          </linearGradient>
        </defs>
        <rect width="1600" height="900" fill="url(#hero-stripe)" />
        <rect width="1600" height="900" fill="url(#hero-fade)" />
        {/* faint building silhouettes */}
        <g fill="rgba(14,13,11,.55)">
          <rect x="0" y="640" width="180" height="260"/>
          <rect x="160" y="600" width="120" height="300"/>
          <rect x="260" y="580" width="90" height="320"/>
          <rect x="330" y="660" width="160" height="240"/>
          <rect x="470" y="540" width="130" height="360"/>
          <rect x="580" y="610" width="100" height="290"/>
          <rect x="660" y="500" width="170" height="400"/>
          <rect x="810" y="580" width="90" height="320"/>
          <rect x="880" y="540" width="140" height="360"/>
          <rect x="1000" y="620" width="110" height="280"/>
          <rect x="1090" y="560" width="160" height="340"/>
          <rect x="1230" y="600" width="100" height="300"/>
          <rect x="1300" y="540" width="200" height="360"/>
          <rect x="1480" y="620" width="120" height="280"/>
        </g>
      </svg>
      {/* vignette */}
      <div style={{ position: "absolute", inset: 0, background:
        "linear-gradient(180deg, rgba(14,13,11,.45) 0%, rgba(14,13,11,0) 25%, rgba(14,13,11,0) 55%, rgba(14,13,11,.85) 100%)," +
        "radial-gradient(120% 80% at 50% 50%, rgba(14,13,11,0) 50%, rgba(14,13,11,.55) 100%)" }} />
      <style>{`
        .hero-pan{animation: heropan 22s ease-in-out infinite alternate;}
        @keyframes heropan{
          0%{transform: translate3d(-1.2%,-0.8%,0) scale(1.02)}
          100%{transform: translate3d(1.2%,0.8%,0) scale(1.06)}
        }
      `}</style>
    </div>
  );
}

// --- Tiny atoms ---
function MonoTag({ children, style }) {
  return <span style={{ font: "500 10.5px/1 var(--mono)", letterSpacing: ".12em", textTransform: "uppercase", color: "var(--fg-2)", ...style }}>{children}</span>;
}

function Rule({ vertical, style }) {
  return <div style={{ background: "var(--line)", ...(vertical ? { width: 1, alignSelf: "stretch" } : { height: 1, width: "100%" }), ...style }} />;
}

function SectionHead({ index, kicker, title, lede, theme = "dark" }) {
  const isDark = theme !== "light";
  return (
    <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 48, alignItems: "start", padding: "8px 0 40px" }}>
      <div style={{ paddingTop: 6 }}>
        <MonoTag style={{ color: isDark ? "var(--accent)" : "var(--accent)" }}>{index}</MonoTag>
        <div style={{ marginTop: 8, font: "500 11px/1.4 var(--mono)", letterSpacing: ".1em", textTransform: "uppercase", color: isDark ? "var(--fg-3)" : "rgba(14,13,11,.4)" }}>{kicker}</div>
      </div>
      <div>
        <h2 style={{ margin: 0, font: "400 56px/1.02 var(--display)", letterSpacing: "-.01em", color: isDark ? "var(--fg)" : "#0e0d0b" }}>{title}</h2>
        {lede && <p style={{ margin: "18px 0 0", maxWidth: 640, font: "300 17px/1.55 var(--sans)", color: isDark ? "var(--fg-2)" : "rgba(14,13,11,.6)" }}>{lede}</p>}
      </div>
    </div>
  );
}

// Pill / button
function Btn({ kind = "solid", children, onClick, style, as: As = "button", ...rest }) {
  const base = {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "14px 22px", borderRadius: 999,
    font: "500 13.5px/1 var(--sans)", letterSpacing: ".02em",
    border: "1px solid transparent", cursor: "pointer", transition: "transform .15s ease, filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease",
  };
  const variants = {
    solid: { background: "var(--accent)", color: "var(--accent-ink)", border: "1px solid var(--accent)" },
    ghost: { background: "transparent", color: "var(--fg)", border: "1px solid var(--line-strong)" },
    light: { background: "var(--fg)", color: "#0e0d0b", border: "1px solid var(--fg)" },
    dark:  { background: "#0e0d0b", color: "var(--fg)", border: "1px solid #0e0d0b" },
    inkGhost: { background: "transparent", color: "#0e0d0b", border: "1px solid rgba(14,13,11,.3)" },
  };
  const onEnter = e => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.filter = "brightness(1.07)"; if (kind === "ghost") e.currentTarget.style.borderColor = "var(--fg)"; };
  const onLeave = e => { e.currentTarget.style.transform = ""; e.currentTarget.style.filter = ""; if (kind === "ghost") e.currentTarget.style.borderColor = "var(--line-strong)"; };
  return (
    <As onClick={onClick} onMouseEnter={onEnter} onMouseLeave={onLeave} style={{ ...base, ...variants[kind], ...style }} {...rest}>
      {children}
    </As>
  );
}

function Arrow({ size = 14, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" style={style}>
      <path d="M2 8 H13 M9 4 L13 8 L9 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
    </svg>
  );
}

Object.assign(window, { Placeholder, PlaceholderLight, HeroFilm, MonoTag, Rule, SectionHead, Btn, Arrow });