// Reusable primitives
const Section = ({ id, label, kicker, title, subtitle, children, dense, bg }) => (
  <section id={id} style={{padding:'var(--pad-section) 0', position:'relative', background: bg || 'transparent'}}>
    <div className="container">
      {(label || title) && (
        <header style={{marginBottom: dense ? 40 : 56, display:'grid', gap:18, gridTemplateColumns:'minmax(120px,1fr) minmax(0,2.2fr)', alignItems:'start'}}>
          <div style={{paddingTop:6}}>
            <span className="eyebrow"><span className="dot"/>{label}</span>
          </div>
          <div style={{maxWidth:780}}>
            {kicker && <div className="mono" style={{fontSize:12,color:'var(--ink-3)',marginBottom:14,letterSpacing:'0.02em'}}>{kicker}</div>}
            <h2 style={{fontSize:'clamp(34px,4.6vw,58px)', lineHeight:0.98, letterSpacing:'-0.03em', fontWeight:500, color:'var(--ink)'}}>
              {title}
            </h2>
            {subtitle && <p style={{marginTop:18, fontSize:'clamp(16px,1.4vw,19px)', lineHeight:1.55, color:'var(--ink-2)', maxWidth:640}}>{subtitle}</p>}
          </div>
        </header>
      )}
      {children}
    </div>
  </section>
);

const Tag = ({ children, accent }) => (
  <span style={{
    display:'inline-flex',alignItems:'center',gap:6,
    padding:'4px 9px',borderRadius:6,
    fontFamily:'var(--mono)',fontSize:10,letterSpacing:'0.04em',
    color: accent ? '#0a0a0a' : 'var(--ink-2)',
    background: accent ? 'var(--accent)' : 'rgba(255,255,255,0.05)',
    border: accent ? '1px solid var(--accent)' : '1px solid var(--line)',
    textTransform:'uppercase'
  }}>{children}</span>
);

// Placeholder image with diagonal stripes + mono label
const Placeholder = ({ label, ratio = '16/10', color = '#1a1a1c', accent = '#d4ff3a', code }) => (
  <div style={{
    aspectRatio: ratio, width:'100%', borderRadius:'var(--radius)',
    background: `linear-gradient(135deg, ${color} 0%, #0a0a0a 100%)`,
    border:'1px solid var(--line)', position:'relative', overflow:'hidden',
    display:'flex', alignItems:'flex-end', padding:18
  }}>
    <svg style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:0.18}} preserveAspectRatio="none">
      <defs>
        <pattern id={`stripes-${label.replace(/\W/g,'')}`} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="14" stroke={accent} strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#stripes-${label.replace(/\W/g,'')})`}/>
    </svg>
    <div style={{position:'absolute',inset:0,background:'radial-gradient(60% 80% at 70% 30%, transparent, rgba(0,0,0,0.6))'}}/>
    <div style={{position:'relative',zIndex:1,display:'flex',justifyContent:'space-between',width:'100%',alignItems:'flex-end'}}>
      <div className="mono" style={{fontSize:10, color:'rgba(255,255,255,0.6)', letterSpacing:'0.06em', textTransform:'uppercase'}}>{label}</div>
      {code && <div className="mono" style={{fontSize:10, color: accent, letterSpacing:'0.04em'}}>{code}</div>}
    </div>
  </div>
);

// Marquee
const Marquee = ({ items, speed = 40 }) => {
  const list = [...items, ...items];
  return (
    <div style={{overflow:'hidden', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', padding:'18px 0', position:'relative', maskImage:'linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)'}}>
      <div style={{display:'flex',gap:48,animation:`marquee ${speed}s linear infinite`,width:'max-content'}}>
        {list.map((it,i)=>(
          <div key={i} style={{display:'flex',alignItems:'center',gap:16,whiteSpace:'nowrap'}}>
            <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',textTransform:'uppercase'}}>{it}</span>
            <span style={{color:'var(--ink-4)'}}>✦</span>
          </div>
        ))}
      </div>
      <style>{`@keyframes marquee { from {transform:translateX(0)} to {transform:translateX(-50%)} }`}</style>
    </div>
  );
};

Object.assign(window, { Section, Tag, Placeholder, Marquee });