// Site institucional — Editorial direction.
// Pages: Home, Serviços, Equipe, Contato.
// Each page renders inside a 1280-wide chrome window.

const { Wordmark: WSP } = window;
const { useState: useS_sp } = React;

const NAV_SP = [
  { k: 'home',     label: 'Salão',         type: 'link',     href: '/' },
  { k: 'services', label: 'Serviços',      type: 'dropdown', items: [
    { k: 'corte',       label: 'Corte',       href: '/servicos/corte/' },
    { k: 'cor',         label: 'Cor',         href: '/servicos/cor/' },
    { k: 'tratamento',  label: 'Tratamento',  href: '/servicos/tratamento/' },
    { k: 'eventos',     label: 'Eventos',     href: '/servicos/eventos/' },
    { k: 'diagnostico', label: 'Diagnóstico', href: '/servicos/diagnostico/' },
  ]},
  { k: 'team',     label: 'Profissionais', type: 'link',     href: '/' },
  { k: 'units',    label: 'Unidades',      type: 'dropdown', items: [
    { k: 'leblon',   label: 'Leblon',   href: '/leblon/' },
    { k: 'ipanema',  label: 'Ipanema',  href: '/ipanema/' },
    { k: 'botafogo', label: 'Botafogo', href: '/botafogo/' },
  ]},
  { k: 'contact',  label: 'Contato',       type: 'link',     href: '/#contato' },
];

const UNITS_SP = [
  { k: 'leblon',   name: 'Leblon',   addr: 'Av. Afrânio de Melo Franco, 290', sub: 'Shopping Leblon · Loja 107B', tel: '+55 21 3283-0990', hours: 'Seg–Sáb · 10 às 22h · Dom 13 às 21h', whatsapp: 'https://api.whatsapp.com/send?phone=552132830990&text=Ol%C3%A1%2C%20vim%20atrav%C3%A9s%20do%20site%20da%20Ophicina%20e%20gostaria%20de%20agendar%20no%20Leblon' },
  { k: 'ipanema',  name: 'Ipanema',  addr: 'R. Visconde de Pirajá, 265 B',    sub: 'Ipanema · Rio de Janeiro',    tel: '+55 21 3557-8877', hours: 'Seg–Sáb · 9 às 20h', whatsapp: 'https://api.whatsapp.com/send?phone=5521998005215&text=Vim%20atrav%C3%A9s%20do%20site%20da%20Ophicina%20e%20gostaria%20de%20agendar%20em%20Ipanema' },
  { k: 'botafogo', name: 'Botafogo', addr: 'R. Voluntários da Pátria, 185',   sub: 'Botafogo · Rio de Janeiro',   tel: '+55 21 99590-0239', hours: 'Seg–Sáb · 9 às 20h', whatsapp: 'https://api.whatsapp.com/send/?phone=5521995900239&text&type=phone_number&app_absent=0&utm_source=site' },
];

// WhatsApp do salão principal (Leblon flagship) — usado no header institucional
const PRIMARY_WA = 'https://api.whatsapp.com/send?phone=552132830990&text=Ol%C3%A1%2C%20vim%20atrav%C3%A9s%20do%20site%20da%20Ophicina%20do%20Cabelo%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es%20%2F%20agendar';

// ─── Shared chrome ────────────────────────────────────────────────────────
const navLinkStyle = (isActive) => ({
  fontSize: 12, color: 'var(--ink-900)', textDecoration: 'none',
  letterSpacing: '0.04em', cursor: 'pointer', fontFamily: 'var(--sans)', fontWeight: 400,
  margin: 0, padding: '6px 0', background: 'transparent', border: 0, outline: 'none',
  display: 'inline-flex', alignItems: 'center', gap: 6, lineHeight: 1, height: 24,
  boxSizing: 'border-box', verticalAlign: 'middle',
  borderBottom: isActive ? '1px solid var(--ink-900)' : '1px solid transparent',
});

