// Demo 2 — Barbería El Maestro · Puerto de Sagunto
// Vibe: masculine, artisan, premium. Accent: amber/gold #F59E0B.

const BARB_BG = '#0E0E10';
const BARB_PANEL = '#15151A';
const BARB_GOLD = '#F59E0B';
const BARB_GOLD_DIM = '#B97704';
const BARB_FG = '#F5F1E8';
const BARB_MUTED = '#8A8378';

// ── Before/After style card ─────────────────────────────────
function StyleCard({ name, kind, idx, large = false }) {
  const [hover, setHover] = React.useState(false);
  // pseudo-randomize stripe rotation
  const rot = (idx * 23) % 90;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        height: large ? 360 : 240,
        borderRadius: 6,
        overflow: 'hidden',
        cursor: 'pointer',
        background: '#1c1c20',
        border: `1px solid ${hover ? BARB_GOLD : '#26252A'}`,
        transition: 'border-color .25s',
      }}
    >
      {/* before/after side-by-side, slid by hover */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'grid', gridTemplateColumns: '1fr 1fr',
      }}>
        {/* Before */}
        <div style={{
          position: 'relative',
          background: '#26252A',
          overflow: 'hidden',
        }}>
          <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.7 }}>
            <defs>
              <pattern id={`bbef${idx}`} patternUnits="userSpaceOnUse" width="9" height="9" patternTransform={`rotate(${rot})`}>
                <rect width="9" height="9" fill="#26252A"/>
                <line x1="0" y1="0" x2="0" y2="9" stroke="#3A3833" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill={`url(#bbef${idx})`}/>
          </svg>
          <div style={{
            position: 'absolute', top: 10, left: 10,
            fontFamily: 'ui-monospace, monospace',
            fontSize: 9, fontWeight: 600,
            letterSpacing: '0.14em',
            color: BARB_MUTED,
            textTransform: 'uppercase',
          }}>antes</div>
        </div>
        {/* After */}
        <div style={{
          position: 'relative',
          background: '#1a1814',
          overflow: 'hidden',
        }}>
          <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.55 }}>
            <defs>
              <pattern id={`bbaft${idx}`} patternUnits="userSpaceOnUse" width="11" height="11" patternTransform={`rotate(${rot + 30})`}>
                <rect width="11" height="11" fill="#1a1814"/>
                <line x1="0" y1="0" x2="0" y2="11" stroke={BARB_GOLD} strokeWidth="0.6" opacity="0.45"/>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill={`url(#bbaft${idx})`}/>
          </svg>
          <div style={{
            position: 'absolute', top: 10, right: 10,
            fontFamily: 'ui-monospace, monospace',
            fontSize: 9, fontWeight: 700,
            letterSpacing: '0.14em',
            color: BARB_GOLD,
            textTransform: 'uppercase',
          }}>después</div>
        </div>
      </div>

      {/* sweeping reveal — covers the right half by default, retracts on hover */}
      <div style={{
        position: 'absolute',
        top: 0, bottom: 0,
        left: hover ? '100%' : '50%',
        right: 0,
        background: '#26252A',
        transition: 'left .55s cubic-bezier(.7,.05,.3,1)',
        boxShadow: 'inset 4px 0 0 #1a1814',
      }}>
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.7 }}>
          <rect width="100%" height="100%" fill={`url(#bbef${idx})`}/>
        </svg>
        <div style={{
          position: 'absolute', top: 10, left: 10,
          fontFamily: 'ui-monospace, monospace',
          fontSize: 9, fontWeight: 600, letterSpacing: '0.14em',
          color: BARB_MUTED, textTransform: 'uppercase',
        }}>antes</div>
      </div>

      {/* Splitter line */}
      <div style={{
        position: 'absolute',
        top: 0, bottom: 0,
        left: hover ? 'calc(100% - 1px)' : 'calc(50% - 1px)',
        width: 2,
        background: BARB_GOLD,
        transition: 'left .55s cubic-bezier(.7,.05,.3,1)',
        boxShadow: `0 0 12px ${BARB_GOLD}55`,
      }}>
        <div style={{
          position: 'absolute', top: '50%', left: '50%',
          transform: 'translate(-50%,-50%)',
          width: 26, height: 26, borderRadius: '50%',
          background: BARB_GOLD,
          color: '#0E0E10',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 800, fontSize: 11,
        }}>↔</div>
      </div>

      {/* Caption */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, bottom: 0,
        padding: '18px 16px 14px',
        background: 'linear-gradient(to top, rgba(0,0,0,0.85), transparent)',
        zIndex: 2,
      }}>
        <div style={{
          fontSize: 10, color: BARB_GOLD, letterSpacing: '0.16em',
          textTransform: 'uppercase', fontWeight: 700, marginBottom: 4,
        }}>{kind}</div>
        <div style={{
          fontFamily: 'Plus Jakarta Sans, serif',
          fontSize: large ? 22 : 17, fontWeight: 700, color: BARB_FG,
          letterSpacing: '-0.01em',
        }}>{name}</div>
      </div>
    </div>
  );
}

