/* Corsa Privata — hero. Light atelier surface. Disciplined display type carries
 * the moment; a graphite "Circuit" panel and a thin gold contour line provide the
 * crisp focal visual. Low-res brand photography appears only as blurred atmosphere. */
const { Eyebrow, Button, Divider } = window.CorsaPrivataDesignSystem_94a5c9;
const HeroIcon = window.Icon;
const HeroTrack = window.TrackLine;
const HeroDots = window.DotGrid;

function Hero({ go, t }) {
  const h = t.hero;
  const proofIcons = ['drafting-compass', 'compass', 'route'];

  return (
    <section id="top" style={{ position: 'relative', background: 'var(--surface-page)', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, backgroundImage: 'var(--gradient-gold)', opacity: 0.8 }} />
      <HeroDots rows={6} cols={7} style={{ position: 'absolute', top: 132, left: 40, opacity: 0.5 }} />

      <div
        className="cp-hero-grid"
        style={{
          position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto',
          padding: '150px 32px 72px', display: 'grid',
          gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center',
        }}
      >
        <div className="cp-hero-copy">
          <div className="cp-reveal"><Eyebrow tone="gold">{h.eyebrow}</Eyebrow></div>
          <h1 className="cp-reveal cp-hero-h1" style={{
            fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)',
            fontSize: 'clamp(44px, 6.2vw, 82px)', lineHeight: 0.98, letterSpacing: '-0.03em',
            margin: '18px 0 0', color: 'var(--text-strong)', textWrap: 'balance',
          }}>
            {h.h1a}<br />{h.h1b}
          </h1>
          <p className="cp-reveal" style={{
            fontFamily: 'var(--font-body)', fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.62,
            color: 'var(--text-body)', margin: '26px 0 0', maxWidth: 500, textWrap: 'pretty',
          }}>
            {h.sub}
          </p>
          <div className="cp-reveal cp-hero-cta" style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
            <Button size="lg" onClick={() => go('begin')}>{h.ctaPrimary}</Button>
            <Button size="lg" variant="secondary" onClick={() => go('configure')}>{h.ctaSecondary}</Button>
          </div>

          <div className="cp-reveal cp-hero-proof" style={{ display: 'flex', alignItems: 'center', gap: 22, marginTop: 44, flexWrap: 'wrap' }}>
            {h.proof.map((label, i) => (
              <React.Fragment key={label}>
                {i > 0 && <span style={{ width: 1, height: 22, background: 'var(--border-default)' }} />}
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
                  <HeroIcon name={proofIcons[i]} size={16} stroke={1.6} color="var(--cp-gold-700)" />
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 11.5, fontWeight: 'var(--fw-medium)', textTransform: 'uppercase', letterSpacing: 'var(--ls-wide)', color: 'var(--text-muted)' }}>{label}</span>
                </span>
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="cp-reveal cp-hero-panel" style={{ position: 'relative' }}>
          {/* The Circuit at rest in a dark studio: the square hero render (already
            * atmospheric), with only a whisper of grading on top. */}
          <div className="cp-dark" style={{
            position: 'relative', borderRadius: 'var(--radius-md)', overflow: 'hidden',
            background: 'linear-gradient(160deg, #1B1F23 0%, #101214 100%)',
            border: '1px solid rgba(255,255,255,0.08)', boxShadow: 'var(--shadow-lg)',
            aspectRatio: '1 / 1',
          }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, backgroundImage: 'var(--gradient-gold)', opacity: 0.55, zIndex: 2 }} />
            <img src="assets/hero-circuit.jpg" alt={h.panel.caption}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }} />
            {/* grading: a kiss of warm light, a little more shadow at the base */}
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 85% at 20% 6%, rgba(211,188,141,0.10), transparent 55%)' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,11,12,0) 68%, rgba(10,11,12,0.38) 100%)' }} />
          </div>

          {/* labels live below the image, never overlaid on the product photo */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 10.5, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-widest)', textTransform: 'uppercase', color: 'var(--cp-gold-700)' }}>{h.panel.tag}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-display)', fontSize: 10, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
              <span className="cp-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--cp-success)' }} />
              {h.panel.status}
            </span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 14 }}>
            {h.panel.specs.map((s) => (
              <div key={s.k} style={{ borderTop: '1px solid var(--border-hairline)', paddingTop: 12 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-semibold)', fontSize: 15, color: 'var(--text-strong)', letterSpacing: '-0.01em' }}>{s.v}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 9.5, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 5 }}>{s.k}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 16, fontFamily: 'var(--font-body)', fontSize: 12.5, lineHeight: 1.5, color: 'var(--text-muted)' }}>
            {h.panel.caption}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;