// Promoções PB — Landing page (React, single file)
// Yellow + navy palette. Polished, multi-section, with sticky nav, branch cards,
// stylized map of Paraíba, "how it works" steps, FAQ accordion, and footer.

const BRANCHES = [
  {
    id: 'santa-rita',
    city: 'Santa Rita',
    state: 'PB',
    url: 'https://promocoes.com.br/cvc-santa-rita-pb/',
    image: 'https://promocoescvc.com.br/cvc-santa-rita-pb/assets/storefront.png',
    address: 'Av. Pres. João Pessoa, 458',
    district: 'Centro · Santa Rita, PB',
    phone: '(83) 3000-0001',
    whatsapp: '5583900000001',
    hours: 'Seg–Sex 09h–18h · Sáb 09h–13h',
    mapX: 16,
    mapY: 38,
    distance: '15 min do centro de João Pessoa',
    consultants: '4 consultores de viagem',
  },
  {
    id: 'bayeux',
    city: 'Bayeux',
    state: 'PB',
    url: 'https://promocoes.com.br/cvc-bayeux-pb/',
    image: 'https://promocoescvc.com.br/cvc-bayeux-pb/assets/storefront.png',
    address: 'Av. Liberdade, 1.230',
    district: 'São Bento · Bayeux, PB',
    phone: '(83) 3000-0002',
    whatsapp: '5583900000002',
    hours: 'Seg–Sex 09h–18h · Sáb 09h–13h',
    mapX: 12,
    mapY: 42,
    distance: '10 min do centro de João Pessoa',
    consultants: '3 consultores de viagem',
  },
];

/* ============================================================ */
/*  Icon set (inline SVG — kept minimal and consistent)         */
/* ============================================================ */
function Icon({ name, size = 18, stroke = 1.7, color = 'currentColor' }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'phone':
      return <svg {...p}><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>;
    case 'mail':
      return <svg {...p}><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m22 6-10 7L2 6" /></svg>;
    case 'clock':
      return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>;
    case 'pin':
      return <svg {...p}><path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></svg>;
    case 'wa':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.33 4.97L2.05 22l5.25-1.38a9.94 9.94 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.83 9.83 0 0 0 12.04 2Zm5.83 14.18c-.25.69-1.43 1.32-1.99 1.4-.51.08-1.15.11-1.85-.12a14.27 14.27 0 0 1-1.68-.62c-2.95-1.28-4.88-4.25-5.03-4.45-.15-.2-1.2-1.6-1.2-3.05 0-1.45.76-2.16 1.03-2.46.27-.3.6-.37.79-.37.2 0 .4 0 .57.01.18.01.43-.07.67.51.25.62.85 2.13.93 2.28.07.15.13.33.02.53-.1.2-.16.32-.31.49-.15.18-.32.4-.46.53-.15.15-.31.31-.13.61.17.3.79 1.3 1.69 2.1 1.17 1.04 2.16 1.36 2.46 1.51.31.15.49.13.67-.08.18-.2.78-.91.99-1.22.2-.31.41-.26.69-.15.27.1 1.75.82 2.05.97.3.15.5.22.57.35.07.13.07.74-.18 1.43Z" /></svg>;
    case 'wallet':
      return <svg {...p}><rect x="2" y="6" width="20" height="14" rx="2" /><path d="M2 10h20" /><circle cx="17" cy="15" r="1.4" /></svg>;
    case 'shield':
      return <svg {...p}><path d="M12 2 4 5v6c0 5 3.4 9.5 8 11 4.6-1.5 8-6 8-11V5l-8-3Z" /><path d="m9 12 2 2 4-4" /></svg>;
    case 'sparkles':
      return <svg {...p}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" /></svg>;
    case 'users':
      return <svg {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>;
    case 'search':
      return <svg {...p}><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>;
    case 'arrow-right':
      return <svg {...p}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
    case 'route':
      return <svg {...p}><circle cx="6" cy="19" r="2" /><circle cx="18" cy="5" r="2" /><path d="M8 19h8a4 4 0 0 0 0-8H8a4 4 0 0 1 0-8h6" /></svg>;
    case 'instagram':
      return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="3.5" /><circle cx="17.5" cy="6.5" r="1" fill={color} stroke="none" /></svg>;
    case 'facebook':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.78-3.89 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12Z" /></svg>;
    case 'youtube':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M21.6 7.2a2.5 2.5 0 0 0-1.76-1.76C18.28 5 12 5 12 5s-6.28 0-7.84.44A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.76C5.72 19 12 19 12 19s6.28 0 7.84-.44a2.5 2.5 0 0 0 1.76-1.76A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8ZM10 15V9l5 3-5 3Z" /></svg>;
    case 'sun':
      return <svg {...p}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></svg>;
    case 'plane':
      return <svg {...p}><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21 4 19.5 2.5S16 2 14.5 3.5L11 7 2.8 5.2c-.5-.1-.9.1-.9.7v.7l9 5.5-2 4.4-3 .7-.4.4 3.6 1.4 1.4 3.6.4-.4.7-3 4.4-2 5.5 9h.7c.6 0 .8-.4.7-.9Z" /></svg>;
    default:
      return null;
  }
}

