// Shared section primitives: SectionHead, Eyebrow, Divider, reusable chrome.

const Eyebrow = ({ color = '#5de6ff', children }) => (
  <div style={{
    display:'inline-flex', alignItems:'center', gap:8, padding:'6px 12px',
    borderRadius:9999, background:'rgba(19,19,21,0.65)',
    border:`1px solid ${color}33`, backdropFilter:'blur(12px)'
  }}>
    <span style={{width:6,height:6,borderRadius:9999,background:color,boxShadow:`0 0 8px ${color}`,animation:'sp-pulse 1.8s ease-in-out infinite'}} />
    <span style={{fontFamily:'Space Grotesk',fontSize:10,color,letterSpacing:'0.22em',textTransform:'uppercase',fontWeight:700}}>{children}</span>
  </div>
);

// A section header with an eyebrow label, large headline, and lede paragraph.
const SectionHead = ({ eyebrow, eyebrowColor='#5de6ff', title, titleAccent, lede, align='center', maxWidth=860 }) => (
  <div style={{textAlign:align, maxWidth, margin: align==='center' ? '0 auto' : 0, padding:'0 32px'}}>
    {eyebrow && <div style={{marginBottom:20}}><Eyebrow color={eyebrowColor}>{eyebrow}</Eyebrow></div>}
    <h2 style={{
      fontFamily:'Manrope', fontSize:'clamp(34px, 4.2vw, 56px)', fontWeight:800,
      letterSpacing:'-0.035em', lineHeight:1.05, color:'#e5e1e4',
      margin:'0 0 20px', textWrap:'balance'
    }}>
      {title}{titleAccent && <> <span style={{background:'linear-gradient(90deg,#FF8C33,#FF6B00)',WebkitBackgroundClip:'text',backgroundClip:'text',WebkitTextFillColor:'transparent'}}>{titleAccent}</span></>}
    </h2>
    {lede && <p style={{fontSize:18, lineHeight:1.6, color:'#a98a7d', margin:0, textWrap:'pretty'}}>{lede}</p>}
  </div>
);

// A feature row: image/visual on one side, text block on the other. side='left'|'right' picks where the visual sits.
const FeatureRow = ({ side='left', eyebrow, eyebrowColor='#5de6ff', title, body, bullets, visual, minHeight=520 }) => {
  const isLeft = side === 'left';
  return (
    <div style={{
      display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center',
      maxWidth:1280, margin:'0 auto', padding:'0 32px', minHeight
    }}>
      <div style={{order: isLeft ? 0 : 1}}>{visual}</div>
      <div style={{order: isLeft ? 1 : 0}}>
        {eyebrow && <div style={{marginBottom:16}}><Eyebrow color={eyebrowColor}>{eyebrow}</Eyebrow></div>}
        <h3 style={{fontFamily:'Manrope',fontSize:'clamp(28px, 3vw, 40px)',fontWeight:800,letterSpacing:'-0.03em',lineHeight:1.1,color:'#e5e1e4',margin:'0 0 18px',textWrap:'balance'}}>
          {title}
        </h3>
        {body && <p style={{fontSize:16,lineHeight:1.65,color:'#a98a7d',margin:'0 0 22px',textWrap:'pretty'}}>{body}</p>}
        {bullets && (
          <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:10}}>
            {bullets.map((b,i) => (
              <li key={i} style={{display:'flex',alignItems:'flex-start',gap:10,fontSize:14,color:'#cfc4bf'}}>
                <span style={{
                  flexShrink:0, width:18, height:18, borderRadius:6,
                  background:'rgba(255,107,0,0.15)', color:'#FF8C33',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                  fontSize:12, fontWeight:800, marginTop:1
                }}>✓</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};

// Wrapper that gives a section its standard vertical rhythm + optional seam glow.
const SectionWrap = ({ children, id, label, padY=140, accent=null }) => (
  <section id={id} data-screen-label={label} style={{position:'relative',padding:`${padY}px 0`,background:'#0e0e10'}}>
    {accent && (
      <div aria-hidden style={{
        position:'absolute', inset:'0 0 auto 0', height:1,
        background:`linear-gradient(90deg, transparent, ${accent}55, transparent)`
      }} />
    )}
    {children}
  </section>
);

// A pure decorative grid used as a background for dark sections.
const GridBG = ({ color='rgba(93,230,255,0.08)', size=64, fade=true }) => (
  <div aria-hidden style={{
    position:'absolute', inset:0, pointerEvents:'none',
    backgroundImage:`linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,
    backgroundSize:`${size}px ${size}px`,
    WebkitMaskImage: fade ? 'radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, black 35%, transparent 85%)' : 'none',
    maskImage: fade ? 'radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, black 35%, transparent 85%)' : 'none'
  }} />
);

Object.assign(window, { Eyebrow, SectionHead, FeatureRow, SectionWrap, GridBG });