// Reusable UI primitives & icons for BODYWORK FITNESS

const Icon = ({ name, size = 20, stroke = 1.75 }) => {
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'arrow':
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-up-right':
      return <svg viewBox="0 0 24 24" {...s}><path d="M7 17L17 7M7 7h10v10"/></svg>;
    case 'check':
      return <svg viewBox="0 0 24 24" {...s}><path d="M20 6L9 17l-5-5"/></svg>;
    case 'plus':
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus':
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14"/></svg>;
    case 'menu':
      return <svg viewBox="0 0 24 24" {...s}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'close':
      return <svg viewBox="0 0 24 24" {...s}><path d="M18 6L6 18M6 6l12 12"/></svg>;
    case 'instagram':
      return <svg viewBox="0 0 24 24" {...s}><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zM17.5 6.5h.01"/></svg>;
    case 'tiktok':
      return <svg viewBox="0 0 24 24" {...s}><path d="M9 12a4 4 0 104 4V4a5 5 0 005 5"/></svg>;
    case 'youtube':
      return <svg viewBox="0 0 24 24" {...s}><rect x="2" y="5" width="20" height="14" rx="3"/><path d="M10 9l5 3-5 3z" fill="currentColor"/></svg>;
    case 'whatsapp':
      return <svg viewBox="0 0 24 24" {...s}><path d="M3 21l1.65-3.8a9 9 0 113.4 3.39L3 21M9 10a.5.5 0 001 0V9a.5.5 0 00-1 0v1a5 5 0 005 5h1a.5.5 0 000-1h-1a.5.5 0 000 1"/></svg>;
    case 'play':
      return <svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>;
    case 'flame':
      return <svg viewBox="0 0 24 24" {...s}><path d="M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 2.5z"/></svg>;
    case 'bolt':
      return <svg viewBox="0 0 24 24" {...s}><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>;
    case 'target':
      return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>;
    case 'shield':
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    case 'heart':
      return <svg viewBox="0 0 24 24" {...s}><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>;
    case 'dumbbell':
      return <svg viewBox="0 0 24 24" {...s}><path d="M6 8v8M3 10v4M18 8v8M21 10v4M6 12h12"/></svg>;
    case 'apple':
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 6c0-2 1-4 4-4 0 2-2 4-4 4zM12 6c-3 0-6 2-6 7 0 4 3 9 6 9s2-1 4-1 1 1 4 1 4-5 4-9-3-7-6-7-3 1-3 1-1-1-3-1z"/></svg>;
    case 'star':
      return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" stroke="none"><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>;
    case 'sparkle':
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>;
    default: return null;
  }
};

// BW logo SVG (faithful to provided logo)
const Logo = ({ size = 32, stacked = false }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <svg width={size} height={size * 1.05} viewBox="0 0 100 105" style={{ flexShrink: 0 }}>
      <defs>
        <linearGradient id="bwgrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#ef4444"/>
          <stop offset="100%" stopColor="#991b1b"/>
        </linearGradient>
      </defs>
      <path d="M5 0 L100 0 L95 105 L0 100 Z" fill="url(#bwgrad)"/>
      <text x="50" y="68" textAnchor="middle" fill="#fff" fontFamily="Archivo, sans-serif" fontWeight="900" fontSize="42" letterSpacing="-2">BW</text>
    </svg>
    {!stacked && (
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <span className="display" style={{ fontSize: size * 0.55, fontWeight: 900, letterSpacing: '-0.02em' }}>
          BODYWORK
        </span>
        <span style={{ fontSize: size * 0.32, color: 'var(--red)', fontWeight: 600, letterSpacing: '0.25em', marginTop: 3 }}>
          FITNESS
        </span>
      </div>
    )}
  </div>
);

// Striped placeholder OR real image when src is provided
const Placeholder = ({ label, aspect = '3/4', radius = 0, style = {}, src, objectPosition = 'center' }) => {
  if (src) {
    return (
      <div style={{ aspectRatio: aspect, width: '100%', borderRadius: radius, overflow: 'hidden', ...style }}>
        <img src={src} alt={label || ''} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition, display: 'block' }} />
      </div>
    );
  }
  return (
    <div className="ph" style={{ aspectRatio: aspect, width: '100%', borderRadius: radius, ...style }}>
      {label}
    </div>
  );
};

// Marquee scrolling text
const Marquee = ({ items, separator = '×' }) => (
  <div style={{
    overflow: 'hidden',
    borderTop: '1px solid var(--line)',
    borderBottom: '1px solid var(--line)',
    padding: '24px 0',
    background: 'var(--bg)'
  }}>
    <div className="marquee-track">
      {[...Array(2)].map((_, i) => (
        <React.Fragment key={i}>
          {items.map((it, j) => (
            <React.Fragment key={j}>
              <span className="display" style={{ fontSize: 32, color: 'var(--fg)' }}>{it}</span>
              <span style={{ color: 'var(--red)', fontSize: 24, fontWeight: 700 }}>{separator}</span>
            </React.Fragment>
          ))}
        </React.Fragment>
      ))}
    </div>
  </div>
);

