// Icons.jsx — Logo + thin Lucide-style icon set
const LOGO_PATHS = {
  full: 'assets/logo-deux-soleil-transparent.png',
  mark: 'assets/logo-deux-soleil-mark.png',
};

function Logo({ height = 56, style = {}, alt = 'Deux Soleil — la tua abbronzatura · Solarium' }) {
  return <img src={LOGO_PATHS.full} alt={alt} style={{ height, width: 'auto', display: 'block', ...style }} />;
}
function LogoMark({ size = 36, style = {}, alt = 'Deux Soleil' }) {
  return <img src={LOGO_PATHS.mark} alt={alt} style={{ height: size, width: 'auto', display: 'block', ...style }} />;
}

const sw = { strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none' };

const Icon = {
  Phone: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><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.127.96.361 1.903.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.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  Pin: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  Clock: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
  Mail: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="2,7 12,13 22,7"/></svg>,
  Check: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><polyline points="20 6 9 17 4 12"/></svg>,
  Arrow: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  Star: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} fill={p.fill||'none'} {...sw}><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"/></svg>,
  Menu: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>,
  X: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  Quote: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><path d="M3 21c3 0 7-1 7-8V5c0-1-1-2-2-2H4c-1 0-2 1-2 2v6c0 1 1 2 2 2h3"/><path d="M15 21c3 0 7-1 7-8V5c0-1-1-2-2-2h-4c-1 0-2 1-2 2v6c0 1 1 2 2 2h3"/></svg>,
  Instagram: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>,
  Facebook: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>,

  // ── Service glyphs — minimal, brand-palette line icons ──
  // Esafacciale → volto al sole (viso, décolleté, mani)
  Face: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}>
    <circle cx="12" cy="13" r="6"/>
    <path d="M9.6 14.4c.7.9 4.1.9 4.8 0"/>
    <circle cx="9.9" cy="11.8" r="0.55" fill={p.color||'currentColor'} stroke="none"/>
    <circle cx="14.1" cy="11.8" r="0.55" fill={p.color||'currentColor'} stroke="none"/>
    <line x1="12" y1="1.4" x2="12" y2="3.3"/>
    <line x1="4.9" y1="4.1" x2="6.3" y2="5.5"/>
    <line x1="19.1" y1="4.1" x2="17.7" y2="5.5"/>
    <line x1="2.2" y1="11" x2="4.1" y2="11"/>
    <line x1="21.8" y1="11" x2="19.9" y2="11"/>
  </svg>,
  // Doccia abbronzante → cabina verticale con porta aperta e figura in piedi
  Shower: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}>
    <ellipse cx="13.5" cy="3.6" rx="6" ry="1.6"/>
    <path d="M7.5 3.6v16.6"/>
    <path d="M19.5 3.6v16.6"/>
    <path d="M7.5 20.2a6 1.6 0 0 0 12 0"/>
    <path d="M7.5 3.8 3.6 5.4v16.2l3.9-1.4"/>
    <circle cx="13.5" cy="7.6" r="1.1"/>
    <path d="M13.5 8.9v5.6"/>
    <path d="M13.5 14.5l-1.3 4.6"/>
    <path d="M13.5 14.5l1.3 4.6"/>
    <path d="M13.5 10.2l-2.6 3"/>
    <path d="M13.5 10.2l2.6 3"/>
    <path d="M9.6 6.2v11"/>
    <path d="M17.4 6.2v11"/>
  </svg>,
  // Lettino abbronzante → clamshell orizzontale con tubi lampada
  Bed: (p) => <svg width={p.size||18} height={p.size||18} viewBox="0 0 24 24" stroke={p.color||'currentColor'} {...sw}>
    <path d="M3.5 9.6a8.5 5 0 0 1 17 0"/>
    <line x1="3.5" y1="9.6" x2="20.5" y2="9.6"/>
    <path d="M3.5 14.4a8.5 5 0 0 0 17 0"/>
    <line x1="3.5" y1="14.4" x2="20.5" y2="14.4"/>
    <line x1="8" y1="11" x2="8" y2="13"/>
    <line x1="12" y1="11" x2="12" y2="13"/>
    <line x1="16" y1="11" x2="16" y2="13"/>
  </svg>,
};

Object.assign(window, { Logo, LogoMark, Icon });