const HeaderDropdown = ({ item, isActive, isOpen, onToggle, onClose }) => (
  <div data-dropdown style={{ position: 'relative' }}>
    <button onClick={onToggle} aria-expanded={isOpen} aria-haspopup="true" className="op-sans" style={{
      ...navLinkStyle(isActive || isOpen),
      display: 'inline-flex', alignItems: 'center', gap: 6,
    }}>
      {item.label}
      <span aria-hidden="true" style={{ fontSize: 9, marginTop: 1, opacity: 0.7, transition: 'transform 200ms', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}>▾</span>
    </button>
    {isOpen && (
      <div role="menu" style={{
        position: 'absolute', top: 'calc(100% + 12px)', left: '50%', transform: 'translateX(-50%)',
        background: 'var(--linen)', border: '1px solid var(--ink-300)',
        padding: '8px 0', minWidth: 200, zIndex: 100,
        boxShadow: '0 12px 36px rgba(26,26,29,0.10)',
      }}>
        {item.items.map(it => (
          <a key={it.k} href={it.href} onClick={onClose} role="menuitem"
            className="op-sans"
            style={{
              display: 'block', padding: '10px 18px',
              fontSize: 13, color: 'var(--ink-900)', textDecoration: 'none',
              letterSpacing: '0.02em',
              transition: 'background 160ms',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bone)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
          >{it.label}</a>
        ))}
      </div>
    )}
  </div>
);

const SiteHeader = ({ active = 'home', whatsapp = PRIMARY_WA }) => {
  const [openDropdown, setOpenDropdown] = useS_sp(null);
  React.useEffect(() => {
    if (!openDropdown) return;
    const closeOnEsc = (e) => { if (e.key === 'Escape') setOpenDropdown(null); };
    const closeOnClickOutside = (e) => {
      if (!e.target.closest('[data-dropdown]')) setOpenDropdown(null);
    };
    document.addEventListener('keydown', closeOnEsc);
    document.addEventListener('click', closeOnClickOutside);
    return () => {
      document.removeEventListener('keydown', closeOnEsc);
      document.removeEventListener('click', closeOnClickOutside);
    };
  }, [openDropdown]);

  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 48px', borderBottom: '1px solid var(--ink-300)', background: 'var(--linen)',
      position: 'relative', zIndex: 50,
    }}>
      <a href="/" style={{ textDecoration: 'none', color: 'inherit' }}>
        <WSP size="sm" withSub={true} />
      </a>
      <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
        {NAV_SP.map(n => n.type === 'dropdown' ? (
          <HeaderDropdown
            key={n.k}
            item={n}
            isActive={active === n.k}
            isOpen={openDropdown === n.k}
            onToggle={() => setOpenDropdown(openDropdown === n.k ? null : n.k)}
            onClose={() => setOpenDropdown(null)}
          />
        ) : (
          <a key={n.k} href={n.href} className="op-sans" style={navLinkStyle(active === n.k)}>{n.label}</a>
        ))}
      </nav>
      <a href={whatsapp} target="_blank" rel="noopener" style={{
        background: 'var(--ink-900)', color: 'var(--linen)', border: 0,
        padding: '10px 22px', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
        cursor: 'pointer', fontFamily: 'var(--sans)', fontWeight: 500,
        textDecoration: 'none', display: 'inline-block',
      }}>marcar hora</a>
    </header>
  );
};