// ── Barber portrait placeholder ─────────────────────────────
function BarberPortrait({ height = 480 }) {
  return (
    <div style={{
      position: 'relative', height,
      background: '#1a1814',
      overflow: 'hidden',
    }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id="brbst" patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(8)">
            <rect width="14" height="14" fill="#1a1814"/>
            <line x1="0" y1="0" x2="0" y2="14" stroke={BARB_GOLD} strokeWidth="0.5" opacity="0.4"/>
            <line x1="7" y1="0" x2="7" y2="14" stroke="#3A3833" strokeWidth="0.5"/>
          </pattern>
          <radialGradient id="brbvig" cx="50%" cy="40%" r="65%">
            <stop offset="0%" stopColor="rgba(0,0,0,0)"/>
            <stop offset="100%" stopColor="rgba(0,0,0,0.85)"/>
          </radialGradient>
        </defs>
        <rect width="100%" height="100%" fill="url(#brbst)"/>
        <rect width="100%" height="100%" fill="url(#brbvig)"/>
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column', gap: 6,
        color: BARB_GOLD,
      }}>
        <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, opacity: 0.7 }}>[ barbero.maestro.jpg ]</div>
      </div>
    </div>
  );
}

// ── Booking embed ───────────────────────────────────────────
function BookingEmbed({ compact = false }) {
  const [service, setService] = React.useState('Corte + barba');
  const [day, setDay] = React.useState(2);
  const [time, setTime] = React.useState('18:30');

  const services = [
    { name: 'Corte clásico', price: '18€', dur: '30 min' },
    { name: 'Corte + barba', price: '28€', dur: '45 min' },
    { name: 'Afeitado a navaja', price: '22€', dur: '40 min' },
    { name: 'Ritual completo', price: '45€', dur: '75 min' },
  ];
  const days = [
    { d: 'Lun', n: '27' }, { d: 'Mar', n: '28' }, { d: 'Mié', n: '29' },
    { d: 'Jue', n: '30' }, { d: 'Vie', n: '01' }, { d: 'Sáb', n: '02' },
  ];
  const times = ['10:00', '11:30', '13:00', '17:00', '18:30', '20:00'];

  return (
    <div style={{
      background: BARB_PANEL,
      border: '1px solid #26252A',
      borderRadius: 4,
      padding: compact ? 20 : 32,
      color: BARB_FG,
      fontFamily: 'Plus Jakarta Sans, sans-serif',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        borderBottom: `1px solid #26252A`, paddingBottom: 14, marginBottom: 18,
      }}>
        <div>
          <div style={{ fontSize: 10, color: BARB_GOLD, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 4 }}>— Reserva</div>
          <div style={{ fontSize: compact ? 18 : 22, fontWeight: 800, letterSpacing: '-0.01em' }}>Asegura tu silla</div>
        </div>
        <div style={{
          fontSize: 10, color: BARB_MUTED, letterSpacing: '0.1em', textTransform: 'uppercase',
        }}>Paso {service ? (day != null ? (time ? '3' : '2') : '2') : '1'} / 3</div>
      </div>

      {/* Service */}
      <div style={{ fontSize: 11, color: BARB_MUTED, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 10 }}>01 · Servicio</div>
      <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr 1fr' : 'repeat(2, 1fr)', gap: 8, marginBottom: 22 }}>
        {services.map(s => (
          <button key={s.name} onClick={() => setService(s.name)} style={{
            textAlign: 'left',
            background: service === s.name ? '#1f1d18' : 'transparent',
            border: `1px solid ${service === s.name ? BARB_GOLD : '#26252A'}`,
            color: BARB_FG, fontFamily: 'inherit',
            padding: '10px 12px', cursor: 'pointer',
            borderRadius: 3,
          }}>
            <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 2 }}>{s.name}</div>
            <div style={{ fontSize: 11, color: BARB_MUTED }}>{s.dur} · <span style={{ color: BARB_GOLD }}>{s.price}</span></div>
          </button>
        ))}
      </div>

      {/* Day */}
      <div style={{ fontSize: 11, color: BARB_MUTED, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 10 }}>02 · Día</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6, marginBottom: 22 }}>
        {days.map((x, i) => (
          <button key={i} onClick={() => setDay(i)} style={{
            textAlign: 'center', padding: '10px 0',
            background: day === i ? BARB_GOLD : 'transparent',
            color: day === i ? '#0E0E10' : BARB_FG,
            border: `1px solid ${day === i ? BARB_GOLD : '#26252A'}`,
            cursor: 'pointer', fontFamily: 'inherit',
            borderRadius: 3,
          }}>
            <div style={{ fontSize: 9, opacity: 0.7, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{x.d}</div>
            <div style={{ fontSize: 15, fontWeight: 800 }}>{x.n}</div>
          </button>
        ))}
      </div>

      {/* Time */}
      <div style={{ fontSize: 11, color: BARB_MUTED, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 10 }}>03 · Hora</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 22 }}>
        {times.map(t => (
          <button key={t} onClick={() => setTime(t)} style={{
            padding: '10px 0',
            background: time === t ? '#1f1d18' : 'transparent',
            color: time === t ? BARB_GOLD : BARB_FG,
            border: `1px solid ${time === t ? BARB_GOLD : '#26252A'}`,
            cursor: 'pointer', fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
            borderRadius: 3,
          }}>{t}</button>
        ))}
      </div>

      <button style={{
        width: '100%', padding: '14px 0',
        background: BARB_GOLD, color: '#0E0E10',
        border: 'none', cursor: 'pointer',
        fontFamily: 'inherit', fontSize: 13, fontWeight: 800,
        letterSpacing: '0.08em', textTransform: 'uppercase',
        borderRadius: 3,
      }}>Confirmar — {service} · {days[day].d} {days[day].n} · {time}</button>
    </div>
  );
}

// ── Desktop ─────────────────────────────────────────────────
function BarberDesktop() {
  const styles = [
    { name: 'Pompadour', kind: 'Clásico' },
    { name: 'Mid Fade', kind: 'Moderno' },
    { name: 'Buzz Cut', kind: 'Limpio' },
    { name: 'Crop francés', kind: 'Texturizado' },
    { name: 'Afeitado tradicional', kind: 'Navaja' },
    { name: 'Barba esculpida', kind: 'Barba' },
  ];
  return (
    <div style={{
      width: 1440, minHeight: 900,
      background: BARB_BG,
      color: BARB_FG,
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Nav */}
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '24px 64px',
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 5,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {/* Barber pole mark */}
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: `repeating-linear-gradient(45deg, ${BARB_GOLD} 0 4px, ${BARB_FG} 4px 8px, #0E0E10 8px 12px)`,
            border: `2px solid ${BARB_FG}`,
          }}/>
          <div>
            <div style={{ fontSize: 14, fontWeight: 800, letterSpacing: '0.04em' }}>EL MAESTRO</div>
            <div style={{ fontSize: 9, color: BARB_GOLD, letterSpacing: '0.22em', textTransform: 'uppercase' }}>Barbería · est. 2014</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 36, fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          {['Servicios', 'Galería', 'Equipo', 'Reservar'].map(l => <span key={l} style={{ cursor: 'pointer' }}>{l}</span>)}
        </div>
        <button style={{
          background: 'transparent', border: `1px solid ${BARB_GOLD}`,
          color: BARB_GOLD, fontFamily: 'inherit',
          fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
          padding: '11px 18px', cursor: 'pointer', borderRadius: 3,
        }}>Pedir cita</button>
      </nav>

      {/* Hero */}
      <section style={{ position: 'relative', height: 720 }}>
        <BarberPortrait height={720}/>
        <div style={{
          position: 'absolute',
          left: 64, bottom: 80, maxWidth: 720,
          zIndex: 2,
        }}>
          <div style={{
            fontSize: 11, color: BARB_GOLD, letterSpacing: '0.3em', textTransform: 'uppercase',
            fontWeight: 700, marginBottom: 26,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <span style={{ display: 'inline-block', width: 36, height: 1, background: BARB_GOLD }}></span>
            Puerto de Sagunto · desde 2014
          </div>
          <h1 style={{
            fontSize: 110, lineHeight: 0.92, fontWeight: 800,
            letterSpacing: '-0.04em', margin: '0 0 28px',
          }}>
            Corte de<br/>
            <span style={{ fontStyle: 'italic', fontWeight: 400, color: BARB_GOLD }}>maestro.</span>
          </h1>
          <p style={{
            fontSize: 17, color: '#C8C2B5', lineHeight: 1.55,
            maxWidth: 460, margin: '0 0 36px',
          }}>
            Tijeras, navaja y toalla caliente. La barbería tradicional valenciana, llevada a un nuevo nivel por <span style={{ color: BARB_GOLD }}>David Reverte</span>.
          </p>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <button style={{
              background: BARB_GOLD, color: '#0E0E10',
              fontFamily: 'inherit', fontSize: 12, fontWeight: 800,
              letterSpacing: '0.16em', textTransform: 'uppercase',
              padding: '16px 28px', border: 'none', cursor: 'pointer', borderRadius: 3,
            }}>Reservar silla →</button>
            <button style={{
              background: 'transparent', color: BARB_FG,
              fontFamily: 'inherit', fontSize: 12, fontWeight: 600,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              padding: '16px 0', border: 'none', cursor: 'pointer',
            }}>↓ Ver galería</button>
          </div>
        </div>
        {/* Side meta strip */}
        <div style={{
          position: 'absolute',
          right: 64, bottom: 80,
          textAlign: 'right',
          fontSize: 10, color: BARB_MUTED, letterSpacing: '0.18em', textTransform: 'uppercase',
          lineHeight: 2, zIndex: 2,
        }}>
          Ⓜ️ C/ del Mar, 27<br/>
          Puerto Sagunto<br/>
          ─<br/>
          Mar–Sáb · 9:30–20:30
        </div>
      </section>

      {/* Gallery */}
      <section style={{ padding: '90px 64px 90px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36 }}>
          <div>
            <div style={{ fontSize: 11, color: BARB_GOLD, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 10 }}>— La obra</div>
            <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.03em', margin: 0, lineHeight: 1 }}>Antes & Después</h2>
            <p style={{ fontSize: 14, color: BARB_MUTED, marginTop: 12, maxWidth: 420 }}>
              Pasa el cursor por cada pieza para descubrir la transformación.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {['Todos', 'Cortes', 'Barbas', 'Coloración'].map((t, i) => (
              <span key={t} style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',
                padding: '8px 14px',
                background: i === 0 ? BARB_GOLD : 'transparent',
                color: i === 0 ? '#0E0E10' : BARB_MUTED,
                border: i === 0 ? 'none' : '1px solid #26252A',
                borderRadius: 3, cursor: 'pointer',
              }}>{t}</span>
            ))}
          </div>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gridTemplateRows: '360px 240px',
          gap: 14,
        }}>
          <div style={{ gridColumn: 'span 3', gridRow: 'span 1' }}><StyleCard name={styles[0].name} kind={styles[0].kind} idx={0} large/></div>
          <div style={{ gridColumn: 'span 3', gridRow: 'span 1' }}><StyleCard name={styles[1].name} kind={styles[1].kind} idx={1} large/></div>
          <div style={{ gridColumn: 'span 2' }}><StyleCard name={styles[2].name} kind={styles[2].kind} idx={2}/></div>
          <div style={{ gridColumn: 'span 2' }}><StyleCard name={styles[3].name} kind={styles[3].kind} idx={3}/></div>
          <div style={{ gridColumn: 'span 2' }}><StyleCard name={styles[4].name} kind={styles[4].kind} idx={4}/></div>
        </div>
      </section>

      {/* Booking */}
      <section style={{
        padding: '0 64px 100px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
      }}>
        <div>
          <div style={{ fontSize: 11, color: BARB_GOLD, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 10 }}>— Reservar</div>
          <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 22px', lineHeight: 1 }}>
            Tres pasos.<br/>
            Una <span style={{ fontStyle: 'italic', color: BARB_GOLD, fontWeight: 400 }}>experiencia</span>.
          </h2>
          <p style={{ fontSize: 15, color: BARB_MUTED, lineHeight: 1.65, maxWidth: 420, marginBottom: 28 }}>
            Reservas confirmadas al instante por SMS. Sin colas, sin esperas, sin sorpresas.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              ['Elige tu servicio', 'Desde un corte rápido al ritual completo de 75 min.'],
              ['Pick tu maestro', 'Reserva con David, Sergio o Iván — o el primero disponible.'],
              ['Llega y siéntate', 'Café o cerveza de cortesía mientras te atendemos.'],
            ].map((row, i) => (
              <div key={i} style={{ display: 'flex', gap: 18, paddingBottom: 14, borderBottom: '1px solid #1F1E22' }}>
                <div style={{
                  fontFamily: 'ui-monospace, monospace',
                  fontSize: 11, color: BARB_GOLD,
                  width: 30, paddingTop: 2,
                }}>0{i + 1}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 4 }}>{row[0]}</div>
                  <div style={{ fontSize: 13, color: BARB_MUTED }}>{row[1]}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <BookingEmbed/>
      </section>

      {/* Footer */}
      <footer style={{
        padding: '40px 64px 50px',
        borderTop: '1px solid #1F1E22',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 11, color: BARB_MUTED, letterSpacing: '0.14em', textTransform: 'uppercase',
      }}>
        <span>© 2026 · El Maestro · Puerto de Sagunto</span>
        <span style={{ display: 'flex', gap: 22 }}>
          <span>Instagram</span><span>TikTok</span><span>Google</span>
        </span>
      </footer>
    </div>
  );
}

// ── Mobile ──────────────────────────────────────────────────
function BarberMobile() {
  return (
    <div style={{
      width: 390, minHeight: 844,
      background: BARB_BG,
      color: BARB_FG,
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      overflow: 'hidden',
    }}>
      <div style={{
        height: 44, padding: '0 22px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 14, fontWeight: 600,
      }}>
        <span>9:41</span>
        <span style={{ fontSize: 12 }}>●●● 📶 🔋</span>
      </div>

      <div style={{
        padding: '12px 20px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 28, height: 28, borderRadius: '50%',
            background: `repeating-linear-gradient(45deg, ${BARB_GOLD} 0 3px, ${BARB_FG} 3px 6px, #0E0E10 6px 9px)`,
            border: `1.5px solid ${BARB_FG}`,
          }}/>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.06em' }}>EL MAESTRO</div>
        </div>
        <span style={{ fontSize: 18, color: BARB_FG }}>☰</span>
      </div>

      {/* Hero */}
      <section style={{ position: 'relative', height: 520 }}>
        <BarberPortrait height={520}/>
        <div style={{ position: 'absolute', left: 20, right: 20, bottom: 28, zIndex: 2 }}>
          <div style={{
            fontSize: 10, color: BARB_GOLD, letterSpacing: '0.24em',
            textTransform: 'uppercase', fontWeight: 700, marginBottom: 14,
          }}>Puerto de Sagunto · 2014</div>
          <h1 style={{
            fontSize: 60, lineHeight: 0.92, fontWeight: 800,
            letterSpacing: '-0.04em', margin: '0 0 18px',
          }}>
            Corte de<br/>
            <span style={{ fontStyle: 'italic', fontWeight: 400, color: BARB_GOLD }}>maestro.</span>
          </h1>
          <button style={{
            width: '100%',
            background: BARB_GOLD, color: '#0E0E10',
            fontFamily: 'inherit', fontSize: 11, fontWeight: 800,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            padding: '14px 0', border: 'none', cursor: 'pointer', borderRadius: 3,
          }}>Reservar silla →</button>
        </div>
      </section>

      {/* Gallery */}
      <section style={{ padding: '32px 20px 28px' }}>
        <div style={{ fontSize: 10, color: BARB_GOLD, letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 8 }}>— La obra</div>
        <h2 style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 6px', lineHeight: 1 }}>Antes &<br/>Después</h2>
        <p style={{ fontSize: 12, color: BARB_MUTED, marginBottom: 20 }}>Toca cada pieza para revelar.</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <StyleCard name="Pompadour" kind="Clásico" idx={0}/>
          <StyleCard name="Mid Fade" kind="Moderno" idx={1}/>
          <StyleCard name="Buzz Cut" kind="Limpio" idx={2}/>
          <StyleCard name="Crop francés" kind="Texturizado" idx={3}/>
        </div>
      </section>

      {/* Booking */}
      <section style={{ padding: '12px 20px 30px' }}>
        <BookingEmbed compact/>
      </section>

      <footer style={{
        padding: '20px 20px 36px',
        borderTop: '1px solid #1F1E22',
        textAlign: 'center',
        fontSize: 10, color: BARB_MUTED, letterSpacing: '0.18em', textTransform: 'uppercase',
        lineHeight: 2,
      }}>
        C/ del Mar 27 · Puerto Sagunto<br/>
        Mar–Sáb · 9:30–20:30
      </footer>
    </div>
  );
}

Object.assign(window, { BarberDesktop, BarberMobile });