// primitives.jsx — shared building blocks for MonVTC screens
// Loaded after React + Babel, before screens-*.jsx and app.jsx.

const { useState, useMemo, useEffect, useRef } = React;

/* ── Icon set ────────────────────────────────────────────── */
function Icon({ name, size = 16, ...rest }) {
  const paths = {
    pin: <><path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13Z"/><circle cx="12" cy="9" r="2.5"/></>,
    dot: <circle cx="12" cy="12" r="4" />,
    arrowRight: <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
    arrowLeft: <><path d="M19 12H5"/><path d="m11 6-6 6 6 6"/></>,
    chevronRight: <path d="m9 6 6 6-6 6"/>,
    chevronDown: <path d="m6 9 6 6 6-6"/>,
    check: <path d="m5 12 4.5 4.5L19 7"/>,
    plus: <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    users: <><circle cx="9" cy="9" r="3.5"/><path d="M2 20a7 7 0 0 1 14 0"/><circle cx="17" cy="7" r="3"/><path d="M22 18a5 5 0 0 0-5-5"/></>,
    cal: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M8 3v4"/><path d="M16 3v4"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    car: <><path d="M5 17h14l-1.5-6.5a2 2 0 0 0-2-1.5h-7a2 2 0 0 0-2 1.5L5 17Z"/><path d="M3 17v3h3v-2"/><path d="M18 18v2h3v-3"/><circle cx="8" cy="17" r="1.5"/><circle cx="16" cy="17" r="1.5"/></>,
    van: <><path d="M3 17V7h12l4 4v6"/><path d="M3 13h16"/><circle cx="8" cy="17" r="1.5"/><circle cx="17" cy="17" r="1.5"/></>,
    star: <path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/>,
    starHalf: <path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17V3z" fill="currentColor"/>,
    shield: <path d="M12 3 4 6v6c0 5 3.4 8.5 8 9 4.6-.5 8-4 8-9V6l-8-3Z"/>,
    bolt: <path d="m13 3-9 12h7l-1 6 9-12h-7z"/>,
    sparkle: <><path d="M12 4v6"/><path d="M12 14v6"/><path d="M4 12h6"/><path d="M14 12h6"/></>,
    phone: <path d="M5 4h3l2 5-2 1c1 2.5 3 4.5 5.5 5.5l1-2 5 2v3a2 2 0 0 1-2 2A14 14 0 0 1 4 7a3 3 0 0 1 1-3Z"/>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></>,
    msg: <path d="M4 5h16v11H8l-4 4z"/>,
    search: <><circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5"/></>,
    menu: <><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></>,
    eye: <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></>,
    bell: <><path d="M6 8a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9Z"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
    cards: <><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 10h18"/></>,
    heart: <path d="M12 20s-7-4.3-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.7-7 10-7 10Z"/>,
    download: <><path d="M12 4v12"/><path d="m7 11 5 5 5-5"/><path d="M5 20h14"/></>,
    edit: <><path d="M4 20h4l11-11-4-4L4 16Z"/><path d="m13 6 4 4"/></>,
    trash: <><path d="M4 7h16"/><path d="M9 7V4h6v3"/><path d="M6 7v13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7"/></>,
    filter: <><path d="M3 5h18"/><path d="M6 12h12"/><path d="M10 19h4"/></>,
    lock: <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
    apple: <path d="M16 1c-1.6.1-3.4 1.1-4.4 2.4-.9 1.2-1.7 2.9-1.4 4.6 1.7.1 3.5-1 4.5-2.2 1-1.3 1.7-3 1.3-4.8ZM20 17c-.5 1-1 2-1.7 3-.9 1.2-1.6 2-2.9 2-1.2 0-1.6-.7-3-.7-1.4 0-1.9.7-3 .7-1.3 0-2.1-.9-3-2C5 18 4 16 4 13.5 4 11 5.6 9 8 9c1.4 0 2.6.9 3 .9.5 0 2-1 3.6-.9 1 0 3.6.5 4.4 3-.1 0-2.7 1.6-2.6 4.4 0 2.7 2.4 3.6 2.6 3.6Z"/>,
    google: <><path d="M21.6 12.2c0-.8-.1-1.5-.2-2.2H12v4.2h5.4a4.6 4.6 0 0 1-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7.5Z" fill="#4285F4" stroke="none"/><path d="M12 22c2.7 0 5-.9 6.6-2.4l-3.2-2.5c-.9.6-2 1-3.4 1a5.9 5.9 0 0 1-5.6-4.1H3.2v2.6A10 10 0 0 0 12 22Z" fill="#34A853" stroke="none"/><path d="M6.4 14a6 6 0 0 1 0-3.8V7.6H3.2a10 10 0 0 0 0 8.8L6.4 14Z" fill="#FBBC04" stroke="none"/><path d="M12 6.1a5.4 5.4 0 0 1 3.8 1.5l2.8-2.8A10 10 0 0 0 12 2 10 10 0 0 0 3.2 7.6L6.4 10A5.9 5.9 0 0 1 12 6.1Z" fill="#EA4335" stroke="none"/></>,
  };
  const p = paths[name] || paths.dot;
  return (
    <svg className="mv-ico" viewBox="0 0 24 24" width={size} height={size} {...rest}>
      {p}
    </svg>
  );
}

