// Alba Cars — UI primitives (logo, crest, icons, small components)

// Lion crest SVG — original simplified heraldic mark (NOT a copy of the photographed shield).
// Stylized lion rampant on shield with gold rim.
function AlbaCrest({ size = 32, mono = false }) {
  const red = mono ? 'currentColor' : '#9E1B1B';
  const gold = mono ? 'currentColor' : '#C8A35A';
  const white = mono ? '#fff' : '#fff';
  return (
    <svg width={size} height={size * 1.12} viewBox="0 0 64 72" xmlns="http://www.w3.org/2000/svg" aria-label="Alba Cars crest">
      {/* shield outline gold */}
      <path d="M4 6 L60 6 L60 38 C60 54 48 64 32 70 C16 64 4 54 4 38 Z" fill={gold} />
      <path d="M7 9 L57 9 L57 38 C57 52 46 61 32 66.5 C18 61 7 52 7 38 Z" fill={red} />
      {/* heraldic lion mark — simplified rampant */}
      <g fill={white} transform="translate(15 14)">
        <path d="M14 4 C16 3 18 4 19 6 L21 7 L22 5 L23 8 L26 9 L24 11 L26 14 L23 13 L22 17 L20 14 L19 18 L17 15 L15 19 L14 14 L11 17 L11 13 L8 15 L9 11 L6 11 L9 9 L7 6 L11 7 L12 4 Z M8 22 L11 21 L13 25 L16 22 L18 26 L20 23 L23 26 L26 23 L28 27 L26 30 L22 30 L20 32 L17 31 L14 32 L11 30 L7 30 L5 27 Z" />
        {/* AC monogram */}
        <text x="17" y="42" fontFamily="serif" fontStyle="italic" fontWeight="700" fontSize="9" fill={white} textAnchor="middle">AC</text>
      </g>
    </svg>
  );
}

function AlbaLogo({ theme = 'dark', size = 'md' }) {
  const sizes = { sm: { crest: 26, text: 16, gap: 9 }, md: { crest: 32, text: 19, gap: 11 }, lg: { crest: 44, text: 26, gap: 14 } };
  const s = sizes[size] || sizes.md;
  const textColor = theme === 'dark' ? '#fff' : 'var(--ink)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: s.gap }}>
      <AlbaCrest size={s.crest} />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 0.95 }}>
        <span style={{
          fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: s.text,
          letterSpacing: '0.06em', color: textColor,
        }}>ALBA</span>
        <span style={{
          fontFamily: 'var(--f-display)', fontWeight: 400, fontSize: s.text * 0.55,
          letterSpacing: '0.42em', color: textColor, opacity: 0.85, marginTop: 2,
        }}>CARS</span>
      </div>
    </div>
  );
}

