/* global React */
const { useState, useEffect, useRef } = React;

/* ───────────────────────────── ICONS ─────────────────────────────
   16×16 grid · 1.6px stroke · round caps/joins · stroke-only.
   Matches the Valteria icon spec exactly. */
const Icon = ({ name, size = 16, color = "currentColor", strokeWidth = 1.6 }) => {
  const s = { stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" };
  const p = {
    arrow:    <g {...s}><line x1="3" y1="8" x2="13" y2="8" /><polyline points="9 4 13 8 9 12" /></g>,
    arrowUR:  <g {...s}><line x1="4" y1="12" x2="12" y2="4" /><polyline points="6 4 12 4 12 10" /></g>,
    check:    <polyline points="3.5 8 7 11.5 13 4.5" {...s} />,
    plus:     <g {...s}><line x1="8" y1="3" x2="8" y2="13" /><line x1="3" y1="8" x2="13" y2="8" /></g>,
    sparkle:  <g {...s}><path d="M8 2v4M8 10v4M2 8h4M10 8h4" /></g>,
    bolt:     <g {...s}><path d="M9 2l-5 7h3l-1 5 5-7H8z" /></g>,
    layers:   <g {...s}><polygon points="8 2 14 5 8 8 2 5" /><polyline points="2 8 8 11 14 8" /><polyline points="2 11 8 14 14 11" /></g>,
    target:   <g {...s}><circle cx="8" cy="8" r="6"/><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="1" fill={color}/></g>,
    chart:    <g {...s}><polyline points="2 12 5 8 8 10 11 5 14 7" /><line x1="2" y1="14" x2="14" y2="14" /></g>,
    shield:   <g {...s}><path d="M8 2l5 2v4c0 3-2 5-5 6-3-1-5-3-5-6V4z" /></g>,
    code:     <g {...s}><polyline points="6 5 3 8 6 11" /><polyline points="10 5 13 8 10 11" /></g>,
    terminal: <g {...s}><rect x="2" y="3" width="12" height="10" rx="1.5" /><polyline points="5 7 7 9 5 11" /><line x1="8.5" y1="11" x2="11" y2="11" /></g>,
    compass:  <g {...s}><circle cx="8" cy="8" r="6"/><polygon points="10.5 5.5 7 7 5.5 10.5 9 9" /></g>,
    cube:     <g {...s}><path d="M8 2l5 3v6l-5 3-5-3V5z" /><polyline points="3 5 8 8 13 5" /><line x1="8" y1="8" x2="8" y2="14" /></g>,
    cloud:    <g {...s}><path d="M4.5 12a2.5 2.5 0 0 1-.2-5 3.5 3.5 0 0 1 6.7-1A2.75 2.75 0 0 1 11.5 12z" /></g>,
    server:   <g {...s}><rect x="2.5" y="3" width="11" height="4" rx="1" /><rect x="2.5" y="9" width="11" height="4" rx="1" /><line x1="5" y1="5" x2="5" y2="5" /><line x1="5" y1="11" x2="5" y2="11" /></g>,
    flag:     <g {...s}><line x1="4" y1="2" x2="4" y2="14" /><path d="M4 3h7l-1.5 2.5L11 8H4" /></g>,
    apple:    <g fill={color}><path d="M11.2 8.4c0-1.6 1.3-2.4 1.4-2.4-.8-1.1-2-1.3-2.4-1.3-1-.1-2 .6-2.5.6-.5 0-1.3-.6-2.2-.6-1.1 0-2.2.7-2.8 1.7-1.2 2.1-.3 5.2.9 6.9.6.8 1.3 1.7 2.2 1.7.9 0 1.2-.6 2.2-.6 1 0 1.3.6 2.2.6.9 0 1.5-.8 2.1-1.7.6-.9.9-1.8.9-1.8s-1.8-.7-1.8-3.1zM9.8 4c.5-.6.8-1.4.7-2.2-.7 0-1.5.4-2 1-.4.5-.8 1.4-.7 2.1.7.1 1.5-.3 2-.9z"/></g>,
    chrome:   <g {...s}><circle cx="8" cy="8" r="6"/><circle cx="8" cy="8" r="2"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="2.5" y1="10.5" x2="6" y2="9.2"/><line x1="13.5" y1="10.5" x2="10" y2="9.2"/></g>,
    mail:     <g {...s}><rect x="2" y="3.5" width="12" height="9" rx="1.5" /><polyline points="2.5 4.5 8 9 13.5 4.5" /></g>,
    pin:      <g {...s}><path d="M8 14s4.5-4 4.5-7.5a4.5 4.5 0 0 0-9 0C3.5 10 8 14 8 14z" /><circle cx="8" cy="6.5" r="1.6" /></g>,
    clock:    <g {...s}><circle cx="8" cy="8" r="6" /><polyline points="8 4.5 8 8 10.5 9.5" /></g>,
    link:     <g {...s}><path d="M6.5 9.5l3-3" /><path d="M7 5l1.5-1.5a2.5 2.5 0 0 1 3.5 3.5L10.5 8.5" /><path d="M9 11l-1.5 1.5a2.5 2.5 0 0 1-3.5-3.5L5.5 7.5" /></g>,
    cmd:      <g {...s}><path d="M5 5h6v6H5zM5 5V3.5A1.5 1.5 0 0 0 3.5 2 1.5 1.5 0 0 0 2 3.5 1.5 1.5 0 0 0 3.5 5H5M11 5V3.5A1.5 1.5 0 0 1 12.5 2 1.5 1.5 0 0 1 14 3.5 1.5 1.5 0 0 1 12.5 5H11M5 11v1.5A1.5 1.5 0 0 1 3.5 14 1.5 1.5 0 0 1 2 12.5 1.5 1.5 0 0 1 3.5 11H5M11 11v1.5a1.5 1.5 0 0 0 1.5 1.5 1.5 1.5 0 0 0 1.5-1.5 1.5 1.5 0 0 0-1.5-1.5H11"/></g>,
  };
  return <svg width={size} height={size} viewBox="0 0 16 16" style={{ flexShrink: 0 }}>{p[name]}</svg>;
};

const ValteriaMark = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" style={{ flexShrink: 0 }}>
    <rect width="40" height="40" rx="10" fill="var(--aubergine-800)" />
    <path d="M11 12 L20 28 L29 12" stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    <circle cx="20" cy="32" r="1.6" fill="var(--violet-400)" />
  </svg>
);

