// AlignSpace landing — Hero
function Hero() {
  const { Button, SectionLabel } = window.AlignSpaceDesignSystem_d3d6d6;
  return (
    <section id="top" style={{ position: 'relative', background: 'var(--as-navy)', overflow: 'hidden' }}>
      {/* low-opacity axonometric drawing — the signature treatment */}
      <div style={{ position: 'absolute', inset: 0 }}>
        <img src="../../assets/banners/Banner03_Kitchen.png" alt="" aria-hidden="true"
             style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.12, userSelect: 'none', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, var(--as-navy) 18%, rgba(44,62,80,0.55) 100%)' }} />
      </div>

      <div className="as-wrap as-hero-content" style={{ position: 'relative' }}>
        <SectionLabel onDark>Toronto · York Region · GTA</SectionLabel>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display)', lineHeight: 1.02, letterSpacing: 'var(--tracking-tight)', color: 'var(--as-mist)', margin: '28px 0 0', maxWidth: '15ch' }}>
          Your Kitchen Layout, Solved as a System.
        </h1>
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-on-dark-muted)', maxWidth: '60ch', margin: '28px 0 0' }}>
          AlignSpace is a computational fabrication practice. We model your kitchen against appliance clearances, workflow triangles and door-swing radii — then resolve the layout in real time. Start with a free parametric audit; bring it to a working session when you are ready.
        </p>
        <div style={{ display: 'flex', gap: '16px', marginTop: '40px', flexWrap: 'wrap' }}>
          <Button variant="primary" onDark size="lg" href="#intake" iconRight={<i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>}>Request Free Layout Audit</Button>
          <Button variant="secondary" onDark size="lg" href="#offer">See What You Get</Button>
        </div>

        {/* spec ribbon */}
        <div style={{ display: 'flex', gap: '40px', marginTop: '64px', flexWrap: 'wrap' }}>
          {[['01', 'Free parametric audit'], ['48h', 'PDF turnaround'], ['±1mm', 'Finish tolerance'], ['$500', '2-hour design session']].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '22px', color: 'var(--as-mist)', fontVariantNumeric: 'tabular-nums' }}>{k}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-on-dark-muted)' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;