/* ============================================================
   Altun Works — shared data + components (loaded on every page)
   Exposes globals via window at the bottom.
   ============================================================ */

const BRAND = {
  name: "Altun Works",
  tagline: "Outdoor Living Solutions",
  phone: "+31 6 43778635",
  phoneHref: "tel:+31643778635",
  email: "info@altunworks.nl",
  address: ["Helmond", "Noord-Brabant, Nederland"],
  hours: [
    ["Maandag – Vrijdag", "09:00 – 17:00"],
    ["Zaterdag", "09:00 – 13:00"],
    ["Zondag", "10:00 – 16:00"],
  ],
  social: [
    { label: "Instagram", href: "https://www.instagram.com/altun.works?igsh=MXZneTV6NWZ3dWRrbA==", icon: "instagram" },
    { label: "TikTok", href: "https://www.tiktok.com/@altunworks?_r=1&_t=ZG-96w3h5LlTc0", icon: "tiktok" },
  ],
};

const NAV = [
  { label: "Home", href: "index.html", key: "home" },
  { label: "Projecten", href: "projecten.html", key: "projecten" },
  { label: "Contact", href: "contact.html", key: "contact" },
];

/* Project catalogue — real Altun Works installations */
const CATEGORIES = [
  { key: "all", label: "Alle projecten" },
  { key: "glas", label: "Glazen veranda's" },
  { key: "aluminium", label: "Aluminium veranda's" },
  { key: "overkapping", label: "Terrasoverkappingen" },
  { key: "aanbouw", label: "Aanbouw & tuinkamers" },
];

const PROJECTS = [
  { img: "assets/projects/veranda-tuin-wit.jpg?v=orig", title: "Lichtrijke tuinveranda", cat: "aluminium", catLabel: "Aluminium veranda", place: "Vrijstaande woning",
    desc: "Ruime aluminium veranda in crèmewit met panoramische schuifpui, badend in het licht aan een strakke tuin." },
  { img: "assets/projects/veranda-interieur.jpg", title: "Panoramische leefveranda", cat: "aluminium", catLabel: "Aluminium veranda", place: "Gezinswoning",
    desc: "Een volwaardige leefruimte met vloer-tot-plafond beglazing en zicht op de tuin, klaar om in te richten." },
  { img: "assets/projects/terrasoverkapping.jpg", title: "Terrasoverkapping aluminium", cat: "overkapping", catLabel: "Terrasoverkapping", place: "Rijwoning",
    desc: "Lichte aluminium overkapping met heldere polycarbonaatbedaking, bescherming zonder de tuin te verduisteren." },
  { img: "assets/projects/veranda-aluminium-wit.jpg", title: "Hoekveranda in crème", cat: "aluminium", catLabel: "Aluminium veranda", place: "Vrijstaande woning",
    desc: "Royale hoekveranda met schuifdeuren over twee zijden, maximale opening naar het terras." },
  { img: "assets/projects/veranda-glas-antraciet.jpg", title: "Glazen veranda antraciet", cat: "glas", catLabel: "Glazen veranda", place: "Rijwoning",
    desc: "Heldere glaswanden met slanke antracieten kaders voor een open, eigentijdse uitstraling." },
  { img: "assets/projects/aanbouw-glas-antraciet.jpg", title: "Glazen aanbouw met schuifwand", cat: "glas", catLabel: "Glazen veranda", place: "Stadswoning",
    desc: "Glazen schuifwanden tot het plafond verbinden binnen en buiten en winnen waardevolle leefruimte." },
  { img: "assets/projects/veranda-aanbouw-zwart.jpg", title: "veranda-aanbouw", cat: "glas", catLabel: "Glazen veranda", place: "Rijwoning",
    desc: "Minimalistische glazen aanbouw met antracieten profielen die naadloos aansluit op de bestaande gevel." },
  { img: "assets/projects/terras-schemering.jpg", title: "Verhoogd terras & aanbouw", cat: "aanbouw", catLabel: "Aanbouw", place: "Moderne woning",
    desc: "Strak verhoogd terras in keramische tegels dat overloopt in een glazen aanbouw aan de achtergevel." },
  { img: "assets/projects/tuinkamer-antraciet.jpg", title: "Tuinkamer met sandwichpanelen", cat: "aanbouw", catLabel: "Tuinkamer", place: "Rijwoning",
    desc: "Volledig dichte tuinkamer in antraciet met geïsoleerde panelen." },
  { img: "assets/projects/carport-antraciet.jpg", title: "Aluminium carport & doorgang", cat: "overkapping", catLabel: "Carport", place: "Vrijstaande woning",
    desc: "Smalle aluminium overkapping die de zijdoorgang overdekt en mooi aansluit op de poorten in dezelfde kleur." },
];

