/* eslint-disable no-undef */
// Concept — shared building blocks for the full Mini App flow.
// All screens use these primitives so the visual language stays consistent.

/* ─── Top bar: round dot · pill · round dot — recurring chrome ─── */
function ConceptTopBar({ left, right, center, fg = '#0A0505', pillBg = 'transparent', pillBorder, padding = '14px 16px 12px' }) {
  const dot = (children, onDark) => (
    <button style={{
      all: 'unset', cursor: 'pointer',
      width: 40, height: 40, borderRadius: 99,
      background: onDark ? 'rgba(250,250,250,0.08)' : 'rgba(10,5,5,0.92)',
      color: '#FAFAFA',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>{children}</button>
  );
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding, gap: 8,
    }}>
      {left || dot(
        <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none">
          <path d="M2 3 H4 L5.5 10 H11 L12 5 H4.5"/>
          <circle cx="6" cy="12.4" r="0.6" fill="currentColor"/>
          <circle cx="10" cy="12.4" r="0.6" fill="currentColor"/>
        </svg>
      )}
      {center !== undefined ? center : (
        <div style={{
          height: 40, padding: '0 18px',
          borderRadius: 99,
          border: pillBorder || `1.5px solid ${fg}`,
          background: pillBg,
          color: fg,
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 12, letterSpacing: '0.02em',
        }}>
          EXPLORE MORE
          <svg width="10" height="10" viewBox="0 0 10 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none">
            <path d="M2 8 L8 2 M3 2 H8 V7"/>
          </svg>
        </div>
      )}
      {right || dot(
        <svg width="16" height="11" viewBox="0 0 16 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
          <path d="M1 1.5 H15 M1 5.5 H15 M1 9.5 H15"/>
        </svg>
      )}
    </div>
  );
}

/* ─── Big curvy white path — hero decoration ─── */
function FlowingCurve({ stroke = '#FAFAFA', strokeWidth = 2, opacity = 1, style = {}, variant = 'wave' }) {
  const paths = {
    wave:   'M -20 240 C 80 180, 160 320, 260 260 S 420 200, 480 280',
    sCurve: 'M -10 100 C 80 60, 120 280, 220 220 S 380 100, 470 200',
    deep:   'M -20 300 C 60 360, 200 160, 280 240 S 440 360, 480 300',
  };
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="none"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', ...style }}>
      <path d={paths[variant]} fill="none" stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" opacity={opacity}/>
    </svg>
  );
}

/* ─── Stat tile (big number + tiny mono label) ─── */
function StatTile({ value, unit, label, color = '#0A0505', align = 'left' }) {
  return (
    <div style={{ textAlign: align, color }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 2, justifyContent: align === 'center' ? 'center' : 'flex-start' }}>
        <span className="tb-display" style={{ fontSize: 26 }}>{value}</span>
        {unit && <span className="tb-display" style={{ fontSize: 11, opacity: 0.7 }}>{unit}</span>}
      </div>
      <div className="tb-mono" style={{ fontSize: 9, opacity: 0.7, marginTop: 3, letterSpacing: '0.12em' }}>
        {label}
      </div>
    </div>
  );
}

/* ─── Big CTA pill — name + price + chevron ─── */
function CTAPill({ label, price, onDark = false, color }) {
  const bg = color || (onDark ? '#FAFAFA' : '#0A0505');
  const fg = color ? '#0A0505' : (onDark ? '#0A0505' : '#FAFAFA');
  return (
    <div style={{
      position: 'relative', overflow: 'hidden',
      height: 56, borderRadius: 99,
      background: bg, color: fg,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 8px 0 22px',
    }}>
      <span className="tb-display" style={{ fontSize: 14, letterSpacing: '0.02em' }}>
        {label}
        {price && <span style={{ opacity: 0.7, marginLeft: 8 }}>· {price}</span>}
      </span>
      <span style={{
        width: 40, height: 40, borderRadius: 99,
        background: 'rgba(0,0,0,0.18)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: fg,
      }}>
        <svg width="12" height="12" viewBox="0 0 12 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none">
          <path d="M2 10 L10 2 M4 2 H10 V8"/>
        </svg>
      </span>
      {/* shimmer */}
      <span style={{
        position: 'absolute', top: 0, bottom: 0, width: '40%',
        background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent)',
        animation: 'tb-shimmer 4s ease-in-out infinite',
        pointerEvents: 'none',
      }}/>
    </div>
  );
}

