/* global React */
const { useState, useEffect } = React;

/* ============================================================
   Salão Pétala Morena — components
   ============================================================ */

const PHONE = "5522999522695";
const PHONE_PRETTY = "(22) 99952-2695";
const IG = "https://instagram.com/salaopetalamorena";
const TT = "https://tiktok.com/@salaopetalamorena";
const ADDR = "Avenida Alberto Torres, 103, Loja 2";
const CITY = "Centro, Campos dos Goytacazes — RJ";

const wa = (msg) =>
`https://wa.me/${PHONE}?text=${encodeURIComponent(msg)}`;
const goWaApp = (msg) => (e) => { e.preventDefault(); window.location.href = wa(msg); };

/* mensagem padrão de agendamento — pede nome, telefone e horário,
   e avisa que o horário será confirmado conforme disponibilidade */
const agendaMsg = (servico) =>
`Olá! Quero agendar: ${servico}.

Meu nome:
Telefone:
Dia e horário desejado:

(Já sei que o horário será confirmado conforme a disponibilidade da profissional.)`;

/* ---------------- icons ---------------- */
function IconWA(props) {
  return (
    <svg viewBox="0 0 32 32" fill="currentColor" {...props}>
      <path d="M16.001 5.333c-5.892 0-10.667 4.776-10.667 10.667 0 1.881.498 3.714 1.443 5.333l-1.51 5.519 5.658-1.484a10.621 10.621 0 0 0 5.075 1.298h.004c5.891 0 10.667-4.776 10.667-10.667S21.892 5.333 16.001 5.333zm0 19.333a8.66 8.66 0 0 1-4.412-1.207l-.317-.188-3.357.88.896-3.27-.207-.336a8.665 8.665 0 0 1-1.336-4.611c0-4.776 3.889-8.664 8.667-8.664 4.776 0 8.667 3.889 8.667 8.667 0 4.778-3.889 8.729-8.601 8.729zm4.757-6.495c-.26-.13-1.541-.76-1.779-.846-.238-.087-.412-.13-.585.13-.173.26-.671.846-.823 1.018-.152.173-.303.195-.563.065-.26-.13-1.097-.404-2.089-1.288-.772-.687-1.293-1.535-1.444-1.795-.151-.26-.016-.4.114-.529.117-.116.26-.303.39-.455.13-.151.173-.26.26-.433.087-.173.043-.325-.022-.455-.065-.13-.585-1.41-.802-1.932-.211-.508-.426-.439-.585-.447l-.498-.009c-.173 0-.455.065-.693.325-.238.26-.91.889-.91 2.169 0 1.28.932 2.516 1.062 2.689.13.173 1.834 2.801 4.444 3.927.621.268 1.106.428 1.484.548.623.198 1.19.17 1.638.103.499-.074 1.541-.63 1.758-1.237.217-.607.217-1.127.152-1.237-.065-.108-.238-.173-.498-.303z" />
    </svg>);

}
function IconIG(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="2" y="2" width="20" height="20" rx="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
    </svg>);

}
function IconTT(props) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V9a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.43z" />
    </svg>);

}
function IconArrow(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="13 6 19 12 13 18" />
    </svg>);

}
function IconMap(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>);

}
function IconClock(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>);

}
function IconPhone(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>);

}

