// Shared primitives: logo, icons, photo placeholder, etc.

const SITE = {
  local: {
    home: '/',
    gift: 'Gifting.html',
    club: 'Club.html',
    corporate: 'Corporate.html',
    about: 'About.html',
    visit: 'Visit.html',
  },
  live: {
    site: 'https://gooeybuttercookies.com',
    account: 'https://gooeybuttercookies.com/customer_authentication/redirect?locale=en&region_country=US',
    allCookies: 'https://gooeybuttercookies.com/collections/all',
    allFlavors: 'https://gooeybuttercookies.com/collections/all-flavors',
    corporate: 'https://gooeybuttercookies.com/pages/corporate-gifts',
    club: 'https://gooeybuttercookies.com/pages/the-cookie-craving-club',
    about: 'https://gooeybuttercookies.com/pages/about-us',
    visit: 'https://gooeybuttercookies.com/pages/rosies-place-locations',
    contact: 'https://gooeybuttercookies.com/pages/get-in-touch',
    refund: 'https://gooeybuttercookies.com/policies/refund-policy',
    privacy: 'https://gooeybuttercookies.com/policies/privacy-policy',
    terms: 'https://gooeybuttercookies.com/policies/terms-of-service',
  },
  products: {
    orangeCoconut: 'https://gooeybuttercookies.com/products/orange-coconut-gooey-butter-cookie',
    signatureCombo: 'https://gooeybuttercookies.com/products/signature-gooey-butter-combo',
    tasteItAll: 'https://gooeybuttercookies.com/products/classic-gooey-butter-combo-copy',
    classicCombo: 'https://gooeybuttercookies.com/products/assorted-gooey-butter-cookies',
    original: 'https://gooeybuttercookies.com/products/ooey-gooey-butter-cookies',
    chocolate: 'https://gooeybuttercookies.com/products/chocolate-ooey-gooey-butter-cookies',
    peanutButter: 'https://gooeybuttercookies.com/products/peanut-butter-chocolate-chip-gooey-butter-cookies',
  },
  contact: {
    address1: '1111 W Main St',
    address2: 'Carmel, IN 46032',
    phone: '(317) 688-7350',
    email: 'info@gooeybuttercookies.com',
    map: 'https://maps.google.com/?cid=3239678444958695314',
  },
  stores: [
    {
      city: 'Zionsville',
      address1: '10 N First St',
      address2: 'Zionsville, IN 46077',
      details: 'Caf\xe9, bakery case, and breakfast favorites in the village.',
      href: 'https://www.rosiesplace.net/',
    },
    {
      city: 'Noblesville',
      address1: '68 N 9th St',
      address2: 'Noblesville, IN 46060',
      details: 'A downtown stop for coffee, cookies, and all-day comfort food.',
      href: 'https://www.rosiesplace.net/',
    },
    {
      city: 'Carmel',
      address1: '1111 W Main St',
      address2: 'Carmel, IN 46032',
      details: 'The flagship bakery counter and the easiest place to grab a fresh dozen.',
      href: 'https://www.rosiesplace.net/',
    },
  ],
  social: {
    facebook: 'https://www.facebook.com/gooeybuttercookies/',
    instagram: 'https://www.instagram.com/gooeybuttercookies/',
  },
};

const EXTERNAL_LINK_PROPS = { target: '_blank', rel: 'noreferrer' };

const Logo = ({ size = 1, invert = false }) => (
  <img src="assets/logo.webp" alt="Gooey Butter Cookies by Rosie's Place"
    style={{
      height: 64 * size, width: 'auto', display: 'block',
      filter: invert ? 'brightness(0) invert(1)' : 'none',
    }}/>
);