/* ─── Round nav button (arrow) ─── */
function RoundArrow({ direction = 'right', onDark = false, size = 40 }) {
  const fg = onDark ? '#FAFAFA' : '#0A0505';
  const bg = onDark ? 'rgba(250,250,250,0.08)' : 'transparent';
  const border = onDark ? '1.5px solid rgba(250,250,250,0.25)' : '1.5px solid rgba(10,5,5,0.25)';
  const rot = direction === 'left' ? 180 : (direction === 'up' ? -90 : (direction === 'down' ? 90 : 0));
  return (
    <button style={{
      all: 'unset', cursor: 'pointer',
      width: size, height: size, borderRadius: 99,
      background: bg, border, color: fg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      <svg width={size * 0.35} height={size * 0.35} viewBox="0 0 14 14"
        stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none"
        style={{ transform: `rotate(${rot}deg)` }}>
        <path d="M2 7 H12 M8 3 L12 7 L8 11"/>
      </svg>
    </button>
  );
}

/* ─── Circular ingredient picker — a row item ─── */
function IngredientCircle({ label, active = false, size = 70, dark = false }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <div className="tb-placeholder" data-dark={dark} data-label={label}
        style={{
          width: size, height: size, borderRadius: 99,
          border: active ? '2px solid var(--rojo)' : '0',
          boxShadow: active ? '0 0 0 4px rgba(218,5,5,0.15)' : 'none',
          transform: active ? 'scale(1.06)' : 'scale(1)',
          transition: 'transform 0.3s',
        }}/>
      {active && (
        <div className="tb-mono" style={{ fontSize: 8, color: 'var(--rojo)', letterSpacing: '0.12em' }}>
          SELECTED
        </div>
      )}
    </div>
  );
}

/* ─── Cup graphic — plastic cup w/ brand mark — for lemonades & drinks
       (the lemonade photos weren't shipped; this renders a realistic
       takeaway cup colored by the liquid hex) ─── */
function CupGraphic({ color = '#DA0505', size = 120, withIce = true, dark = false }) {
  const w = size, h = size * 1.16;
  return (
    <svg width={w} height={h} viewBox="0 0 120 140" style={{ display: 'block' }}>
      <defs>
        <linearGradient id={`cup-${color}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={color} stopOpacity="0.55"/>
          <stop offset="1" stopColor={color}/>
        </linearGradient>
        <linearGradient id={`gloss-${color}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#fff" stopOpacity="0.5"/>
          <stop offset="0.4" stopColor="#fff" stopOpacity="0.15"/>
          <stop offset="1" stopColor="#fff" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {/* drop shadow */}
      <ellipse cx="60" cy="135" rx="40" ry="3" fill="#000" opacity="0.18"/>
      {/* cup body — trapezoid (wider top) */}
      <path d="M 20 24 L 100 24 L 92 132 L 28 132 Z"
        fill={`url(#cup-${color})`}
        stroke="rgba(0,0,0,0.06)" strokeWidth="0.5"/>
      {/* gloss */}
      <path d="M 20 24 L 100 24 L 92 132 L 28 132 Z"
        fill={`url(#gloss-${color})`} opacity="0.85"/>
      {/* rim (clear top) */}
      <ellipse cx="60" cy="24" rx="40" ry="6"
        fill="rgba(255,255,255,0.85)" stroke="rgba(0,0,0,0.18)" strokeWidth="0.6"/>
      <ellipse cx="60" cy="22" rx="40" ry="6"
        fill="rgba(255,255,255,0.55)"/>
      {/* ice cubes peeking */}
      {withIce && (
        <g opacity="0.85">
          <rect x="42" y="14" width="9" height="9" rx="2" fill={color} opacity="0.7" transform="rotate(15 46 18)"/>
          <rect x="58" y="11" width="10" height="10" rx="2" fill={color} opacity="0.55" transform="rotate(-8 63 16)"/>
          <rect x="72" y="14" width="8" height="8" rx="2" fill={color} opacity="0.75" transform="rotate(20 76 18)"/>
        </g>
      )}
      {/* brand mark — white plate with black burger icon */}
      <g transform="translate(38 72)">
        <rect x="-2" y="-2" width="48" height="36" rx="6" fill="#FAFAFA"/>
        {/* burger glyph */}
        <path d="M 22 4 C 8 4, 4 14, 4 18 L 40 18 C 40 14, 36 4, 22 4 Z" fill="#0A0505"/>
        <rect x="4" y="18" width="36" height="3" fill="#FAFAFA"/>
        <path d="M 4 21 C 4 26, 8 30, 22 30 C 36 30, 40 26, 40 21 Z" fill="#0A0505"/>
      </g>
      {/* condensation droplets */}
      <circle cx="34" cy="60" r="1.5" fill="#fff" opacity="0.5"/>
      <circle cx="86" cy="76" r="1.2" fill="#fff" opacity="0.5"/>
      <circle cx="38" cy="100" r="1" fill="#fff" opacity="0.4"/>
      <circle cx="80" cy="110" r="1.4" fill="#fff" opacity="0.45"/>
    </svg>
  );
}

/* ─── Product card — small/medium grid card for menu items.
       Uses real photo (img URL) on a soft tinted background,
       falls back to a colored cup for lemonades/drinks (no img). ─── */
function ProductCard({ item, dark = false, size = 'md', onAdd }) {
  // size: 'sm' (drinks), 'md' (snacks/burgers), 'lg' (boxes/featured)
  const sizes = {
    sm: { w: 140, ph: 110, name: 13, price: 11, pad: 10 },
    md: { w: 180, ph: 150, name: 15, price: 13, pad: 12 },
    lg: { w: 260, ph: 200, name: 18, price: 15, pad: 14 },
  };
  const s = sizes[size];
  const bgTint = dark ? 'rgba(250,250,250,0.04)' : '#FFFFFF';
  const fg = dark ? '#FAFAFA' : '#0A0505';
  const subFg = dark ? 'rgba(250,250,250,0.55)' : 'rgba(10,5,5,0.55)';
  const borderC = dark ? 'rgba(250,250,250,0.08)' : 'rgba(10,5,5,0.06)';

  return (
    <div style={{
      background: bgTint, color: fg,
      border: `1px solid ${borderC}`,
      borderRadius: 16, padding: s.pad,
      display: 'flex', flexDirection: 'column',
      gap: 8, position: 'relative',
    }}>
      {item.tag && (
        <div className="tb-mono" style={{
          position: 'absolute', top: 8, left: 8,
          padding: '3px 7px', borderRadius: 99,
          background: 'var(--rojo)', color: 'var(--seasalt)',
          fontSize: 8, letterSpacing: '0.1em', zIndex: 2,
        }}>{item.tag}</div>
      )}
      {/* photo / cup */}
      <div style={{
        height: s.ph, borderRadius: 12, overflow: 'hidden',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: item.img
          ? (dark ? '#1a1414' : '#F5EFE5')
          : `radial-gradient(closest-side, ${item.color}22, ${item.color}05)`,
        position: 'relative',
      }}>
        {item.img ? (
          <img src={item.img} alt={item.name}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
        ) : (
          <CupGraphic color={item.color || '#999'} size={s.ph * 0.78}/>
        )}
      </div>
      {/* name + desc */}
      <div style={{ flex: 1 }}>
        <div className="tb-display" style={{ fontSize: s.name, lineHeight: 1, marginBottom: 4 }}>
          {item.name}
        </div>
        {item.desc && (
          <div className="tb-body" style={{ fontSize: 10, color: subFg, lineHeight: 1.3 }}>
            {item.desc}
          </div>
        )}
      </div>
      {/* price + add */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
        <div className="tb-display" style={{ fontSize: s.price }}>
          {fmtPrice(item.price)}
        </div>
        <button style={{
          all: 'unset', cursor: 'pointer',
          width: 30, height: 30, borderRadius: 99,
          background: 'var(--rojo)', color: '#FAFAFA',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }} onClick={onAdd}>
          <svg width="12" height="12" viewBox="0 0 12 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            <path d="M6 1 V11 M1 6 H11"/>
          </svg>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, {
  ConceptTopBar, FlowingCurve, StatTile, CTAPill, RoundArrow, IngredientCircle,
  CupGraphic, ProductCard,
});