// Shared primitives: SVG bike silhouettes, icons, thumbnail component
const { useState, useEffect, useMemo, useRef } = React;

// Different bike silhouettes by category
function BikeSilhouette({ variant = "naked", stroke = "currentColor", size = "100%" }) {
  const common = { fill: "none", stroke, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" };
  if (variant === "sport") {
    return (
      <svg viewBox="0 0 240 120" width={size} height={size} preserveAspectRatio="xMidYMid meet">
        {/* rear wheel */}
        <circle cx="48" cy="90" r="22" {...common} />
        <circle cx="48" cy="90" r="6" {...common} />
        {/* front wheel */}
        <circle cx="196" cy="90" r="22" {...common} />
        <circle cx="196" cy="90" r="6" {...common} />
        {/* fairing */}
        <path d="M 155 40 Q 175 32, 210 48 L 220 74 L 196 82" {...common} />
        {/* windscreen */}
        <path d="M 168 38 Q 182 24, 206 34" {...common} />
        {/* tank + rider seat */}
        <path d="M 75 68 L 85 46 L 150 42 L 170 62 L 155 72 L 75 72 Z" {...common} />
        {/* tail */}
        <path d="M 72 66 L 48 66 L 42 76" {...common} />
        {/* exhaust */}
        <path d="M 135 90 L 175 90" {...common} />
        {/* engine block */}
        <path d="M 95 74 L 100 92 L 140 92 L 148 74" {...common} />
        {/* fork */}
        <path d="M 188 56 L 196 90" {...common} />
        {/* clip-ons */}
        <path d="M 175 34 L 195 26" {...common} />
      </svg>
    );
  }
  if (variant === "retro") {
    return (
      <svg viewBox="0 0 240 120" width={size} height={size} preserveAspectRatio="xMidYMid meet">
        <circle cx="48" cy="90" r="22" {...common} />
        <circle cx="48" cy="90" r="6" {...common} />
        <circle cx="196" cy="90" r="22" {...common} />
        <circle cx="196" cy="90" r="6" {...common} />
        {/* round tank */}
        <path d="M 85 55 Q 110 42, 150 45 Q 165 48, 168 62 L 85 68 Z" {...common} />
        {/* flat bench seat */}
        <path d="M 65 62 L 90 58 L 90 68 L 65 70 Z" {...common} />
        {/* round headlight */}
        <circle cx="185" cy="55" r="13" {...common} />
        {/* handlebars high */}
        <path d="M 172 44 L 198 36 L 210 42" {...common} />
        {/* engine */}
        <path d="M 105 68 L 100 90 L 140 90 L 148 68" {...common} />
        {/* fork */}
        <path d="M 185 68 L 196 90" {...common} />
        {/* exhaust */}
        <path d="M 138 88 L 175 88" {...common} />
        {/* swingarm */}
        <path d="M 68 80 L 48 90" {...common} />
      </svg>
    );
  }
  // naked (default)
  return (
    <svg viewBox="0 0 240 120" width={size} height={size} preserveAspectRatio="xMidYMid meet">
      <circle cx="48" cy="90" r="22" {...common} />
      <circle cx="48" cy="90" r="6" {...common} />
      <circle cx="196" cy="90" r="22" {...common} />
      <circle cx="196" cy="90" r="6" {...common} />
      {/* aggressive tank */}
      <path d="M 80 64 L 95 42 L 145 40 L 165 56 L 170 68 L 80 70 Z" {...common} />
      {/* short tail */}
      <path d="M 80 66 L 60 60 L 55 72 L 80 72" {...common} />
      {/* headlight insect */}
      <path d="M 165 44 L 195 38 L 205 48 L 195 58 L 175 60 Z" {...common} />
      {/* handlebars */}
      <path d="M 170 42 L 185 30 L 210 32" {...common} />
      {/* engine */}
      <path d="M 100 70 L 95 92 L 145 92 L 152 70" {...common} />
      {/* exhaust up */}
      <path d="M 138 86 L 170 78 L 182 82" {...common} />
      {/* fork */}
      <path d="M 185 58 L 196 90" {...common} />
      {/* swingarm */}
      <path d="M 72 82 L 48 90" {...common} />
    </svg>
  );
}
window.BikeSilhouette = BikeSilhouette;

function BikeThumb({ bike, label = true, size = "md" }) {
  if (bike.image) {
    return (
      <div className="bike-thumb bike-thumb-has-photo">
        <img src={bike.image} alt={`${bike.brand} ${bike.model}`} loading="lazy" />
        {label && <span className="bike-thumb-label">{bike.brand} · {bike.year}</span>}
        <span className="bike-thumb-cat">{bike.category}</span>
      </div>
    );
  }
  return (
    <div className="bike-thumb">
      <div className="bike-thumb-sil">
        <BikeSilhouette variant={bike.category} stroke="var(--fg-2)" />
      </div>
      {label && <span className="bike-thumb-label">{bike.brand} · {bike.year}</span>}
      <span className="bike-thumb-cat">{bike.category}</span>
    </div>
  );
}
window.BikeThumb = BikeThumb;

// Icons
const Icon = {
  arrow: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  arrowSmall: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M7 17L17 7M7 7h10v10"/></svg>,
  whatsapp: (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M20.52 3.48A11.88 11.88 0 0 0 12.06 0C5.45 0 .07 5.38.07 12a12 12 0 0 0 1.62 6L0 24l6.22-1.63A12 12 0 0 0 12.06 24c6.61 0 11.99-5.38 12-11.99a11.86 11.86 0 0 0-3.54-8.53zM12.06 21.8a9.86 9.86 0 0 1-5.02-1.37l-.36-.21-3.7.97.99-3.6-.24-.37a9.88 9.88 0 1 1 18.3-5.24 9.87 9.87 0 0 1-9.97 9.82zm5.4-7.4c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07a8.1 8.1 0 0 1-2.4-1.48 9 9 0 0 1-1.66-2.07c-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.5-.5-.67-.5h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.47 0 1.45 1.07 2.86 1.22 3.06.15.2 2.1 3.2 5.07 4.48.7.3 1.26.48 1.7.62.71.22 1.36.2 1.87.12.57-.08 1.76-.72 2.01-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z"/></svg>,
  check: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12l5 5L20 7"/></svg>,
  plus: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  search: (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>,
  menu: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
  close: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M18 6L6 18M6 6l12 12"/></svg>
};
window.Icon = Icon;

function Logo({ onClick, inverted = false }) {
  return (
    <div className="logo" onClick={onClick} style={inverted ? {color:"#fff"} : {}}>
      <div className="logo-mark" style={inverted ? {background:"#fff",color:"var(--accent)"} : {}}>A2</div>
      <span>A2 Motor</span>
    </div>
  );
}
window.Logo = Logo;

function Nav({ page, setPage }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [hidden, setHidden] = useState(false);
  const lastY = useRef(0);

  useEffect(() => {
    function onScroll() {
      const y = window.scrollY;
      if (y < 80) { setHidden(false); }
      else if (y > lastY.current + 8) { setHidden(true); setMenuOpen(false); }
      else if (y < lastY.current - 8) { setHidden(false); }
      lastY.current = y;
    }
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  function go(p) { setPage(p); setMenuOpen(false); }

  return (
    <nav className={"nav" + (hidden ? " nav-hidden" : "")}>
      <div className="nav-inner">
        <Logo onClick={() => go("home")} />
        <div className="nav-links">
          <a className={page === "home" ? "on" : ""} onClick={() => go("home")}>Home</a>
          <a className={page === "about" ? "on" : ""} onClick={() => go("about")}>Over ons</a>
          <a className={page === "how" ? "on" : ""} onClick={() => go("how")}>Zo werkt het</a>
          <a className={page === "prices" ? "on" : ""} onClick={() => go("prices")}>Prijzen</a>
          <a className={page === "contact" ? "on" : ""} onClick={() => go("contact")}>Contact</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-sm btn-wa nav-wa-btn" href="https://wa.me/31646247313?text=Hallo%2C%20ik%20wil%20graag%20weten%20of%20mijn%20motor%20A2-geschikt%20is.%20Mijn%20kenteken%20is%3A%20" target="_blank" rel="noreferrer">
            <Icon.whatsapp /> App ons
          </a>
          <a className="btn btn-sm btn-primary nav-offerte-btn" href="https://wa.me/31646247313?text=Hallo%2C%20ik%20wil%20graag%20weten%20of%20mijn%20motor%20A2-geschikt%20is.%20Mijn%20kenteken%20is%3A%20" target="_blank" rel="noreferrer">
            Offerte aanvragen
          </a>
        </div>
        <button className="btn-hamburger" onClick={() => setMenuOpen(o => !o)} aria-label="Menu openen">
          {menuOpen ? <Icon.close /> : <Icon.menu />}
        </button>
      </div>
      {menuOpen && (
        <div className="nav-mobile">
          <a className={page === "home" ? "on" : ""} onClick={() => go("home")}>Home</a>
          <a className={page === "about" ? "on" : ""} onClick={() => go("about")}>Over ons</a>
          <a className={page === "how" ? "on" : ""} onClick={() => go("how")}>Zo werkt het</a>
          <a className={page === "prices" ? "on" : ""} onClick={() => go("prices")}>Prijzen</a>
          <a className={page === "contact" ? "on" : ""} onClick={() => go("contact")}>Contact</a>
          <a className="btn btn-accent btn-lg nav-mobile-cta" href="https://wa.me/31646247313?text=Hallo%2C%20ik%20wil%20graag%20weten%20of%20mijn%20motor%20A2-geschikt%20is.%20Mijn%20kenteken%20is%3A%20" target="_blank" rel="noreferrer">
            <Icon.whatsapp /> App ons op WhatsApp
          </a>
        </div>
      )}
    </nav>
  );
}
window.Nav = Nav;

function Ticker() {
  const items = [
    "A2-terugvoering vanaf €395", "RDW-gekeurd", "Gevestigd in Voorthuizen",
    "Ook jouw eigen motor terugvoeren", "Binnen 5 werkdagen klaar", "Test-ride altijd mogelijk"
  ];
  const row = (
    <div className="track">
      {[...items, ...items].map((t, i) => (
        <span key={i} style={{display: "inline-flex", alignItems: "center", gap: 16}}>
          {t} <span className="dot">●</span>
        </span>
      ))}
    </div>
  );
  return <div className="ticker">{row}</div>;
}
window.Ticker = Ticker;

function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo inverted={true} />
            <p>Jouw droommotor op A2-rijbewijs. Wij voeren motoren terug naar 35 kW — compleet met RDW-keuring en kentekenwijziging. Actief in heel Nederland.</p>
          </div>
          <div>
            <h5>Menu</h5>
            <ul>
              <li><a onClick={() => setPage("home")}>Home</a></li>
              <li><a onClick={() => setPage("about")}>Over ons</a></li>
              <li><a onClick={() => setPage("how")}>Zo werkt het</a></li>
              <li><a onClick={() => setPage("prices")}>Prijzen</a></li>
              <li><a onClick={() => setPage("contact")}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Diensten</h5>
            <ul>
              <li><a>A2-terugvoering</a></li>
              <li><a>TÜV-kit plaatsing</a></li>
              <li><a>RDW-omkeuring</a></li>
              <li><a>Terug naar vol vermogen</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:info@a2-motor.nl">info@a2-motor.nl</a></li>
              <li><a href="tel:0646247313">06-46247313</a></li>
              <li><a>Hunnenweg 21, Voorthuizen</a></li>
              <li><a>Ma – Za: 10:00 – 18:00</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 A2 Motor — La Mar Motoren — KvK 80584683</span>
          <a href="https://lamarmotoren.nl/over-ons/voorwaarden/" target="_blank" rel="noreferrer" style={{color:"rgba(255,255,255,.3)"}}>Algemene voorwaarden</a>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;