const SiteFooter = () => (
  <footer style={{ padding: '32px 48px 28px', background: 'var(--ink-900)', color: 'var(--linen)' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 32 }}>
      <div>
        <WSP size="sm" withSub={true} dark={true} />
        <div className="op-mono" style={{ fontSize: 9, opacity: 0.55, marginTop: 18, lineHeight: 1.7 }}>
          Salão premium de cabelo · Rio de Janeiro<br/>est. MMXIV · três endereços
        </div>
      </div>
      {UNITS_SP.map(u => (
        <a key={u.k} href={`/${u.k}/`} style={{ textDecoration: 'none', color: 'var(--linen)' }}>
          <div className="op-eyebrow" style={{ color: 'var(--gold-300)', marginBottom: 10 }}>{u.name}</div>
          <div style={{ fontSize: 11, lineHeight: 1.6, opacity: 0.75 }}>
            {u.addr}<br/>{u.sub}<br/>{u.tel}
          </div>
        </a>
      ))}
    </div>
    <div style={{ marginTop: 28, paddingTop: 16, borderTop: '1px solid rgba(245,241,234,0.12)', display: 'flex', justifyContent: 'space-between' }}>
      <div className="op-mono" style={{ fontSize: 9, opacity: 0.5 }}>© 2026 ophicina do cabelo · todos os direitos reservados</div>
      <div className="op-mono" style={{ fontSize: 9, opacity: 0.5 }}>@ophicinadocabelo</div>
    </div>
  </footer>
);

// ─── HOME ────────────────────────────────────────────────────────────────
const SERVICES_SP = [
  ['Corte & Finalização',     '90 min', 'Cód. 042'],
  ['Coloração Natural',       '180 min','Cód. 121'],
  ['Mechas Sob Medida',       '240 min','Cód. 138'],
  ['Tratamento Restaurador',  '60 min', 'Cód. 077'],
  ['Penteado & Make',         '90 min', 'Cód. 091'],
  ['Diagnóstico Capilar',     '40 min', 'Cód. 010'],
];

