// Shared icons + components for Garage DéDé
// Lucide-style stroke icons inlined as React components.

const Icon = ({ children, size = 20, stroke = 2, className = "", style = {} }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size} height={size} viewBox="0 0 24 24"
    fill="none" stroke="currentColor" strokeWidth={stroke}
    strokeLinecap="round" strokeLinejoin="round"
    className={className} style={style}
  >
    {children}
  </svg>
);

const I = {
  Wrench: (p) => <Icon {...p}><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></Icon>,
  Gauge:  (p) => <Icon {...p}><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></Icon>,
  Snow:   (p) => <Icon {...p}><path d="M2 12h20"/><path d="M12 2v20"/><path d="m20 16-4-4 4-4"/><path d="m4 8 4 4-4 4"/><path d="m16 4-4 4-4-4"/><path d="m8 20 4-4 4 4"/></Icon>,
  Tire:   (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/></Icon>,
  Search: (p) => <Icon {...p}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></Icon>,
  ShieldCheck: (p) => <Icon {...p}><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></Icon>,
  Car:    (p) => <Icon {...p}><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18 11l-1.7-3.4c-.3-.6-.9-.9-1.5-.9H7.2c-.6 0-1.2.3-1.5.9L4 11l-2.5.1C.7 11.3 0 12.1 0 13v3c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></Icon>,
  Calendar: (p) => <Icon {...p}><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></Icon>,
  Phone:  (p) => <Icon {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></Icon>,
  WhatsApp: (p) => <Icon {...p}><path d="M3 21l1.65-3.8a9 9 0 1 1 3.4 2.9z"/><path d="M9 10c.5 2 2 3.5 4 4l1.5-1c1 .5 2 .8 3 1v2.5c-3 0-7-1-9-3s-3-6-3-9H8c.2 1 .5 2 1 3z"/></Icon>,
  ArrowRight: (p) => <Icon {...p}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></Icon>,
  ArrowLeft: (p) => <Icon {...p}><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></Icon>,
  Check: (p) => <Icon {...p}><path d="M20 6 9 17l-5-5"/></Icon>,
  Star: (p) => <Icon {...p}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></Icon>,
  Pin: (p) => <Icon {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></Icon>,
  Clock: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></Icon>,
  Mail: (p) => <Icon {...p}><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-10 5L2 7"/></Icon>,
  Plus: (p) => <Icon {...p}><path d="M5 12h14"/><path d="M12 5v14"/></Icon>,
  Lift: (p) => <Icon {...p}><path d="M3 22h18"/><path d="M5 22V8h14v14"/><path d="M9 22v-6h6v6"/><path d="M3 8l9-5 9 5"/></Icon>,
  Flag: (p) => <Icon {...p}><path d="M4 22V4"/><path d="M4 4h12l-2 5 2 5H4"/></Icon>,
  Sparkle: (p) => <Icon {...p}><path d="M12 3v3"/><path d="M12 18v3"/><path d="M3 12h3"/><path d="M18 12h3"/><path d="m5.6 5.6 2.1 2.1"/><path d="m16.3 16.3 2.1 2.1"/><path d="m5.6 18.4 2.1-2.1"/><path d="m16.3 7.7 2.1-2.1"/></Icon>,
  Battery: (p) => <Icon {...p}><rect x="2" y="7" width="16" height="10" rx="2"/><path d="M22 11v2"/><path d="M6 10v4"/><path d="M10 10v4"/><path d="M14 10v4"/></Icon>,
  Bolt: (p) => <Icon {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></Icon>,
  Cog: (p) => <Icon {...p}><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/></Icon>,
  Menu: (p) => <Icon {...p}><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></Icon>,
  X: (p) => <Icon {...p}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></Icon>,
  Filter: (p) => <Icon {...p}><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></Icon>,
  Drag: (p) => <Icon {...p}><circle cx="9" cy="6" r="1.2"/><circle cx="15" cy="6" r="1.2"/><circle cx="9" cy="12" r="1.2"/><circle cx="15" cy="12" r="1.2"/><circle cx="9" cy="18" r="1.2"/><circle cx="15" cy="18" r="1.2"/></Icon>,
  Apk: (p) => <Icon {...p}><path d="M9 11h6"/><path d="M9 7h6"/><path d="M9 15h4"/><rect x="4" y="3" width="16" height="18" rx="2"/></Icon>,
  Diag: (p) => <Icon {...p}><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10v4"/><path d="M10 10v4"/><path d="M14 12h4"/></Icon>,
  Exhaust: (p) => <Icon {...p}><path d="M3 14c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2"/><path d="M3 18c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2"/><path d="M19 6h-4l-2 4h-4l-2-4H3"/></Icon>,
};

// Header / Navbar — met mobile hamburger
// Helper voor SPA-links — echte <a href> die ook crawlable zijn voor Google
// maar bij click niet de hele pagina herladen
function NavLink({ to, onNav, children, style, className, onClick }) {
  const href = window.screenToHref ? window.screenToHref(to) : "/";
  const handle = (e) => {
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return; // open in new tab toestaan
    e.preventDefault();
    if (onClick) onClick();
    if (onNav) onNav(to);
  };
  return (
    <a href={href} onClick={handle} className={className} style={style}>
      {children}
    </a>
  );
}

function Navbar({ active, onNav, brand, user, onLogout }) {
  const [menuOpen, setMenuOpen] = React.useState(false);

  // Account-knop is context-bewust: admin → werkplaats, klant → portaal, anders → login
  const accountItem = user?.role === 'admin'
    ? { id: "admin",   label: "Werkplaats" }
    : user
    ? { id: "portaal", label: "Mijn account" }
    : { id: "admin",   label: "Werkplaats" };

  const items = [
    { id: "home", label: "Home" },
    { id: "diensten", label: "Diensten" },
    { id: "tarieven", label: "Tarieven" },
    { id: "over", label: "Over ons" },
    accountItem,
  ];
  const serviceItems = [
    { id: "service-apk", label: "APK keuring" },
    { id: "service-onderhoud", label: "Onderhoudsbeurt" },
    { id: "service-reparatie", label: "Reparatie" },
    { id: "service-diagnose", label: "Diagnose" },
    { id: "service-airco", label: "Airco service" },
    { id: "service-banden", label: "Banden & wielen" },
    { id: "service-schadeherstel", label: "Schadeherstel" },
    { id: "service-ruitschade", label: "Ruitschade" },
  ];

  const go = (id) => { setMenuOpen(false); onNav(id); };

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "color-mix(in oklab, var(--bg) 88%, transparent)",
      backdropFilter: "saturate(140%) blur(14px)",
      borderBottom: "1px solid var(--border)",
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto", padding: "16px 24px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
      }}>
        <NavLink to="home" onNav={onNav} style={{
          background: "none", padding: 0, color: "var(--text)",
          display: "flex", alignItems: "center", gap: 12, cursor: "pointer", textDecoration: "none",
        }}>
          <Logo />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, letterSpacing: "-0.02em", fontSize: 20 }}>
            {brand}
          </span>
        </NavLink>

        <nav className="nav-desktop" style={{ display: "flex", gap: 4 }}>
          {items.map(it => (
            <NavLink
              key={it.id}
              to={it.id}
              onNav={onNav}
              style={{
                background: "none", color: active === it.id ? "var(--text)" : "var(--text-muted)",
                fontWeight: active === it.id ? 600 : 500, fontSize: 14,
                padding: "10px 14px", borderRadius: 8, cursor: "pointer",
                transition: "color .15s ease, background .15s ease",
                position: "relative", textDecoration: "none",
              }}
            >
              {it.label}
              {active === it.id && (
                <span style={{
                  position: "absolute", left: 14, right: 14, bottom: 4, height: 2,
                  background: "var(--accent)", borderRadius: 2,
                }} />
              )}
            </NavLink>
          ))}
        </nav>

        <div className="nav-right" style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a href="tel:0235451809" className="nav-phone" style={{
            display: "flex", alignItems: "center", gap: 8, color: "var(--text-muted)",
            textDecoration: "none", fontSize: 14, fontWeight: 500,
          }}>
            <I.Phone size={16}/> <span className="phone-text">023 - 545 1809</span>
          </a>
          <button className="btn btn-primary btn-sm" onClick={() => onNav("boeking")}>
            Maak afspraak <I.ArrowRight size={16}/>
          </button>
          <button
            className="nav-hamburger"
            aria-label={menuOpen ? "Menu sluiten" : "Menu openen"}
            onClick={() => setMenuOpen(o => !o)}
            style={{
              display: "none",
              background: "var(--surface-2)", border: "1px solid var(--border)",
              borderRadius: 10, padding: 10, cursor: "pointer", color: "var(--text)",
            }}
          >
            {menuOpen ? <I.X size={18}/> : <I.Menu size={18}/>}
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      {menuOpen && (
        <div className="nav-drawer" style={{
          borderTop: "1px solid var(--border)",
          background: "var(--bg)",
          padding: "16px 24px 24px",
        }}>
          <div className="eyebrow" style={{ marginBottom: 10, fontSize: 10 }}>Pagina's</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 18 }}>
            {items.map(it => (
              <button key={it.id} onClick={() => go(it.id)} style={{
                background: active === it.id ? "var(--surface-2)" : "transparent",
                border: 0, textAlign: "left", padding: "12px 14px",
                color: active === it.id ? "var(--text)" : "var(--text-muted)",
                fontSize: 16, fontWeight: 500, borderRadius: 8, cursor: "pointer",
                display: "flex", justifyContent: "space-between", alignItems: "center",
              }}>
                {it.label}
                {active === it.id && <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent)" }}/>}
              </button>
            ))}
          </div>

          <div className="eyebrow" style={{ marginBottom: 10, fontSize: 10 }}>Diensten</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 16 }}>
            {serviceItems.map(it => (
              <button key={it.id} onClick={() => go(it.id)} style={{
                background: "transparent", border: 0, textAlign: "left", padding: "10px 14px",
                color: "var(--text-muted)", fontSize: 14, borderRadius: 8, cursor: "pointer",
              }}>
                {it.label}
              </button>
            ))}
          </div>

          <a href="tel:0235451809" style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "12px 14px", color: "var(--text)",
            textDecoration: "none", fontWeight: 500, fontSize: 15,
            border: "1px solid var(--border)", borderRadius: 10,
          }}>
            <I.Phone size={16}/> 023 - 545 1809
          </a>
        </div>
      )}
    </header>
  );
}