/* ---------------- Icons ---------------- */
function Icon({ name, size = 20, stroke = 1.6 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    diamond: <><path d="M12 3l9 9-9 9-9-9 9-9z"/></>,
    shield: <><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></>,
    ruler: <><path d="M3 17l11-11 4 4L7 21l-4-4z"/><path d="M8 12l2 2M11 9l2 2M14 6l2 2"/></>,
    tools: <><path d="M14 7l3-3 3 3-3 3"/><path d="M17 4l-9 9"/><path d="M6 14l-3 3 3 3 3-3"/><path d="M9 18l4-4"/></>,
    award: <><circle cx="12" cy="9" r="6"/><path d="M9 14l-2 7 5-3 5 3-2-7"/></>,
    leaf: <><path d="M5 19c0-7 5-13 14-13 0 9-6 14-14 13z"/><path d="M5 19c3-4 6-6 10-7"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></>,
    phone: <><path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L14 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>,
    pin: <><path d="M12 21s-7-6-7-11a7 7 0 0114 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    check: <><path d="M20 6L9 17l-5-5"/></>,
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></>,
    tiktok: <><path fill="currentColor" stroke="none" d="M14 3h2.6c.25 1.9 1.5 3.5 3.4 3.8v2.7c-1.3 0-2.6-.35-3.7-1V15a5.2 5.2 0 11-5.2-5.2c.28 0 .55.02.82.06v2.8a2.4 2.4 0 00-.82-.15A2.5 2.5 0 1013.4 15V3H14z"/></>,
    facebook: <><path d="M15 3h-2a4 4 0 00-4 4v3H6v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h2z"/></>,
    linkedin: <><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M7 10v7M7 7v.01M11 17v-4a2 2 0 014 0v4M11 10v7"/></>,
  };
  return <svg {...p}>{paths[name]}</svg>;
}

/* ---------------- Reveal on scroll ---------------- */
function Reveal({ children, as = "div", delay = 0, className = "", ...rest }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.unobserve(el); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={`reveal ${seen ? "in" : ""} ${className}`} style={{ transitionDelay: `${delay}ms` }} {...rest}>
      {children}
    </Tag>
  );
}

/* ---------------- Navbar ---------------- */
function Navbar({ active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="nav__inner">
        <a className="nav__brand" href="index.html" aria-label="Altun Works home">
          <img src="assets/logo-full.png" alt="Altun Works" />
        </a>
        <nav className="nav__links" aria-label="Hoofdnavigatie">
          {NAV.map((n) => (
            <a key={n.key} className={`nav__link ${active === n.key ? "is-active" : ""}`} href={n.href}>{n.label}</a>
          ))}
        </nav>
        <div className="nav__right">
          <a className="navcta nav__cta" href="contact.html">
            <span>Vraag een offerte aan</span>
            <span className="navcta__chip"><Icon name="arrow" size={15} stroke={2} /></span>
          </a>
          <button className={`nav__burger ${open ? "is-open" : ""}`} aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}>
            <span></span>
          </button>
        </div>
      </div>
      <div className={`nav__mobile ${open ? "is-open" : ""}`}>
        {NAV.map((n) => (
          <a key={n.key} className={active === n.key ? "is-active" : ""} href={n.href}>{n.label}</a>
        ))}
        <a className="btn" href="contact.html">Vraag een offerte aan</a>
      </div>
    </header>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__grid">
          <div className="footer__brand">
            <img src="assets/logo-full-white.png" alt="Altun Works" />
            <p>Veranda's, terrasoverkappingen en aanbouwen op maat. Vakmanschap dat uw buitenleven verlengt.</p>
            <div className="footer__social">
              {BRAND.social.map((s) => (
                <a key={s.label} href={s.href} aria-label={s.label}><Icon name={s.icon} size={18} /></a>
              ))}
            </div>
          </div>
          <div>
            <h5>Navigatie</h5>
            <div className="footer__list">
              {NAV.map((n) => <a key={n.key} href={n.href}>{n.label}</a>)}
              <a href="contact.html">Offerte aanvragen</a>
            </div>
          </div>
          <div>
            <h5>Diensten</h5>
            <div className="footer__list">
              <a href="projecten.html">Glazen veranda's</a>
              <a href="projecten.html">Aluminium veranda's</a>
              <a href="projecten.html">Terrasoverkappingen</a>
              <a href="projecten.html">Glazenschuifwanden</a>
            </div>
          </div>
          <div>
            <h5>Contact</h5>
            <div className="footer__contact">
              <a className="row" href={BRAND.phoneHref}><Icon name="phone" size={18} />{BRAND.phone}</a>
              <a className="row" href={`mailto:${BRAND.email}`}><Icon name="mail" size={18} />{BRAND.email}</a>
              <div className="row"><Icon name="pin" size={18} /><span>{BRAND.address[0]}<br />{BRAND.address[1]}</span></div>
            </div>
          </div>
        </div>
        <div className="footer__bar">
          <span>© {new Date().getFullYear()} {BRAND.name}, Outdoor Living Solutions. Alle rechten voorbehouden.</span>
          <span>Algemene voorwaarden · Privacybeleid · Gemaakt door <a href="https://meetpiloot.nl/" target="_blank" rel="noopener">Meetpiloot</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { BRAND, NAV, CATEGORIES, PROJECTS, Icon, Reveal, Navbar, Footer });