// Layershop.eu — simpele site met focus op de shop
// Made in Noord-Brabant, NL

const SHOPIFY_URL = "https://layershop-2.myshopify.com/";

// ---------- Layer stripe pattern ----------
function LayerStripes({ color = "#F04E23", opacity = 0.18, gap = 6, stroke = 1.2, angle = 0, style = {} }) {
  const id = React.useId();
  return (
    <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, ...style }} aria-hidden="true">
      <defs>
        <pattern id={id} width="40" height={gap} patternUnits="userSpaceOnUse" patternTransform={`rotate(${angle})`}>
          <line x1="0" y1="0" x2="40" y2="0" stroke={color} strokeWidth={stroke} opacity={opacity} />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${id})`} />
    </svg>
  );
}

// ---------- Product placeholder ----------
function ProductPlaceholder({ label, idx = 0 }) {
  const variants = [
    { bg: "#FBF7F2", fg: "#1E2A8A", stripe: "#F04E23" },
    { bg: "#1E2A8A", fg: "#FBF7F2", stripe: "#F04E23" },
    { bg: "#F04E23", fg: "#FBF7F2", stripe: "#FBF7F2" },
    { bg: "#FBF7F2", fg: "#0E1330", stripe: "#1E2A8A" },
  ];
  const v = variants[idx % variants.length];
  return (
    <div style={{ position: "relative", width: "100%", aspectRatio: "1 / 1", background: v.bg, overflow: "hidden" }}>
      <LayerStripes color={v.stripe} opacity={0.35} gap={6} stroke={1.5} />
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
          color: v.fg, letterSpacing: 1.5, textAlign: "center",
          padding: "10px 14px", background: v.bg, lineHeight: 1.5,
          border: `1px solid ${v.fg}`
        }}>
          [{label}]
        </div>
      </div>
    </div>
  );
}

// ---------- Top nav ----------
function Nav() {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: open ? "#FBF7F2" : "rgba(251,247,242,0.94)",
      backdropFilter: open ? "none" : "blur(10px)",
      borderBottom: "1px solid rgba(14,19,48,0.08)"
    }}>
      <style>{`
        .ls-nav-desktop { display: flex; }
        .ls-nav-burger { display: none; }
        @media (max-width: 900px) {
          .ls-nav-desktop { display: none !important; }
          .ls-nav-burger { display: inline-flex !important; }
        }
      `}</style>
      <div style={{
        maxWidth: 1280, margin: "0 auto", padding: "10px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32
      }}>
        <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
          <img src="assets/logo.png" alt="Layershop.eu" style={{ height: 96, width: "auto", display: "block", marginTop: -12, marginBottom: -12 }} />
          <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 20, color: "#F04E23" }}>
            layershop<span style={{ color: "#1E2A8A" }}>.eu</span>
          </span>
        </a>

        {/* Desktop nav — unchanged */}
        <nav className="ls-nav-desktop" style={{ gap: 28, alignItems: "center" }}>
          {[
            { href: "index.html", label: "Home" },
            { href: "over-ons.html", label: "Over ons" },
            { href: "offerte.html", label: "Offerte" },
            { href: "contact.html", label: "Contact" },
          ].map(item => {
            const active = window.location.pathname.endsWith(item.href) || (item.href === "index.html" && (window.location.pathname === "/" || window.location.pathname.endsWith("index.html")));
            return (
              <a key={item.href} href={item.href} style={{
                fontFamily: "'Inter', sans-serif", fontSize: 14,
                fontWeight: active ? 600 : 500,
                color: active ? "#F04E23" : "#0E1330",
                textDecoration: "none"
              }}>{item.label}</a>
            );
          })}
          <a href={SHOPIFY_URL} target="_blank" rel="noreferrer" style={{
            fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 600,
            background: "#F04E23", color: "#fff", padding: "10px 18px", borderRadius: 999,
            textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8
          }}>
            Naar de shop
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </nav>

        {/* Mobile hamburger button */}
        <button
          className="ls-nav-burger"
          onClick={() => setOpen(true)}
          aria-label="Menu openen"
          style={{
            background: "transparent", border: "1px solid rgba(14,19,48,0.18)",
            width: 44, height: 44, borderRadius: 999, cursor: "pointer",
            alignItems: "center", justifyContent: "center", padding: 0
          }}
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M3 6h14M3 10h14M3 14h14" stroke="#0E1330" strokeWidth="1.8" strokeLinecap="round"/>
          </svg>
        </button>
      </div>

      {/* Mobile drawer (right side) */}
      {open && (
        <>
          {/* Backdrop — solid beige with layer stripes (matches homepage) */}
          <div onClick={() => setOpen(false)} style={{
            position: "fixed", inset: 0, zIndex: 99,
            background: "#FBF7F2", overflow: "hidden",
            animation: "lsFadeIn .15s ease-out"
          }}>
            <LayerStripes color="#F04E23" opacity={0.07} gap={4} stroke={1} />
          </div>
          {/* Drawer panel */}
          <div style={{
            position: "fixed", top: 0, right: 0, bottom: 0, zIndex: 100,
            width: "min(320px, 85vw)",
            background: "#FBF7F2",
            boxShadow: "-12px 0 40px rgba(14,19,48,0.15)",
            display: "flex", flexDirection: "column",
            animation: "lsSlideIn .22s ease-out"
          }}>
            <style>{`
              @keyframes lsFadeIn { from { opacity: 0; } to { opacity: 1; } }
              @keyframes lsSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
            `}</style>
            {/* Drawer header */}
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "flex-end",
              padding: "14px 20px", borderBottom: "1px solid rgba(14,19,48,0.08)"
            }}>
              <button
                onClick={() => setOpen(false)}
                aria-label="Menu sluiten"
                style={{
                  background: "transparent", border: "1px solid rgba(14,19,48,0.18)",
                  width: 40, height: 40, borderRadius: 999, cursor: "pointer",
                  display: "inline-flex", alignItems: "center", justifyContent: "center", padding: 0
                }}
              >
                <svg width="16" height="16" viewBox="0 0 18 18" fill="none">
                  <path d="M4 4l10 10M14 4L4 14" stroke="#0E1330" strokeWidth="1.8" strokeLinecap="round"/>
                </svg>
              </button>
            </div>

            {/* Menu items */}
            <nav style={{
              flex: 1, display: "flex", flexDirection: "column",
              padding: "16px 20px 24px", gap: 0
            }}>
              {[
                { label: "Home",     href: "index.html" },
                { label: "Over ons", href: "over-ons.html" },
                { label: "Offerte",  href: "offerte.html" },
                { label: "Contact",  href: "contact.html" },
              ].map((item) => {
                const active = window.location.pathname.endsWith(item.href) || (item.href === "index.html" && (window.location.pathname === "/" || window.location.pathname.endsWith("index.html")));
                return (
                  <a key={item.href} href={item.href} onClick={() => setOpen(false)} style={{
                    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600,
                    fontSize: 22, letterSpacing: -0.5,
                    color: active ? "#F04E23" : "#0E1330",
                    textDecoration: "none", padding: "14px 4px",
                    borderBottom: "1px solid rgba(14,19,48,0.08)",
                    display: "block"
                  }}>
                    {item.label}
                  </a>
                );
              })}

              <a href={SHOPIFY_URL} target="_blank" rel="noreferrer"
                onClick={() => setOpen(false)}
                style={{
                  marginTop: 24, fontFamily: "'Inter', sans-serif", fontSize: 15, fontWeight: 600,
                  background: "#F04E23", color: "#fff", padding: "14px 20px", borderRadius: 999,
                  textDecoration: "none", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                  boxShadow: "0 6px 20px rgba(240,78,35,0.3)"
                }}>
                Naar de shop
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </a>
            </nav>

            {/* Drawer footer */}
            <div style={{
              padding: "16px 20px", borderTop: "1px solid rgba(14,19,48,0.08)",
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 1.5,
              color: "#0E1330", opacity: 0.55, display: "flex", alignItems: "center", gap: 8
            }}>
              <span style={{ width: 6, height: 6, background: "#F04E23", borderRadius: "50%" }}></span>
              MADE IN NOORD-BRABANT, NL
            </div>
          </div>
        </>
      )}
    </header>
  );
}
const navLink = {
  fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 500,
  color: "#0E1330", textDecoration: "none"
};

// ---------- Hero ----------
function Hero() {
  return (
    <section id="top" style={{ position: "relative", minHeight: "calc(100vh - 76px)", overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <LayerStripes color="#F04E23" opacity={0.07} gap={4} stroke={1} />
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative", flex: 1, display: "flex", alignItems: "center", width: "100%", padding: "40px 32px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center", width: "100%" }}>
          <div>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#1E2A8A",
              letterSpacing: 2, textTransform: "uppercase",
              padding: "8px 14px", border: "1px solid #1E2A8A", borderRadius: 999, marginBottom: 28
            }}>
              <span style={{ width: 6, height: 6, background: "#F04E23", borderRadius: "50%" }}></span>
              MADE IN NOORD-BRABANT, NL
            </div>
            <h1 style={{
              fontFamily: "'Space Grotesk', sans-serif", fontSize: "clamp(48px, 6vw, 88px)",
              fontWeight: 700, lineHeight: 0.95, letterSpacing: -2, margin: "0 0 24px",
              color: "#0E1330"
            }}>
              Premium 3D&nbsp;prints,<br/>
              <span style={{ color: "#F04E23" }}>laag</span> voor <span style={{ color: "#F04E23" }}>laag</span><br/>
              <span style={{ color: "#1E2A8A" }}>geprint in NL.</span>
            </h1>
            <p style={{
              fontFamily: "'Inter', sans-serif", fontSize: 19, lineHeight: 1.55,
              color: "#0E1330", opacity: 0.8, maxWidth: 480, margin: "0 0 36px"
            }}>
              Unieke cadeaus en decoratie-items, ontworpen en geprint in onze studio in Noord-Brabant.
            </p>
            <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
              <a href={SHOPIFY_URL} target="_blank" rel="noreferrer" style={{
                fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 600,
                background: "#F04E23", color: "#fff", padding: "16px 28px", borderRadius: 999,
                textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10,
                boxShadow: "0 6px 24px rgba(240,78,35,0.3)"
              }}>
                Bekijk de shop
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8h10M8 3l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </a>
            <a href="contact.html" style={{
                fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 500,
                color: "#0E1330", textDecoration: "none",
                padding: "16px 4px", borderBottom: "1.5px solid #0E1330"
              }}>Iets op maat?</a>
            </div>
          </div>

          <div style={{ position: "relative", aspectRatio: "1 / 1" }}>
            <HeroVisual/>
          </div>
        </div>
      </div>

      {/* Scroll cue */}
      <a href="#about" aria-label="Scroll naar beneden" style={{
        position: "relative", display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
        textDecoration: "none", color: "#1E2A8A", margin: "0 auto 18px",
        fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 2
      }}>
        <span>SCROLL</span>
        <span style={{
          width: 26, height: 26, borderRadius: "50%",
          border: "1.5px solid #1E2A8A",
          display: "flex", alignItems: "center", justifyContent: "center",
          animation: "scrollBounce 1.8s ease-in-out infinite"
        }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M3 4.5l3 3 3-3" stroke="#1E2A8A" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </a>

      <TrustStrip/>
    </section>
  );
}

function HeroVisual() {
  return (
    <div style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <img src="assets/logo.png" alt="Layershop.eu — Premium 3D Prints"
        style={{ width: "100%", height: "100%", objectFit: "contain" }} />
    </div>
  );
}

// ---------- Trust strip ----------
function TrustStrip() {
  const items = [
    ["📍", "Geprint in Noord-Brabant"],
    ["🚚", "Levering in NL & België"],
    ["⏱", "Gemiddeld 3 dagen levertijd"],
    ["✉️", "Custom op aanvraag"],
  ];
  return (
    <div style={{ background: "#1E2A8A", color: "#FBF7F2", padding: "20px 32px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
        {items.map(([icon, text]) => (
          <div key={text} style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "'Inter', sans-serif", fontSize: 14 }}>
            <span style={{ fontSize: 16 }}>{icon}</span>
            <span>{text}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- About ----------
function About() {
  return (
    <section id="about" style={{ padding: "110px 32px", background: "#F8EDE3", color: "#0E1330", position: "relative", overflow: "hidden", borderTop: "1px solid rgba(240,78,35,0.2)", borderBottom: "1px solid rgba(240,78,35,0.2)" }}>
      <LayerStripes color="#F04E23" opacity={0.07} gap={5} stroke={1} />
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 72, alignItems: "center" }}>
          <div style={{ position: "relative", aspectRatio: "1 / 1" }}>
            <div style={{
              position: "absolute", inset: 0, background: "#FBF7F2",
              overflow: "hidden"
            }}>
              <img src="assets/studio.png" alt="Layershop studio in Noord-Brabant — 3D printers in actie"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
            </div>
            <div style={{
              position: "absolute", bottom: -16, right: -16,
              background: "#FBF7F2", color: "#0E1330",
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 1.5,
              padding: "10px 14px", display: "flex", alignItems: "center", gap: 8,
              border: "1px solid rgba(14,19,48,0.15)"
            }}>
              <span style={{ width: 14, height: 10, background: "linear-gradient(to bottom, #AE1C28 33%, #fff 33% 66%, #21468B 66%)", border: "0.5px solid #0E1330" }}></span>
              NOORD-BRABANT, NL
            </div>
          </div>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 2.5, marginBottom: 14, color: "#F04E23" }}>
              OVER LAYERSHOP
            </div>
            <h2 style={{
              fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700,
              fontSize: "clamp(34px, 4vw, 52px)", lineHeight: 1.05, letterSpacing: -1.5,
              margin: "0 0 24px", color: "#0E1330"
            }}>
              Een 3D Print studio in Noord-Brabant.
            </h2>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 18, lineHeight: 1.6, margin: "0 0 16px", color: "#0E1330", opacity: 0.85 }}>
              Layershop print al haar producten zelf, in eigen studio in Noord-Brabant. Geen massa-productie — wel scherp geprijsde, doordachte cadeaus en decoratie-items waar je elke dag plezier van hebt.
            </p>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 18, lineHeight: 1.6, margin: "0 0 32px", color: "#0E1330", opacity: 0.85 }}>
              We werken met PLA en PETG — beide duurzaam en geschikt voor binnen- of buitengebruik.
            </p>
            <a href={SHOPIFY_URL} target="_blank" rel="noreferrer" style={{
              fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 600,
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "16px 28px", borderRadius: 999,
              background: "#F04E23", color: "#FBF7F2", textDecoration: "none",
              boxShadow: "0 6px 24px rgba(240,78,35,0.25)"
            }}>
              Bezoek de shop
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M3 8h10M8 3l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Contact (custom request — kleine zijlijn) ----------
function Contact() {
  return (
    <section id="contact" style={{ padding: "100px 32px", background: "#FBF7F2" }}>
      <div style={{ maxWidth: 800, margin: "0 auto", textAlign: "center" }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
          letterSpacing: 2.5, color: "#F04E23", marginBottom: 14
        }}>CONTACT</div>
        <h2 style={{
          fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700,
          fontSize: "clamp(32px, 3.8vw, 44px)", lineHeight: 1.05, letterSpacing: -1.2,
          margin: "0 0 16px", color: "#0E1330"
        }}>
          Iets specifieks in gedachten?
        </h2>
        <p style={{
          fontFamily: "'Inter', sans-serif", fontSize: 17, lineHeight: 1.6,
          color: "#0E1330", opacity: 0.75, margin: "0 auto 32px", maxWidth: 560
        }}>
          Wil je iets unieks laten printen — een persoonlijk cadeau, een onderdeel of een eigen ontwerp? Stuur ons een mailtje, we denken graag mee.
        </p>
        <a href="contact.html" style={{
          fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 600,
          display: "inline-flex", alignItems: "center", gap: 10,
          padding: "16px 28px", borderRadius: 999,
          background: "#0E1330", color: "#FBF7F2", textDecoration: "none"
        }}>
          Naar contactformulier
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M3 8h10M8 3l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </a>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer style={{ background: "#0E1330", color: "#FBF7F2", padding: "56px 32px 28px", position: "relative", overflow: "hidden" }}>
      <LayerStripes color="#F04E23" opacity={0.06} gap={4} stroke={1} />
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 32, paddingBottom: 32, borderBottom: "1px solid rgba(251,247,242,0.15)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <img src="assets/logo.png" alt="Layershop.eu" style={{ height: 180, width: "auto", display: "block", filter: "brightness(1.05)", marginTop: -38, marginBottom: -38 }} />
            <div>
              <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 22, color: "#F04E23" }}>
                layershop<span style={{ color: "#FBF7F2" }}>.eu</span>
              </div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 1.5, color: "#FBF7F2", opacity: 0.6, marginTop: 2 }}>
                PREMIUM 3D PRINTS · NOORD-BRABANT, NL
              </div>
            </div>
          </div>
          <nav style={{ display: "flex", gap: 28, fontFamily: "'Inter', sans-serif", fontSize: 14, flexWrap: "wrap" }}>
            <a href={SHOPIFY_URL} target="_blank" rel="noreferrer" style={{ color: "#FBF7F2", textDecoration: "none", opacity: 0.85 }}>Shop</a>
            <a href="over-ons.html" style={{ color: window.location.pathname.endsWith("over-ons.html") ? "#F04E23" : "#FBF7F2", textDecoration: "none", opacity: 0.85, fontWeight: window.location.pathname.endsWith("over-ons.html") ? 600 : 400 }}>Over ons</a>
            <a href="offerte.html" style={{ color: window.location.pathname.endsWith("offerte.html") ? "#F04E23" : "#FBF7F2", textDecoration: "none", opacity: 0.85, fontWeight: window.location.pathname.endsWith("offerte.html") ? 600 : 400 }}>Offerte</a>
            <a href="contact.html" style={{ color: window.location.pathname.endsWith("contact.html") ? "#F04E23" : "#FBF7F2", textDecoration: "none", opacity: 0.85, fontWeight: window.location.pathname.endsWith("contact.html") ? 600 : 400 }}>Contact</a>
            <a href="https://layercompany.eu" target="_blank" rel="noreferrer" style={{ color: "#FBF7F2", textDecoration: "none", opacity: 0.85 }}>B2B ↗</a>
            <a href="https://www.instagram.com/layershop.eu/" target="_blank" rel="noreferrer" style={{ color: "#FBF7F2", textDecoration: "none", opacity: 0.85 }}>Instagram ↗</a>
          </nav>
        </div>
        <div style={{ paddingTop: 20, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16,
          fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.5, opacity: 0.6 }}>
          <div>© 2026 LAYERSHOP.EU · KVK 89199073</div>
          <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
            <a href="layershop-privacybeleid.html" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>PRIVACY</a>
            <a href="layershop-servicevoorwaarden.html" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>VOORWAARDEN</a>
            <a href="layershop-herroepingsrecht.html" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>HERROEPINGSRECHT</a>
	    <a href="layershop-verzendbeleid.html" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>VERZENDBELEID</a>
            <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event("layershop:open-cookie-settings")); }} style={{ color: "inherit", textDecoration: "none", cursor: "pointer" }}>COOKIEBELEID</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- Root ----------
function Site() {
  return (
    <div data-screen-label="01 Layershop Home" style={{ background: "#FBF7F2", minHeight: "100vh", color: "#0E1330" }}>
      <Nav/>
      <Hero/>
      <About/>
      <Contact/>
      <Footer/>
      <CookieBanner/>
    </div>
  );
}

window.Site = Site;
window.Nav = Nav;
window.Footer = Footer;
window.LayerStripes = LayerStripes;
window.SHOPIFY_URL = SHOPIFY_URL;