function Logo({ size = 36, mark = "monogram" }) {
  // Custom monogram: two D's mirrored, with a hex/wrench accent
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" style={{ display: "block", flexShrink: 0 }}>
      <defs>
        <linearGradient id="lg-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="var(--accent)"/>
          <stop offset="100%" stopColor="var(--accent-2)"/>
        </linearGradient>
      </defs>
      <rect x="1" y="1" width="46" height="46" rx="11" fill="url(#lg-bg)"/>
      <rect x="1.5" y="1.5" width="45" height="45" rx="10.5" fill="none" stroke="rgba(255,255,255,.18)" strokeWidth="1"/>
      {/* Two mirrored D's forming "DD" monogram */}
      <path d="M 11 14 L 11 34 L 18 34 C 23 34 26 30 26 24 C 26 18 23 14 18 14 Z M 15 18 L 18 18 C 20.5 18 22 20 22 24 C 22 28 20.5 30 18 30 L 15 30 Z"
            fill="#0B0B0C"/>
      <path d="M 22 14 L 22 34 L 29 34 C 34 34 37 30 37 24 C 37 18 34 14 29 14 Z M 26 18 L 29 18 C 31.5 18 33 20 33 24 C 33 28 31.5 30 29 30 L 26 30 Z"
            fill="#0B0B0C" opacity="0.55"/>
      {/* Diacritic — the é accent */}
      <rect x="29" y="9" width="6" height="2.2" rx="1" fill="#0B0B0C" transform="rotate(-22 32 10)"/>
    </svg>
  );
}

