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

/* ============== ICONS ============== */
function Icon({ name, size = 20, stroke = 1.5, style, color }) {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: color || "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round", style,
  };
  switch (name) {
    case "file-text": return (<svg {...props}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>);
    case "shield-check": return (<svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>);
    case "clock": return (<svg {...props}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>);
    case "lock": return (<svg {...props}><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>);
    case "sparkles": return (<svg {...props}><path d="m12 3-1.9 5.8L4 10.7l5.8 1.9L12 18l1.9-5.8L20 10.7l-5.8-1.9z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>);
    case "user": return (<svg {...props}><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>);
    case "users": return (<svg {...props}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>);
    case "arrow-right": return (<svg {...props}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>);
    case "arrow-up-right": return (<svg {...props}><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>);
    case "check": return (<svg {...props}><polyline points="20 6 9 17 4 12"/></svg>);
    case "check-circle": return (<svg {...props}><circle cx="12" cy="12" r="10"/><polyline points="16 10 11 15 8 12"/></svg>);
    case "menu": return (<svg {...props}><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>);
    case "x": return (<svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>);
    case "feather": return (<svg {...props}><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"/><line x1="16" y1="8" x2="2" y2="22"/><line x1="17.5" y1="15" x2="9" y2="15"/></svg>);
    case "mail": return (<svg {...props}><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 6 12 13 2 6"/></svg>);
    case "phone": return (<svg {...props}><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"/></svg>);
    case "map-pin": return (<svg {...props}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>);
    case "quote": return (<svg {...props}><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2.5c0 4.5-2.5 6-3.5 6"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2.5c0 4.5-2.5 6-3.5 6"/></svg>);
    case "chevron-right": return (<svg {...props}><polyline points="9 18 15 12 9 6"/></svg>);
    case "fingerprint": return (<svg {...props}><path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/><path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M8.65 22c.21-.66.45-1.32.57-2"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M2 16h.01"/><path d="M21.8 16c.2-2 .131-5.354 0-6"/><path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"/></svg>);
    case "stethoscope": return (<svg {...props}><path d="M11 2v2"/><path d="M5 2v2"/><path d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1"/><path d="M8 15a6 6 0 0 0 12 0v-3"/><circle cx="20" cy="10" r="2"/></svg>);
    case "scale": return (<svg {...props}><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="M7 21h10"/><path d="M12 3v18"/><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></svg>);
    case "linkedin": return (<svg {...props}><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>);
    default: return null;
  }
}

/* ============== LOGO ============== */
function Logo({ size = 22, color = "#0d0d0d" }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <span style={{ width: size * 0.7, height: size * 0.7, borderRadius: 9999, background: "#0d0d0d", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
        <span style={{ width: size * 0.28, height: size * 0.28, borderRadius: 9999, background: "#18E299" }}/>
      </span>
      <span style={{ fontFamily: "Inter, system-ui, sans-serif", fontWeight: 600, fontSize: size * 0.78, letterSpacing: "0.6px", color }}>Medessence</span>
    </span>
  );
}

/* ============== BUTTON ============== */
function Button({ variant = "primary", children, icon, iconLeft, onClick, type = "button", href, fullWidth, size = "md", disabled = false }) {
  const padding = size === "lg" ? "14px 28px" : size === "sm" ? "8px 16px" : "11px 22px";
  const fs = size === "lg" ? 16 : size === "sm" ? 13 : 15;
  const styles = {
    primary: { background: "#0d0d0d", color: "#fff", padding, boxShadow: "rgba(0,0,0,0.06) 0px 1px 2px", border: "1px solid transparent" },
    secondary: { background: "#fff", color: "#0d0d0d", padding, border: "1px solid rgba(0,0,0,0.10)" },
    brand: { background: "#18E299", color: "#0d0d0d", padding, border: "1px solid transparent" },
    ghost: { background: "transparent", color: "#0d0d0d", padding: "6px 10px", borderRadius: "8px", border: "1px solid transparent" },
  };
  const base = {
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
    fontFamily: "Inter, system-ui, sans-serif", fontSize: fs, fontWeight: 500, lineHeight: 1,
    borderRadius: variant === "ghost" ? 8 : 9999,
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.55 : 1,
    whiteSpace: "nowrap",
    transition: "all 180ms cubic-bezier(.16,1,.3,1)", textDecoration: "none",
    width: fullWidth ? "100%" : "auto",
  };
  const Tag = href ? "a" : "button";
  const extraProps = href ? { href } : { type, disabled };
  return (
    <Tag {...extraProps} onClick={disabled ? undefined : onClick} style={{ ...base, ...styles[variant] }}
      onMouseEnter={(e) => { if (disabled) return; if (variant === "primary" || variant === "brand") e.currentTarget.style.opacity = 0.9; if (variant === "secondary") e.currentTarget.style.borderColor = "rgba(0,0,0,0.18)"; if (variant === "ghost") e.currentTarget.style.background = "#f5f5f5"; }}
      onMouseLeave={(e) => { if (disabled) return; e.currentTarget.style.opacity = 1; if (variant === "secondary") e.currentTarget.style.borderColor = "rgba(0,0,0,0.10)"; if (variant === "ghost") e.currentTarget.style.background = "transparent"; }}>
      {iconLeft && <Icon name={iconLeft} size={fs === 16 ? 18 : 16} />}
      {children}
      {icon && <Icon name={icon} size={fs === 16 ? 18 : 16} />}
    </Tag>
  );
}

/* ============== BADGE ============== */
function Badge({ children, tone = "brand", icon }) {
  const tones = {
    brand: { bg: "#d4fae8", fg: "#0fa76e" },
    warn:  { bg: "#fff4e0", fg: "#c37d0d" },
    info:  { bg: "#e6efff", fg: "#3772cf" },
    error: { bg: "#fde8e8", fg: "#d45656" },
    neutral: { bg: "#f5f5f5", fg: "#333" },
  };
  const t = tones[tone];
  return (
    <span className="badge-pill" style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      fontFamily: "Geist Mono, ui-monospace, monospace",
      fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.6px",
      padding: "5px 12px", borderRadius: 9999,
      background: t.bg, color: t.fg, border: "1px solid rgba(0,0,0,0.04)",
    }}>{icon && <Icon name={icon} size={12} stroke={2} />}{children}</span>
  );
}

/* ============== CARD ============== */
function Card({ children, featured = false, style, hoverable = true, onClick, className }) {
  return (
    <div onClick={onClick} className={className} style={{
      background: "#fff",
      border: "1px solid rgba(0,0,0,0.05)",
      borderRadius: featured ? 24 : 16,
      padding: featured ? 32 : 24,
      boxShadow: "rgba(0,0,0,0.03) 0px 2px 4px",
      transition: "border-color 180ms cubic-bezier(.16,1,.3,1)",
      cursor: onClick ? "pointer" : "default",
      ...style,
    }}
    onMouseEnter={(e) => { if (hoverable) e.currentTarget.style.borderColor = "rgba(0,0,0,0.10)"; }}
    onMouseLeave={(e) => { if (hoverable) e.currentTarget.style.borderColor = "rgba(0,0,0,0.05)"; }}>
      {children}
    </div>
  );
}

/* ============== NAV ============== */
function Nav({ current = "home" }) {
  const [open, setOpen] = useState(false);
  const items = [
    { label: "Home", href: "index.html", key: "home" },
    { label: "Over ons", href: "over-ons.html", key: "over-ons" },
    { label: "Contact", href: "contact.html", key: "contact" },
  ];
  const linkStyle = (active) => ({
    fontFamily: "Inter, system-ui, sans-serif",
    fontSize: 14, fontWeight: 500,
    color: active ? "#0d0d0d" : "#525252",
    textDecoration: "none", cursor: "pointer",
    padding: "6px 12px", borderRadius: 9999,
    background: active ? "#f5f5f5" : "transparent",
    transition: "color 180ms cubic-bezier(.16,1,.3,1), background 180ms",
  });
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(255,255,255,0.85)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      borderBottom: "1px solid rgba(0,0,0,0.05)",
    }}>
      <div className="nav-inner" style={{ maxWidth: 1200, margin: "0 auto", padding: "14px 24px", display: "flex", alignItems: "center", gap: 24 }}>
        <a href="index.html" style={{ textDecoration: "none" }}><Logo /></a>
        <nav className="nav-desktop" style={{ display: "flex", gap: 4, marginLeft: 16 }}>
          {items.map(it => (
            <a key={it.key} href={it.href} style={linkStyle(current === it.key)}
              onMouseEnter={(e) => { if (current !== it.key) e.currentTarget.style.color = "#0d0d0d"; }}
              onMouseLeave={(e) => { if (current !== it.key) e.currentTarget.style.color = "#525252"; }}>
              {it.label}
            </a>
          ))}
        </nav>
        <div style={{ flex: 1 }}/>
        <div className="nav-cta" style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <Button variant="primary" href="contact.html">Vraag demo aan</Button>
        </div>
        <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menu" style={{
          display: "none", background: "transparent", border: "1px solid rgba(0,0,0,0.10)",
          borderRadius: 9999, width: 40, height: 40, alignItems: "center", justifyContent: "center", cursor: "pointer",
        }}>
          <Icon name={open ? "x" : "menu"} size={18} />
        </button>
      </div>
      {open && (
        <div style={{ borderTop: "1px solid rgba(0,0,0,0.05)", padding: "16px 24px 20px", background: "#fff" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {items.map(it => (
              <a key={it.key} href={it.href} style={{
                fontFamily: "Inter, system-ui, sans-serif", fontSize: 16, fontWeight: 500,
                color: current === it.key ? "#0d0d0d" : "#525252",
                padding: "12px 14px", borderRadius: 12, textDecoration: "none",
                background: current === it.key ? "#f5f5f5" : "transparent",
              }}>{it.label}</a>
            ))}
            <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
              <Button variant="primary" href="contact.html" fullWidth>Vraag demo aan</Button>
            </div>
          </div>
        </div>
      )}
      <style>{`
        @media (max-width: 860px) {
          .nav-desktop, .nav-cta { display: none !important; }
          .nav-burger { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
}

/* ============== FOOTER ============== */
function Footer() {
  const cols = [
    { title: "Product", links: [["Werkwijze", "index.html#werkwijze"], ["Tarieven", "contact.html"], ["FAQ", "contact.html#faq"]] },
    { title: "Bedrijf", links: [["Over ons", "over-ons.html"], ["Contact", "contact.html"]] },
    { title: "Juridisch", links: [["Privacy", "#"], ["Verwerkersovereenkomst", "#"], ["Algemene voorwaarden", "#"], ["AVG", "#"]] },
  ];
  return (
    <footer style={{ borderTop: "1px solid rgba(0,0,0,0.05)", padding: "64px 24px 32px", background: "#fff" }}>
      <div className="footer-grid" style={{ maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48 }}>
        <div>
          <Logo size={20} />
          <p style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 14, color: "#666", lineHeight: 1.5, marginTop: 16, maxWidth: 280 }}>
            Medische dossiersamenvattingen voor medisch adviseurs. Privacy eerst, snel geleverd.
          </p>
        </div>
        {cols.map(c => (
          <div key={c.title}>
            <div style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 12, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.65px", color: "#888", marginBottom: 16 }}>{c.title}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {c.links.map(([l, href]) => (
                <li key={l}><a href={href} style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 14, color: "#0d0d0d", textDecoration: "none", cursor: "pointer" }}
                  onMouseEnter={(e)=>e.currentTarget.style.color="#0fa76e"}
                  onMouseLeave={(e)=>e.currentTarget.style.color="#0d0d0d"}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1200, margin: "48px auto 0", paddingTop: 24, borderTop: "1px solid rgba(0,0,0,0.05)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
        <span style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 13, color: "#888" }}>© 2026 Medessence</span>
        <span style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.6px", color: "#888" }}>Privacy eerst · AVG-conform</span>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 520px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

/* ============== SECTION HEADER (eyebrow + title + sub) ============== */
function SectionHeader({ eyebrow, title, sub, align = "center", maxWidth = 720 }) {
  const ta = align === "center" ? "center" : "left";
  const margin = align === "center" ? `0 auto` : 0;
  return (
    <div style={{ maxWidth, margin, textAlign: ta }}>
      {eyebrow && (
        <div style={{ display: "inline-flex", marginBottom: 20 }}>
          <Badge tone="brand">{eyebrow}</Badge>
        </div>
      )}
      <h2 style={{
        fontFamily: "Inter, system-ui, sans-serif",
        fontSize: "clamp(32px, 4.4vw, 44px)",
        fontWeight: 600, lineHeight: 1.10, letterSpacing: "-0.8px",
        color: "#0d0d0d", margin: 0, textWrap: "balance",
      }}>{title}</h2>
      {sub && (
        <p style={{
          fontFamily: "Inter, system-ui, sans-serif",
          fontSize: 17, fontWeight: 400, lineHeight: 1.55, color: "#525252",
          margin: "16px auto 0", maxWidth: 620, textWrap: "pretty",
        }}>{sub}</p>
      )}
    </div>
  );
}

Object.assign(window, { Icon, Logo, Button, Badge, Card, Nav, Footer, SectionHeader });