/* Paragmatiq shared UI primitives, distinct from Paragmatiq. */

function SectionEyebrow({ text, onDark = false }) {
  return (
    <div className={'eyebrow ' + (onDark ? 'on-dark' : '')}>
      <span>{text}</span>
    </div>
  );
}

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

/* Replaces PhotoSlot, wraps the Blueprint SVG library with sensible defaults */
function Plate({ kind = 'generic', light = false, ratio = '16/9', tag, corner = ['', ''], viewBox, style = {}, children }) {
  return (
    <BlueprintIllustration
      kind={kind}
      light={light}
      tag={tag}
      corner={corner}
      viewBox={viewBox}
      style={{ aspectRatio: ratio, ...style }}
    >
      {children}
    </BlueprintIllustration>
  );
}

/* Closing CTA, large gold/navy band with a single oversized line of copy */
function ClosingCTA({ headline, subhead, primary, secondary }) {
  return (
    <section className="on-navy" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Decorative grid */}
      <svg aria-hidden="true" viewBox="0 0 1400 600" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18 }}>
        {Array.from({ length: 20 }).map((_, i) => (
          <line key={'h' + i} x1="0" y1={i * 32} x2="1400" y2={i * 32} stroke="rgba(122,201,209,0.40)" strokeWidth="0.5" />
        ))}
        {Array.from({ length: 44 }).map((_, i) => (
          <line key={'v' + i} x1={i * 32} y1="0" x2={i * 32} y2="600" stroke="rgba(122,201,209,0.40)" strokeWidth="0.5" />
        ))}
      </svg>
      <div className="container" style={{ position: 'relative', paddingBlock: 128 }}>
        <SectionEyebrow text="NEXT STEP" onDark />
        <h2 style={{ fontSize: 'clamp(48px, 6vw, 88px)', marginTop: 24, color: 'var(--paper)', maxWidth: '22ch', fontWeight: 800, letterSpacing: '-0.04em' }}>
          {headline}
        </h2>
        <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.6, color: 'var(--bone-3)', maxWidth: '64ch' }}>
          {subhead}
        </p>
        <div style={{ marginTop: 48, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <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-navy" style={{ borderTop: '1px solid var(--navy-line)', borderBottom: '1px solid var(--navy-line)' }}>
      <div className="container" style={{ paddingBlock: 96, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <SectionEyebrow text="THE INTELLIGENCE LAYER" onDark />
          <h3 style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginTop: 18, color: 'var(--paper)', maxWidth: 24 + 'ch', fontWeight: 700 }}>{title}</h3>
          <p style={{ marginTop: 18, color: 'var(--bone-3)', maxWidth: '52ch' }}>{body}</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, border: '1px solid var(--navy-line-2)' }}>
          {links.map((l, i) => (
            <Link key={l.to} to={l.to} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '20px 24px',
              borderBottom: i < links.length - 1 ? '1px solid var(--navy-line)' : 'none',
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--bone)',
              textTransform: 'uppercase', letterSpacing: '0.04em',
              transition: 'background 0.15s ease',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(201,161,74,0.06)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
            >
              {l.label}
              <span style={{ color: 'var(--gold)', fontFamily: 'var(--font-mono)' }}>→</span>
            </Link>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          section.on-navy > .container[style*="grid-template-columns: 1.2fr 1fr"] {
            grid-template-columns: 1fr !important; gap: 32px !important;
            padding-block: 64px !important;
          }
        }
      `}</style>
    </section>
  );
}

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