// Shared bits for the landing funnel page.
// Pulls from BRAND defined in flyer-shared.jsx.

const LBRAND = {
  ...BRAND,
  // Subtle warm offwhite for hero cards
  cream: '#fbfaf7',
  ink: '#0a1410', // deep emerald-tinted black for hero text
};

// Reuse store badges from flyer-shared but make a row helper.
function StoreBadgeRow({ width = 158, gap = 12, dark = true }) {
  const fg = dark ? LBRAND.white : LBRAND.gray900;
  const bg = dark ? LBRAND.black : LBRAND.white;
  return (
    <div style={{ display: 'flex', gap, flexWrap: 'wrap' }}>
      <AppStoreBadge width={width} color={fg} bg={bg} />
      <GooglePlayBadge width={width} color={fg} bg={bg} />
    </div>
  );
}

// Star rating element — generic placeholder rating.
function Stars({ rating = 4.8, size = 14, color = '#f59e0b' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
      {[0,1,2,3,4].map(i => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill={i < Math.round(rating) ? color : '#e5e7eb'}>
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
      ))}
      <span style={{ marginLeft: 6, fontWeight: 600, fontSize: size, color: LBRAND.gray800 }}>{rating}</span>
    </div>
  );
}

// Compact phone preview tuned for landing pages — uses PhoneMockup but
// scales nicely inside a column.
function LandingPhone({ width = 280, ...rest }) {
  return <PhoneMockup width={width} showChrome={true} {...rest} />;
}

// Animated "pulsing dot" used for "live now" indicators.
function LiveDot({ size = 8, color = LBRAND.emerald500 }) {
  return (
    <span style={{ position: 'relative', display: 'inline-block', width: size, height: size }}>
      <span style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        background: color, animation: 'lp-pulse 1.6s ease-out infinite',
      }} />
      <span style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        background: color,
      }} />
    </span>
  );
}

// One-time keyframes injection
if (typeof document !== 'undefined' && !document.getElementById('landing-keyframes')) {
  const s = document.createElement('style');
  s.id = 'landing-keyframes';
  s.textContent = `
    @keyframes lp-pulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.4);opacity:0} }
    @keyframes lp-fade-up { 0%{opacity:0;transform:translateY(8px)} 100%{opacity:1;transform:none} }
    .lp-fade-up { animation: lp-fade-up .5s ease-out both; }
    .lp-btn-primary {
      background: ${LBRAND.emerald500};
      color: white;
      border: none;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, transform .1s, box-shadow .15s;
      box-shadow: 0 8px 24px -6px rgba(16,185,129,.45);
    }
    .lp-btn-primary:hover { background: ${LBRAND.emerald600}; }
    .lp-btn-primary:active { transform: translateY(1px); }
    .lp-btn-ghost {
      background: transparent;
      color: ${LBRAND.gray800};
      border: 1px solid ${LBRAND.gray200};
      font-weight: 500;
      cursor: pointer;
      transition: background .15s;
    }
    .lp-btn-ghost:hover { background: ${LBRAND.gray50}; }
    .lp-input {
      width: 100%;
      box-sizing: border-box;
      font: inherit;
      padding: 14px 16px;
      border-radius: 10px;
      border: 1px solid ${LBRAND.gray200};
      background: white;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .lp-input:focus { border-color: ${LBRAND.emerald500}; box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
  `;
  document.head.appendChild(s);
}

// Ad-source chip — shown subtly to indicate the page adapts to where the
// click came from. Real implementation would parse ?utm_source.
function AdSourceChip({ source = 'facebook' }) {
  const cfg = {
    facebook: { label: '', color: '#1877F2', bg: '#E7F0FE' },
    google:   { label: 'From your Google ad',   color: '#1A73E8', bg: '#E8F0FE' },
    instagram:{ label: 'From your Instagram ad', color: '#C13584', bg: '#FCE7F3' },
  }[source] || { label: '', color: '', bg: '' };
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '5px 12px',
      borderRadius: 999,
      background: cfg.bg, color: cfg.color,
      fontSize: 11, fontWeight: 600, letterSpacing: 0.2,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: cfg.color }} />
      {cfg.label}
    </div>
  );
}

Object.assign(window, { LBRAND, StoreBadgeRow, Stars, LandingPhone, LiveDot, AdSourceChip });