// Shared small UI — nav, footer, image, icons, placeholder strip
const IMG = {
  // hand-picked warm/earthy/natural unsplash images
  hero: 'https://images.unsplash.com/photo-1502741338009-cac2772e18bc?w=1600&q=80',
  hempFarm: 'assets/hero-desktop.png',
  hempFarmMobile: 'assets/hero-mobile.png',
  hempFarm2: 'https://images.unsplash.com/photo-1536819114556-1e10f967fb61?w=1600&q=80',
  farmhands: 'https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1200&q=80',
  linen: 'https://images.unsplash.com/photo-1522444195799-478538b28823?w=1200&q=80',
  market: 'https://images.unsplash.com/photo-1488459716781-31db52582fe9?w=1200&q=80',
  tea: 'https://images.unsplash.com/photo-1563911892437-1feda0179e1b?w=1200&q=80',
  herbs: 'https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?w=1200&q=80',
  dispensary1: 'https://images.unsplash.com/photo-1545048702-79362596cdc9?w=1200&q=80',
  dispensary2: 'https://images.unsplash.com/photo-1603909223429-69bb7101f420?w=1200&q=80',
  dispensary3: 'https://images.unsplash.com/photo-1542281286-9e0a16bb7366?w=1200&q=80',
  dispensary4: 'https://images.unsplash.com/photo-1598662779094-110c2bad80b5?w=1200&q=80',
  portrait: 'https://images.unsplash.com/photo-1506863530036-1efeddceb993?w=900&q=80',
  evening: 'https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=1200&q=80',
  home: 'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=1200&q=80',
  candle: 'https://images.unsplash.com/photo-1602874801006-1d5af4a55d9c?w=900&q=80',
  bedding: 'https://images.unsplash.com/photo-1540518614846-7eded433c457?w=1200&q=80',
  couple: 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=80',
  leaves: 'https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=1200&q=80',
  product: 'https://images.unsplash.com/photo-1603726574410-3ed6ef37bdf5?w=1200&q=80',
};

function WarmImg({ src, alt, style, placeholder = 'photo', aspect }) {
  const [ok, setOk] = React.useState(true);
  const boxStyle = {
    width: '100%', height: '100%',
    aspectRatio: aspect, overflow: 'hidden',
    position: 'relative', ...style,
  };
  return (
    <div style={boxStyle}>
      {ok ? (
        <img
          src={src} alt={alt || ''}
          className="warm-img"
          onError={() => setOk(false)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      ) : (
        <div className="img-ph" style={{ width: '100%', height: '100%' }}>
          {placeholder}
        </div>
      )}
    </div>
  );
}

// Tiny inline icons (stroke style)
const Icon = {
  search: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.6"/><path d="m20 20-3.5-3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
  ),
  pin: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13Z" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="9" r="2.5" stroke="currentColor" strokeWidth="1.6"/></svg>
  ),
  star: ({ size = 14, filled = true }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? 'currentColor' : 'none'}><path d="m12 3 2.7 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17.8 6.5 20.2l1.1-6.2L3 9.6l6.3-.9Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>
  ),
  clock: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
  ),
  arrow: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  leaf: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><path d="M12 2 C12 8, 8 11, 3 12 C8 13, 12 16, 12 22 C12 16, 16 13, 21 12 C16 11, 12 8, 12 2 Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/></svg>
  ),
  menu: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><path d="M3 7h18M3 12h18M3 17h18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
  ),
  check: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><path d="m5 12 5 5L20 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  bookmark: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><path d="M6 3h12v18l-6-4-6 4V3Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>
  ),
  share: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"><circle cx="18" cy="5" r="3" stroke="currentColor" strokeWidth="1.6"/><circle cx="6" cy="12" r="3" stroke="currentColor" strokeWidth="1.6"/><circle cx="18" cy="19" r="3" stroke="currentColor" strokeWidth="1.6"/><path d="m8.5 10.5 7-4M8.5 13.5l7 4" stroke="currentColor" strokeWidth="1.6"/></svg>
  ),
};

function Nav({ route, go }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      backdropFilter: 'blur(14px) saturate(160%)',
      WebkitBackdropFilter: 'blur(14px) saturate(160%)',
      background: 'rgba(245, 242, 237, 0.78)',
      borderBottom: '1px solid var(--hairline)',
    }}>
      <div style={{
        maxWidth: 'var(--maxw)', margin: '0 auto',
        padding: '18px var(--gutter)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="#/" onClick={(e) => { e.preventDefault(); go('/'); }} style={{ textDecoration: 'none' }}>
          <Logo compact size={1} />
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 32 }} className="nav-links">
          {[
            ['Directory', '/directory'],
            ['Stories', '/stories'],
            ['Goods', '/goods'],
            ['About', '/about'],
          ].map(([label, path]) => (
            <a key={path} href={`#${path}`}
               onClick={(e) => { e.preventDefault(); go(path === '/directory' ? '/directory' : '/'); }}
               style={{
                 fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink)',
                 textDecoration: 'none', fontWeight: 500,
                 opacity: (route === '/directory' && path === '/directory') ? 1 : 0.78,
               }}>
              {label}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <button className="btn btn-ghost" onClick={() => go('/directory')} style={{ padding: '10px 16px', fontSize: 13 }}>
            <Icon.search size={14}/> Find a shop
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--off-white)', marginTop: 120, position: 'relative' }}>
      <div className="linen" style={{ position: 'absolute', inset: 0 }}></div>
      <div style={{
        maxWidth: 'var(--maxw)', margin: '0 auto',
        padding: '80px var(--gutter) 40px',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48,
        position: 'relative',
      }}>
        <div>
          <div style={{ marginBottom: 20 }}>
            <Logo dark />
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.65, opacity: 0.7, maxWidth: 320 }}>
            A slow-living field guide to cannabis — where to shop, what to bring home, and how to live with it. Warm recommendations from friends who care.
          </p>
        </div>
        {[
          ['Directory', ['By state', 'By city', 'Map view', 'Submit a shop']],
          ['Stories', ['Hemp at home', 'Culture essays', 'Farmers market', 'Interviews']],
          ['The house', ['About', 'Our writers', 'Contact', 'Newsletter']],
        ].map(([title, items]) => (
          <div key={title}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginBottom: 16 }}>{title}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {items.map(i => (
                <li key={i}><a href="#" style={{ color: 'inherit', textDecoration: 'none', fontSize: 14, opacity: 0.7 }}>{i}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{
        maxWidth: 'var(--maxw)', margin: '0 auto',
        padding: '24px var(--gutter)',
        borderTop: '1px solid rgba(245,242,237,0.12)',
        display: 'flex', justifyContent: 'space-between', fontSize: 12, opacity: 0.6,
        position: 'relative',
      }}>
        <span>© 2026 The Sticky Stem · Est. 2019</span>
        <span>21+ only · For adult use where legal</span>
      </div>
    </footer>
  );
}

Object.assign(window, { IMG, WarmImg, Icon, Nav, Footer });