/* Eyebrow — the small tracked label that opens every section.
   On light surfaces it reads in the deep accent; on dark, the bright accent. */
const Eyebrow = ({ children, onDark = false, style }) => (
  <div style={{
    fontSize: 12, fontWeight: 600, letterSpacing: "0.12em",
    textTransform: "uppercase",
    color: onDark ? "var(--site-accent)" : "var(--site-accent-deep)",
    ...style,
  }}>{children}</div>
);

/* ───────────────────────────── NAV ───────────────────────────── */
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { n: "Eighty4", h: "#eighty4" },
    { n: "Work", h: "#work" },
    { n: "Services", h: "#services" },
    { n: "Approach", h: "#approach" },
    { n: "About", h: "#about" },
  ];

  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      transition: "all 240ms var(--ease-out)",
      padding: scrolled ? "12px 0" : "20px 0",
      background: scrolled ? "color-mix(in oklab, var(--bg) 80%, transparent)" : "transparent",
      backdropFilter: scrolled ? "blur(16px) saturate(1.4)" : "none",
      borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent",
    }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 32px", display: "flex", alignItems: "center", gap: 28 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none", color: "var(--text)" }}>
          <ValteriaMark size={28} />
          <span style={{ fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em" }}>Valteria</span>
        </a>

        <div style={{ display: "flex", gap: 2, marginLeft: 8 }}>
          {links.map((l) => (
            <a key={l.n} href={l.h} style={{
              padding: "6px 12px", borderRadius: "var(--radius-sm)",
              fontSize: 14, fontWeight: 500, textDecoration: "none",
              color: "var(--text-secondary)",
            }}>{l.n}</a>
          ))}
        </div>

        <div style={{ flex: 1 }} />

        <a href="#contact" style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "0 16px", height: 38,
          borderRadius: "var(--radius-md)",
          background: "var(--site-accent)", color: "var(--text-on-accent)",
          fontSize: 14, fontWeight: 600, textDecoration: "none",
          letterSpacing: "-0.005em", whiteSpace: "nowrap",
          boxShadow: "var(--site-accent-shadow)",
        }}>
          Start a project
          <Icon name="arrow" size={14} color="var(--text-on-accent)" />
        </a>
      </div>
    </nav>
  );
};

/* ───────────────────────────── FOOTER ─────────────────────────────
   Carries the full business identity — important for verification. */
const Footer = ({ biz }) => (
  <footer style={{ padding: "72px 0 36px", borderTop: "1px solid var(--border)", background: "var(--bg-subtle)" }}>
    <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 32px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 40, marginBottom: 56 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
            <ValteriaMark size={28} />
            <span style={{ fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em" }}>Valteria</span>
          </div>
          <p style={{ fontSize: 14, color: "var(--text-secondary)", lineHeight: 1.6, maxWidth: 300, margin: 0 }}>
            An independent product studio. I build software with intent, from the backend up.
          </p>
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-tertiary)", marginBottom: 16 }}>Site</div>
          <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
            {[{ n: "Work", h: "#work" }, { n: "Services", h: "#services" }, { n: "Approach", h: "#approach" }, { n: "About", h: "#about" }].map((i) => (
              <li key={i.n}><a href={i.h} style={{ fontSize: 14, color: "var(--text-secondary)", textDecoration: "none" }}>{i.n}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-tertiary)", marginBottom: 16 }}>Contact</div>
          <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
            <li><a href={"mailto:" + biz.email} style={{ fontSize: 14, color: "var(--text-secondary)", textDecoration: "none" }}>{biz.email}</a></li>
            <li><span style={{ fontSize: 14, color: "var(--text-secondary)" }}>{biz.location}</span></li>
            <li><span style={{ fontSize: 14, color: "var(--text-secondary)" }}>{biz.hours}</span></li>
          </ul>
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, borderTop: "1px solid var(--border-subtle)", fontSize: 13, color: "var(--text-tertiary)", flexWrap: "wrap", gap: 12 }}>
        <div>© {new Date().getFullYear()} {biz.entity}. All rights reserved.</div>
        <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
          <span style={{ fontFamily: "var(--font-mono)" }}>{biz.domain}</span>
          <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--success-500)" }} /> Available for new work
          </span>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Icon, ValteriaMark, Eyebrow, Nav, Footer });