const { useState, useEffect, useRef, createContext, useContext } = React;

// CASC brand mark — the rose diamond from the logo
function DiamondMark({ size = 28, basePath = "" }) {
  return (
    <img
      src={`${basePath}assets/casc-mark.png`}
      alt=""
      aria-hidden="true"
      width={size}
      height={size}
      style={{display:'block', width:size, height:size, objectFit:'contain'}}
    />
  );
}

// Image placeholder — striped, monospace label
function ImgPh({ label = "image", aspect = "4 / 3", style = {}, children }) {
  return (
    <div className="img-ph" style={{ aspectRatio: aspect, ...style }}>
      {children || <span className="ph-label">{label}</span>}
    </div>
  );
}

function Eyebrow({ children, mark = true }) {
  return (
    <div style={{display:'flex', alignItems:'center', gap:10}}>
      {mark && <span className="diamond-outline"></span>}
      <span className="eyebrow">{children}</span>
    </div>
  );
}

function SectionHeader({ eyebrow, title, intro, align = "left" }) {
  return (
    <div style={{textAlign: align, maxWidth: align === 'center' ? 720 : 820, margin: align === 'center' ? '0 auto' : 0, marginBottom: 48}}>
      {eyebrow && <div style={{marginBottom:20}}><Eyebrow>{eyebrow}</Eyebrow></div>}
      <h2 style={{marginBottom: intro ? 20 : 0}}>
        <span dangerouslySetInnerHTML={{__html: title}} />
      </h2>
      {intro && <p style={{color:'var(--muted)', fontSize:17, lineHeight:1.65, maxWidth:640, margin: align==='center'?'0 auto':0}}>{intro}</p>}
    </div>
  );
}

Object.assign(window, { DiamondMark, ImgPh, Eyebrow, SectionHeader });