// Tiny icon set — geometric, monoline
function Icon({ name, size = 18, stroke = 1.6 }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'arrow-right': return <svg {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-up-right': return <svg {...p}><path d="M7 17 17 7M9 7h8v8"/></svg>;
    case 'arrow-left': return <svg {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>;
    case 'check': return <svg {...p}><path d="M4 12l5 5L20 6"/></svg>;
    case 'phone': return <svg {...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.36 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.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>;
    case 'whatsapp': return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M19.05 4.9A10 10 0 0 0 2.1 14.8L1 22l7.36-1.93A10 10 0 1 0 19.05 4.9Zm-7.05 15.4a8.36 8.36 0 0 1-4.27-1.17l-.31-.19-4.37 1.15 1.17-4.26-.2-.32a8.4 8.4 0 1 1 7.98 4.79Zm4.6-6.27c-.25-.13-1.48-.73-1.71-.81-.23-.09-.4-.13-.56.13-.16.25-.65.81-.79.97-.15.16-.29.18-.54.06-.25-.13-1.07-.4-2.03-1.26-.75-.67-1.26-1.5-1.4-1.75-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.13-.15.16-.25.25-.42.08-.16.04-.31-.02-.43-.06-.13-.56-1.36-.77-1.86-.2-.49-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.83-.85 2.02 0 1.19.87 2.34.99 2.5.13.16 1.71 2.61 4.14 3.66.58.25 1.03.4 1.38.51.58.18 1.11.16 1.52.1.46-.07 1.48-.6 1.69-1.18.2-.59.2-1.09.15-1.19-.05-.1-.21-.16-.46-.29Z"/></svg>;
    case 'mail': return <svg {...p}><path d="M4 4h16v16H4z M4 4l8 8 8-8"/></svg>;
    case 'pin': return <svg {...p}><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 'search': return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case 'menu': return <svg {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'x': return <svg {...p}><path d="M6 6l12 12M18 6 6 18"/></svg>;
    case 'shield': return <svg {...p}><path d="M12 2 4 5v6c0 5 3 9 8 11 5-2 8-6 8-11V5l-8-3Z"/><path d="m9 12 2 2 4-4"/></svg>;
    case 'gauge': return <svg {...p}><path d="M12 14l4-4"/><circle cx="12" cy="14" r="8"/><path d="M5 14a7 7 0 0 1 14 0"/></svg>;
    case 'cog': return <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.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-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 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 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.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.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.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"/></svg>;
    case 'fuel': return <svg {...p}><path d="M3 22h12V4a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v18Z"/><path d="M15 9h2a2 2 0 0 1 2 2v6a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V8l-3-3"/></svg>;
    case 'door': return <svg {...p}><path d="M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16M3 21h18M14 12v.01"/></svg>;
    case 'transmission': return <svg {...p}><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><path d="M6 8v8M6 8h12v8"/></svg>;
    case 'doc': return <svg {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h5"/></svg>;
    case 'truck': return <svg {...p}><path d="M3 16V6a1 1 0 0 1 1-1h11v11H3Z"/><path d="M15 9h4l3 3v4h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>;
    case 'sparkle': return <svg {...p}><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4"/></svg>;
    case 'play': return <svg {...p}><path d="M6 4l14 8-14 8V4Z"/></svg>;
    case 'globe': return <svg {...p}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2c3 4 3 16 0 20M12 2c-3 4-3 16 0 20"/></svg>;
    case 'instagram': return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>;
    case 'facebook': return <svg {...p}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3Z"/></svg>;
    case 'youtube': return <svg {...p}><rect x="2" y="6" width="20" height="12" rx="3"/><path d="m10 9 5 3-5 3V9Z" fill="currentColor"/></svg>;
    case 'tiktok': return <svg {...p}><path d="M9 12a4 4 0 1 0 4 4V4c0 3 2 5 5 5"/></svg>;
    case 'plus': return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus': return <svg {...p}><path d="M5 12h14"/></svg>;
    case 'heart': return <svg {...p}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78Z"/></svg>;
    case 'share': return <svg {...p}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg>;
    case 'filter': return <svg {...p}><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3Z"/></svg>;
    case 'calendar': return <svg {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>;
    case 'star': return <svg {...p}><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z"/></svg>;
    case 'chevron-down': return <svg {...p}><path d="m6 9 6 6 6-6"/></svg>;
    case 'chevron-right': return <svg {...p}><path d="m9 6 6 6-6 6"/></svg>;
    default: return null;
  }
}

function Pill({ children, live, dot, className = '' }) {
  return (
    <span className={`pill ${live ? 'pill-live' : ''} ${className}`}>
      {(dot || live) && <span className="pill-dot" />}
      {children}
    </span>
  );
}

function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

function Btn({ children, variant = 'primary', icon, onClick, href, type, style }) {
  const cls = `btn btn-${variant}`;
  const inner = <>{children}{icon && <Icon name={icon} size={14} />}</>;
  if (href) return <a href={href} className={cls} onClick={onClick} style={style}>{inner}</a>;
  return <button type={type || 'button'} className={cls} onClick={onClick} style={style}>{inner}</button>;
}

// Section header
function SectionHead({ eyebrow, title, sub, align = 'left', actions }) {
  return (
    <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 32, marginBottom: 56, flexWrap: 'wrap' }}>
      <div style={{ maxWidth: 720, textAlign: align }}>
        {eyebrow && <div style={{ marginBottom: 16 }}><Eyebrow>{eyebrow}</Eyebrow></div>}
        <h2 className="display" style={{ fontSize: 'clamp(34px, 4.6vw, 60px)', letterSpacing: '-0.04em' }}>{title}</h2>
        {sub && <p style={{ marginTop: 18, color: 'var(--text-muted)', maxWidth: 560, fontSize: 16, lineHeight: 1.55 }}>{sub}</p>}
      </div>
      {actions && <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>{actions}</div>}
    </div>
  );
}

// Trust strip — a small row of trust items
function TrustStrip({ inverted = false, dense = false }) {
  const items = [
    { icon: 'shield', label: '150+ Point Inspection', sub: 'On every car' },
    { icon: 'check', label: 'RTA Certified', sub: 'In-house transfer' },
    { icon: 'sparkle', label: '1-Year Free Warranty', sub: 'Included' },
    { icon: 'doc', label: 'Bank Paperwork', sub: 'Handled by us' },
    { icon: 'truck', label: 'UAE-Wide Delivery', sub: 'Door to door' },
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 0,
      borderTop: `1px solid ${inverted ? 'var(--line-dk)' : 'var(--border)'}`,
      borderBottom: `1px solid ${inverted ? 'var(--line-dk)' : 'var(--border)'}`,
      color: inverted ? 'var(--paper-dk)' : 'var(--text)',
    }}>
      {items.map((it, i) => (
        <div key={it.label} style={{
          padding: dense ? '18px 24px' : '28px 28px',
          borderRight: i < items.length - 1 ? `1px solid ${inverted ? 'var(--line-dk)' : 'var(--border)'}` : 'none',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: '50%',
            background: inverted ? 'rgba(255,255,255,0.05)' : 'var(--surface-2)',
            display: 'grid', placeItems: 'center', flexShrink: 0,
            color: 'var(--alba-red)',
          }}>
            <Icon name={it.icon} size={17} stroke={1.7} />
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 500, fontSize: 13.5, letterSpacing: '-0.005em' }}>{it.label}</div>
            <div style={{ fontSize: 12, color: inverted ? 'var(--muted-dk)' : 'var(--text-muted)', marginTop: 2 }}>{it.sub}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// WhatsApp floating button — bottom right
function WhatsAppFab() {
  return (
    <a
      href="https://wa.me/97143772503?text=Hi%20Alba%20Cars%2C%20I%27m%20interested%20in..."
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat on WhatsApp"
      style={{
        position: 'fixed',
        right: 24, bottom: 24,
        width: 56, height: 56,
        borderRadius: '50%',
        background: '#25D366',
        color: '#fff',
        display: 'grid', placeItems: 'center',
        boxShadow: '0 10px 30px -10px rgba(37, 211, 102, 0.6)',
        zIndex: 50,
        transition: 'transform 0.2s ease',
      }}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.08)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
    >
      <Icon name="whatsapp" size={26} />
    </a>
  );
}

Object.assign(window, {
  AlbaCrest, AlbaLogo, Icon, Pill, Eyebrow, Btn, SectionHead, TrustStrip, WhatsAppFab,
});