// Roast My Snack — shared atoms (icons, mascot helpers)

const Icon = {
  flame: (s = 18, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M12 3c1 4 5 5 5 9a5 5 0 11-10 0c0-1.5.6-2.5 1.4-3.4C9.5 7.4 10 5.6 9.5 4c2 .5 2.2 2 2.5-1z" fill={c} stroke={c} strokeWidth="1.5" strokeLinejoin="round" />
    </svg>,

  bolt: (s = 16, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" /></svg>,

  camera: (s = 22, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round">
      <path d="M3 8h3l2-3h8l2 3h3v12H3z" /><circle cx="12" cy="13" r="4" />
    </svg>,

  tooth: (s = 16, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinejoin="round">
      <path d="M7 3c-3 0-4 2-4 5 0 3 1 4 2 7s1 6 3 6c1.5 0 1.5-3 4-3s2.5 3 4 3c2 0 2-3 3-6s2-4 2-7c0-3-1-5-4-5-2 0-3 1-5 1S9 3 7 3z" />
    </svg>,

  sparkle: (s = 16, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6zM19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z" /></svg>,

  check: (s = 16, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 6" /></svg>,

  arrow: (s = 18, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>,

  arrowDown: (s = 18, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M6 13l6 6 6-6" /></svg>,

  play: (s = 22, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M7 4l13 8L7 20z" /></svg>,

  plus: (s = 14, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2.6" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>,

  minus: (s = 14, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2.6" strokeLinecap="round"><path d="M5 12h14" /></svg>,

  share: (s = 18, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round">
      <path d="M12 4v12M8 8l4-4 4 4M5 14v5h14v-5" />
    </svg>,

  apple: (s = 18, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill={c}>
      <path d="M17 13c0-3 2-4 2-4s-1-2-3-2c-2 0-3 1-4 1s-2-1-4-1-4 2-4 5 2 8 4 8c1 0 2-1 3-1s2 1 3 1 3-3 3-7zM14 4c1-1 1-3 0-4-1 0-2 1-3 2 0 1 0 2 1 2s2-1 2 0z" />
    </svg>,

  paint: (s = 18, c = 'currentColor') =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinejoin="round">
      <path d="M19 4c-3 1-9 3-12 6s-3 9 1 9 5-4 5-4 5-3 6-6 1-5 0-5z" />
      <circle cx="9" cy="15" r="1.2" fill={c} />
    </svg>

};

// ---------------- Sticker star (rotating circular text) ----------------
function StickerStar({ text = 'FRESH ROAST · DAILY ·', color = 'var(--flame)', size = 120 }) {
  const id = 'sticker-' + Math.random().toString(36).slice(2, 7);
  return (
    <div className="sticker-star" style={{ width: size, height: size }}>
      <svg viewBox="0 0 120 120" className="ring" width={size} height={size}>
        <defs>
          <path id={id} d="M60,60 m-46,0 a46,46 0 1,1 92,0 a46,46 0 1,1 -92,0" />
        </defs>
        <circle cx="60" cy="60" r="56" fill={color} stroke="var(--ink)" strokeWidth="2" />
        <text fontFamily="var(--font-mono)" fontWeight="700" fontSize="10.5" letterSpacing="2" fill="var(--ink)">
          <textPath href={'#' + id} startOffset="0">{text + ' ' + text}</textPath>
        </text>
      </svg>
      <div className="core" style={{ position: 'relative', zIndex: 2 }}>
        {Icon.tooth(32, 'var(--ink)')}
      </div>
    </div>);

}

// ---------------- Hawley PNG portrait (uses real bundled image) ----------------
function HawleyImg({ src = 'images/Chill_Variation.png', alt = 'Dr. Hawley', size = 220 }) {
  return (
    <img src={src} alt={alt} style={{ width: size, height: 'auto', display: 'block' }} />);

}

// ---------------- Section eyebrow header ----------------
function SectionHead({ eyebrow, title, kicker, align = 'left' }) {
  return (
    <div style={{ marginBottom: 32, textAlign: align }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: align === 'center' ? 'center' : 'flex-start' }}>
        <span style={{ width: 18, height: 18, borderRadius: 999, background: 'var(--flame)', border: '2px solid var(--ink)' }} />
        <div className="eyebrow">{eyebrow}</div>
      </div>
      <h2 className="title-xl" style={{ margin: '14px 0 8px' }}>{title}</h2>
      {kicker && <p className="body" style={{ maxWidth: 620, margin: align === 'center' ? '0 auto' : 0 }}>{kicker}</p>}
    </div>);

}

// ---------------- Halftone dot canvas — generic ----------------
function HalftoneBlock({ tone = 'flame', children, style = {} }) {
  return (
    <div className={'halftone-' + tone} style={{ position: 'relative', ...style }}>
      {children}
    </div>);

}

// ---------------- Tape strip ----------------
function Tape({ children, color = 'var(--sun)', rotate = -2, style }) {
  return (
    <div style={{
      display: 'inline-block',
      background: color,
      border: '1.5px solid var(--ink)',
      padding: '4px 12px',
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      fontWeight: 700,
      letterSpacing: '0.16em',
      textTransform: 'uppercase',
      transform: `rotate(${rotate}deg)`,
      boxShadow: '2px 2px 0 var(--ink)',
      ...style, color: "rgb(28, 25, 37)"
    }}>{children}</div>);

}

window.RMS = { Icon, StickerStar, HawleyImg, SectionHead, HalftoneBlock, Tape };