/* ============================================================ */
/*  Brand mark — original sun + plane glyph (not CVC's logo)    */
/* ============================================================ */
function BrandMark({ size = 40 }) {
  return (
    <div className="brand-mark" style={{ width: size, height: size, borderRadius: size * 0.3 }}>
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="4.5" fill="#FFD400" />
        {Array.from({ length: 8 }).map((_, i) => {
          const a = (i / 8) * Math.PI * 2;
          const x1 = 12 + Math.cos(a) * 7;
          const y1 = 12 + Math.sin(a) * 7;
          const x2 = 12 + Math.cos(a) * 9.4;
          const y2 = 12 + Math.sin(a) * 9.4;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#FFD400" strokeWidth="1.6" strokeLinecap="round" />;
        })}
      </svg>
    </div>
  );
}

/* ============================================================ */
/*  Top utility bar + nav                                        */
/* ============================================================ */
function UtilityBar() {
  return (
    <div className="util">
      <div className="util-inner">
        <div className="util-left">
          <span className="util-item"><Icon name="clock" size={14} /> Seg–Sex 09h às 18h · Sáb 09h às 13h</span>
          <span className="util-item"><Icon name="pin" size={14} /> Santa Rita · Bayeux · Paraíba</span>
        </div>
        <div className="util-right">
          <a className="util-link" href="#filiais">Onde estamos</a>
          <a className="util-link" href="#contato">Contato</a>
          <span className="util-pill"><span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--navy)' }} /> 2 filiais abertas agora</span>
        </div>
      </div>
    </div>
  );
}

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="brand" href="#" aria-label="Promoções PB — início">
          <BrandMark size={42} />
          <div className="brand-text">
            <div className="brand-name">Promoções PB</div>
            <div className="brand-tag">Sua viagem começa aqui</div>
          </div>
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#filiais">Filiais</a>
          <a className="nav-link" href="#como">Como funciona</a>
          <a className="nav-link" href="#faq">Dúvidas</a>
          <a className="nav-link" href="#contato">Contato</a>
        </div>
        <a className="nav-cta nav-cta-wa" href="#contato">
          <Icon name="wa" size={16} />
          Falar no WhatsApp
        </a>
      </div>
    </nav>
  );
}

