// wf/primitives.jsx — shared sketchy wireframe parts

// Phone shell — lighter wireframe bezel for breadth-mode mockups.
const Phone = ({ children, statusInk = false, height = 720 }) => (
  <div className="phone" style={{ height }}>
    <div className="phone-notch" />
    <div className="phone-bar">
      <span>9:41</span>
      <span style={{ display:'inline-flex', gap:5, alignItems:'center' }}>
        <svg width="14" height="9" viewBox="0 0 14 9" className="ico"><path d="M1 7h2M4 5h2M7 3h2M10 1h2"/></svg>
        <svg width="13" height="9" viewBox="0 0 13 9" className="ico"><path d="M6.5 3a4 4 0 0 1 4 1.5M6.5 5.5a2 2 0 0 1 2 .8M2.5 4.5A6 6 0 0 1 10.5 4.5M6.5 7.5h.001"/></svg>
        <svg width="20" height="10" viewBox="0 0 20 10" className="ico"><rect x="1" y="1.5" width="16" height="7" rx="1.5"/><rect x="2.5" y="3" width="11" height="4" rx="0.5" fill="currentColor" stroke="none" style={{ color:'var(--wf-ink)' }} /></svg>
      </span>
    </div>
    <div className="phone-content" style={{ height: height - 80, overflow: 'hidden' }}>
      {children}
    </div>
    <div className="phone-home" />
  </div>
);

// Burger / language / search row that sits beneath the status bar
const PhoneHeader = ({ right = 'FR / EN' }) => (
  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding: '6px 2px 18px' }}>
    <svg width="22" height="14" viewBox="0 0 22 14" className="ico"><path d="M1 1h20M1 7h20M1 13h12"/></svg>
    <span className="eyebrow" style={{ letterSpacing:'0.18em' }}>{right}</span>
  </div>
);