function LogoLockup({ size = 36, brand, sub }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <Logo size={size}/>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, letterSpacing: "-0.025em", fontSize: size * 0.58 }}>
          {brand}
        </span>
        {sub && <span className="text-mono text-muted" style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", marginTop: 4 }}>{sub}</span>}
      </div>
    </div>
  );
}

// Footer
function Footer({ brand, onNav }) {
  const Col = ({ title, children }) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div className="eyebrow" style={{ marginBottom: 6 }}>{title}</div>
      {children}
    </div>
  );
  const Lk = ({ children, to }) => {
    const href = window.screenToHref ? window.screenToHref(to) : "#";
    return (
      <a
        href={href}
        onClick={(e) => {
          if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
          e.preventDefault();
          if (to && onNav) onNav(to);
        }}
        style={{ color: "var(--text-muted)", textDecoration: "none", fontSize: 14, padding: "2px 0", cursor: "pointer" }}
        onMouseEnter={(e) => e.currentTarget.style.color = "var(--text)"}
        onMouseLeave={(e) => e.currentTarget.style.color = "var(--text-muted)"}>
        {children}
      </a>
    );
  };
  return (
    <footer style={{ borderTop: "1px solid var(--border)", marginTop: 80, background: "var(--surface)" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "64px 32px 24px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1.2fr", gap: 48 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <Logo />
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22 }}>{brand}</span>
            </div>
            <p style={{ color: "var(--text-muted)", lineHeight: 1.6, fontSize: 14, maxWidth: 320, margin: 0 }}>
              Specialist voor onderhoud, APK en complexe diagnose. Alle merken personenauto's — vakkundig geregeld in Vijfhuizen.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
              <span className="pill"><I.ShieldCheck size={12}/> RDW erkend</span>
              <span className="pill">F-gassen</span>
              <span className="pill">NEN 9140</span>
            </div>
          </div>

          <Col title="Diensten">
            <Lk to="service-apk">APK keuring</Lk>
            <Lk to="service-onderhoud">Onderhoudsbeurt</Lk>
            <Lk to="service-reparatie">Reparaties</Lk>
            <Lk to="service-diagnose">Diagnose</Lk>
            <Lk to="service-airco">Airco service</Lk>
            <Lk to="service-banden">Banden & wielen</Lk>
            <Lk to="service-schadeherstel">Schadeherstel</Lk>
            <Lk to="service-ruitschade">Ruitschade</Lk>
          </Col>

          <Col title="Bedrijf">
            <Lk to="over">Over ons</Lk>
            <Lk to="over">Team & certificaten</Lk>
            <Lk to="diensten">Alle diensten</Lk>
            <Lk to="tarieven">Tarieven</Lk>
            <Lk to="vacatures">Vacatures</Lk>
            <Lk to="over">Contact & route</Lk>
            <Lk to="boeking">Maak afspraak</Lk>
          </Col>

          <Col title="Contact">
            <div style={{ color: "var(--text)", fontSize: 14, lineHeight: 1.7 }}>
              <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
                <I.Pin size={14} style={{ marginTop: 4, color: "var(--text-muted)" }}/>
                <div>
                  <div style={{ fontWeight: 600 }}>Vijfhuizen</div>
                  <div className="text-muted">Achterasweg 10-A, 2141 DG</div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 14 }}>
                <I.Phone size={14} style={{ color: "var(--text-muted)" }}/>
                <span>023 - 545 1809</span>
              </div>
              <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 6 }}>
                <I.Phone size={14} style={{ color: "var(--text-muted)" }}/>
                <span>06 - 2527 5552</span>
              </div>
              <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 6 }}>
                <I.Mail size={14} style={{ color: "var(--text-muted)" }}/>
                <span>info@garage-dede.nl</span>
              </div>
              <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 6 }}>
                <I.Clock size={14} style={{ color: "var(--text-muted)" }}/>
                <span>Ma–Za 9:00 — 18:00 · Zo gesloten</span>
              </div>
            </div>
          </Col>
        </div>

        <hr className="div" style={{ margin: "48px 0 24px" }}/>
        <div style={{ display: "flex", justifyContent: "space-between", color: "var(--text-muted)", fontSize: 13, flexWrap: "wrap", gap: 16 }}>
          <span>© 2026 {brand} · Achterasweg 10-A, Vijfhuizen</span>
          <span style={{ display: "flex", gap: 18 }}>
            <Lk to="privacy">Privacy</Lk><Lk to="voorwaarden">Algemene voorwaarden</Lk><Lk to="cookies">Cookies</Lk>
          </span>
        </div>
      </div>
    </footer>
  );
}

// Kenteken plate (visual)
function Plate({ value = "X-123-YZ", size = "md" }) {
  const px = size === "lg" ? 28 : size === "sm" ? 14 : 18;
  return <span className="plate" style={{ fontSize: px }}>{value}</span>;
}

// Section heading
function SectionHead({ eyebrow, title, lede, align = "left" }) {
  return (
    <div style={{ textAlign: align, maxWidth: 720, margin: align === "center" ? "0 auto" : 0 }}>
      {eyebrow && <div className="eyebrow" style={{ marginBottom: 12 }}>{eyebrow}</div>}
      <h2 className="headline" style={{ marginBottom: 14 }}>{title}</h2>
      {lede && <p className="subhead" style={{ margin: 0 }}>{lede}</p>}
    </div>
  );
}

// expose
Object.assign(window, { I, Icon, Navbar, Footer, Plate, SectionHead, Logo, LogoLockup });