// Section heading
const SectionHead = ({ eyebrow, title, kicker, align = 'left' }) => (
  <div style={{ textAlign: align, maxWidth: align === 'center' ? 760 : '100%', margin: align === 'center' ? '0 auto' : 0 }}>
    {eyebrow && <div className="eyebrow" style={{ marginBottom: 20 }}>{eyebrow}</div>}
    <h2 className="display" style={{ fontSize: 'clamp(28px, 4.5vw, 56px)', fontWeight: 900, lineHeight: 1, color: 'var(--fg)' }}>
      {title}
    </h2>
    {kicker && <p style={{ marginTop: 24, fontSize: 17, color: 'var(--fg-soft)', lineHeight: 1.6, maxWidth: 580, margin: align === 'center' ? '24px auto 0' : '24px 0 0' }}>{kicker}</p>}
  </div>
);

// Pricing tier
const PriceTier = ({ tier, price, period, desc, features, cta, highlight = false }) => (
  <div style={{
    padding: 36,
    border: highlight ? '1px solid var(--red)' : '1px solid var(--line)',
    background: highlight ? 'var(--bg-2)' : 'transparent',
    color: 'var(--fg)',
    display: 'flex',
    flexDirection: 'column',
    minHeight: 580,
    position: 'relative'
  }}>
    {highlight && (
      <div style={{
        position: 'absolute', top: -1, right: -1,
        background: 'var(--red)', color: '#fff',
        padding: '8px 16px', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase',
        fontFamily: 'JetBrains Mono, monospace', fontWeight: 600
      }}>★ Más popular</div>
    )}
    <div className="eyebrow" style={{ marginBottom: 20 }}>{tier}</div>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 12 }}>
      <span style={{ fontSize: 16, opacity: 0.5 }}>$</span>
      <span className="display" style={{ fontSize: 64, fontWeight: 900, lineHeight: 1, letterSpacing: '-0.04em' }}>{price}</span>
      <span style={{ fontSize: 14, color: 'var(--fg-soft)' }}>/{period}</span>
    </div>
    <p style={{ fontSize: 14, color: 'var(--fg-soft)', marginBottom: 28, lineHeight: 1.5 }}>{desc}</p>
    <div style={{ height: 1, background: 'var(--line)', margin: '0 0 24px' }} />
    <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 32, flex: 1 }}>
      {features.map((f, i) => (
        <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14, lineHeight: 1.4 }}>
          <span style={{ color: 'var(--red)', flexShrink: 0, marginTop: 2 }}>
            <Icon name="check" size={16} stroke={2.5} />
          </span>
          <span>{f}</span>
        </li>
      ))}
    </ul>
    <button className="btn" style={{
      background: highlight ? 'var(--red)' : 'transparent',
      color: highlight ? '#fff' : 'var(--fg)',
      border: highlight ? 'none' : '1px solid var(--fg)',
      justifyContent: 'center'
    }}>
      {cta} <Icon name="arrow" size={14} />
    </button>
  </div>
);

// FAQ item
const FAQItem = ({ q, a, isOpen, onToggle }) => (
  <div style={{ borderBottom: '1px solid var(--line)' }}>
    <button onClick={onToggle} style={{
      width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      gap: 24, textAlign: 'left', padding: '28px 0'
    }}>
      <span className="display" style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.2, color: 'var(--fg)' }}>{q}</span>
      <span style={{
        flexShrink: 0, width: 40, height: 40,
        border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'all 0.2s', background: isOpen ? 'var(--red)' : 'transparent',
        color: isOpen ? '#fff' : 'var(--fg)',
        borderColor: isOpen ? 'var(--red)' : 'var(--line)'
      }}>
        <Icon name={isOpen ? 'minus' : 'plus'} size={16} stroke={2} />
      </span>
    </button>
    <div style={{
      maxHeight: isOpen ? 240 : 0, overflow: 'hidden',
      transition: 'all 0.3s ease', opacity: isOpen ? 1 : 0
    }}>
      <p style={{ paddingBottom: 28, color: 'var(--fg-soft)', fontSize: 16, lineHeight: 1.6, maxWidth: 720 }}>{a}</p>
    </div>
  </div>
);

// Testimonial
const Testimonial = ({ quote, name, detail, accent }) => (
  <div style={{
    padding: 32,
    background: accent ? 'var(--red)' : 'var(--bg-2)',
    color: accent ? '#fff' : 'var(--fg)',
    border: accent ? 'none' : '1px solid var(--line)',
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    minHeight: 320
  }}>
    <div style={{ display: 'flex', gap: 4, color: accent ? '#fff' : 'var(--red)' }}>
      {[...Array(5)].map((_, i) => <Icon key={i} name="star" size={16} />)}
    </div>
    <p className="display" style={{ fontSize: 22, fontWeight: 600, lineHeight: 1.3, flex: 1, textTransform: 'none', letterSpacing: '-0.01em' }}>
      "{quote}"
    </p>
    <div style={{ paddingTop: 16, borderTop: accent ? '1px solid rgba(255,255,255,0.2)' : '1px solid var(--line)' }}>
      <div style={{ fontSize: 14, fontWeight: 600 }}>{name}</div>
      <div style={{ fontSize: 13, opacity: 0.75, marginTop: 2 }}>{detail}</div>
    </div>
  </div>
);

Object.assign(window, { Icon, Logo, Placeholder, Marquee, SectionHead, PriceTier, FAQItem, Testimonial });