/* ── Logo ────────────────────────────────────────────────── */
function Logo({ size = 1, light }) {
  return (
    <span className="mv-logo" style={{ fontSize: 22 * size, color: light ? '#fff' : undefined }}>
      <span className="mv-logo-mark" style={{ width: 26 * size, height: 26 * size, fontSize: 17 * size }}>m</span>
      <span><b>mon</b><i>vtc</i><span className="tld">.fr</span></span>
    </span>
  );
}

/* ── Header / nav ────────────────────────────────────────── */
function SiteHeader({ active = 'home', minimal }) {
  const items = [
    ['Réserver', 'book'],
    ['Services', 'services'],
    ['Tarifs', 'pricing'],
    ['Entreprise', 'biz'],
    ['Aide', 'help'],
  ];
  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 56px', borderBottom: '1px solid var(--line)',
      background: 'rgba(8,16,31,0.6)', backdropFilter: 'blur(12px)',
      position: 'relative', zIndex: 5,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 48 }}>
        <Logo />
        {!minimal && (
          <nav style={{ display: 'flex', gap: 28 }}>
            {items.map(([label, k]) => (
              <a key={k} style={{
                color: active === k ? 'var(--ink)' : 'var(--ink-dim)',
                textDecoration: 'none', fontSize: 14, fontWeight: 500,
                position: 'relative', cursor: 'pointer',
              }}>{label}</a>
            ))}
          </nav>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <a style={{ color: 'var(--ink-dim)', textDecoration: 'none', fontSize: 14, marginRight: 8, cursor: 'pointer' }}>+33 1 86 65 12 40</a>
        <button className="mv-btn mv-btn-ghost mv-btn-sm">Connexion</button>
        <button className="mv-btn mv-btn-primary mv-btn-sm">Réserver</button>
      </div>
    </header>
  );
}