// Bottom icon strip — the persistent navigation seen in the reference
const BottomNav = ({ active = 0 }) => {
  const ions = ['home','key','pin','wifi','utensils','wave'];
  return (
    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 2px 0', borderTop:'1px solid var(--wf-hairline)', marginTop:'auto' }}>
      {ions.map((k,i) => (
        <div key={i} style={{ opacity: i === active ? 1 : 0.55, display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
          <Icon name={k} size={18} />
        </div>
      ))}
    </div>
  );
};

// Minimal hairline icon set — stand-ins that match the lucide/logo line weight
const Icon = ({ name, size = 22, color }) => {
  const s = size;
  const stroke = color || 'var(--wf-ink)';
  const props = { width:s, height:s, viewBox:'0 0 24 24', fill:'none', stroke, strokeWidth:1.4, strokeLinecap:'round', strokeLinejoin:'round' };
  switch(name){
    case 'home':     return <svg {...props}><path d="M3 11l9-7 9 7M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></svg>;
    case 'key':      return <svg {...props}><circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M16 7l3 3M14 9l3 3"/></svg>;
    case 'pin':      return <svg {...props}><path d="M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'rules':    return <svg {...props}><path d="M7 3h10v18H7z"/><path d="M10 7h4M10 11h4M10 15h4"/><circle cx="7" cy="7" r="0.5"/></svg>;
    case 'wifi':     return <svg {...props}><path d="M2 8.5a14 14 0 0 1 20 0M5 12a10 10 0 0 1 14 0M8.5 15.5a5 5 0 0 1 7 0"/><circle cx="12" cy="19" r="1"/></svg>;
    case 'faq':      return <svg {...props}><path d="M21 12a8 8 0 0 1-8 8H9l-4 3v-5a8 8 0 1 1 16-6z"/><path d="M10 11a2 2 0 1 1 3 1.7c-.8.4-1 .8-1 1.3"/><circle cx="12" cy="17" r="0.4"/></svg>;
    case 'cart':     return <svg {...props}><path d="M2 4h3l2.5 12h11l2.5-9H6"/><circle cx="9" cy="20" r="1.2"/><circle cx="18" cy="20" r="1.2"/></svg>;
    case 'basket':   return <svg {...props}><path d="M3 9h18l-2 11H5L3 9z"/><path d="M8 9l3-6m5 6l-3-6"/></svg>;
    case 'map':      return <svg {...props}><path d="M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z"/><path d="M9 3v15M15 6v15"/></svg>;
    case 'ship':     return <svg {...props}><path d="M3 16l9 4 9-4-1.5-5H4.5z"/><path d="M5 11V7h14v4M9 7V3h6v4"/></svg>;
    case 'bike':     return <svg {...props}><circle cx="6" cy="17" r="3.5"/><circle cx="18" cy="17" r="3.5"/><path d="M6 17l4-8h5l3 8M10 9l3-4h2"/></svg>;
    case 'utensils': return <svg {...props}><path d="M7 3v8a2 2 0 1 1-4 0V3M5 3v18M17 3c-2 1-3 4-3 7s1 3 3 3v8"/></svg>;
    case 'cocktail': return <svg {...props}><path d="M4 5h16l-8 9zM12 14v6M8 20h8"/></svg>;
    case 'leaf':     return <svg {...props}><path d="M4 20c0-8 8-16 16-16 0 8-8 16-16 16z"/><path d="M4 20l9-9"/></svg>;
    case 'wave':     return <svg {...props}><path d="M2 12c2-3 4-3 6 0s4 3 6 0 4-3 6 0"/><path d="M2 17c2-3 4-3 6 0s4 3 6 0 4-3 6 0"/></svg>;
    case 'phone':    return <svg {...props}><path d="M5 4h3l2 5-2 1c1 2.5 3 4.5 5.5 5.5l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case 'alert':    return <svg {...props}><path d="M12 3l10 17H2z"/><path d="M12 10v5"/><circle cx="12" cy="18" r="0.4"/></svg>;
    case 'arrow-r':  return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-l':  return <svg {...props}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>;
    case 'star':     return <svg {...props}><path d="M12 3l2.7 6 6.3.6-4.8 4.2 1.4 6.2L12 17l-5.6 3 1.4-6.2L3 9.6l6.3-.6z"/></svg>;
    case 'plus':     return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'x':        return <svg {...props}><path d="M5 5l14 14M19 5L5 19"/></svg>;
    case 'chev-d':   return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case 'chev-r':   return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case 'search':   return <svg {...props}><circle cx="11" cy="11" r="6.5"/><path d="M21 21l-5-5"/></svg>;
    case 'globe':    return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg>;
    case 'clock':    return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'door':     return <svg {...props}><path d="M5 21V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v17M3 21h18"/><circle cx="15" cy="13" r="0.6"/></svg>;
    default:         return <svg {...props}><circle cx="12" cy="12" r="9"/></svg>;
  }
};

// Placeholder photo box. variant: arch | circle | rect | bleed
const Photo = ({ w=140, h=100, variant='rect', label='Photo', style={} }) => {
  const cls = variant === 'circle' ? 'ph circle' : variant === 'arch' ? 'ph arch' : 'ph';
  return <div className={cls} style={{ width: w, height: h, ...style }}>{label}</div>;
};

// Small annotation marker — handwritten note + curving arrow
const Annot = ({ children, x, y, w=120, align='left', arrow }) => (
  <div className="anno" style={{ left: x, top: y, width: w, textAlign: align }}>
    {arrow === 'tl' && <svg width="36" height="22" viewBox="0 0 36 22" style={{ display:'block', marginBottom: 2 }}><path d="M2 20 C 12 18, 22 12, 32 4" stroke="var(--wf-accent-deep)" strokeWidth="1.1" fill="none" strokeLinecap="round"/><path d="M28 3 L32 4 L31 8" stroke="var(--wf-accent-deep)" strokeWidth="1.1" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
    {children}
    {arrow === 'br' && <svg width="36" height="22" viewBox="0 0 36 22" style={{ display:'block', marginTop: 2 }}><path d="M2 2 C 12 6, 22 12, 32 20" stroke="var(--wf-accent-deep)" strokeWidth="1.1" fill="none" strokeLinecap="round"/><path d="M28 19 L32 20 L31 16" stroke="var(--wf-accent-deep)" strokeWidth="1.1" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
  </div>
);

// Squiggly text underline (sketch vibe)
const Squig = ({ w = 80, color }) => (
  <svg width={w} height="6" viewBox={`0 0 ${w} 6`} style={{ display:'block', marginTop: -2 }}>
    <path d={`M0 3 Q ${w/8} 0, ${w/4} 3 T ${w/2} 3 T ${3*w/4} 3 T ${w} 3`} stroke={color || 'var(--wf-accent-deep)'} strokeWidth="1.2" fill="none" strokeLinecap="round"/>
  </svg>
);

// Faux line of body text — gray bar
const TextLine = ({ w = '100%', h = 7, mt = 4, opacity = 0.5 }) => (
  <div style={{ width: w, height: h, background: 'var(--wf-ink)', opacity, marginTop: mt, borderRadius: 2 }} />
);

// A row of N faux lines of body text, shrinking
const Para = ({ lines = 3, opacity = 0.4 }) => (
  <div>
    {Array.from({length:lines}).map((_,i)=>(
      <TextLine key={i} w={`${100 - i*8 - (i===lines-1 ? 28 : 0)}%`} mt={i===0?2:4} opacity={opacity}/>
    ))}
  </div>
);

// Small "pill" button outline (wireframe)
const PillBtn = ({ children, w, dark = false, style = {} }) => (
  <div style={{
    display:'inline-flex', alignItems:'center', justifyContent:'center',
    height: 28, padding: '0 14px', width: w,
    border: dark ? '1px solid var(--wf-ink)' : '1px solid var(--wf-ink-soft)',
    background: dark ? 'var(--wf-ink)' : 'transparent',
    color: dark ? 'var(--wf-bg)' : 'var(--wf-ink)',
    fontFamily: 'var(--wf-sans)', fontSize: 11, fontWeight: 500, letterSpacing: '0.06em',
    borderRadius: 0, ...style
  }}>{children}</div>
);

// Rectangular accent button (the "Rechercher" style)
const AccentBtn = ({ children, w = 'auto', style = {} }) => (
  <div style={{
    display:'inline-flex', alignItems:'center', justifyContent:'center',
    height: 34, padding: '0 18px', width: w,
    background: 'var(--wf-accent)', color: 'var(--brown-900)',
    fontFamily: 'var(--wf-sans)', fontSize: 11, fontWeight: 500, letterSpacing: '0.08em',
    textTransform: 'uppercase',
    ...style
  }}>{children}</div>
);

// Section eyebrow with squiggle underline
const Eyebrow = ({ children, color }) => (
  <div style={{ display:'inline-block' }}>
    <div className="eyebrow" style={{ color: color || 'var(--wf-ink-soft)' }}>{children}</div>
  </div>
);

// Category metadata used across the wireframes
const CATEGORIES = [
  { id:'welcome',  icon:'home',     fr:'Bienvenue',          en:'Welcome' },
  { id:'rules',    icon:'rules',    fr:'Règles de la maison',en:'House rules' },
  { id:'wifi',     icon:'wifi',     fr:'Wi-Fi',              en:'Wi-Fi' },
  { id:'check',    icon:'key',      fr:'Check-in / out',     en:'Check-in / out' },
  { id:'resto',    icon:'utensils', fr:'Restaurants',        en:'Restaurants' },
  { id:'bars',     icon:'cocktail', fr:'Bars & cocktails',   en:'Bars & cocktails' },
  { id:'spa',      icon:'leaf',     fr:'Spa & bien-être',    en:'Spa & wellness' },
  { id:'beach',    icon:'wave',     fr:'Plages',             en:'Beaches' },
  { id:'transp',   icon:'ship',     fr:'Transports',         en:'Transport' },
  { id:'shops',    icon:'basket',   fr:'Commerces',          en:'Local shops' },
  { id:'help',     icon:'alert',    fr:'Urgences',           en:'Emergencies' },
];

Object.assign(window, { Phone, PhoneHeader, BottomNav, Icon, Photo, Annot, Squig, TextLine, Para, PillBtn, AccentBtn, Eyebrow, CATEGORIES });