/* Shared UI primitives reused across pages */

function SectionEyebrow({ num, text, onDark = false }) {
  // num intentionally ignored — section numbering is internal authoring metadata, not user-facing
  return (
    <div className={'eyebrow ' + (onDark ? 'on-dark' : '')}>
      <span>{text}</span>
    </div>
  );
}

function SectionHead({ num, eyebrow, headline, sideNote, onDark = false }) {
  return (
    <div className={'section-head ' + (onDark ? 'on-dark-head' : '')}>
      <div className="lead">
        <SectionEyebrow num={num} text={eyebrow} onDark={onDark} />
        <h2>{headline}</h2>
      </div>
      {sideNote && <div className="side-note">{sideNote}</div>}
    </div>
  );
}

/* Documentary photo slot — placeholder OR real photo when src is provided */
function PhotoSlot({ ratio = '16/9', light = false, tag, caption, src, alt, ref, style = {}, children, corner = ['SUBJECT', '01/01'], objectPosition }) {
  const isReal = !!src;
  return (
    <div
      className={'photo-slot ' + (light ? 'light' : '') + (isReal ? ' has-photo' : '')}
      style={{ aspectRatio: ratio, width: '100%', ...style }}
    >
      {isReal && (
        <img
          src={src}
          alt={alt || tag || ''}
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: objectPosition || 'center',
            display: 'block',
            zIndex: 1,
          }}
        />
      )}
      {!isReal && (
        <div className="photo-corner">
          <span>{(corner[0] && !String(corner[0]).startsWith('§')) ? corner[0] : ''}</span>
          <span>{corner[1]}</span>
        </div>
      )}
      {children}
      {!isReal && (
        <div className="photo-meta">
          <span className="photo-tag">{tag || 'PHOTO · TBD'}</span>
          {caption && <span className="photo-caption">{caption}</span>}
        </div>
      )}
    </div>
  );
}

/* Closing CTA band — reused on most pages */
function ClosingCTA({ headline, subhead, primary, secondary }) {
  return (
    <section className="on-dark section" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Topographic motif */}
      <svg
        aria-hidden="true"
        viewBox="0 0 1600 600"
        preserveAspectRatio="none"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.07 }}
      >
        {Array.from({ length: 14 }, (_, i) => (
          <path
            key={i}
            d={`M0 ${80 + i * 40} Q 400 ${30 + i * 40} 800 ${90 + i * 40} T 1600 ${50 + i * 40}`}
            stroke="#F5F2EC"
            strokeWidth="1"
            fill="none"
          />
        ))}
      </svg>
      <div className="container" style={{ position: 'relative', textAlign: 'center', maxWidth: 880 }}>
        <SectionEyebrow text="NEXT STEP" onDark />
        <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 20, color: '#fff' }}>
          {headline}
        </h2>
        <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6, color: 'var(--slate-200)', maxWidth: 680, marginInline: 'auto' }}>
          {subhead}
        </p>
        <div style={{ marginTop: 40, display: 'inline-flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
          <Link to={primary.to} className="btn btn-primary">{primary.label} <span className="arrow">→</span></Link>
          <Link to={secondary.to} className="btn btn-ghost-dark">{secondary.label} <span className="arrow">→</span></Link>
        </div>
      </div>
    </section>
  );
}

/* Cross-link band — used on product/platform pages */
function CrossLinkBand({ title, body, links }) {
  return (
    <section className="on-dark" style={{ borderTop: '1px solid rgba(255,255,255,0.06)', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
      <div className="container" style={{ paddingBlock: 80, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <SectionEyebrow text="THE INTELLIGENCE LAYER" onDark />
          <h3 style={{ fontSize: 32, marginTop: 16, color: '#fff', maxWidth: 24 + 'ch' }}>{title}</h3>
          <p style={{ marginTop: 18, color: 'var(--slate-200)', maxWidth: '52ch' }}>{body}</p>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
          {links.map((l) => (
            <Link key={l.to} to={l.to} className="chip chip-solid" style={{ color: 'var(--slate-100)', padding: '10px 14px' }}>
              {l.label} <span style={{ marginLeft: 6, color: 'var(--amber)' }}>→</span>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionEyebrow, SectionHead, PhotoSlot, ClosingCTA, CrossLinkBand });