/* ── Footer ─────────────────────────────────────────────── */
function SiteFooter() {
  const cols = [
    ['Société', ['À propos', 'Notre flotte', 'Chauffeurs', 'Carrières', 'Presse']],
    ['Services', ['Aéroport', 'Mise à disposition', 'Événementiel', 'Longue distance', 'Entreprise']],
    ['Aide', ['Centre d\'aide', 'Contact', 'Annulation', 'Facturation', 'Politique tarifaire']],
    ['Légal', ['Mentions légales', 'CGV', 'Confidentialité', 'Cookies']],
  ];
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '56px 56px 32px', color: 'var(--ink-dim)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 48, marginBottom: 48 }}>
        <div>
          <Logo />
          <p style={{ marginTop: 16, fontSize: 13, lineHeight: 1.6, color: 'var(--ink-mute)', maxWidth: 280 }}>
            Service VTC haut de gamme à Paris et en Île-de-France. Disponible 24/7 avec chauffeurs professionnels.
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
            <span className="mv-badge mv-badge-ok">EVTC certifié</span>
            <span className="mv-badge">ISO 9001</span>
          </div>
        </div>
        {cols.map(([title, links]) => (
          <div key={title}>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)', marginBottom: 16, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{title}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {links.map(l => <li key={l} style={{ fontSize: 13 }}><a style={{ color: 'var(--ink-dim)', textDecoration: 'none', cursor: 'pointer' }}>{l}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: '1px solid var(--line)', fontSize: 12, color: 'var(--ink-mute)' }}>
        <span>© 2026 monvtc.fr — SAS au capital de 50 000 €</span>
        <span style={{ display: 'flex', gap: 16 }}>
          <span>FR · €</span>
          <span>Disponible 24/7</span>
        </span>
      </div>
    </footer>
  );
}

/* ── Status pill ─────────────────────────────────────────── */
function Status({ kind, label }) {
  const m = {
    confirmed: ['mv-badge-ok', 'Confirmé'],
    pending: ['mv-badge-warn', 'En attente'],
    enroute: ['mv-badge-info', 'Chauffeur en route'],
    completed: ['', 'Terminé'],
    cancelled: ['mv-badge-bad', 'Annulé'],
  };
  const [cls, txt] = m[kind] || ['', label];
  return <span className={"mv-badge " + cls}>{label || txt}</span>;
}

/* ── Stars row ─────────────────────────────────────────── */
function Stars({ n = 5, size = 12 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 2, color: 'oklch(0.86 0.14 80)' }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <Icon key={i} name="star" size={size} fill={i < n ? 'currentColor' : 'none'} />
      ))}
    </span>
  );
}

/* ── Image placeholder via Unsplash ──────────────────── */
function UImage({ id, w = 800, h = 600, alt = '', style, className }) {
  // Curated photo IDs from Unsplash. We construct the canonical CDN URL.
  return (
    <img
      src={`https://images.unsplash.com/${id}?w=${w}&h=${h}&fit=crop&q=80&auto=format`}
      alt={alt}
      loading="lazy"
      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', ...style }}
      className={className}
    />
  );
}

/* ── Phone frame ─────────────────────────────────── */
function PhoneFrame({ children, style }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      borderRadius: 38, overflow: 'hidden',
      background: 'var(--bg)',
      boxShadow: 'inset 0 0 0 8px #0a1126, inset 0 0 0 9px rgba(255,255,255,0.05)',
      position: 'relative',
      ...style,
    }}>
      <div style={{ position: 'absolute', inset: 8, borderRadius: 30, overflow: 'hidden' }}>
        {/* status bar */}
        <div style={{
          height: 36, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 24px 0 22px', fontSize: 13, fontWeight: 600,
          color: 'var(--ink)', position: 'relative', zIndex: 4,
        }}>
          <span>9:41</span>
          <span style={{ width: 88, height: 24, background: '#000', borderRadius: 14, position: 'absolute', top: 6, left: '50%', transform: 'translateX(-50%)' }}/>
          <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none"><path d="M1 7l2-2M5 5l2-3M9 2l2-1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
            <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5a8 8 0 0112 0M3 7a5 5 0 018 0" stroke="currentColor" strokeWidth="1.2" fill="none"/></svg>
            <svg width="22" height="11" viewBox="0 0 22 11" fill="none"><rect x="0.5" y="0.5" width="18" height="10" rx="2" stroke="currentColor"/><rect x="2" y="2" width="14" height="7" rx="1" fill="currentColor"/><rect x="19.5" y="3.5" width="1.5" height="4" rx="0.5" fill="currentColor"/></svg>
          </span>
        </div>
        <div style={{ position: 'absolute', top: 36, left: 0, right: 0, bottom: 0, overflow: 'hidden' }}>
          {children}
        </div>
        {/* home indicator */}
        <div style={{ position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)', width: 120, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.6)' }}/>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Logo, SiteHeader, SiteFooter, Status, Stars, UImage, PhoneFrame });