// inline SVG icon set — simple outlined pictos
const Icon = ({ name, size = 20, stroke = 'currentColor', strokeWidth = 1.6, fill = 'none' }) => {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill, stroke, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'user':
      return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>;
    case 'bag':
      return <svg {...common}><path d="M6 7h12l-1.2 12.3a2 2 0 0 1-2 1.7H9.2a2 2 0 0 1-2-1.7L6 7z"/><path d="M9 7a3 3 0 1 1 6 0"/></svg>;
    case 'gift':
      return <svg {...common}><path d="M3 9h18v4H3z"/><path d="M5 13v8h14v-8"/><path d="M12 9v12"/><path d="M12 9c-2 0-4-1-4-3s2-3 3-2 1 3 1 5zM12 9c2 0 4-1 4-3s-2-3-3-2-1 3-1 5z"/></svg>;
    case 'chevron-down':
      return <svg {...common}><path d="M6 9l6 6 6-6"/></svg>;
    case 'chevron-right':
      return <svg {...common}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevron-left':
      return <svg {...common}><path d="M15 6l-6 6 6 6"/></svg>;
    case 'star':
      return <svg {...common} fill={stroke}><path d="M12 2l3 6.9 7.5.7-5.7 5 1.7 7.4L12 18l-6.5 4 1.7-7.4-5.7-5 7.5-.7z"/></svg>;
    case 'check':
      return <svg {...common}><path d="M4 12l5 5L20 6"/></svg>;
    case 'plus':
      return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'x':
      return <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'truck':
      return <svg {...common}><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7.5" cy="17.5" r="1.8"/><circle cx="17.5" cy="17.5" r="1.8"/></svg>;
    case 'calendar':
      return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'cookie':
      return <svg {...common}><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-4-4 4 4 0 0 1-4-4 2 2 0 0 1-2-2z"/><circle cx="9" cy="10" r=".8" fill={stroke}/><circle cx="14" cy="14" r=".8" fill={stroke}/><circle cx="8" cy="15" r=".8" fill={stroke}/><circle cx="15" cy="9" r=".8" fill={stroke}/></svg>;
    case 'sparkle':
      return <svg {...common}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>;
    case 'heart':
      return <svg {...common}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg>;
    case 'building':
      return <svg {...common}><path d="M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/><path d="M16 9h2a2 2 0 0 1 2 2v10"/><path d="M8 7h4M8 11h4M8 15h4M8 19h4"/></svg>;
    case 'leaf':
      return <svg {...common}><path d="M20 4c0 8-6 14-14 14L4 20c0-8 6-14 14-14z"/><path d="M6 18c4-4 8-6 12-8"/></svg>;
    case 'instagram':
      return <svg {...common}><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="1" fill={stroke}/></svg>;
    case 'facebook':
      return <svg {...common} fill={stroke} stroke="none"><path d="M13.5 22v-8h2.7l.4-3.3h-3.1V8.6c0-.95.27-1.6 1.64-1.6H16.7V4.1C16.38 4.05 15.3 4 14.05 4c-2.6 0-4.4 1.6-4.4 4.5v2.2H7v3.3h2.65V22h3.85z"/></svg>;
    case 'tiktok':
      return <svg {...common} fill={stroke} stroke="none"><path d="M16.5 3c.35 1.75 1.3 3.2 2.75 4.05 1 .6 2.1.95 3.25.95v3.35c-2.15.05-4.15-.65-5.85-1.85v6.6c0 3.6-2.9 6.5-6.5 6.5S3.65 19.7 3.65 16.1c0-3.55 2.85-6.45 6.4-6.5v3.35a3.15 3.15 0 1 0 3.15 3.15V3h3.3z"/></svg>;
    case 'youtube':
      return <svg {...common} fill={stroke} stroke="none"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.75-1.77C18.3 5 12 5 12 5s-6.3 0-7.85.43A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.75 1.77C5.7 19 12 19 12 19s6.3 0 7.85-.43a2.5 2.5 0 0 0 1.75-1.77C22 15.2 22 12 22 12s0-3.2-.4-4.8zM10 15V9l5.2 3L10 15z"/></svg>;
    case 'pinterest':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M10.8 8.5c0-1.5 1.2-2.7 2.9-2.7 1.7 0 3 1.2 3 2.9 0 2-1.2 3.7-3 3.7-1 0-1.8-.5-2-1.3l-.8 3.2c-.3 1.2-1 2.4-1.6 3.2M12 21c-.3-.8-.3-1.9 0-2.8l1.3-5.4"/></svg>;
    default: return null;
  }
};