/* ============================================================ */
/*  Hero                                                         */
/* ============================================================ */
function Hero() {
  return (
    <section className="hero">
      <div className="hero-inner">
        <div className="hero-text">
          <div className="eyebrow">
            <span className="eyebrow-line" />
            Hub de filiais · Paraíba
          </div>
          <h1 className="h1">
            A sua próxima viagem está a <em>poucos minutos</em> <span className="mark">da sua casa.</span>
          </h1>
          <p className="hero-lede">
            Atendimento presencial em <strong>Santa Rita</strong> e <strong>Bayeux</strong>, na Grande João Pessoa. Pacotes nacionais e internacionais, parcelamento em até 12x e consultores que conhecem cada destino.
          </p>
          <div className="hero-ctas">
            <a href="#filiais" className="btn btn-primary">
              Ver as filiais
              <Icon name="arrow-right" size={16} />
            </a>
            <a href="#como" className="btn btn-ghost">Como funciona</a>
          </div>
          <div className="hero-trust">
            <div className="hero-trust-item">
              <span className="hero-trust-icon"><Icon name="shield" size={16} /></span>
              12 anos de Paraíba
            </div>
            <div className="hero-trust-item">
              <span className="hero-trust-icon"><Icon name="users" size={16} /></span>
              +18 mil clientes
            </div>
            <div className="hero-trust-item">
              <span className="hero-trust-icon"><Icon name="sparkles" size={16} /></span>
              4,9 ★ no Google
            </div>
          </div>
        </div>

        <div className="hero-art" aria-hidden="true">
          <div className="hero-art-img" />
          <div className="hero-art-stripes" />
          <div className="hero-art-label">[ foto · paisagem ou loja ]</div>
          <div className="hero-art-overlay">
            <div className="hero-art-quote">
              “Atendimento de verdade, do tipo que olha no olho.”
            </div>
            <div className="hero-art-card">
              <div className="hero-art-card-sub">Próxima saída</div>
              <div className="hero-art-card-big">Maragogi</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>4 noites · a partir de R$ 899</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
/*  Trust strip                                                  */
/* ============================================================ */
function TrustStrip() {
  const items = [
    { icon: 'wallet', title: 'Em até 12x sem juros', sub: 'Em todos os pacotes' },
    { icon: 'users', title: 'Atendimento humano', sub: 'Consultores na sua cidade' },
    { icon: 'plane', title: 'Pacotes nacionais e internacionais', sub: 'Mais de 200 destinos' },
    { icon: 'shield', title: 'Reserva garantida', sub: 'Pagamento seguro' },
  ];
  return (
    <section className="strip">
      <div className="strip-inner">
        {items.map((it, i) => (
          <div key={i} className="strip-item">
            <span className="strip-icon"><Icon name={it.icon} size={20} /></span>
            <div className="strip-text">
              <div className="strip-title">{it.title}</div>
              <div className="strip-sub">{it.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================ */
/*  Branches grid + map context                                  */
/* ============================================================ */
function Branches() {
  return (
    <section id="filiais" className="section branches">
      <div className="section-inner">
        <div className="section-head">
          <div className="section-head-left">
            <div className="eyebrow"><span className="eyebrow-line" /> 02 — Nossas filiais</div>
            <h2 className="section-h2" style={{ marginTop: 16 }}>
              Escolha a loja <em>mais perto de você.</em>
            </h2>
            <p className="section-sub">
              Duas lojas físicas na Grande João Pessoa, com equipes próprias e atendimento de segunda a sábado.
            </p>
          </div>
          <div className="section-head-right">
            <a href="#contato" className="btn btn-yellow">
              <Icon name="wa" size={16} />
              Não consigo ir até a loja
            </a>
          </div>
        </div>

        <div className="branch-grid">
          {BRANCHES.map((b, i) => <BranchCard key={b.id} branch={b} index={i + 1} />)}
        </div>

        <MapContext />
      </div>
    </section>
  );
}

function BranchCard({ branch, index }) {
  const isFirst = index === 1;
  return (
    <a href={branch.url} className="branch-card" target="_self">
      <div className="branch-img">
        <div
          className="branch-img-bg branch-img-photo"
          style={{
            backgroundImage: `url("${branch.image}")`,
          }}
          role="img"
          aria-label={`Fachada da loja de ${branch.city}`}
        />
        <div className="branch-img-overlay" />
        <div className="branch-img-num">0{index}</div>
        <div className="branch-img-tag"><span className="dot" /> Aberto agora</div>
        <div className="branch-img-city-strip">
          <div className="branch-img-city">{branch.city}</div>
          <div className="branch-img-state">{branch.state}</div>
        </div>
      </div>

      <div className="branch-body">
        <ul className="branch-meta">
          <li className="branch-meta-row">
            <span className="branch-meta-icon"><Icon name="pin" size={14} /></span>
            <div>
              <div className="branch-meta-key">Endereço</div>
              <div className="branch-meta-val">{branch.address}</div>
              <div className="branch-meta-sub">{branch.district}</div>
            </div>
          </li>
          <li className="branch-meta-row">
            <span className="branch-meta-icon"><Icon name="phone" size={14} /></span>
            <div>
              <div className="branch-meta-key">Telefone</div>
              <div className="branch-meta-val">{branch.phone}</div>
              <div className="branch-meta-sub">WhatsApp disponível</div>
            </div>
          </li>
          <li className="branch-meta-row">
            <span className="branch-meta-icon"><Icon name="clock" size={14} /></span>
            <div>
              <div className="branch-meta-key">Horário</div>
              <div className="branch-meta-val">{branch.hours}</div>
              <div className="branch-meta-sub">{branch.consultants}</div>
            </div>
          </li>
        </ul>

        <div className="branch-foot">
          <span className="branch-cta">
            Ver promoções de {branch.city}
            <span className="branch-cta-arrow" aria-hidden="true"><Icon name="arrow-right" size={14} /></span>
          </span>
          <div className="branch-quick">
            <button
              type="button"
              className="branch-quick-btn"
              title={`Ligar para ${branch.city}`}
              onClick={(e) => { e.preventDefault(); e.stopPropagation(); window.location.href = `tel:+55${branch.phone.replace(/\D/g, '')}`; }}
            >
              <Icon name="phone" size={15} />
            </button>
            <button
              type="button"
              className="branch-quick-btn"
              title={`WhatsApp ${branch.city}`}
              onClick={(e) => { e.preventDefault(); e.stopPropagation(); window.open(`https://wa.me/${branch.whatsapp}`, '_blank'); }}
            >
              <Icon name="wa" size={15} />
            </button>
            <button
              type="button"
              className="branch-quick-btn"
              title={`Rota até ${branch.city}`}
              onClick={(e) => { e.preventDefault(); e.stopPropagation(); window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(branch.address + ' ' + branch.district)}`, '_blank'); }}
            >
              <Icon name="route" size={15} />
            </button>
          </div>
        </div>
      </div>
    </a>
  );
}

function MapContext() {
  const [hovered, setHovered] = React.useState(null);
  return (
    <div className="map-context">
      <div className="map-context-left">
        <div className="eyebrow"><span className="eyebrow-line" /> Onde estamos</div>
        <h3 style={{ marginTop: 14, fontSize: 32 }}>
          Lado a lado, <em>na Grande João Pessoa.</em>
        </h3>
        <p>
          As duas lojas ficam a poucos minutos de distância uma da outra — fáceis de chegar tanto de carro quanto de transporte público. Escolha a que for mais conveniente.
        </p>
        <div className="map-meta">
          <div className="map-meta-item">
            <div className="v">~8 km</div>
            <div className="l">Entre as filiais</div>
          </div>
          <div className="map-meta-item">
            <div className="v">15 min</div>
            <div className="l">Do centro de JP</div>
          </div>
          <div className="map-meta-item">
            <div className="v">2026</div>
            <div className="l">Nova filial em breve</div>
          </div>
        </div>
      </div>
      <div className="map-svg-wrap">
        <PBMap hovered={hovered} setHovered={setHovered} />
      </div>
    </div>
  );
}

function PBMap({ hovered, setHovered }) {
  return (
    <svg viewBox="0 0 100 60" aria-label="Mapa simplificado da Paraíba">
      <defs>
        <pattern id="pbDots" width="2" height="2" patternUnits="userSpaceOnUse">
          <circle cx="0.5" cy="0.5" r="0.22" fill="rgba(0,39,118,0.18)" />
        </pattern>
        <filter id="pinDrop">
          <feDropShadow dx="0" dy="0.4" stdDeviation="0.4" floodColor="#001A52" floodOpacity="0.3" />
        </filter>
      </defs>

      {/* PB silhouette */}
      <path
        d="M 14 20 Q 25 16, 38 18 Q 52 17, 64 19 Q 76 20, 86 23 Q 90 28, 87 32 Q 88 36, 84 38 L 80 36 L 76 39 L 72 38 Q 60 41, 48 40 Q 36 42, 24 41 Q 18 42, 14 39 Q 11 33, 13 27 Z"
        fill="url(#pbDots)"
        stroke="#002776"
        strokeWidth="0.5"
        strokeLinejoin="round"
      />
      <text x="50" y="30" fontSize="2.4" fill="rgba(0,39,118,0.45)" fontFamily="Manrope, sans-serif" fontWeight="700" letterSpacing="0.3">PARAÍBA</text>

      {/* João Pessoa reference */}
      <g transform="translate(15.5 39.8)">
        <circle r="0.7" fill="#0B1A3B" opacity="0.45" />
        <text x="1.6" y="0.6" fontSize="1.7" fill="#0B1A3B" opacity="0.55" fontFamily="Manrope, sans-serif">João Pessoa</text>
      </g>

      {/* Branch pins */}
      {BRANCHES.map((b) => {
        const isActive = hovered === b.id;
        const labelAlign = b.id === 'santa-rita' ? 'start' : 'end';
        const lx = b.id === 'santa-rita' ? 4 : -4;
        return (
          <g key={b.id} transform={`translate(${b.mapX} ${b.mapY})`} style={{ cursor: 'pointer' }}
             onMouseEnter={() => setHovered(b.id)} onMouseLeave={() => setHovered(null)}
             onClick={() => window.open(b.url, '_self')}
             filter="url(#pinDrop)">
            {isActive && (
              <circle r="3" fill="#FFD400" opacity="0.35">
                <animate attributeName="r" values="2.2;5;2.2" dur="1.6s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.45;0;0.45" dur="1.6s" repeatCount="indefinite" />
              </circle>
            )}
            <path
              d="M 0 -3.4 C -1.9 -3.4 -3.4 -1.9 -3.4 0 C -3.4 2.2 0 5 0 5 C 0 5 3.4 2.2 3.4 0 C 3.4 -1.9 1.9 -3.4 0 -3.4 Z"
              fill="#002776" stroke="#001A52" strokeWidth="0.18"
            />
            <circle r="1.15" cy="-0.4" fill="#FFD400" />
            <g transform={`translate(${lx} -2)`}>
              <rect x={b.id === 'santa-rita' ? 0 : -16} y="-2" width="16" height="3.2" rx="0.5"
                    fill="#FBFAF7" stroke="#002776" strokeWidth="0.15" opacity={isActive ? 1 : 0.95} />
              <text x={b.id === 'santa-rita' ? 1 : -1} y="0.3" fontSize="1.8"
                    fill="#0B1A3B" fontFamily="Manrope, sans-serif" fontWeight="700" textAnchor={labelAlign}>{b.city}</text>
            </g>
          </g>
        );
      })}
    </svg>
  );
}

/* ============================================================ */
/*  How it works                                                 */
/* ============================================================ */
function HowItWorks() {
  const steps = [
    { icon: 'search', n: '01', t: 'Escolha sua filial', d: 'Santa Rita ou Bayeux — clique na loja mais próxima e veja as promoções da semana.' },
    { icon: 'users', n: '02', t: 'Fale com um consultor', d: 'Por WhatsApp, telefone ou presencialmente. Equipe própria que conhece cada destino.' },
    { icon: 'plane', n: '03', t: 'Embarque tranquilo', d: 'Parcele em até 12x, reserva garantida, e suporte da nossa equipe antes, durante e depois.' },
  ];
  return (
    <section id="como" className="section how">
      <div className="section-inner">
        <div className="section-head">
          <div className="section-head-left">
            <div className="eyebrow"><span className="eyebrow-line" /> 03 — Como funciona</div>
            <h2 className="section-h2" style={{ marginTop: 16 }}>
              Em três passos <em>simples.</em>
            </h2>
          </div>
        </div>
        <div className="how-grid">
          {steps.map((s) => (
            <div key={s.n} className="how-step">
              <span className="how-step-num">{s.n}</span>
              <div className="how-step-icon"><Icon name={s.icon} size={22} color="#FFD400" /></div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
/*  FAQ                                                          */
/* ============================================================ */
function FAQ() {
  const items = [
    { q: 'Preciso ir até a loja para comprar?', a: 'Não. Você pode iniciar o atendimento pelo WhatsApp da sua filial de preferência e fechar tudo a distância. A visita presencial é uma opção para quem quer conversar com calma com um consultor.' },
    { q: 'Qual filial devo escolher?', a: 'Escolha a mais próxima de você. Santa Rita atende principalmente o centro de Santa Rita e bairros próximos; Bayeux atende a região de São Bento e arredores. Ambas têm o mesmo catálogo de pacotes e ofertas.' },
    { q: 'Posso parcelar a viagem?', a: 'Sim, em até 12x sem juros no cartão de crédito. Em alguns pacotes específicos é possível estender ainda mais — pergunte ao seu consultor.' },
    { q: 'Vocês vendem pacotes internacionais?', a: 'Sim. Trabalhamos com pacotes nacionais e internacionais, incluindo destinos como Disney, Cancún, Buenos Aires e Europa.' },
    { q: 'Como funciona em caso de imprevisto na viagem?', a: 'Você conta com suporte 24h da nossa equipe e da operadora. Em caso de cancelamento ou remarcação, seu consultor da Promoções PB cuida do contato com a operadora por você.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section id="faq" className="section faq">
      <div className="section-inner">
        <div className="faq-grid">
          <div className="faq-aside">
            <div className="eyebrow"><span className="eyebrow-line" /> 04 — Dúvidas frequentes</div>
            <h3 style={{ marginTop: 16 }}>Antes de embarcar, <em>algumas respostas.</em></h3>
            <p>Não encontrou o que procurava? Fale direto com a filial mais próxima e tire sua dúvida em minutos.</p>
            <a href="#contato" className="btn btn-primary">
              <Icon name="wa" size={16} />
              Falar com a gente
            </a>
          </div>
          <div className="faq-list">
            {items.map((it, i) => (
              <div key={i} className={'faq-item' + (openIdx === i ? ' open' : '')}>
                <button className="faq-q" onClick={() => setOpenIdx(openIdx === i ? -1 : i)} aria-expanded={openIdx === i}>
                  <span>{it.q}</span>
                  <span className="faq-q-mark">+</span>
                </button>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
/*  CTA banner                                                   */
/* ============================================================ */
function CTABanner() {
  return (
    <section id="contato" className="section section-narrow">
      <div className="section-inner">
        <div className="cta-banner">
          <div>
            <div className="eyebrow" style={{ color: 'var(--yellow)' }}>
              <span className="eyebrow-line" style={{ background: 'var(--yellow)' }} />
              Falar agora
            </div>
            <h3 style={{ marginTop: 14 }}>Sua próxima viagem começa <em style={{ color: 'var(--yellow)', fontStyle: 'italic' }}>com um “oi”.</em></h3>
            <p>Chame uma das filiais no WhatsApp. Atendimento em minutos, de segunda a sábado.</p>
          </div>
          <div className="cta-banner-actions">
            {BRANCHES.map((b) => (
              <a key={b.id} href={`https://wa.me/${b.whatsapp}`} className="btn btn-yellow" style={{ justifyContent: 'space-between', minWidth: 280 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="wa" size={16} />
                  WhatsApp · {b.city}
                </span>
                <Icon name="arrow-right" size={16} />
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
/*  Footer                                                       */
/* ============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-grid">
          <div className="footer-brand">
            <a className="brand" href="#" style={{ color: 'var(--paper)' }}>
              <BrandMark size={42} />
              <div className="brand-text">
                <div className="brand-name" style={{ color: 'var(--paper)' }}>Promoções PB</div>
                <div className="brand-tag" style={{ color: 'rgba(251,250,247,0.55)' }}>Sua viagem começa aqui</div>
              </div>
            </a>
            <p className="footer-about">
              Franquia independente com lojas em Santa Rita e Bayeux. Atendendo a Grande João Pessoa desde 2014.
            </p>
            <div className="footer-socials">
              <a className="footer-social" href="#" aria-label="Instagram"><Icon name="instagram" size={18} /></a>
              <a className="footer-social" href="#" aria-label="Facebook"><Icon name="facebook" size={18} /></a>
              <a className="footer-social" href="#" aria-label="YouTube"><Icon name="youtube" size={18} /></a>
            </div>
          </div>

          <div className="footer-col">
            <div className="footer-col-title">Filiais</div>
            <ul>
              {BRANCHES.map((b) => (
                <li key={b.id}><a href={b.url}>{b.city}, {b.state}</a></li>
              ))}
              <li><a href="#filiais">Comparar lojas</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-col-title">A empresa</div>
            <ul>
              <li><a href="#">Sobre nós</a></li>
              <li><a href="#">Trabalhe conosco</a></li>
              <li><a href="#">Imprensa</a></li>
              <li><a href="#faq">Dúvidas frequentes</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-col-title">Contato</div>
            <ul>
              <li><a href="tel:+558330000001">(83) 3000-0001 · Santa Rita</a></li>
              <li><a href="tel:+558330000002">(83) 3000-0002 · Bayeux</a></li>
              <li><a href="mailto:ola@promocoespb.com.br">ola@promocoespb.com.br</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} Promoções PB · CNPJ 00.000.000/0001-00</div>
          <div className="footer-bottom-links">
            <a href="#">Política de privacidade</a>
            <a href="#">Termos de uso</a>
            <a href="#">Acessibilidade</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================ */
/*  App                                                          */
/* ============================================================ */
function App() {
  React.useEffect(() => {
    // Smooth scroll for in-page anchors
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      const top = el.getBoundingClientRect().top + window.pageYOffset - 70;
      window.scrollTo({ top, behavior: 'smooth' });
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <>
      <UtilityBar />
      <Nav />
      <Hero />
      <TrustStrip />
      <Branches />
      <HowItWorks />
      <FAQ />
      <CTABanner />
      <Footer />
    </>
  );
}

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