/* ---------------- nav ---------------- */
function Nav() {
  const [open, setOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const SearchOverlay = window.SearchOverlay || (() => null);

  useEffect(() => {
    if (!open && !searchOpen) return;
    const y = window.scrollY;
    const body = document.body;
    body.style.position = "fixed";
    body.style.top = `-${y}px`;
    body.style.left = "0";
    body.style.right = "0";
    body.style.overflow = "hidden";
    return () => {
      body.style.position = "";
      body.style.top = "";
      body.style.left = "";
      body.style.right = "";
      body.style.overflow = "";
      window.scrollTo(0, y);
    };
  }, [open, searchOpen]);

  const close = () => setOpen(false);

  return (
    <>
    <header className="nav">
      <div className="container nav-inner">
        <a href="#top" className="nav-logo" onClick={close}>
          <span className="nl-top">Centro de Beleza</span>
          <span className="nl-script">Pétala Morena</span>
        </a>
        <nav className="nav-links">
          <a href="#produtos">Mais pedidos</a>
          <a href="#servicos">Serviços</a>
          <a href="#contato">Contato</a>
        </nav>
        <div className="nav-actions">
          <a
            className="nav-cta"
            href={wa("Olá! Vim pelo site e gostaria de mais informações.")}
            onClick={goWaApp("Olá! Vim pelo site e gostaria de mais informações.")}>
            <IconWA /> <span className="nav-cta-label">Falar no WhatsApp</span>
          </a>
          <button
            type="button"
            className="nav-search-btn"
            aria-label="Buscar produto"
            onClick={() => setSearchOpen(true)}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"><circle cx="11" cy="11" r="7" /><path d="M21 21 16.65 16.65" /></svg>
          </button>
          <button
            type="button"
            className={`nav-burger ${open ? "is-open" : ""}`}
            aria-label={open ? "Fechar menu" : "Abrir menu"}
            aria-expanded={open}
            onClick={() => setOpen(!open)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </header>
      <div className={`nav-drawer ${open ? "is-open" : ""}`} aria-hidden={!open}>
        <div className="nav-drawer-head">
          <span>Menu rápido</span>
          <button
            type="button"
            className="nav-drawer-close"
            aria-label="Fechar menu"
            onClick={close}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M6 6 18 18M18 6 6 18" /></svg>
          </button>
        </div>
        <strong className="nav-drawer-title">Pétala Morena</strong>
        <a href="#produtos" onClick={close}><span>01</span> Mais pedidos</a>
        <a href="#mega-hair" onClick={close}><span>02</span> Calculadora mega-hair</a>
        <a href="#redes" onClick={close}><span>03</span> Instagram e TikTok</a>
        <a href="#servicos" onClick={close}><span>04</span> Serviços do salão</a>
        <a href="#contato" onClick={close}><span>05</span> Endereço e atendimento</a>
        <a
          className="nav-drawer-cta"
          href={wa("Olá! Vim pelo site.")}
          onClick={(e) => { close(); goWaApp("Olá! Vim pelo site.")(e); }}>
          <IconWA /> Falar no WhatsApp
        </a>
      </div>
      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} />
    </>);

}

/* ---------------- hero ---------------- */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text">
            <div className="hero-eyebrow">
              <span className="dot" />
              <span className="eyebrow">Centro · Campos dos Goytacazes — RJ</span>
            </div>

            <h1 className="hero-title">
              <img
                className="hero-logo"
                src="brand_assets/logo-nome.png"
                alt="Centro de Beleza Pétala Morena — mega-hair"
                width="1942"
                height="809" />
            </h1>

            <p className="hero-sub">
              Mega hair, tranças, jumbo e cabelo em Campos dos Goytacazes. Veja embaixo os mais pedidos do salão.
              O que você escolher, o botão já abre o WhatsApp com o pedido escrito.
            </p>

            <div className="hero-ctas">
              <a
                className="btn btn-primary"
                href={wa("Olá! Vim pelo site e gostaria de mais informações.")}
                onClick={goWaApp("Olá! Vim pelo site e gostaria de mais informações.")}>
                <IconWA /> Falar no WhatsApp
              </a>
              <a className="btn btn-ghost" href="#produtos">
                Ver os mais pedidos <IconArrow />
              </a>
            </div>

            <div className="hero-social" id="redes">
              <a className="hero-social-ig" href={IG} target="_blank" rel="noopener noreferrer">
                <IconIG /> Instagram
              </a>
              <a className="hero-social-tt" href={TT} target="_blank" rel="noopener noreferrer">
                <IconTT /> TikTok
              </a>
            </div>

            <div className="hero-meta">
              <div>
                <div className="mt-eyebrow">Endereço</div>
                <div className="mt-val">Av. Alberto Torres, 103 · Loja 2<br />Centro, Campos dos Goytacazes</div>
              </div>
              <div>
                <div className="mt-eyebrow">Atendimento</div>
                <div className="mt-val">Seg a sex · 08h às 18h<br />Sábado · 08h às 14h</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- ticker ---------------- */
function Ticker() {
  const items = [
  "Mega Hair Nó Italiano",
  "Box Braid",
  "Goddess Braids",
  "Crochet Braids",
  "Cabelo Humano",
  "Cabelo Bio & Orgânico",
  "Jumbo & Boho Curl",
  "Rabo de Cavalo Removível",
  "Nina Softex",
  "Faux Locs"];

  const all = [...items, ...items];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {all.map((t, i) =>
        <span key={i}>
            {t}
            <span className="sep">✦</span>
          </span>
        )}
      </div>
    </div>);

}

/* ---------------- diferenciais ---------------- */
function Diferenciais() {
  const cards = [
  {
    num: "01",
    title: "Atendimento pelo WhatsApp",
    text: "Pedidos, dúvidas e agendamentos são feitos pelo WhatsApp. As respostas saem ao longo do dia, conforme o movimento do salão."
  },
  {
    num: "02",
    title: "Mais opções pelo WhatsApp",
    text: "Este site mostra uma seleção. No WhatsApp tem produtos que não estão aqui, com cores e fotos atualizadas. Vale perguntar."
  },
  {
    num: "03",
    title: "Avaliação presencial",
    text: "O preço final de mega hair e tranças depende da quantidade de cabelo. A avaliação exata é feita pessoalmente no salão."
  },
  {
    num: "04",
    title: "Delivery em Campos",
    text: "Entregamos produtos em Campos via motoboy. A taxa de entrega varia conforme o bairro. Pix e débito sem acréscimo. Cartão de crédito com acréscimo de 10%."
  }];

  return (
    <section className="diff section-pad">
      <div className="container">
        <div className="section-kicker">
          <span className="eyebrow">Como atendemos</span>
        </div>
        <h2 className="section-title">
          Serviços, produtos e atendimento.
        </h2>
        <div className="diff-grid">
          {cards.map((c) =>
          <div className="diff-card" key={c.num}>
              <div className="diff-num">{c.num}</div>
              <h3 className="diff-title">{c.title}</h3>
              <p className="diff-text">{c.text}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- servicos ---------------- */
const SERVICOS = {
  mega: {
    label: "Mega Hair",
    title: "Mega Hair pelo método nó italiano",
    desc: "O valor abaixo refere-se apenas à mão de obra. O cabelo (humano, bio ou orgânico) é vendido separadamente, com preços por linha e comprimento.",
    notes: [
    "Cabelo bio ou orgânico: acréscimo de R$30 na mão de obra.",
    "A quantidade necessária varia por pessoa. Avaliação presencial.",
    "Não realizamos mega hair em fita."],

    rows: [
    { name: "Meia cabeça", price: "R$ 150" },
    { name: "Meia cabeça alta", price: "R$ 180" },
    { name: "Cabeça toda", price: "R$ 200" },
    { name: "Cabeça toda com acabamento", sub: "Nó italiano duplo", price: "R$ 230" },
    { name: "Retirada de mega hair", price: "R$ 30" }],

    cta: agendaMsg("Mega Hair (nó italiano)")
  },
  trancas: {
    label: "Tranças",
    title: "Tranças e box braids",
    desc: "Box Braid, Goddess, Gipsy, Ponytail, Ghana e Boxeadora. Os valores incluem as variações com Jumbo conforme indicado. Materiais adicionais são cobrados à parte.",
    notes: [
    "Chegar com o cabelo limpo, desembaraçado e sem creme.",
    "Cabelos com menos de 4 dedos podem ter ajuste de valor.",
    "Recomendamos comparecer sem acompanhante."],

    rows: [
    { name: "Box Braid (só mão de obra)", price: "R$ 150" },
    { name: "Box Braid + 1 pacote de Jumbo", price: "R$ 180" },
    { name: "Box Braid + 2 pacotes de Jumbo", price: "R$ 210" },
    { name: "Goddess / Gipsy", sub: "pouco a muito cacho", price: "R$ 180–200" },
    { name: "Tranças com cachos 3D", sub: "2 a 3 cachos por trança", price: "R$ 200" },
    { name: "Ponytail", sub: "+ Jumbo: R$ 150", price: "R$ 120" },
    { name: "Ghana (6 a 8 tranças)", sub: "+ Jumbo: R$ 150", price: "R$ 120" },
    { name: "Boxeadora (2 tranças)", price: "R$ 100" }],

    cta: agendaMsg("Tranças / Box Braids")
  },
  entrelace: {
    label: "Entrelace & Crochet",
    title: "Entrelace, crochet e Nina",
    desc: "Aplicação por costura, com ou sem frente nagô. O cabelo (bio, orgânico, Nina ou faux locs) é escolhido pelo catálogo e cobrado à parte.",
    notes: [
    "Mão de obra válida para entrelace, crochet e Nina.",
    "Cabelo bio/orgânico: R$100 a R$140 por pacote.",
    "Nina Softex 70g: R$20 (R$18 a partir do 5º pacote)."],

    rows: [
    { name: "Mão de obra entrelace / crochet / Nina", sub: "com ou sem frente nagô", price: "R$ 200" },
    { name: "Faux Locs Dread Removível", sub: "275–300g, várias cores", price: "R$ 200" },
    { name: "Caracol Miami Maxi", sub: "300g · 55cm", price: "R$ 200" }],

    cta: agendaMsg("Entrelace / Crochet / Nina")
  },
  rabo: {
    label: "Rabo & Removíveis",
    title: "Rabos de cavalo removíveis",
    desc: "Preparados sob encomenda. A cliente escolhe marca, comprimento, cacho e cor pelo catálogo. Alguns volumes cheios ficam prontos no salão.",
    notes: [
    "Prazo mínimo de preparo: 3 dias.",
    "Em períodos como Natal, o prazo pode ser maior.",
    "Cabelo escolhido pelo catálogo (à parte)."],

    rows: [
    { name: "Rabo de cavalo · volume natural", price: "R$ 120" },
    { name: "Rabo de cavalo · volume intermediário", price: "R$ 140" },
    { name: "Rabo de cavalo · volume cheio", price: "R$ 160" },
    { name: "Afro Puff", sub: "volume natural removível", price: "R$ 60" }],

    cta: agendaMsg("Rabo de cavalo removível")
  },
  outros: {
    label: "Avulsos",
    title: "Serviços avulsos",
    desc: "Tintura e alisamento são realizados apenas com o produto trazido pela cliente. Não fornecemos tinta ou química. Não aplicamos química em cabelos bio ou orgânicos.",
    notes: [
    "Não atendemos a domicílio.",
    "Não realizamos manicure, pedicure, depilação, sobrancelha ou maquiagem.",
    "Não indicamos outros profissionais."],

    rows: [
    { name: "Corte de cabelo", price: "R$ 40" },
    { name: "Tintura / pintura", sub: "cliente traz o produto", price: "R$ 40" },
    { name: "Alisamento", sub: "guanidina, hidróxido, tioglicolato", price: "R$ 40" }],

    cta: agendaMsg("Serviço avulso (tintura / alisamento)")
  }
};

function Servicos() {
  const keys = Object.keys(SERVICOS);
  const [tab, setTab] = useState(keys[0]);
  const s = SERVICOS[tab];
  return (
    <section className="servicos section-pad" id="servicos">
      <div className="container">
        <div className="serv-head">
          <div>
            <div className="section-kicker">
              <span className="eyebrow">Serviços e mão de obra</span>
            </div>
            <h2 className="section-title">
              Serviços realizados no salão
            </h2>
          </div>
          <p>
            Os valores abaixo referem-se apenas à mão de obra. Cabelo, jumbo e mechas são cobrados à parte. Para o orçamento
            final, a avaliação presencial é necessária.
          </p>
        </div>

        <div className="serv-tabs" role="tablist">
          {keys.map((k) =>
          <button
            key={k}
            className={`serv-tab ${tab === k ? "is-active" : ""}`}
            onClick={() => setTab(k)}>
              {SERVICOS[k].label}
            </button>
          )}
        </div>

        <div className="serv-content">
          <div>
            <table className="serv-table">
              <tbody>
                {s.rows.map((r, i) =>
                <tr key={i}>
                    <td className="name">
                      {r.name}
                      {r.sub ? <small>{r.sub}</small> : null}
                    </td>
                    <td className="price tnum">{r.price}</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>

          <aside className="serv-side">
            <div className="ss-eyebrow">Sobre este serviço</div>
            <h3>{s.title}</h3>
            <p>{s.desc}</p>
            <ul>
              {s.notes.map((n, i) => <li key={i}>{n}</li>)}
            </ul>
            <div className="serv-agenda">
              <div className="sa-title">Antes de agendar</div>
              <p className="sa-text">
                No WhatsApp, mande seu <strong>nome</strong>, <strong>telefone</strong> e o{" "}
                <strong>dia e horário</strong> que você quer.
              </p>
              <p className="sa-note">
                O horário só é confirmado depois que a gente verifica a disponibilidade da profissional.
              </p>
            </div>
            <a
              className="btn btn-primary"
              href={wa(s.cta)}
              onClick={goWaApp(s.cta)}
              style={{ width: "100%", justifyContent: "center" }}>
              <IconWA /> Agendar no WhatsApp
            </a>
          </aside>
        </div>
      </div>
    </section>);

}

/* ---------------- catalog banner ---------------- */
function CatBanner() {
  return (
    <section className="catbanner">
      <div className="container catbanner-inner">
        <h3>
          Aqui é só uma parte. No zap tem <em>mais opções</em> que não estão no site.
        </h3>
        <a
          className="cb-btn"
          href={wa("Oi! Vim pelo site. Quero ver mais opções além das que estão no site.")}
          onClick={goWaApp("Oi! Vim pelo site. Quero ver mais opções além das que estão no site.")}>
          <IconWA /> Ver mais opções
        </a>
      </div>
    </section>);

}

/* ---------------- inspiração ---------------- */
function Inspiracao() {
  const slots = [
  { id: "s1", label: "Mega Hair · nó italiano", img: "https://images.unsplash.com/photo-1502323777036-f29e3972d82f?w=900&q=80&auto=format&fit=crop" },
  { id: "s2", label: "Goddess Braids", img: "https://images.unsplash.com/photo-1571513722275-4b41940f54b8?w=900&q=80&auto=format&fit=crop" },
  { id: "s3", label: "Boho Curl", img: "https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=900&q=80&auto=format&fit=crop" },
  { id: "s4", label: "Cabelo humano cacheado", img: "https://images.unsplash.com/photo-1522337660859-02fbefca4702?w=900&q=80&auto=format&fit=crop" },
  { id: "s5", label: "Box Braid colorida", img: "https://images.unsplash.com/photo-1614108614385-fcee0c2cfb1f?w=900&q=80&auto=format&fit=crop" },
  { id: "s6", label: "Faux Locs", img: "https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?w=900&q=80&auto=format&fit=crop" }];

  return (
    <section className="inspira section-pad" id="inspiracao">
      <div className="container">
        <div className="section-kicker">
          <span className="eyebrow">Trabalhos do salão</span>
        </div>
        <h2 className="section-title">
          Da gente <em>pras clientes</em>
        </h2>

        <div className="insp-grid">
          {slots.map((s) =>
          <div key={s.id} className={`insp-slot ${s.id}`}>
            <span>{s.label}</span>
          </div>
          )}
        </div>

        <div className="insp-cta">
          <div>
            <h4>Toda hora postamos no <em>Instagram</em> e <em>TikTok</em>.</h4>
            <p>Resultado fresco, cor nova, promoção relampago — é por lá que sai primeiro.</p>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a className="btn btn-copper" href={IG} target="_blank" rel="noopener noreferrer">
              <IconIG /> Instagram
            </a>
            <a className="btn btn-ghost" href={TT} target="_blank" rel="noopener noreferrer">
              <IconTT /> TikTok
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- contato ---------------- */
function Contato() {
  return (
    <section className="contato section-pad" id="contato">
      <div className="container">
        <div className="section-kicker">
          <span className="eyebrow">Onde a gente fica</span>
        </div>
        <h2 className="section-title">
          Passa <em>aqui</em>
        </h2>

        <div className="cont-grid">
          <div className="cont-info-card">
            <div className="cont-row">
              <IconMap />
              <div>
                <div className="cr-label">Endereço</div>
                <div className="cr-val">
                  {ADDR}
                  <small>{CITY}</small>
                  <small style={{ color: "var(--copper)", fontWeight: 500, marginTop: 6 }}>
                    Segunda loja da galeria · ao lado da Casa & Vídeo
                  </small>
                </div>
              </div>
            </div>
            <div className="cont-row">
              <IconClock />
              <div>
                <div className="cr-label">Horários</div>
                <div className="cr-val">
                  Segunda a sexta · 08h às 18h
                  <small>Sábado · 08h às 14h · domingo e feriado a gente fecha</small>
                  <small>Delivery: seg a sex 09h30 às 17h, sáb 09h30 às 12h.</small>
                </div>
              </div>
            </div>
            <div className="cont-row">
              <IconWA style={{ color: "var(--whatsapp)" }} />
              <div>
                <div className="cr-label">WhatsApp</div>
                <div className="cr-val">
                  {PHONE_PRETTY}
                  <small>Atendimento, pedidos e agendamentos. Pix e débito sem acréscimo · crédito +10%</small>
                </div>
              </div>
            </div>
          </div>

          <div className="cont-social">
            <a
              className="social-card wa"
              href={wa("Olá! Vim pelo site e quero falar com o salão.")}
              onClick={goWaApp("Olá! Vim pelo site e quero falar com o salão.")}>
              <div className="sc-icon"><IconWA /></div>
              <div>
                <div className="sc-label">WhatsApp</div>
                <div className="sc-val">{PHONE_PRETTY}</div>
              </div>
              <IconArrow className="sc-arrow" />
            </a>
            <a className="social-card ig" href={IG} target="_blank" rel="noopener noreferrer">
              <div className="sc-icon"><IconIG /></div>
              <div>
                <div className="sc-label">Instagram</div>
                <div className="sc-val">@salaopetalamorena</div>
              </div>
              <IconArrow className="sc-arrow" />
            </a>
            <a className="social-card tt" href={TT} target="_blank" rel="noopener noreferrer">
              <div className="sc-icon"><IconTT /></div>
              <div>
                <div className="sc-label">TikTok</div>
                <div className="sc-val">Siga a gente lá</div>
              </div>
              <IconArrow className="sc-arrow" />
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- footer ---------------- */
function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <div className="fb-eye">Centro de Beleza</div>
            <div className="fb-mark">Pétala Morena</div>
            <p>
              Mega hair, trança, jumbo, cabelo humano, bio, orgânico, pomada, touca e o que mais precisar. Tô no Centro de Campos,
              no zap, no Instagram e no TikTok. Pra comprar ou agendar, manda mensagem.
            </p>
          </div>
          <div className="foot-col">
            <h5>Navegação</h5>
            <ul>
              <li><a href="#servicos">Serviços</a></li>
              <li><a href="#produtos">Produtos</a></li>
              <li><a href="#contato">Contato</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Fala com a gente</h5>
            <ul>
              <li><a href={wa("Oi! Vim pelo site.")} onClick={goWaApp("Oi! Vim pelo site.")}>WhatsApp · {PHONE_PRETTY}</a></li>
              <li><a href={wa(agendaMsg("um horário no salão"))} onClick={goWaApp(agendaMsg("um horário no salão"))}>Agendar horário</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© Salão Pétala Morena · Campos dos Goytacazes — RJ</span>
          <span>O site é só vitrine. Compra e agenda é no zap.</span>
        </div>
      </div>
    </footer>);

}

/* ---------------- floating WA ---------------- */
function FloatingWA() {
  return (
    <a
      className="fab"
      href={wa("Oi! Vim pelo site, queria saber mais.")}
      onClick={goWaApp("Oi! Vim pelo site, queria saber mais.")}
      aria-label="Falar no WhatsApp">
      <IconWA />
    </a>);

}


/* ---------------- app ---------------- */
function App() {
  const Vitrine = window.Vitrine || (() => null);

  useEffect(() => {
    const scrollToHash = () => {
      const hash = window.location.hash;
      if (!hash) return;
      if (hash === "#top") {
        window.scrollTo({ top: 0, behavior: "auto" });
        return;
      }
      const target = document.querySelector(hash);
      if (target) target.scrollIntoView({ block: "start", behavior: "auto" });
    };

    const t = window.setTimeout(scrollToHash, 80);
    window.addEventListener("hashchange", scrollToHash);
    return () => {
      window.clearTimeout(t);
      window.removeEventListener("hashchange", scrollToHash);
    };
  }, []);

  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Ticker />
      <Diferenciais />
      <Vitrine />
      <CatBanner />
      <Servicos />
      <Contato />
      <Footer />
      <FloatingWA />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);