// Powdered-sugar cookie SVG — stylized, avoids photo requirement for accents
const CookieMark = ({ size = 64, tone = 'warm' }) => {
  const base = tone === 'warm' ? '#e8c98a' : '#f0d9a8';
  const crack = '#b68a52';
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true">
      <circle cx="32" cy="32" r="26" fill={base}/>
      <circle cx="32" cy="32" r="26" fill="url(#sugar)"/>
      <path d="M18 22c3 4 4 10 2 14M30 14c-2 6 1 12 5 14M40 40c4-2 8 1 10 6" stroke={crack} strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      <defs>
        <radialGradient id="sugar" cx="0.5" cy="0.4" r="0.7">
          <stop offset="0%" stopColor="#fffdf6" stopOpacity="0.95"/>
          <stop offset="50%" stopColor="#fffdf6" stopOpacity="0.55"/>
          <stop offset="100%" stopColor="#fffdf6" stopOpacity="0"/>
        </radialGradient>
      </defs>
    </svg>
  );
};

// Stars row for reviews
const Stars = ({ n = 5, size = 14, color = '#d89a3e' }) => (
  <span style={{ display: 'inline-flex', gap: 2, color }}>
    {Array.from({ length: n }).map((_, i) => <Icon key={i} name="star" size={size} stroke={color}/>)}
  </span>
);

// Photo placeholder: striped block with monospace label
const Photo = ({ label, aspect = '4/3', tone = 'cream', rounded = 'var(--radius-md)', style, children, src, objectPosition }) => {
  if (src) {
    return (
      <div style={{
        position: 'relative', aspectRatio: aspect, borderRadius: rounded, overflow: 'hidden',
        background: 'var(--brown-100)', ...style,
      }}>
        <img src={src} alt={label || ''} style={{
          width: '100%', height: '100%', objectFit: 'cover', objectPosition: objectPosition || 'center', display: 'block',
        }}/>
        {children}
      </div>
    );
  }
  const tones = {
    cream:  { bg: '#f3e7d8', stripe: 'rgba(107,63,42,.08)' },
    sky:    { bg: '#c2dcec', stripe: 'rgba(31,75,122,.10)' },
    peach:  { bg: '#f2dccd', stripe: 'rgba(139,90,63,.10)' },
    dark:   { bg: '#3a2418', stripe: 'rgba(255,255,255,.06)' },
    butter: { bg: '#f2e4b8', stripe: 'rgba(139,90,63,.10)' },
  };
  const t = tones[tone] || tones.cream;
  return (
    <div style={{
      position: 'relative', aspectRatio: aspect, borderRadius: rounded, overflow: 'hidden',
      background: t.bg,
      ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(45deg, ${t.stripe} 0 2px, transparent 2px 16px)`,
      }}/>
      {children}
      {label && (
        <div style={{
          position: 'absolute', left: 12, bottom: 12,
          fontFamily: 'ui-monospace, Menlo, monospace',
          fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: tone === 'dark' ? '#fbf6ee' : 'var(--brown-700)',
          background: tone === 'dark' ? 'rgba(0,0,0,.4)' : 'rgba(255,255,255,.82)',
          padding: '5px 9px', borderRadius: 6, backdropFilter: 'blur(4px)',
        }}>{label}</div>
      )}
    </div>
  );
};

Object.assign(window, { SITE, EXTERNAL_LINK_PROPS, Logo, Icon, CookieMark, Stars, Photo });