function Hero({ onNavigate }) {
  const { Button, SwirlArc, ArchFrame, Reveal } = window;

  return (
    <section className="calmaeta-hero" style={{
      position: 'relative',
      background: 'var(--color-perla)',
      paddingTop: '72px',
      overflow: 'hidden',
    }}>
      {/* Text side */}
      <div className="calmaeta-hero-text" style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        position: 'relative', zIndex: 2,
      }}>
        <Reveal delay={0}>
          <div style={{
            fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--color-terracota)', marginBottom: '28px',
          }}>
            Social Coffee · Picanya
          </div>
        </Reveal>

        <Reveal delay={80}>
          <h1 style={{
            fontFamily: 'var(--font-primary)', fontSize: 'clamp(40px, 9vw, 72px)', fontWeight: 300,
            letterSpacing: '-0.03em', lineHeight: 1.05,
            color: 'var(--color-negro)', margin: '0 0 28px 0',
          }}>
            Café de<br />especialidad,<br /><span style={{ color: 'var(--color-terracota)', fontWeight: 600 }}>con calma.</span>
          </h1>
        </Reveal>

        <Reveal delay={160}>
          <p style={{
            fontFamily: 'var(--font-primary)', fontSize: '16px', fontWeight: 400,
            lineHeight: 1.7, color: 'var(--color-text-muted)',
            maxWidth: '380px', margin: '0 0 48px 0',
          }}>
            La primera cafetería de especialidad de Picanya. Un rincón para
            desconectar del ritmo de cada día.
          </p>
        </Reveal>

        <Reveal delay={240}>
          <div style={{ display: 'flex', gap: '20px', alignItems: 'center', flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" onClick={() => onNavigate('carta')}>Ver menú</Button>
            <Button variant="text" href="https://www.google.com/maps/dir/?api=1&destination=Av.+l%27Horta+27%2C+46210+Picanya%2C+Valencia%2C+Spain" style={{ textDecoration: 'none' }}>Cómo llegar →</Button>
          </div>
        </Reveal>

        {/* Bottom meta strip */}
        <Reveal delay={320} style={{ marginTop: 'auto', paddingTop: '64px' }}>
          <div style={{ display: 'flex', gap: '48px', flexWrap: 'wrap' }}>
            {[
              { label: 'Origen', value: 'Café de especialidad' },
              { label: 'Abierto', value: 'Martes a domingo' },
              { label: 'Dónde', value: 'Picanya, Valencia' },
            ].map(({ label, value }) => (
              <div key={label}>
                <div style={{ fontFamily: 'var(--font-primary)', fontSize: '10px', fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--color-text-muted)', marginBottom: '4px' }}>{label}</div>
                <div style={{ fontFamily: 'var(--font-primary)', fontSize: '13px', fontWeight: 400, color: 'var(--color-text)' }}>{value}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      {/* Image side — arch-framed interior shot with swirl accents */}
      <div className="calmaeta-hero-image-col" style={{
        position: 'relative',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {/* Large azul ring peeking from behind, top-right */}
        <SwirlArc
          className="calmaeta-hero-swirl"
          size={340} color="var(--color-azul)" strokeWidth={3} arc={1}
          style={{ position: 'absolute', top: '20px', right: '20px', zIndex: 0, opacity: 0.9 }}
        />
        {/* Solid terracota circle accent, bottom-left of image */}
        <div className="calmaeta-hero-accent-dot" style={{
          position: 'absolute', bottom: '30px', left: '-30px',
          width: '150px', height: '150px', borderRadius: '50%',
          background: 'var(--color-terracota)', zIndex: 3,
        }} />

        <Reveal delay={120} y={40} style={{ width: '100%', maxWidth: '560px', zIndex: 2 }}>
          <ArchFrame
            src="assets/images/interior-wide-1.webp"
            alt="Interior de Calmaeta, Picanya"
            archDepth={0.16}
            style={{ width: '100%', height: 'clamp(280px, 55vw, 620px)', boxShadow: '0 24px 60px -20px rgba(35,31,32,0.35)' }}
          />
        </Reveal>

        <span style={{
          position: 'absolute', bottom: '20px', right: '76px', zIndex: 4,
          fontFamily: 'var(--font-primary)', fontSize: '10px', fontWeight: 600,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.85)', mixBlendMode: 'difference',
        }}>
          El espacio · Picanya
        </span>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });