// Elegancy Glass — Sections

const WA = "https://wa.me/5548984040619";

const ArrowIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
    <path d="M5 12h14M13 5l7 7-7 7"/>
  </svg>
);

const WhatsAppIcon = ({size=18}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413"/>
  </svg>
);

const PinIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <circle cx="12" cy="10" r="3"/>
    <path d="M12 22s8-7 8-12a8 8 0 10-16 0c0 5 8 12 8 12z"/>
  </svg>
);

// =================== NAV ===================
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="brand">
          <img src="img/logo.png" alt="Elegancy Glass — Vidros e Esquadrias" className="brand-logo"/>
        </a>
        <div className="nav-links">
          <a href="#servicos">Serviços</a>
          <a href="#diferenciais">Diferenciais</a>
          <a href="#processo">Processo</a>
          <a href="#trabalhos">Trabalhos</a>
          <a href="#faq">FAQ</a>
          <a href="#contato">Contato</a>
        </div>
        <a href={WA} className="nav-cta" target="_blank" rel="noopener">
          <span className="wa-dot"></span>
          <span>Falar agora</span>
        </a>
      </div>
    </nav>
  );
}

// =================== HERO ===================
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <img src="img/hero-fachada.jpg" alt="Fachada residencial com esquadrias de alumínio preto"/>
      </div>
      <div className="container hero-inner">
        <div className="hero-copy">
          <span className="eyebrow">Esquadrias · Vidros · Sob medida em SC</span>
          <h1>
            Vidro, alumínio<br/>
            e <em>cuidado</em>.<br/>
            <span className="small">Sob medida pra sua casa.</span>
          </h1>
          <p className="hero-lede">
            Janelas, box, espelhos, guarda-corpos e fachadas em Palhoça
            e toda a Grande Floripa. A gente cuida de tudo — da medição
            à instalação — com garantia de 1 ano.
          </p>
          <div className="hero-actions">
            <a href={WA} target="_blank" rel="noopener" className="btn-primary">
              <WhatsAppIcon size={16}/>
              Pedir orçamento grátis
            </a>
            <a href="#trabalhos" className="btn-ghost">
              Ver trabalhos <ArrowIcon/>
            </a>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <div className="num">10<span style={{color:'var(--accent)'}}>+</span></div>
              <div className="lbl">Anos atuando</div>
            </div>
            <div className="hero-meta-item">
              <div className="num">1<span style={{color:'var(--accent)', fontSize:'0.6em', marginLeft:4}}>ano</span></div>
              <div className="lbl">Garantia</div>
            </div>
            <div className="hero-meta-item">
              <div className="num">11</div>
              <div className="lbl">Cidades</div>
            </div>
            <div className="hero-meta-item">
              <div className="num">100<span style={{color:'var(--accent)'}}>%</span></div>
              <div className="lbl">Sob medida</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== TESTIMONIALS ===================
function Testimonials() {
  const items = [
    {
      q: "Instalaram as esquadrias de toda a casa nova. Pontuais, organizados e o acabamento ficou impecável. Recomendo de olhos fechados.",
      n: "Carla M.", c: "Palhoça · SC", a: "C",
    },
    {
      q: "Box do banheiro chegou exatamente como combinado. Equipe atenciosa, explicou tudo na hora da medição e cumpriu o prazo.",
      n: "Rafael S.", c: "São José · SC", a: "R",
    },
    {
      q: "Fizeram o fechamento da varanda. Atendimento próximo, sem enrolação, e o resultado mudou completamente o ambiente.",
      n: "Juliana T.", c: "Florianópolis · SC", a: "J",
    },
  ];
  return (
    <section className="section testimonials" id="depoimentos">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Quem já contratou</span>
            <h2>O que os clientes<br/><em>contam.</em></h2>
          </div>
          <p>
            Pedimos sempre um retorno depois da entrega — é assim que a gente
            evolui. Aqui estão alguns depoimentos recentes de quem confiou
            o projeto à nossa equipe.
          </p>
        </div>
        <div className="testimonial-grid">
          {items.map((t, i) => (
            <div className="testimonial" key={i}>
              <div className="quote-mark">"</div>
              <p>{t.q}</p>
              <div className="testimonial-who">
                <div className="testimonial-avatar">{t.a}</div>
                <div>
                  <div className="testimonial-name">{t.n}</div>
                  <div className="testimonial-meta">{t.c}</div>
                </div>
                <div className="testimonial-stars">★★★★★</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== MARQUEE ===================
function Marquee() {
  const items = [
    "Esquadrias de Alumínio", "Box de Vidro", "Espelhos sob medida",
    "Guarda-corpo", "Fachadas de Vidro", "Coberturas e Toldos",
    "Persianas e Cortinas",
  ];
  const all = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((t, i) => (
          <div className="marquee-item" key={i}>
            <span>{t}</span>
            <span className="dot"></span>
          </div>
        ))}
      </div>
    </div>
  );
}

// =================== SERVICES ===================
const SERVICES = [
  { num: "01", t: "Esquadrias de Alumínio", d: "Janelas, portas e fachadas em perfis de alta resistência. Linhas Suprema, Maxim-Ar e correr de duas, três e quatro folhas.", img: "img/janela-canto.jpg" },
  { num: "02", t: "Box de Vidro", d: "Vidro temperado 8mm com perfis em alumínio preto, cromado ou champagne. Acabamento premium com instalação segura.", img: "img/box-banheira.jpg" },
  { num: "03", t: "Espelhos", d: "Espelhos lapidados sob medida para banheiros, salas, lojas e ambientes corporativos. Bisotê e instalação inclusa.", img: "img/box-chuveiro.jpg" },
  { num: "04", t: "Guarda-Corpo", d: "Vidro temperado e alumínio para varandas, escadas, mezaninos e bordas de piscina. Conforme NBR 14718.", img: "img/guarda-corpo-escada.jpg" },
  { num: "05", t: "Fachadas de Vidro", d: "Fechamentos de varanda, sacadas, comerciais e residenciais. Vidros laminados e temperados com perfis estruturais.", img: "img/fechamento-varanda.jpg" },
  { num: "06", t: "Coberturas e Toldos", d: "Coberturas em vidro, policarbonato e toldos retráteis para áreas externas, garagens e áreas gourmet.", img: "img/claraboia.jpg" },
];

function Services() {
  return (
    <section className="section" id="servicos">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">O que a gente faz</span>
            <h2>Tudo em vidro<br/>e <em>esquadria</em>.</h2>
          </div>
          <p>
            Sete tipos de serviço com um só responsável: a gente cuida do
            projeto, da fabricação e da instalação. Sem terceirizar e com
            garantia de 1 ano em vedação e regulagem.
          </p>
        </div>
        <div className="services">
          {SERVICES.map((s) => (
            <a key={s.num} href={`#contato`} className="service">
              <div className="service-img">
                <img src={s.img} alt={s.t}/>
              </div>
              <span className="num">— {s.num}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <span className="service-arrow"><ArrowIcon/></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== WHY ===================
function Why() {
  const items = [
    { big: "10+", h: "Anos de experiência", p: "Mais de uma década dedicada a esquadrias e vidros na Grande Florianópolis." },
    { big: "1ano", h: "Garantia em vedação", p: "Garantia formal de 1 ano em vedação e regulagem — sem pegadinhas." },
    { big: "100%", h: "Equipe própria", p: "Da medição à instalação: nossa própria equipe, treinada e responsável." },
    { big: "11", h: "Cidades atendidas", p: "Palhoça, São José, Florianópolis, Biguaçu, Imbituba, Tijucas, Itapema e mais." },
  ];
  return (
    <section className="why" id="diferenciais">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Por que escolher</span>
            <h2>Padrão de obra,<br/>cuidado de <em>boutique.</em></h2>
          </div>
          <p>
            Trabalhamos como uma boutique de esquadrias: poucos projetos
            simultâneos, atenção total ao detalhe, prazos respeitados.
            Aqui você não é só mais um número de OS.
          </p>
        </div>
        <div className="why-grid">
          {items.map((it, i) => (
            <div key={i} className="why-cell">
              <div className="big">{it.big}</div>
              <div>
                <h4>{it.h}</h4>
                <p>{it.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== PROCESS ===================
function Process() {
  const steps = [
    { n: "01", t: "Conversa inicial", d: "Você manda mensagem pelo WhatsApp ou formulário. Entendemos o que precisa, ambiente, prazo e referências.", time: "Mesmo dia" },
    { n: "02", t: "Visita técnica e medição", d: "Vamos até o local, medimos com precisão e discutimos materiais, perfis e acabamentos disponíveis.", time: "Em 48h" },
    { n: "03", t: "Orçamento e projeto", d: "Você recebe um orçamento detalhado por escrito, com tudo especificado. Sem pegadinhas, sem surpresas no final.", time: "3 a 5 dias" },
    { n: "04", t: "Fabricação e instalação", d: "Após aprovação, fabricamos sob medida e instalamos com nossa equipe própria. Garantia formal de 1 ano.", time: "15 a 25 dias" },
  ];
  return (
    <section className="section" id="processo">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Como trabalhamos</span>
            <h2>Quatro etapas,<br/>zero <em>surpresas.</em></h2>
          </div>
          <p>
            Um processo claro do primeiro contato à entrega. Você sabe
            exatamente o que esperar em cada fase, com prazos e
            responsabilidades definidos.
          </p>
        </div>
        <div className="process-list">
          {steps.map((s) => (
            <div className="process-item" key={s.n}>
              <div className="process-num">— {s.n}</div>
              <div className="process-content">
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
              <div className="process-time">{s.time}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== PORTFOLIO ===================
function Portfolio() {
  const items = [
    { c: "g-1", l: "Fachada residencial · Florianópolis", img: "img/fachada-sobrado.jpg" },
    { c: "g-2", l: "Box temperado · Palhoça", img: "img/box-banheira.jpg" },
    { c: "g-3", l: "Janela panorâmica", img: "img/janela-panoramica.jpg" },
    { c: "g-4", l: "Guarda-corpo · Piscina", img: "img/guarda-corpo-piscina.jpg" },
    { c: "g-5", l: "Porta de correr noturna", img: "img/porta-correr-noturno.jpg" },
    { c: "g-6", l: "Fechamento de varanda", img: "img/fechamento-corredicao.jpg" },
    { c: "g-7", l: "Cobertura de vidro · Skylight", img: "img/claraboia.jpg" },
    { c: "g-8", l: "Comercial · São José", img: "img/fechamento-muro.jpg" },
  ];
  return (
    <section className="section portfolio" id="trabalhos">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Selecionados</span>
            <h2>Trabalhos<br/><em>recentes.</em></h2>
          </div>
          <p>
            Uma seleção de projetos entregues nos últimos meses em
            Palhoça, São José, Florianópolis e cidades vizinhas.
            Residenciais e comerciais, do mais discreto ao mais ousado.
          </p>
        </div>
        <div className="gallery">
          {items.map((it, i) => (
            <div className={`gallery-item ${it.c}`} key={i}>
              <img src={it.img} alt={it.l}/>
              <div className="ph-tag">{it.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== COBERTURA ===================
function Cobertura() {
  const cidades = [
    "Palhoça", "São José", "Florianópolis", "Biguaçu",
    "Santo Amaro da Imperatriz", "Rancho Queimado", "Paulo Lopes",
    "Imbituba", "Tijucas", "Porto Belo", "Itapema",
  ];
  return (
    <section className="section" id="cobertura">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Atendimento</span>
            <h2>Onde a gente<br/><em>chega.</em></h2>
          </div>
          <p>
            Sediados em Palhoça, atendemos toda a Grande Florianópolis
            e o litoral catarinense — de Tijucas a Imbituba.
            Visita técnica gratuita.
          </p>
        </div>
        <div className="cobertura">
          <div className="cobertura-list">
            {cidades.map((c, i) => (
              <div className="city" key={i}>
                <PinIcon/>
                <span>{c}</span>
              </div>
            ))}
          </div>
          <div className="cobertura-map">
            <svg viewBox="0 0 400 400" style={{width:'100%', height:'100%'}}>
              <defs>
                <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--line)" strokeWidth="0.5"/>
                </pattern>
              </defs>
              <rect width="400" height="400" fill="url(#grid)"/>
              {/* Stylized SC coast */}
              <path d="M 60 80 Q 120 100 140 160 Q 130 220 180 260 Q 220 300 280 320 Q 330 330 360 360"
                    fill="none" stroke="var(--ink-mute)" strokeWidth="1.5" strokeDasharray="3 3"/>
              {/* Cities as dots */}
              {[
                {x:140, y:170, n:"Tijucas"},
                {x:160, y:200, n:"Biguaçu"},
                {x:180, y:230, n:"Floripa"},
                {x:200, y:255, n:"São José"},
                {x:210, y:275, n:"Palhoça", main:true},
                {x:220, y:295, n:"Sto Amaro"},
                {x:260, y:310, n:"P. Lopes"},
                {x:300, y:330, n:"Imbituba"},
                {x:170, y:160, n:"P. Belo"},
                {x:155, y:180, n:"Itapema"},
              ].map((p, i) => (
                <g key={i}>
                  <circle cx={p.x} cy={p.y} r={p.main ? 8 : 4}
                          fill={p.main ? "var(--accent)" : "var(--ink)"}/>
                  {p.main && <circle cx={p.x} cy={p.y} r="14" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.4"/>}
                  <text x={p.x + (p.main ? 14 : 10)} y={p.y + 4}
                        fontSize={p.main ? "13" : "10"}
                        fontWeight={p.main ? "600" : "400"}
                        fontFamily="var(--mono)"
                        fill="var(--ink)">{p.n}</text>
                </g>
              ))}
              <text x="20" y="30" fontFamily="var(--mono)" fontSize="9" fill="var(--ink-mute)" letterSpacing="2">SANTA CATARINA · LITORAL</text>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== FAQ ===================
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Quanto tempo demora para receber o orçamento?", a: "Após a visita técnica, você recebe o orçamento detalhado por escrito em 3 a 5 dias úteis, com todos os materiais, perfis e prazos especificados." },
    { q: "A instalação está inclusa no preço?", a: "Sim. Todos os nossos orçamentos já incluem instalação feita pela nossa equipe própria. Não terceirizamos." },
    { q: "Quais são os prazos de fabricação e instalação?", a: "Após aprovação do orçamento e do projeto, a fabricação leva entre 15 e 25 dias úteis, dependendo da complexidade e disponibilidade dos perfis." },
    { q: "Vocês oferecem garantia?", a: "Sim. Oferecemos garantia formal de 1 ano em vedação e regulagem em todos os projetos, além das garantias de fábrica dos materiais utilizados." },
    { q: "Atendem fora de Palhoça?", a: "Sim. Atendemos toda a Grande Florianópolis e litoral: São José, Florianópolis, Biguaçu, Santo Amaro, Rancho Queimado, Paulo Lopes, Imbituba, Tijucas, Porto Belo e Itapema." },
    { q: "Posso visitar a oficina ou ver projetos prontos?", a: "Claro. Estamos na Av. Prefeito Nelson Martins, 249, em Palhoça. Combine uma visita pelo WhatsApp e teremos prazer em receber você." },
  ];
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Tirando dúvidas</span>
            <h2>Perguntas<br/><em>frequentes.</em></h2>
          </div>
          <p>
            As respostas que mais aparecem antes do orçamento.
            Não encontrou a sua? Manda no WhatsApp — a gente responde
            no mesmo dia.
          </p>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M12 5v14M5 12h14"/>
                  </svg>
                </span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== CONTACT ===================
function Contato() {
  const [form, setForm] = React.useState({ nome: '', tel: '', servico: 'Esquadria de Alumínio', cidade: '', msg: '' });
  const update = (k, v) => setForm({ ...form, [k]: v });
  const onSubmit = (e) => {
    e.preventDefault();
    const text = `Olá! Sou ${form.nome}.\nServiço: ${form.servico}\nCidade: ${form.cidade}\nTelefone: ${form.tel}\n\n${form.msg}`;
    window.open(`${WA}?text=${encodeURIComponent(text)}`, '_blank');
  };
  return (
    <section className="section" id="contato">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Vamos conversar</span>
            <h2>Peça seu<br/><em>orçamento.</em></h2>
          </div>
          <p>
            Conte um pouco do que precisa. Em até um dia útil você recebe
            uma mensagem nossa para agendar a visita técnica gratuita.
          </p>
        </div>
        <div className="contato">
          <div className="contato-info">
            <div className="contato-block">
              <div className="lbl-mono">Endereço</div>
              <div className="val">Av. Prefeito Nelson Martins, 249<br/>Palhoça · SC</div>
            </div>
            <div className="contato-block">
              <div className="lbl-mono">WhatsApp</div>
              <div className="val">
                <a href={WA} target="_blank" rel="noopener">(48) 98404-0619</a>
              </div>
            </div>
            <div className="contato-block">
              <div className="lbl-mono">E-mail</div>
              <div className="val">
                <a href="mailto:elegancyglass01@gmail.com">elegancyglass01@gmail.com</a>
              </div>
            </div>
            <div className="contato-block">
              <div className="lbl-mono">Horário</div>
              <div className="val">Seg–Sex · 08h–12h e 13h30–18h</div>
            </div>
          </div>
          <form className="form" onSubmit={onSubmit}>
            <h4>Solicite um orçamento</h4>
            <div className="form-row">
              <div className="field">
                <label>Nome</label>
                <input required value={form.nome} onChange={e => update('nome', e.target.value)} placeholder="Seu nome"/>
              </div>
              <div className="field">
                <label>Telefone</label>
                <input required value={form.tel} onChange={e => update('tel', e.target.value)} placeholder="(48) 9 9999-9999"/>
              </div>
            </div>
            <div className="form-row">
              <div className="field">
                <label>Serviço</label>
                <select value={form.servico} onChange={e => update('servico', e.target.value)}>
                  <option>Esquadria de Alumínio</option>
                  <option>Box de Vidro</option>
                  <option>Espelho</option>
                  <option>Guarda-Corpo</option>
                  <option>Fachada de Vidro</option>
                  <option>Cobertura / Toldo</option>
                  <option>Persiana / Cortina</option>
                  <option>Outro</option>
                </select>
              </div>
              <div className="field">
                <label>Cidade</label>
                <input value={form.cidade} onChange={e => update('cidade', e.target.value)} placeholder="Palhoça, SC"/>
              </div>
            </div>
            <div className="field">
              <label>Mensagem</label>
              <textarea value={form.msg} onChange={e => update('msg', e.target.value)} placeholder="Conte um pouco do que precisa..."/>
            </div>
            <button type="submit">
              <WhatsAppIcon size={16}/>
              Enviar pelo WhatsApp
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

// =================== FOOTER ===================
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-cta">
          <h2>Pronto pra deixar<br/>seu espaço <em>elegante?</em></h2>
          <a href={WA} target="_blank" rel="noopener" className="btn-primary">
            <WhatsAppIcon size={16}/>
            Falar com especialista
          </a>
        </div>
        <div className="footer-bottom">
          <div className="footer-brand-block">
            <div className="brand">
              <img src="img/logo.png" alt="Elegancy Glass — Vidros e Esquadrias" className="brand-logo"/>
            </div>
            <p>Esquadrias de alumínio, vidros e fachadas sob medida em Palhoça e Grande Florianópolis. Garantia, prazo e padrão.</p>
          </div>
          <div>
            <h5>Navegação</h5>
            <a href="#servicos">Serviços</a>
            <a href="#diferenciais">Diferenciais</a>
            <a href="#processo">Processo</a>
            <a href="#trabalhos">Trabalhos</a>
            <a href="#faq">FAQ</a>
          </div>
          <div>
            <h5>Contato</h5>
            <a href={WA}>(48) 98404-0619</a>
            <a href="mailto:elegancyglass01@gmail.com">elegancyglass01@gmail.com</a>
            <p>Av. Pref. Nelson Martins, 249<br/>Palhoça · SC</p>
          </div>
          <div>
            <h5>Redes</h5>
            <a href="https://www.instagram.com/elegancyglass/" target="_blank" rel="noopener">Instagram</a>
            <a href="https://www.facebook.com/elegancyglass/" target="_blank" rel="noopener">Facebook</a>
            <a href={WA} target="_blank" rel="noopener">WhatsApp</a>
          </div>
        </div>
        <div className="copy">
          <span>© 2026 Elegancy Glass · CNPJ 20.685.213/0001-01</span>
          <span style={{display:'flex', gap:12, flexWrap:'wrap', justifyContent:'center'}}>
            <a href="privacidade.html" style={{color:'var(--ink-mute)', fontSize:'12px'}}>Privacidade</a>
            <a href="termos.html" style={{color:'var(--ink-mute)', fontSize:'12px'}}>Termos de Uso</a>
            <a href="cookies.html" style={{color:'var(--ink-mute)', fontSize:'12px'}}>Cookies</a>
          </span>
          <span>Feito com ❤️ <a href="https://atualiza360.com.br/" target="_blank" rel="noopener" style={{color:'inherit', textDecoration:'underline', textUnderlineOffset:'3px'}}>Publique &amp; Publicidade 360</a>.</span>
        </div>
      </div>
    </footer>
  );
}

// =================== VIDEO ===================
function Video() {
  return (
    <section className="section" id="video">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Veja na prática</span>
            <h2>Elegancy Glass<br/><em>em vídeo.</em></h2>
          </div>
          <p>
            Conheça um pouco do nosso trabalho — da medição ao acabamento final,
            tudo feito com nossa equipe própria em Palhoça e Grande Florianópolis.
          </p>
        </div>
        <div className="video-wrap">
          <iframe
            src="https://www.youtube.com/embed/5mtgnWcJ4YI"
            title="Elegancy Glass — Esquadrias e Vidros em Palhoça, SC"
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        </div>
      </div>
    </section>
  );
}

// =================== FAB ===================
function FAB() {
  return (
    <a href={WA} target="_blank" rel="noopener" className="fab" aria-label="WhatsApp">
      <WhatsAppIcon size={28}/>
    </a>
  );
}

// =================== COOKIE BANNER ===================
const COOKIE_KEY = 'elegancy_consent';

function CookieBanner() {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (!localStorage.getItem(COOKIE_KEY)) setVisible(true);
  }, []);

  const accept = () => {
    localStorage.setItem(COOKIE_KEY, 'accepted');
    setVisible(false);
  };
  const decline = () => {
    localStorage.setItem(COOKIE_KEY, 'declined');
    setVisible(false);
  };

  if (!visible) return null;
  return (
    <div className="cookie-banner" role="dialog" aria-label="Aviso de cookies">
      <div className="cookie-banner-text">
        <strong>Usamos cookies</strong> para melhorar sua experiência, medir o tráfego e exibir anúncios relevantes. Ao clicar em <em>Aceitar</em>, você concorda com nossa{' '}
        <a href="cookies.html">Política de Cookies</a> e{' '}
        <a href="privacidade.html">Política de Privacidade</a>.
      </div>
      <div className="cookie-banner-actions">
        <button className="cookie-btn-accept" onClick={accept}>Aceitar cookies</button>
        <button className="cookie-btn-decline" onClick={decline}>Recusar opcionais</button>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Services, Why, Process, Portfolio, Cobertura, FAQ, Contato, Footer, FAB, Testimonials, Video, CookieBanner });