function Space() {
  const { ArchFrame, CircleFrame, SwirlArc, Reveal, HoverImage, Carousel } = window;

  return (
    <section id="espacio" style={{ background: 'var(--color-perla)', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div className="calmaeta-container" style={{ maxWidth: '1160px', margin: '0 auto' }}>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '56px', gap: '24px', flexWrap: 'wrap' }}>
          <Reveal>
            <div>
              <div style={{
                fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'var(--color-terracota)', marginBottom: '12px',
              }}>El espacio</div>
              <h2 style={{
                fontFamily: 'var(--font-primary)', fontSize: '48px', fontWeight: 300,
                letterSpacing: '-0.02em', lineHeight: 1.15,
                color: 'var(--color-negro)', margin: 0, maxWidth: '480px',
              }}>Un rincón en Picanya para quedarse.</h2>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <p style={{
              fontFamily: 'var(--font-primary)', fontSize: '15px', fontWeight: 400,
              lineHeight: 1.65, color: 'var(--color-text-muted)', maxWidth: '340px', margin: 0,
            }}>
              Madera cálida, luz suave y tonos tierra. Un espacio pensado para
              sentarse, charlar y bajar el ritmo.
            </p>
          </Reveal>
        </div>

        <div className="calmaeta-space-grid" style={{ position: 'relative' }}>
          <SwirlArc
            size={180} color="var(--color-azul)" strokeWidth={3} arc={0.65} rotate={40}
            style={{ position: 'absolute', top: '10px', left: '38%', zIndex: 0 }}
          />

          <Reveal delay={0} y={36} style={{ position: 'relative', zIndex: 1 }}>
            <ArchFrame
              src="assets/images/interior-orange-wall.webp"
              alt="Zona de mesas de Calmaeta, con pared terracota"
              archDepth={0.14}
              style={{ height: 'clamp(280px, 45vw, 520px)' }}
            />
          </Reveal>

          <Reveal delay={120} y={36} style={{ display: 'flex', flexDirection: 'column', gap: '32px', position: 'relative', zIndex: 1 }}>
            <HoverImage src="assets/images/interior-counter.webp" alt="Barra de Calmaeta" style={{ height: 'clamp(180px, 22vw, 244px)', borderRadius: 'var(--radius-lg)' }} />
            <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
              <CircleFrame src="assets/images/interior-detail-lamp.webp" alt="Detalle de mesa" size={116} fluid className="calmaeta-space-detail-circle" />
              <div style={{
                width: 'clamp(80px, 10vw, 116px)', height: 'clamp(80px, 10vw, 116px)', borderRadius: '50%',
                background: 'var(--color-terracota)', flexShrink: 0,
              }} />
            </div>
          </Reveal>

          <Reveal delay={240} y={36} style={{ position: 'relative', zIndex: 1 }}>
            <HoverImage src="assets/images/interior-detail-tile.webp" alt="Detalle de la barra de azulejos" style={{ height: 'clamp(280px, 45vw, 520px)', borderRadius: 'var(--radius-lg)' }} />
          </Reveal>
        </div>

        <Credits />

        <Reveal delay={80} y={32}>
          <Carousel
            alt="El espacio de Calmaeta"
            style={{ borderRadius: 'var(--radius-lg)', height: 'clamp(260px, 45vw, 480px)', marginTop: '56px', boxShadow: 'var(--shadow-md)' }}
            images={[
              'assets/images/space-counter-menu-portrait.webp',
              'assets/images/space-tile-detail.webp',
              'assets/images/space-side-table-flowers.webp',
              'assets/images/space-chairs-table.webp',
              'assets/images/space-corner-tables.webp',
              'assets/images/space-laptop-table.webp',
              'assets/images/space-shelf-orange-wall.webp',
              'assets/images/space-counter-menu-wide.webp',
              'assets/images/space-orange-room.webp',
            ]}
          />
        </Reveal>
      </div>
    </section>
  );
}

function CreditCard({ logo, logoAlt, logoWidth, name, role, description, linkLabel, href }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-primary)', fontSize: '10px', fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--color-terracota)', marginBottom: '14px' }}>{role}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '18px', marginBottom: '16px', flexWrap: 'wrap' }}>
        <img src={logo} alt={logoAlt} style={{ width: logoWidth, height: 'auto', display: 'block' }} />
        <span style={{ fontFamily: 'var(--font-primary)', fontSize: '17px', fontWeight: 600, color: 'var(--color-negro)' }}>{name}</span>
      </div>
      <p style={{ fontFamily: 'var(--font-primary)', fontSize: '14px', fontWeight: 400, lineHeight: 1.6, color: 'var(--color-text-muted)', margin: '0 0 10px 0', maxWidth: '360px' }}>{description}</p>
      <a href={href} target="_blank" rel="noreferrer" style={{ fontFamily: 'var(--font-primary)', fontSize: '12px', fontWeight: 600, letterSpacing: '0.06em', color: 'var(--color-azul)', textDecoration: 'none' }}>{linkLabel} ↗</a>
    </div>
  );
}

function Credits() {
  return (
    <Reveal delay={80} y={24}>
      <div style={{ marginTop: '64px', paddingTop: '48px', borderTop: 'var(--border-thin)' }}>
        <div style={{ fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-text-muted)', marginBottom: '32px' }}>Detrás del espacio</div>
        <div className="calmaeta-space-credits-grid">
          <CreditCard
            logo="assets/images/logo-noura-estudio.png" logoAlt="Noura Estudio" logoWidth={150}
            role="Diseño de espacio"
            name="Noura Estudio"
            description="Dieron forma a cada rincón de Calmaeta: madera cálida, luz suave y tonos tierra, pensados para quedarse."
            linkLabel="nouraestudio.es"
            href="https://nouraestudio.es/"
          />
          <CreditCard
            logo="assets/images/logo-maria-mira.svg" logoAlt="María Mira" logoWidth={120}
            role="Fotografía"
            name="María Mira"
            description="Retrató el espacio, el café y cada instante de Calmaeta con luz natural y calma."
            linkLabel="mariamira.es"
            href="https://www.mariamira.es/"
          />
        </div>
      </div>
    </Reveal>
  );
}

Object.assign(window, { Space });