const SiteHome = () => (
  <div style={{ maxWidth: 1280, width: '100%', margin: '0 auto', background: 'var(--linen)', color: 'var(--ink-900)', fontFamily: 'var(--sans)', overflow: 'hidden' }}>
    <SiteHeader active="home" />

    {/* Hero — magazine-cover scale type with portrait */}
    <section style={{ padding: '36px 48px 0', display: 'grid', gridTemplateColumns: '110px 1fr 380px', gap: 32, minHeight: 560 }}>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', borderRight: '1px solid var(--ink-300)', paddingRight: 16, paddingBottom: 24 }}>
        <div className="op-mono" style={{ fontSize: 10, color: 'var(--clay)', writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>edição n° 04 · outono 2026</div>
        <div className="op-mono" style={{ fontSize: 10, color: 'var(--clay)' }}>RJ<br/>—<br/>BR</div>
      </div>

      <div style={{ display: 'grid', gridTemplateRows: 'auto 1fr', gap: 18 }}>
        <div>
          <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>O salão · uma carta de cuidado</div>
          <h1 className="op-serif" style={{ fontSize: 132, lineHeight: 0.92, margin: '12px 0 0', fontWeight: 400, letterSpacing: '0.005em' }}>
            cabelo,<br/><em style={{ fontWeight: 300, color: 'var(--clay)' }}>com tempo.</em>
          </h1>
        </div>
        <div style={{ position: 'relative', minHeight: 260, backgroundImage: 'url(/assets/photos/leblon-01.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}>
          <div style={{ position: 'absolute', bottom: 14, left: 14, color: 'var(--linen)', textShadow: '0 1px 8px rgba(0,0,0,.4)' }}>
            <div className="op-mono" style={{ fontSize: 9, opacity: 0.85, letterSpacing: '0.18em', textTransform: 'uppercase' }}>o ofício · em silêncio</div>
          </div>
        </div>
      </div>

      <aside id="unidades" style={{ display: 'flex', flexDirection: 'column', gap: 18, scrollMarginTop: 80 }}>
        <div style={{ height: 280, backgroundImage: 'url(/assets/photos/ipanema-01.jpg)', backgroundSize: 'cover', backgroundPosition: 'center 20%' }} />
        <div>
          <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>Marcar hora</div>
          <div className="op-serif" style={{ fontSize: 22, lineHeight: 1.2, margin: '10px 0', fontWeight: 400 }}>
            Três endereços na zona sul.<br/>Escolha o seu.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
            {UNITS_SP.map(u => (
              <a key={u.k} href={`/${u.k}`} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid var(--ink-300)', paddingBottom: 7, cursor: 'pointer', textDecoration: 'none', color: 'var(--ink-900)' }}>
                <span className="op-serif" style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink-900)' }}>{u.name}</span>
                <span className="op-mono" style={{ fontSize: 9, color: 'var(--clay)' }}>{u.hours.split(' · ')[0]}</span>
              </a>
            ))}
          </div>
        </div>
      </aside>
    </section>

    {/* Services index */}
    <section style={{ padding: '28px 48px 36px', borderTop: '1px solid var(--ink-300)', marginTop: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
        <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>Sumário · serviços</div>
        <div className="op-mono" style={{ fontSize: 10, color: 'var(--clay)' }}>p. 01–06 · ver todos →</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 24 }}>
        {SERVICES_SP.map(([title, time], i) => (
          <div key={title}>
            <div className="op-serif" style={{ fontSize: 40, fontWeight: 300, color: 'var(--clay)', lineHeight: 1 }}>{String(i+1).padStart(2, '0')}</div>
            <div className="op-serif" style={{ fontSize: 16, marginTop: 10, lineHeight: 1.2, fontWeight: 500 }}>{title}</div>
            <div className="op-mono" style={{ fontSize: 9, color: 'var(--clay)', marginTop: 6 }}>{time}</div>
          </div>
        ))}
      </div>
    </section>

    {/* Manifesto pull-quote */}
    <section style={{ padding: '64px 48px 72px', background: 'var(--bone)', borderTop: '1px solid var(--ink-300)', borderBottom: '1px solid var(--ink-300)', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' }}>
      <div style={{ height: 360, backgroundImage: 'url(/assets/photos/botafogo-04.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
      <div>
        <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>Carta · ofício</div>
        <p className="op-serif" style={{ fontSize: 38, lineHeight: 1.18, fontWeight: 300, color: 'var(--ink-900)', margin: '14px 0 0' }}>
          "O fio reage ao tempo<br/>tanto quanto à mão.<br/><em style={{ color: 'var(--clay)' }}>Por isso a calma.</em>"
        </p>
        <div className="op-mono" style={{ fontSize: 10, color: 'var(--clay)', marginTop: 22 }}>caio belmonte · corte autoral · ipanema</div>
      </div>
    </section>

    <SiteFooter />
  </div>
);

// ─── SERVICES ────────────────────────────────────────────────────────────
const SERVICES_FULL = [
  { group: 'Corte', items: [
    { code: '042', name: 'Corte & Finalização',       time: '90 min',  price: 'Sob consulta' },
    { code: '044', name: 'Corte Autoral · longo',     time: '120 min', price: 'Sob consulta' },
    { code: '046', name: 'Manutenção · pontas',       time: '45 min',  price: 'Sob consulta' },
  ]},
  { group: 'Cor', items: [
    { code: '121', name: 'Coloração Natural',         time: '180 min', price: 'Sob consulta' },
    { code: '138', name: 'Mechas Sob Medida',         time: '240 min', price: 'Sob consulta' },
    { code: '142', name: 'Correção · redirecionamento', time: '300 min', price: 'sob consulta' },
    { code: '145', name: 'Iluminado · raiz a ponta',  time: '210 min', price: 'Sob consulta' },
  ]},
  { group: 'Tratamento', items: [
    { code: '077', name: 'Tratamento Restaurador',    time: '60 min',  price: 'Sob consulta' },
    { code: '079', name: 'Cronograma · 4 sessões',    time: '60 min/s','price': 'Sob consulta' },
    { code: '081', name: 'Hidratação Profunda',       time: '50 min',  price: 'Sob consulta' },
  ]},
  { group: 'Eventos', items: [
    { code: '091', name: 'Penteado & Make',           time: '90 min',  price: 'Sob consulta' },
    { code: '092', name: 'Noiva · prova + dia',       time: '4h',      price: 'Sob consulta' },
  ]},
  { group: 'Diagnóstico', items: [
    { code: '010', name: 'Diagnóstico Capilar',       time: '40 min',  price: 'cortesia' },
  ]},
];

const SiteServices = () => (
  <div style={{ maxWidth: 1280, width: '100%', margin: '0 auto', background: 'var(--linen)', color: 'var(--ink-900)', fontFamily: 'var(--sans)', overflow: 'hidden' }}>
    <SiteHeader active="services" />

    <section style={{ padding: '40px 48px 28px', borderBottom: '1px solid var(--ink-300)' }}>
      <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>Carta de serviços · 2026</div>
      <h1 className="op-serif" style={{ fontSize: 88, fontWeight: 400, margin: '8px 0 0', lineHeight: 1, letterSpacing: '0.005em' }}>
        Serviços, em <em style={{ fontWeight: 300, color: 'var(--clay)' }}>tempo de ofício.</em>
      </h1>
      <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-700)', maxWidth: 560, marginTop: 20 }}>
        Cada item desta carta inclui diagnóstico, lavagem com água filtrada e finalização. Os tempos referem-se ao serviço completo — não ao seu tempo de espera.
      </p>
    </section>

    {/* Service tables grouped */}
    <section style={{ padding: '8px 48px 48px' }}>
      {SERVICES_FULL.map(g => (
        <div key={g.group} style={{ borderBottom: '1px solid var(--ink-300)', padding: '32px 0 28px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 56, alignItems: 'start' }}>
            <div className="op-serif" style={{ fontSize: 36, fontWeight: 300, color: 'var(--clay)', lineHeight: 1 }}>{g.group}</div>
            <div>
              {g.items.map(s => (
                <div key={s.code} style={{ display: 'grid', gridTemplateColumns: '70px 1fr 120px 110px', alignItems: 'baseline', padding: '14px 0', borderBottom: '1px dashed var(--ink-300)', gap: 16 }}>
                  <span className="op-mono" style={{ fontSize: 10, color: 'var(--clay)' }}>{s.code}</span>
                  <span className="op-serif" style={{ fontSize: 22, fontWeight: 500 }}>{s.name}</span>
                  <span className="op-mono" style={{ fontSize: 11, color: 'var(--ink-700)' }}>{s.time}</span>
                  <span className="op-serif" style={{ fontSize: 18, fontWeight: 400, textAlign: 'right' }}>{s.price}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      ))}
      <div style={{ marginTop: 32, padding: 24, background: 'var(--bone)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
        <div>
          <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>Diagnóstico · cortesia</div>
          <div className="op-serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 6 }}>Não sabe por onde começar? Comece pelo diagnóstico.</div>
        </div>
        <button style={{ background: 'var(--ink-900)', color: 'var(--linen)', border: 0, padding: '14px 28px', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontFamily: 'var(--sans)', fontWeight: 500, cursor: 'pointer', flexShrink: 0 }}>Agendar diagnóstico</button>
      </div>
    </section>

    <SiteFooter />
  </div>
);

// ─── TEAM ────────────────────────────────────────────────────────────────
const TEAM = [
  { name: 'Renata Vidal',     role: 'Cor & finalização', exp: '12 anos', unit: 'Leblon',   photo: '/assets/photos/leblon-05.jpg' },
  { name: 'Caio Belmonte',    role: 'Corte autoral',     exp: '9 anos',  unit: 'Ipanema',  photo: '/assets/photos/leblon-03.jpg' },
  { name: 'Marina Aragão',    role: 'Mechas & ondas',    exp: '15 anos', unit: 'Botafogo', photo: '/assets/photos/ipanema-03.jpg' },
  { name: 'Helena Castro',    role: 'Tratamentos',       exp: '8 anos',  unit: 'Leblon',   photo: '/assets/photos/ipanema-05.jpg' },
  { name: 'Asaph Vicenzi',    role: 'Cor · iluminado',   exp: '11 anos', unit: 'Ipanema',  photo: '/assets/photos/ipanema-04.jpg' },
  { name: 'Davi Codeço',      role: 'Corte masculino',   exp: '7 anos',  unit: 'Botafogo', photo: '/assets/photos/leblon-03.jpg' },
];

const SiteTeam = () => (
  <div style={{ maxWidth: 1280, width: '100%', margin: '0 auto', background: 'var(--linen)', color: 'var(--ink-900)', fontFamily: 'var(--sans)', overflow: 'hidden' }}>
    <SiteHeader active="team" />

    <section style={{ padding: '40px 48px 32px', borderBottom: '1px solid var(--ink-300)', display: 'grid', gridTemplateColumns: '1fr 380px', gap: 32, alignItems: 'end' }}>
      <div>
        <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>Profissionais · seis nomes, um ofício</div>
        <h1 className="op-serif" style={{ fontSize: 88, fontWeight: 400, margin: '8px 0 0', lineHeight: 1, letterSpacing: '0.005em' }}>
          Mãos que conhecem<br/><em style={{ fontWeight: 300, color: 'var(--clay)' }}>cada fio.</em>
        </h1>
      </div>
      <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--ink-700)' }}>
        Cada profissional aqui é selecionado por técnica e por temperamento. Você escolhe pela especialidade, pelo perfil — ou deixa que o salão indique a melhor combinação para o seu cabelo.
      </p>
    </section>

    <section style={{ padding: '40px 48px 56px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
        {TEAM.map(p => (
          <article key={p.name} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ aspectRatio: '4 / 5', backgroundImage: `url(${p.photo})`, backgroundSize: 'cover', backgroundPosition: 'center 25%', position: 'relative' }}>
              <div style={{ position: 'absolute', top: 12, left: 12, color: 'var(--linen)', textShadow: '0 1px 6px rgba(0,0,0,.5)' }}>
                <div className="op-mono" style={{ fontSize: 9, opacity: 0.9, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{p.unit}</div>
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 4 }}>
              <h3 className="op-serif" style={{ fontSize: 26, fontWeight: 500, margin: 0 }}>{p.name}</h3>
              <span className="op-mono" style={{ fontSize: 9, color: 'var(--clay)' }}>{p.exp}</span>
            </div>
            <div className="op-mono" style={{ fontSize: 10, color: 'var(--clay)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>{p.role}</div>
            <a className="op-sans" style={{ fontSize: 11, color: 'var(--ink-900)', textDecoration: 'underline', textUnderlineOffset: 4, marginTop: 4, cursor: 'pointer' }}>marcar com {p.name.split(' ')[0].toLowerCase()} →</a>
          </article>
        ))}
      </div>
    </section>

    <SiteFooter />
  </div>
);

// ─── CONTACT ─────────────────────────────────────────────────────────────
const SiteContact = () => (
  <div style={{ maxWidth: 1280, width: '100%', margin: '0 auto', background: 'var(--linen)', color: 'var(--ink-900)', fontFamily: 'var(--sans)', overflow: 'hidden' }}>
    <SiteHeader active="contact" />

    <section style={{ padding: '40px 48px 32px', borderBottom: '1px solid var(--ink-300)' }}>
      <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>Contato · três endereços</div>
      <h1 className="op-serif" style={{ fontSize: 88, fontWeight: 400, margin: '8px 0 0', lineHeight: 1, letterSpacing: '0.005em' }}>
        Onde nos <em style={{ fontWeight: 300, color: 'var(--clay)' }}>encontrar.</em>
      </h1>
    </section>

    <section style={{ padding: '40px 48px 24px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {UNITS_SP.map((u, i) => {
          const photo = ['/assets/photos/leblon-04.jpg', '/assets/photos/ipanema-02.jpg', '/assets/photos/botafogo-02.jpg'][i];
          return (
            <article key={u.k} style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ aspectRatio: '4 / 3', backgroundImage: `url(${photo})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
              <div style={{ padding: '20px 4px 0' }}>
                <div className="op-mono" style={{ fontSize: 9, color: 'var(--clay)', letterSpacing: '0.22em', textTransform: 'uppercase' }}>0{i+1} · unidade</div>
                <h2 className="op-serif" style={{ fontSize: 44, fontWeight: 400, margin: '6px 0 14px' }}>{u.name}</h2>
                <div style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--ink-700)' }}>
                  {u.addr}<br/>
                  <span style={{ color: 'var(--clay)' }}>{u.sub}</span>
                </div>
                <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '70px 1fr', gap: '6px 12px', fontSize: 11 }}>
                  <span className="op-mono" style={{ color: 'var(--clay)', letterSpacing: '0.16em' }}>HORÁRIO</span><span style={{ color: 'var(--ink-700)' }}>{u.hours}</span>
                  <span className="op-mono" style={{ color: 'var(--clay)', letterSpacing: '0.16em' }}>TELEFONE</span><span style={{ color: 'var(--ink-700)' }}>{u.tel}</span>
                  <span className="op-mono" style={{ color: 'var(--clay)', letterSpacing: '0.16em' }}>WHATSAPP</span><span style={{ color: 'var(--ink-700)' }}>{u.tel.replace('+', '').replace(/[\s-]/g, '')}</span>
                </div>
                <div style={{ marginTop: 20, display: 'flex', gap: 10 }}>
                  <button style={{ background: 'var(--ink-900)', color: 'var(--linen)', border: 0, padding: '10px 18px', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontFamily: 'var(--sans)', fontWeight: 500, cursor: 'pointer' }}>Marcar hora</button>
                  <button style={{ background: 'transparent', color: 'var(--ink-900)', border: '1px solid var(--ink-900)', padding: '10px 18px', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontFamily: 'var(--sans)', cursor: 'pointer' }}>Como chegar</button>
                </div>
              </div>
            </article>
          );
        })}
      </div>
    </section>

    {/* General contact */}
    <section style={{ padding: '32px 48px 48px', borderTop: '1px solid var(--ink-300)', marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
      <div>
        <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>Outras conversas</div>
        <div className="op-serif" style={{ fontSize: 28, fontWeight: 400, marginTop: 10, lineHeight: 1.25 }}>
          Imprensa, parcerias, eventos privados.
        </div>
        <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: '120px 1fr', gap: '8px 14px', fontSize: 12 }}>
          <span className="op-mono" style={{ color: 'var(--clay)', letterSpacing: '0.16em' }}>IMPRENSA</span><span>imprensa@ophicinadocabelo.com.br</span>
          <span className="op-mono" style={{ color: 'var(--clay)', letterSpacing: '0.16em' }}>PARCERIAS</span><span>parcerias@ophicinadocabelo.com.br</span>
          <span className="op-mono" style={{ color: 'var(--clay)', letterSpacing: '0.16em' }}>CARREIRAS</span><span>carreiras@ophicinadocabelo.com.br</span>
        </div>
      </div>
      <div>
        <div className="op-eyebrow" style={{ color: 'var(--clay)' }}>Receba a Carta</div>
        <div className="op-serif" style={{ fontSize: 22, fontWeight: 400, marginTop: 10, lineHeight: 1.3, color: 'var(--ink-700)' }}>
          Notas trimestrais sobre cuidado, técnica e pequenas descobertas do salão. Sem promoção, sem pressa.
        </div>
        <div style={{ marginTop: 18, display: 'flex', gap: 0, borderBottom: '1px solid var(--ink-900)', paddingBottom: 4 }}>
          <input placeholder="seu e-mail" style={{ flex: 1, border: 0, background: 'transparent', fontSize: 14, fontFamily: 'var(--sans)', color: 'var(--ink-900)', outline: 'none' }} />
          <button style={{ background: 'transparent', border: 0, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontFamily: 'var(--sans)', fontWeight: 500, cursor: 'pointer' }}>assinar →</button>
        </div>
      </div>
    </section>

    <SiteFooter />
  </div>
);

Object.assign(window, { SiteHome, SiteServices, SiteTeam, SiteContact, SiteHeader, SiteFooter, UNITS_SP, SERVICES_FULL, PRIMARY_WA });