const { Button, BathymetricLines } = window.ECPSDesignSystem_a74b4a;

function Hero({ onNavigate }) {
  const { compact } = window.useViewport();
  // Left-to-right legibility ramp over the image so white type holds on the
  // left while the image shows through on the right. Token-based (color-mix on
  // Deep Tide), no hardcoded hex. On mobile the layout stacks and text spans
  // the full frame, so the gradient covers more width at a higher floor.
  const grad = compact
    ? 'linear-gradient(to right, color-mix(in srgb, var(--ecps-deep-tide) 92%, transparent) 0%, color-mix(in srgb, var(--ecps-deep-tide) 40%, transparent) 100%)'
    : 'linear-gradient(to right, color-mix(in srgb, var(--ecps-deep-tide) 90%, transparent) 0%, color-mix(in srgb, var(--ecps-deep-tide) 15%, transparent) 70%)';
  return (
    <section id="top" className="ecps-photo" style={{ position: 'relative', overflow: 'hidden', background: 'var(--ecps-deep-tide)' }}>
      {/* full-bleed image behind everything; .ecps-photo carries the 18% Deep Tide multiply */}
      <img src="assets/hero.jpg" alt="Aerial view of a coastline from directly above." style={{ position: 'absolute', inset: 0, zIndex: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', borderRadius: 0, display: 'block' }} />
      <div style={{ position: 'absolute', inset: 0, background: grad, pointerEvents: 'none' }} />

      <div style={{ position: 'relative', zIndex: 1, maxWidth: 'var(--ecps-max-width)', margin: '0 auto', padding: 'var(--ecps-section-y) var(--ecps-gutter)', display: 'flex', flexDirection: 'column', gap: compact ? 32 : 44 }}>
        {/* full-width headline group: eyebrow + H1 span the whole content width so the H1 renders two clean lines at display size */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          <div style={{ fontFamily: 'var(--ecps-font-mono)', fontSize: 'var(--ecps-fs-eyebrow)', fontWeight: 600, letterSpacing: 'var(--ecps-ls-eyebrow)', textTransform: 'uppercase', color: 'var(--ecps-tidal)' }}>Environmental &amp; Cultural-Site Protection System</div>
          <h1 style={{ margin: 0, fontFamily: 'var(--ecps-font-display)', fontSize: 'var(--ecps-fs-display)', fontWeight: 300, letterSpacing: 'var(--ecps-ls-display)', lineHeight: 'var(--ecps-lh-display)', color: 'var(--ecps-shell)', textWrap: 'balance' }}>Every violation caught.<br />Every offender identified.</h1>
        </div>
        {/* lede, thesis and buttons in the left column; zone/bathymetric panel in the right */}
        <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : '1.15fr .85fr', gap: compact ? 32 : 56, alignItems: compact ? 'start' : 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <p style={{ margin: 0, fontFamily: 'var(--ecps-font-display)', fontSize: 'var(--ecps-fs-lede)', fontWeight: 300, letterSpacing: 'var(--ecps-ls-lede)', lineHeight: 'var(--ecps-lh-lede)', color: 'var(--ecps-text-on-dark-muted)', maxWidth: 'var(--ecps-measure-lede)', textWrap: 'pretty' }}>Automated enforcement for national parks, marine reserves, and heritage sites. From boundary crossing to logged consequence, with no bystander required.</p>
            <div style={{ borderLeft: '3px solid var(--ecps-tidal)', paddingLeft: 18, fontFamily: 'var(--ecps-font-display)', fontWeight: 300, fontSize: 20, lineHeight: 1.4, letterSpacing: 'var(--ecps-ls-lede)', color: 'var(--ecps-shell)', textWrap: 'pretty' }}>Certainty of being caught changes behavior. Severity of punishment does not.</div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="primary" onClick={() => onNavigate('#pilot')}>Request a briefing</Button>
              <Button variant="secondary" onDark onClick={() => onNavigate('#system')}>See the system</Button>
            </div>
          </div>
          {/* zone + bathymetric panel, with a semi-transparent Deep Tide backing so it stays legible over the bright sand and rock */}
          <div style={{ background: 'color-mix(in srgb, var(--ecps-deep-tide) 60%, transparent)', border: '1px solid var(--ecps-rule-on-dark)', padding: '22px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ fontFamily: 'var(--ecps-font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '1px', color: 'var(--ecps-tidal)' }}>ZONE 04 · MARINE RESERVE · 36.5177,−121.9506</div>
            <BathymetricLines lines={4} threshold="34%" />
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });