/* global React, Placeholder, SectionHead, ScissorsGlyph, RazorGlyph, BottleGlyph, Logo, SkylineGlyph */

// ───────────── HOME / HERO ─────────────
const Hero = ({ onReserve, onProducts }) =>
<section id="home" style={{ background: 'var(--bg)', padding: '8px 0 0' }}>
    {/* Big hero image */}
    <div style={{ position: 'relative', margin: '0 20px', overflow: 'hidden' }}>
      <Placeholder
      label=""
      height={420}
      dark
      style={{ border: '1px solid rgba(184,146,74,0.4)' }} />

      {/* NYC skyline silhouette along the base of the hero panel */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 90, pointerEvents: 'none' }}>
        <SkylineGlyph height={90} color="rgba(184,146,74,0.22)" />
      </div>

      <div className="bb-label" style={{
      position: 'absolute', bottom: 14, right: 14,
      color: 'rgba(233,220,184,0.55)',
      background: 'rgba(20,17,12,0.4)',
      padding: '4px 8px',
      border: '1px solid rgba(184,146,74,0.3)',
      fontSize: 7
    }}>
        IMG · HERO
      </div>
      {/* Gold corner ticks */}
      <Tick pos="tl" /><Tick pos="tr" /><Tick pos="bl" /><Tick pos="br" />


      {/* Center title overlay */}
      <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      textAlign: 'center', color: '#faf8f3',
      padding: '0 24px'
    }}>
        {/* Logo mark — NYC subway bullet */}
        <div style={{ marginBottom: 16 }}>
          <Logo size={60} variant="gold" />
        </div>

        {/* Brand name */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0 }}>
          <div style={{ width: 80, height: 1, background: 'var(--gold)', marginBottom: 10 }} />
          <div style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontStyle: 'normal',
            fontWeight: 600,
            fontSize: 36,
            letterSpacing: '0.12em',
            lineHeight: 1,
            color: '#faf8f3',
            textShadow: '0 0 18px rgba(184,146,74,0.35)',
          }}>
            BROADWAY
          </div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 13,
            letterSpacing: '0.55em',
            color: 'var(--gold)',
            marginTop: 6,
          }}>
            BARBER
          </div>
          <div style={{ width: 80, height: 1, background: 'var(--gold)', marginTop: 10 }} />
        </div>

        <p style={{
        fontFamily: 'Inter, sans-serif',
        fontSize: 11, lineHeight: 1.6,
        marginTop: 18,
        maxWidth: 220,
        color: 'rgba(250,248,243,0.72)'
      }}>
          Barbería premium inspirada en las calles de Nueva York. Cortes, barba y<br></br>boutique en Coquimbo.
        </p>
      </div>
    </div>

    {/* CTA buttons */}
    <div style={{ padding: '22px 24px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <button className="bb-btn bb-btn--gold bb-btn--block" onClick={onReserve}>
        Reservar corte
      </button>
      <button className="bb-btn bb-btn--ghost bb-btn--block" onClick={onProducts}>
        Ver boutique
      </button>
    </div>



    {/* Brief services intro */}
    <div style={{ padding: '40px 24px 8px' }}>
      <div className="bb-eyebrow" style={{ textAlign: 'center', color: 'var(--gold)' }}>
        — Casa de oficio —
      </div>
      <h3 style={{
      fontFamily: "'Cormorant Garamond', serif",
      fontStyle: 'italic', fontWeight: 500,
      fontSize: 26, lineHeight: 1.2,
      textAlign: 'center', margin: '12px 24px 16px'
    }}>
        Cortes, afeitado y boutique de cuidado, bajo un mismo techo.
      </h3>
      <p className="bb-body" style={{ textAlign: 'center', color: 'var(--muted)', maxWidth: 280, margin: '0 auto' }}>
        Cada visita combina un servicio cuidado con la posibilidad de llevarte a casa
        los productos que usamos en la silla.
      </p>
    </div>

    {/* Quick service triptych */}
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, margin: '32px 0 0', background: 'var(--line-soft)' }}>
      {[
    { Icon: ScissorsGlyph, label: 'Cortes' },
    { Icon: RazorGlyph, label: 'Afeitado' },
    { Icon: BottleGlyph, label: 'Boutique' }].
    map((s, i) =>
    <div key={i} style={{ background: 'var(--bg)', padding: '22px 8px', textAlign: 'center' }}>
          <s.Icon size={28} color="var(--gold)" />
          <div className="bb-label" style={{ marginTop: 10, color: 'var(--ink-soft)' }}>
            {s.label}
          </div>
        </div>
    )}
    </div>
  </section>;


const Tick = ({ pos }) => {
  const base = { position: 'absolute', width: 14, height: 14, borderColor: 'var(--gold)', borderStyle: 'solid' };
  const styles = {
    tl: { top: 8, left: 8, borderWidth: '1px 0 0 1px' },
    tr: { top: 8, right: 8, borderWidth: '1px 1px 0 0' },
    bl: { bottom: 8, left: 8, borderWidth: '0 0 1px 1px' },
    br: { bottom: 8, right: 8, borderWidth: '0 1px 1px 0' }
  };
  return <div style={{ ...base, ...styles[pos] }} />;
};

// ───────────── SERVICIOS ─────────────
const SERVICES = [
{ name: 'Corte clásico', desc: 'Tijera y máquina, perfilado tradicional.', price: 10000, time: '40 min' },
{ name: 'Fade premium', desc: 'Degradado de precisión + diseño.', price: 13000, time: '50 min' },
{ name: 'Barba esculpida', desc: 'Diseño, perfilado y mascarilla.', price: 9000, time: '25 min' },
{ name: 'Tratamiento de barba', desc: 'Vapor, aceites, mascarilla y bálsamo.', price: 13000, time: '40 min' },
{ name: 'Pack Bread Way', desc: 'Corte + afeitado + producto de boutique.', price: 24000, time: '90 min' }];


const Servicios = ({ onReserve }) => {
  const [active, setActive] = React.useState('Cortes');
  return (
    <section id="servicios" className="bb-section">
      <SectionHead num="02" title="Servicios" subtitle="Casa de oficio para el caballero. Cada servicio se ofrece con un ritual de bienvenida." />

      {/* tabs */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginBottom: 24 }}>
        {['Cortes', 'Barba', 'Tratamientos'].map((t) =>
        <button
          key={t}
          onClick={() => setActive(t)}
          className={'bb-chip' + (active === t ? ' bb-chip--gold' : '')}
          style={{ cursor: 'pointer', height: 32, padding: '0 14px' }}>

            {t}
          </button>
        )}
      </div>

      {/* Before / After */}
      <div style={{ marginBottom: 28 }}>
        <div className="bb-label" style={{ textAlign: 'center', color: 'var(--muted)', marginBottom: 10 }}>
          Antes · Después
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <Placeholder label="Antes" height={180} />
          <Placeholder label="Después" height={180} dark />
        </div>
      </div>

      {/* Service list */}
      <div style={{ borderTop: '1px solid var(--line)' }}>
        {SERVICES.map((s, i) =>
        <div key={i} style={{
          display: 'flex', alignItems: 'baseline', gap: 10,
          padding: '18px 4px',
          borderBottom: '1px solid var(--line-soft)'
        }}>
            <span className="bb-label" style={{ color: 'var(--gold)', minWidth: 22 }}>
              {String(i + 1).padStart(2, '0')}
            </span>
            <div style={{ flex: 1 }}>
              <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 20, fontWeight: 500,
              lineHeight: 1.1
            }}>
                {s.name}
              </div>
              <div className="bb-small" style={{ marginTop: 4 }}>{s.desc}</div>
              <div className="bb-label" style={{ color: 'var(--muted)', marginTop: 6 }}>
                {s.time}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontStyle: 'italic',
              fontSize: 20,
              color: 'var(--ink)'
            }}>
                ${s.price.toLocaleString('es-CL')}
              </div>
            </div>
          </div>
        )}
      </div>

      <button className="bb-btn bb-btn--gold bb-btn--block" style={{ marginTop: 28 }} onClick={onReserve}>
        Reservar ahora
      </button>
    </section>);

};

Object.assign(window, { Hero, Servicios, SERVICES });