/* eslint-disable */
// HAIQ — Section card wrapper + helpers

function SectionCard({id, label, children, dark = false, style = {}, screenLabel}) {
  return (
    <section id={id} data-screen-label={screenLabel}
      style={{ padding:'20px', position:'relative', zIndex:2, ...style }}>
      <div className="section-card" style={{
        maxWidth: 1300, margin:'0 auto',
        padding:'80px 60px',
        background: dark ? '#000' : 'var(--bg-section)',
        border: dark ? '1px solid rgba(255,255,255,0.04)' : '1px solid var(--border)',
      }}>
        {children}
      </div>
    </section>
  );
}

function Eyebrow({children, style}) {
  return (
    <Reveal as="div" className="eyebrow" style={{
      marginBottom: 18, display:'flex', alignItems:'center', gap:14, ...style,
    }}>
      <span style={{width:24, height:1, background:'rgba(124,106,232,0.5)'}}/>
      {children}
    </Reveal>
  );
}

function H2Italic({parts, style}) {
  const renderLine = (s) => s.split(/(\*[^*]+\*)/g).map((p, i) =>
    p.startsWith('*') && p.endsWith('*')
      ? <span key={i} style={{fontWeight:700}}>{p.slice(1,-1)}</span>
      : <span key={i}>{p}</span>
  );
  return (
    <Reveal delay={0.1} as="h2" style={{
      fontFamily:'var(--font-sans)', fontWeight:700,
      fontSize:'clamp(36px, 5vw, 64px)', lineHeight:1.12,
      letterSpacing:'-0.03em', color:'#fff', margin:'0 0 8px', textWrap:'balance',
      maxWidth: 900,
      ...style,
    }}>{renderLine(parts)}</Reveal>
  );
}

Object.assign(window, {SectionCard, Eyebrow, H2Italic});