// sections.jsx — Reforzza landing page sections
// All sections are pure React components consuming the `t` (tweaks) object.

// ─── WHATSAPP URLS POR SEÇÃO ───────────────────────────────────────────
// Cada botão da página envia uma mensagem ligeiramente diferente pro
// WhatsApp da Reforzza. Isso permite rastrear de qual seção o cliente
// converteu (header morno vs CTA final quente).
// Para editar mensagens, mexer só aqui — tudo se propaga automaticamente.
const WA_NUMBER = '5521995108345';
const _wa = (msg) => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(msg)}`;

const WHATSAPP = {
  nav:      _wa('Olá, Reforzza. Vim pelo site e gostaria de um orçamento.'),
  hero:     _wa('Olá, Reforzza. Vim pelo site e gostaria de um orçamento.'),
  included: _wa('Olá, Reforzza. Vim pelo site e quero meu diagnóstico técnico.'),
  final:    _wa('Olá, Reforzza. Vim pelo site e gostaria de solicitar meu orçamento.'),
  footer:   _wa('Olá, Reforzza. Vim pelo site.'),
  floating: _wa('Olá, Reforzza. Vim pelo site e gostaria de um orçamento.'),
};

// Asset resolver: returns inlined data URI if available (standalone bundle),
// otherwise falls back to the relative path (dev mode).
const asset = (p) => (typeof window !== 'undefined' && window.__REFORZZA_ASSETS && window.__REFORZZA_ASSETS[p]) || p;

// ─── HOOKS: reveal on scroll + counter-up ──────────────────────────────
// Global reveal: tries IntersectionObserver first, falls back to a scroll
// listener (some embed/sandbox contexts don't deliver IO callbacks).
const installGlobalReveal = () => {
  if (typeof window === 'undefined' || window.__reforzzaRevealInstalled) return;
  window.__reforzzaRevealInstalled = true;
  const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const revealEl = (el) => { if (!el.classList.contains('is-revealed')) el.classList.add('is-revealed'); };

  if (reduced) {
    const all = () => document.querySelectorAll('[data-reveal]').forEach(revealEl);
    all();
    new MutationObserver(all).observe(document.body, { childList: true, subtree: true });
    return;
  }

  // Scroll-based check — runs in all environments
  const checkAll = () => {
    const vh = window.innerHeight;
    document.querySelectorAll('[data-reveal]:not(.is-revealed)').forEach((el) => {
      const r = el.getBoundingClientRect();
      if (r.top < vh - 40 && r.bottom > 0) revealEl(el);
    });
  };

  // Throttle scroll calls via rAF
  let ticking = false;
  const onScroll = () => {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => { checkAll(); ticking = false; });
  };
  window.addEventListener('scroll', onScroll, { passive: true });
  window.addEventListener('resize', onScroll, { passive: true });

  // Initial pass + a few quick re-checks for late-mounted elements
  checkAll();
  setTimeout(checkAll, 200);
  setTimeout(checkAll, 800);

  // Also try IntersectionObserver as the primary mechanism in supporting envs
  if (typeof IntersectionObserver !== 'undefined') {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { revealEl(e.target); io.unobserve(e.target); } });
    }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
    const observe = (root) => {
      (root.querySelectorAll ? root.querySelectorAll('[data-reveal]:not(.is-revealed)') : []).forEach((el) => io.observe(el));
    };
    observe(document);
    new MutationObserver((muts) => muts.forEach((m) => m.addedNodes.forEach((n) => { if (n.nodeType === 1) observe(n); }))).observe(document.body, { childList: true, subtree: true });
  }
  window.__reforzzaCheckReveal = checkAll;
};

// Counter-up: animates a number from 0 to `target` when scrolled into view.
const Counter = ({ target, decimals = 0, duration = 1400, prefix = "", suffix = "", className, style }) => {
  const ref = React.useRef(null);
  const [display, setDisplay] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setDisplay(target);
      return;
    }
    let raf, startTs, started = false;
    const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
    const tick = (ts) => {
      if (!startTs) startTs = ts;
      const p = Math.min((ts - startTs) / duration, 1);
      setDisplay(target * easeOutCubic(p));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    const start = () => {
      if (started) return;
      started = true;
      raf = requestAnimationFrame(tick);
    };
    // Scroll-based fallback
    const check = () => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight - 40 && r.bottom > 0) { start(); window.removeEventListener('scroll', onScroll); }
    };
    const onScroll = () => check();
    window.addEventListener('scroll', onScroll, { passive: true });
    // Initial pass
    check();
    // IO as enhancement
    if (typeof IntersectionObserver !== 'undefined') {
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) { start(); io.unobserve(el); } });
      }, { threshold: 0.4 });
      io.observe(el);
      return () => { if (raf) cancelAnimationFrame(raf); io.disconnect(); window.removeEventListener('scroll', onScroll); };
    }
    return () => { if (raf) cancelAnimationFrame(raf); window.removeEventListener('scroll', onScroll); };
  }, [target, duration]);
  const formatted = decimals > 0 ? display.toFixed(decimals).replace('.', ',') : Math.round(display).toString();
  return (
    <span ref={ref} className={className} style={style}>
      {prefix}{formatted}{suffix}
    </span>
  );
};

const WhatsIcon = ({ size = 18, color = "currentColor" }) =>
<svg className="wa" viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
    <path fill={color} d="M19.11 4.91A9.82 9.82 0 0012.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 004.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.02zM12.04 20.15h-.01a8.2 8.2 0 01-4.18-1.14l-.3-.18-3.11.82.83-3.04-.2-.31a8.18 8.18 0 01-1.25-4.39c0-4.54 3.69-8.23 8.24-8.23a8.2 8.2 0 015.83 2.41 8.2 8.2 0 012.41 5.82c0 4.55-3.7 8.24-8.26 8.24zm4.51-6.16c-.25-.12-1.46-.72-1.69-.8-.23-.08-.39-.12-.56.12-.16.25-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.12-1.04-.38-1.99-1.22-.74-.66-1.23-1.47-1.37-1.71-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.42h-.48c-.16 0-.43.06-.65.31-.23.25-.86.84-.86 2.05 0 1.21.88 2.38 1 2.55.12.16 1.74 2.66 4.21 3.73.59.25 1.05.41 1.4.52.59.19 1.13.16 1.55.1.47-.07 1.46-.6 1.66-1.17.2-.58.2-1.07.14-1.17-.06-.1-.22-.16-.47-.28z" />
  </svg>;


const PhoneRing = ({ size = 14 }) =>
<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
    <path fill="currentColor" d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A18 18 0 013 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z" />
  </svg>;


const ArrowRt = ({ size = 14 }) =>
<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
    <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


const Check = ({ size = 14 }) =>
<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
    <path d="M5 12.5l4 4 10-10" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


const Plus = ({ size = 14 }) =>
<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
    <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
  </svg>;


const InstagramIcon = ({ size = 16 }) =>
<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.6">
    <rect x="3" y="3" width="18" height="18" rx="5" />
    <circle cx="12" cy="12" r="4" />
    <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
  </svg>;


// ─── NAV ────────────────────────────────────────────────────────────────
const Nav = () =>
<header style={navStyles.wrap}>
    <div className="container-wide nav-row" style={navStyles.row}>
      <a href="#top" style={navStyles.brand}>
        <Wordmark />
      </a>
      <nav className="nav-links" style={navStyles.links}>
        <a href="#processo">Como funciona</a>
        <a href="#especialidades">Especialidades</a>
        <a href="#transformacoes">Transformações</a>
        <a href="#faq">FAQ</a>
      </nav>
      <a className="btn btn-ghost nav-cta" href={WHATSAPP.nav} aria-label="Falar no WhatsApp" style={{ height: 44, padding: "0 18px", fontSize: 14 }}>
        <WhatsIcon size={15} />
        <span className="nav-cta-label-full">Falar no WhatsApp</span>
        <span className="nav-cta-label-short">WhatsApp</span>
      </a>
    </div>
  </header>;


const navStyles = {
  wrap: {
    position: "sticky", top: 0, zIndex: 50,
    backdropFilter: "blur(14px) saturate(140%)",
    WebkitBackdropFilter: "blur(14px) saturate(140%)",
    background: "rgba(242,237,229,0.72)",
    borderBottom: "1px solid var(--line-2)"
  },
  row: {
    display: "flex", alignItems: "center", justifyContent: "space-between",
    height: 72, gap: 24
  },
  brand: { display: "flex", alignItems: "center", gap: 10 },
  links: {
    display: "flex", alignItems: "center", gap: 30,
    fontSize: 14, color: "var(--ink-2)"
  }
};

const Wordmark = ({ onDark = false }) =>
<img
  src={asset("assets/reforzza-logo.png")}
  alt="Reforzza — Drywall · Steel Frame · Coberturas"
  style={{
    height: 34,
    width: "auto",
    display: "block",
    filter: onDark ? "drop-shadow(0 1px 2px rgba(0,0,0,.3))" : "none"
  }} />;



// ─── HERO ───────────────────────────────────────────────────────────────
const HERO_HEADLINES = {
  A: ["Padrão Europeu", "de Construção a Seco.", { italic: "Em Solo Carioca." }],
  B: ["A construção a seco", "que entrega para Globo,", { italic: "BB e Paris Aéroport." }],
  C: ["Sua obra em semanas.", "Sem entulho.", { italic: "Rigor milimétrico." }]
};

const Hero = ({ t }) => {
  const headline = HERO_HEADLINES[t.headline] || HERO_HEADLINES.A;
  return (
    <section id="top" style={heroStyles.wrap}>
      <div className="container-wide hero-grid" style={heroStyles.grid(t.heroLayout)}>
        {/* LEFT — copy */}
        <div style={heroStyles.col}>
          <div className="rise" style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div className="eyebrow">Reforzza · Engenharia de Precisão · RJ</div>

            <h1 className="display" style={heroStyles.h1}>
              {headline.map((line, i) =>
              typeof line === "string" ?
              <span key={i} style={{ display: "block" }}>{line}</span> :

              <span key={i} style={{ display: "block", fontStyle: "italic", color: "var(--accent)" }}>
                    {line.italic}
                  </span>

              )}
            </h1>

            <p className="lede">
              Drywall, Steel Frame, Forros e Coberturas executados com a precisão técnica
              da Itália e da França. Para empresas, construtoras e residências de alto padrão
              que não aceitam acabamento mediano.
            </p>

            <div style={heroStyles.ctaRow}>
              <a className="btn btn-lg" href={WHATSAPP.hero}>
                <WhatsIcon /> Solicitar orçamento no WhatsApp
              </a>
              <a className="btn btn-ghost btn-lg" href="#processo">
                Como funciona <ArrowRt />
              </a>
            </div>

            <div style={heroStyles.micro}>
              <span><span style={{ color: "var(--accent)" }}>●</span> Resposta em até 1 hora útil</span>
              <span style={{ color: "var(--line)" }}>·</span>
              <span>Cidade do Rio · Seropédica · Nova Iguaçu</span>
            </div>
          </div>
        </div>

        {/* RIGHT — image / spec card */}
        <div style={heroStyles.right}>
          <div style={heroStyles.imgMain}>
            <img src={asset("assets/photos/hero.webp")}
                 alt="Obra institucional · fachada Reforzza"
                 style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            <svg width="100%" height="100%" viewBox="0 0 480 600" style={{ position: "absolute", inset: 0, opacity: .25, pointerEvents: "none", mixBlendMode: "screen" }} aria-hidden="true">
              <line x1="0" y1="120" x2="480" y2="120" stroke="rgba(255,255,255,.4)" strokeDasharray="3 5" />
              <line x1="0" y1="480" x2="480" y2="480" stroke="rgba(255,255,255,.4)" strokeDasharray="3 5" />
              <line x1="120" y1="0" x2="120" y2="600" stroke="rgba(255,255,255,.4)" strokeDasharray="3 5" />
              <line x1="360" y1="0" x2="360" y2="600" stroke="rgba(255,255,255,.4)" strokeDasharray="3 5" />
            </svg>
          </div>

          {/* Spec card floating */}
          <div className="hero-spec" style={heroStyles.spec}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span className="section-tag">Ficha técnica</span>
              <span className="num" style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)" }}>RZA · 026</span>
            </div>
            <div style={{ height: 1, background: "var(--line)", margin: "12px 0 14px" }}></div>
            <div style={heroStyles.specRow}><span>Sistema</span><span>Steel Frame + Drywall RU</span></div>
            <div style={heroStyles.specRow}><span>Tolerância</span><span className="num">± 1.2 mm / m</span></div>
            <div style={heroStyles.specRow}><span>Prazo médio</span><span className="num">⅓ alvenaria</span></div>
            <div style={heroStyles.specRow}><span>Origem do método</span><span>Reino Unido · EUA</span></div>
          </div>
        </div>
      </div>

      {/* Architectural baseline */}
      <div className="container-wide" style={{ marginTop: 56 }}>
        <div className="rule"></div>
        <div style={heroStyles.foot}>
          <span className="eyebrow" style={{ color: "var(--ink-3)" }}>10+ anos · IT/FR/BR</span>
          <span className="section-tag">↓ role para o método</span>
        </div>
      </div>
    </section>);

};

const heroStyles = {
  wrap: { paddingTop: 64, paddingBottom: 56 },
  grid: (layout) => ({
    display: "grid",
    gridTemplateColumns: layout === "centered" ? "1fr" : "minmax(0, 1.05fr) minmax(0, 1fr)",
    gap: 64,
    alignItems: "center"
  }),
  col: { display: "flex", flexDirection: "column", minWidth: 0 },
  h1: { fontSize: "clamp(44px, 6.6vw, 96px)", margin: 0, color: "var(--ink)", lineHeight: 1.04, textWrap: "balance" },
  ctaRow: { display: "flex", flexWrap: "wrap", gap: 12 },
  micro: { display: "flex", flexWrap: "wrap", gap: 10, fontSize: 13, color: "var(--ink-3)", alignItems: "center" },
  right: { position: "relative", minHeight: 600 },
  imgMain: {
    width: "100%", aspectRatio: "4/5", maxHeight: 720
  },
  spec: {
    position: "absolute", left: -36, bottom: 36,
    width: 320, padding: "20px 22px",
    background: "var(--paper)", border: "1px solid var(--line)",
    boxShadow: "0 24px 60px -28px rgba(26,24,20,.35)",
    borderRadius: 4
  },
  specRow: {
    display: "flex", justifyContent: "space-between", gap: 16,
    fontSize: 13, color: "var(--ink-2)", padding: "6px 0",
    borderBottom: "1px dashed var(--line-2)"
  },
  foot: {
    display: "flex", justifyContent: "space-between", paddingTop: 14
  }
};

// ─── TRUST STRIP (clientes — só texto, sem logos) ───────────────────────
const CLIENTS = ["Globo", "Banco do Brasil", "Caixa Econômica", "Estácio", "Paris Aéroport", "IERS"];

const TrustStrip = () =>
<section style={trustStyles.wrap}>
    <div className="container-wide trust-row" style={trustStyles.row}>
      <div style={trustStyles.label}>
        <span className="eyebrow">Já confiaram na Reforzza</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)" }}>· contratos diretos e via parceiros</span>
      </div>
      <div style={trustStyles.clients}>
        {CLIENTS.map((c, i) =>
      <span key={c} style={trustStyles.client}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", marginRight: 10 }}>
              {String(i + 1).padStart(2, "0")}
            </span>
            {c}
          </span>
      )}
      </div>
    </div>
  </section>;


const trustStyles = {
  wrap: { borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "28px 0", background: "var(--paper-2)" },
  row: { display: "grid", gridTemplateColumns: "240px 1fr", gap: 32, alignItems: "center" },
  label: { display: "flex", flexDirection: "column", gap: 6 },
  clients: { display: "flex", flexWrap: "wrap", gap: "10px 36px", alignItems: "center" },
  client: {
    fontFamily: "var(--display)", fontSize: 24, color: "var(--ink-2)",
    letterSpacing: "-0.005em", display: "inline-flex", alignItems: "baseline"
  }
};

// ─── PAIN POINTS ────────────────────────────────────────────────────────
const PAIN_SOLUTION = [
{ n: "01", pain: "Pedreiro que some no meio da obra", sol: "Equipe própria e cronograma com folga real. O especialista responsável acompanha do início ao fim." },
{ n: "02", pain: "Acabamento bonito só de longe", sol: "Rigor milimétrico — alinhamento e nivelamento medidos, tolerância de ± 1,2 mm/m." },
{ n: "03", pain: "Orçamento que vira três orçamentos", sol: "Planejamento técnico antes de começar. Orçamento fechado, sem “imprevisto” inflado no caminho." },
{ n: "04", pain: "Entulho, sujeira e barulho por meses", sol: "Construção a seco: canteiro limpo, sem quebra-quebra, e entrega em semanas — não meses." },
{ n: "05", pain: "Isolamento acústico que não isola", sol: "Isolamento termoacústico de verdade — lã mineral, lã PET e membranas certificadas." },
{ n: "06", pain: "“Padrão alto” com execução amadora", sol: "Pós-obra real e suporte continuado. Você não some do nosso radar depois da chave." }];


const PainPoints = () =>
<section style={{ padding: "120px 0 100px" }}>
    <div className="container-wide">
      <div style={{ maxWidth: 720, marginBottom: 56 }}>
        <div className="section-tag" style={{ marginBottom: 24 }}>§ 01 · Da dor à solução</div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 4.6vw, 68px)", margin: "0 0 24px", lineHeight: 1 }}>
          Você já passou por isso —<br />
          <span style={{ fontStyle: "italic", color: "var(--accent)" }}>e nós resolvemos.</span>
        </h2>
        <p className="lede" style={{ fontSize: 17 }}>
          Quem já contratou obra conhece os sintomas. Para cada um deles,
          a Reforzza tem uma resposta técnica — não uma promessa de vendedor.
        </p>
      </div>

      <div style={{ border: "1px solid var(--line)" }}>
        {PAIN_SOLUTION.map((p, i) =>
          <div key={p.n} data-reveal className="pain-sol-row" style={{
            display: "grid", gridTemplateColumns: "48px 1fr 1fr",
            borderBottom: i === PAIN_SOLUTION.length - 1 ? "0" : "1px solid var(--line)",
            '--reveal-delay': `${i * 60}ms`
          }}>
            <div style={{ padding: "28px 0 28px 20px", fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)" }}>
              {p.n}
            </div>
            <div className="pain-sol-pain" style={{ padding: "26px 32px 26px 8px", borderRight: "1px solid var(--line)" }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>
                A dor
              </div>
              <h3 style={{ fontFamily: "var(--display)", fontSize: 23, margin: 0, lineHeight: 1.2, color: "var(--ink-2)" }}>{p.pain}</h3>
            </div>
            <div className="pain-sol-sol" style={{ padding: "26px 24px 26px 32px", background: "var(--paper-2)" }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 8 }}>
                A solução Reforzza
              </div>
              <p style={{ fontSize: 15, color: "var(--ink-2)", margin: 0, lineHeight: 1.55 }}>{p.sol}</p>
            </div>
          </div>
        )}
      </div>

      <p data-reveal style={{ marginTop: 36, fontFamily: "var(--display)", fontSize: 22, fontStyle: "italic", color: "var(--ink-2)", lineHeight: 1.4, maxWidth: "60ch" }}>
        Se você reconheceu pelo menos dois desses, não está procurando outra construtora —
        está procurando outro <span style={{ color: "var(--accent)" }}>padrão</span>.
      </p>
    </div>
  </section>;

// ─── METHOD (fundido em Process → "Como funciona") ──────────────────────
// Mantido como no-op para compatibilidade. Não renderiza nada.
const Method = () => null;


// ─── BENEFITS (fundido em PainPoints → "Da dor à solução") ──────────────
// Mantido como no-op para compatibilidade. Não renderiza nada.
const Benefits = () => null;


// ─── SPECIALTIES ────────────────────────────────────────────────────────
const SPECIALTIES = [
{ name: "Drywall", tag: "Paredes e divisórias internas", code: "DW", imgs: ["assets/photos/drywall.webp","assets/photos/specialties/drywall-new-1.webp","assets/photos/specialties/drywall-new-2.webp","assets/photos/specialties/drywall-new-3.webp"] },
{ name: "Steel Frame", tag: "Estrutura em aço galvanizado", code: "SF", imgs: ["assets/photos/steel-frame.webp","assets/photos/specialties/steel-frame-new-1.webp","assets/photos/specialties/steel-frame-new-2.webp"] },
{ name: "Forros Decorados", tag: "Designs autorais em gesso", code: "FD", imgs: ["assets/photos/forros-decorados.webp","assets/photos/specialties/forros-decorados-new-1.webp","assets/photos/specialties/forros-decorados-new-2.webp"] },
{ name: "Forro Modular", tag: "Acústico, removível, técnico", code: "FM", imgs: ["assets/photos/forro-modular.webp","assets/photos/specialties/forro-modular-new-1.webp","assets/photos/specialties/forro-modular-new-2.webp"] },
{ name: "Mobiliários em Drywall", tag: "Estantes, painéis, nichos", code: "MD", imgs: ["assets/photos/mobiliarios.webp","assets/photos/specialties/mobiliarios-new-1.webp","assets/photos/specialties/mobiliarios-new-2.webp"] },
{ name: "Mezanino Laje Seca", tag: "Pavimentos extras leves", code: "ML", imgs: ["assets/photos/laje-seca.webp","assets/photos/specialties/mezanino-new-1.webp","assets/photos/specialties/mezanino-new-2.webp","assets/photos/specialties/mezanino-new-3.webp"] },
{ name: "Isolamento Termoacústico", tag: "Lã mineral, lã PET, membranas", code: "IT", imgs: ["assets/photos/isolamento.webp","assets/photos/specialties/isolamento-new-1.webp","assets/photos/specialties/isolamento-new-2.webp"] },
{ name: "Telhados Metálicos", tag: "Coberturas e estruturas", code: "TM", imgs: ["assets/photos/telhados.webp","assets/photos/specialties/telhados-new-1.webp","assets/photos/specialties/telhados-new-2.webp","assets/photos/specialties/telhados-new-3.webp"] },
{ name: "Pinturas e Acabamentos", tag: "Complementar · alto padrão", code: "PA", imgs: ["assets/photos/pinturas.webp","assets/photos/specialties/pinturas-new-1.webp","assets/photos/specialties/pinturas-new-2.webp"] }];


// Mini-carrossel reutilizável para a seção de especialidades
const SpecialtyCarousel = ({ s, aspectRatio = "4/5", stampStyle = {}, captionStyle = {} }) => {
  const imgs = s.imgs || [s.img];
  const [idx, setIdx] = React.useState(0);
  // Reset foto ao trocar especialidade
  React.useEffect(() => { setIdx(0); }, [s.code]);
  const prev = (e) => { e.stopPropagation(); setIdx((i) => (i - 1 + imgs.length) % imgs.length); };
  const next = (e) => { e.stopPropagation(); setIdx((i) => (i + 1) % imgs.length); };
  const hasMany = imgs.length > 1;

  const navBtn = (onClick, dir) => (
    <button onClick={onClick} aria-label={dir === "prev" ? "Foto anterior" : "Próxima foto"}
      style={{
        position: "absolute", top: "50%", [dir === "prev" ? "left" : "right"]: 10,
        transform: "translateY(-50%)",
        width: 32, height: 32, borderRadius: "50%", border: "1px solid rgba(255,255,255,0.45)",
        background: "rgba(26,24,20,0.55)", backdropFilter: "blur(6px)",
        color: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center",
        zIndex: 4, padding: 0, transition: "background .2s ease, border-color .2s ease",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(26,24,20,0.82)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.7)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(26,24,20,0.55)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.45)"; }}>
      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" aria-hidden="true">
        <path d={dir === "prev" ? "M15 18l-6-6 6-6" : "M9 18l6-6-6-6"} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
  );

  return (
    <div>
      <div style={{ position: "relative", width: "100%", aspectRatio, overflow: "hidden", border: "1px solid var(--line)", background: "var(--ink)" }}>
        <img
          key={`${s.code}-${idx}`}
          src={asset(imgs[idx])}
          alt={`${s.name} — obra Reforzza ${idx + 1}`}
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", animation: "rise .4s ease both" }}
        />
        <div style={{ position: "absolute", top: 12, left: 12, ...stampStyle }}>
          <span className="stamp" style={{ background: "rgba(250,247,242,0.92)" }}>
            <span className="dot"></span>{s.code} · Sistema
          </span>
        </div>
        {hasMany && navBtn(prev, "prev")}
        {hasMany && navBtn(next, "next")}
        {/* Indicadores de ponto */}
        {hasMany && (
          <div style={{ position: "absolute", bottom: 10, left: "50%", transform: "translateX(-50%)", display: "flex", gap: 5, zIndex: 4 }}>
            {imgs.map((_, i) => (
              <button key={i} onClick={(e) => { e.stopPropagation(); setIdx(i); }}
                aria-label={`Foto ${i + 1}`}
                style={{
                  width: i === idx ? 18 : 6, height: 6, borderRadius: 3, border: 0, padding: 0, cursor: "pointer",
                  background: i === idx ? "white" : "rgba(255,255,255,0.45)",
                  transition: "width .25s ease, background .25s ease",
                }} />
            ))}
          </div>
        )}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 10, fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)", letterSpacing: ".06em", ...captionStyle }}>
        <span>{s.name}</span>
        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
          {hasMany && <span>{String(idx + 1).padStart(2, "0")} / {String(imgs.length).padStart(2, "0")}</span>}
          <span>RZA · {s.code} · 2026</span>
        </span>
      </div>
    </div>
  );
};

const Specialties = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section id="especialidades" style={{ padding: "140px 0 120px", background: "var(--paper-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, marginBottom: 56, flexWrap: "wrap" }}>
          <div>
            <div className="section-tag" style={{ marginBottom: 20 }}>§ 02 · Especialidades</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.6vw, 72px)", margin: 0, lineHeight: 1 }}>
              Nove sistemas executados<br />
              <span style={{ fontStyle: "italic", color: "var(--accent)" }}>com o mesmo rigor.</span>
            </h2>
          </div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: ".12em" }}>
            {String(active + 1).padStart(2, "0")} / {String(SPECIALTIES.length).padStart(2, "0")}
          </div>
        </div>

        <div className="resp-grid-2 specialties-grid" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "stretch" }}>
          {/* List */}
          <div>
            {SPECIALTIES.map((s, i) => {
              const isActive = i === active;
              return (
                <div key={s.code} className="specialty-item">
                  <button
                    onClick={() => setActive(i)}
                    aria-expanded={isActive}
                    aria-label={`${isActive ? 'Visualizando' : 'Ver fotos de'} ${s.name}`}
                    style={{
                      width: "100%", textAlign: "left", border: 0, background: "transparent",
                      cursor: "pointer", padding: "18px 0",
                      borderBottom: "1px solid var(--line)",
                      display: "grid", gridTemplateColumns: "44px 1fr auto 32px", alignItems: "center", gap: 16,
                      color: isActive ? "var(--ink)" : "var(--ink-2)",
                      transition: "color .25s ease, padding .25s ease",
                      paddingLeft: isActive ? 12 : 0
                    }}>

                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: isActive ? "var(--accent)" : "var(--muted)", alignSelf: "baseline", paddingTop: isActive ? 12 : 8 }}>
                      {s.code}
                    </span>
                    <span className="specialty-name" style={{ fontFamily: "var(--display)", fontSize: isActive ? 36 : 28, lineHeight: 1.1, transition: "font-size .25s ease, font-style .25s ease", fontStyle: isActive ? "italic" : "normal" }}>
                      {s.name}
                    </span>
                    <span className="specialty-tag" style={{ fontSize: 13, color: "var(--ink-3)", textAlign: "right", maxWidth: 220 }}>
                      {s.tag}
                      {s.imgs && s.imgs.length > 1 && (
                        <span style={{ display: "block", fontSize: 10.5, color: "var(--muted)", marginTop: 2 }}>{s.imgs.length} fotos</span>
                      )}
                    </span>
                    {/* Affordance — + que roda em × quando ativo */}
                    <span
                      aria-hidden="true"
                      className="specialty-toggle"
                      style={{
                        width: 28, height: 28, borderRadius: "50%",
                        display: "inline-flex", alignItems: "center", justifyContent: "center",
                        border: "1px solid var(--line)",
                        background: isActive ? "var(--accent)" : "transparent",
                        color: isActive ? "var(--accent-ink)" : "var(--ink-3)",
                        borderColor: isActive ? "var(--accent)" : "var(--line)",
                        transition: "background .3s ease, border-color .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1)",
                        transform: isActive ? "rotate(45deg)" : "rotate(0deg)",
                      }}>
                      <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true">
                        <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
                      </svg>
                    </span>
                  </button>

                  {/* Inline preview com carrossel — só no mobile, só para o item ativo */}
                  {isActive && (
                    <div className="specialty-inline" aria-hidden="false">
                      <SpecialtyCarousel s={s} aspectRatio="4/3" captionStyle={{ fontSize: 10.5 }} />
                    </div>
                  )}
                </div>);

            })}
          </div>

          {/* Preview com carrossel — desktop only */}
          <div className="sticky-col specialty-preview-desktop" style={{ position: "sticky", top: 96, alignSelf: "start" }}>
            <SpecialtyCarousel s={SPECIALTIES[active]} aspectRatio="4/5" captionStyle={{ fontSize: 11 }} />
          </div>
        </div>
      </div>
    </section>);

};

// ─── PROOF / NUMBERS / TESTIMONIALS ─────────────────────────────────────
const Proof = () =>
<section id="prova" style={{ padding: "140px 0 120px" }}>
    <div className="container-wide">
      <div className="section-tag" style={{ marginBottom: 20 }}>§ 04 · Prova</div>
      <h2 className="display" style={{ fontSize: "clamp(40px, 4.6vw, 72px)", margin: "0 0 64px", lineHeight: 1, maxWidth: "14ch" }}>
        Contratos que não se conquistam <span style={{ fontStyle: "italic", color: "var(--accent)" }}>com discurso.</span>
      </h2>

      {/* big numbers */}
      <div className="proof-stats" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "48px 0", marginBottom: 64 }}>
        {[
      { v: 10, suffix: "+", l: "anos · IT/FR/BR", k: "experiência consolidada" },
      { v: 6, prefix: "0", l: "clientes corporativos peso pesado", k: "contratos diretos e via parceiros" },
      { v: 500, suffix: "+", l: "obras entregues no Brasil", k: "do galpão à residência premium" }].
      map((s, i) =>
      <div key={i} data-reveal style={{ '--reveal-delay': `${i * 90}ms` }}>
            <div className="display num" style={{ fontSize: 96, lineHeight: 1, color: "var(--ink)" }}>
              <Counter target={s.v} decimals={s.decimals || 0} prefix={s.prefix || ""} suffix={s.suffix || ""} />
            </div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--ink-3)", marginTop: 14 }}>{s.l}</div>
            <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 4 }}>{s.k}</div>
          </div>
      )}
      </div>

      {/* Testimonials — depoimentos reais do Google */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24, gap: 20, flexWrap: "wrap" }}>
        <div className="section-tag">Avaliações verificadas · Google</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ display: "flex", gap: 3 }} aria-hidden="true">
            {[0, 1, 2, 3, 4].map((s) =>
          <svg key={s} width="12" height="12" viewBox="0 0 24 24">
                <path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.8L5.8 21l1.6-7L2 9.3l7.1-.7L12 2z" fill="var(--accent)" />
              </svg>
          )}
          </div>
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: ".08em" }}>5.0 / 5.0</span>
        </div>
      </div>
      <div className="resp-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {[
      {
        name: "Rafaela Ferrari",
        initials: "RF",
        avatar: "assets/photos/avatar-rafaela.png",
        role: "Cliente residencial",
        when: "há 1 ano",
        quote: "Super recomendo! Profissionais de qualidade super organizados com datas, prazos e limpeza. Minha casa ficou impecável."
      },
      {
        name: "HM Gaiolas",
        initials: "HM",
        avatar: "assets/photos/avatar-hm.png",
        role: "Cliente corporativo",
        when: "há 1 ano",
        quote: "Super recomendo! Profissionais de qualidade super organizados. Amei."
      },
      {
        name: "Jullie Oliveira",
        initials: "JO",
        avatar: "assets/photos/avatar-jullie.png",
        role: "Cliente residencial",
        when: "há 6 meses",
        quote: "Trabalham com excelência. Amei, podem confiar."
      }].
      map((c, i) =>
      <figure key={c.name} data-reveal className="hover-lift" style={{ margin: 0, padding: 28, background: "var(--paper)", border: "1px solid var(--line)", display: "flex", flexDirection: "column", '--reveal-delay': `${i * 80}ms` }}>
            {/* Star rating */}
            <div style={{ display: "flex", gap: 4, marginBottom: 16 }} aria-label="5 de 5 estrelas">
              {[0, 1, 2, 3, 4].map((s) =>
          <svg key={s} width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.8L5.8 21l1.6-7L2 9.3l7.1-.7L12 2z" fill="var(--accent)" />
                </svg>
          )}
            </div>
            <blockquote style={{ margin: 0, fontFamily: "var(--display)", fontStyle: "italic", fontSize: 22, lineHeight: 1.4, color: "var(--ink-2)", flex: 1 }}>
              “{c.quote}”
            </blockquote>
            <figcaption style={{ marginTop: 24, paddingTop: 18, borderTop: "1px solid var(--line-2)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
                <div style={{
              width: 44, height: 44, borderRadius: "50%",
              overflow: "hidden",
              border: "1px solid var(--line)",
              background: "var(--paper-3)",
              flexShrink: 0
            }}>
                  <img
                    src={asset(c.avatar)}
                    alt={c.name}
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                  />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.name}</div>
                  <div style={{ fontSize: 11.5, color: "var(--muted)", fontFamily: "var(--mono)", letterSpacing: ".04em", textTransform: "uppercase" }}>{c.role}</div>
                </div>
              </div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", letterSpacing: ".08em", textTransform: "uppercase", textAlign: "right", flexShrink: 0 }}>
                Google<br />{c.when}
              </div>
            </figcaption>
          </figure>
      )}
      </div>
    </div>
  </section>;


// ─── RECENT WORKS / INSTAGRAM GRID ──────────────────────────────────────
const INSTAGRAM_HANDLE = "reforzzadrywall";
const INSTAGRAM_URL = `https://instagram.com/${INSTAGRAM_HANDLE}`;

const RECENT_WORKS = [
{ img: "assets/ig/post-1.webp", caption: "Mobiliários em drywall · closet com nichos iluminados", kind: "Foto", postUrl: "https://www.instagram.com/p/DDPKjKnx0g9/" },
{ img: "assets/ig/post-2.webp", caption: "Forro removível · obra em execução", kind: "Reel", postUrl: "https://www.instagram.com/reel/DS0dDhjEUXl/" },
{ img: "assets/ig/post-3.webp", caption: "Antes e depois · forro modular entregue", kind: "Foto", postUrl: "https://www.instagram.com/p/DWodesXDlSV/" },
{ img: "assets/ig/post-4.webp", caption: "Bancada em drywall para receber granito", kind: "Reel", postUrl: "https://www.instagram.com/reel/DPOnDzIDRi9/" },
{ img: "assets/ig/post-5.webp", caption: "Obras em drywall realizadas em Paris", kind: "Reel", postUrl: "https://www.instagram.com/reel/C9xp8q9RlwE/" },
{ img: "assets/ig/post-6.webp", caption: "700 m² em drywall e forro removível", kind: "Foto", postUrl: "https://www.instagram.com/p/DT3WJV8ji-E/" }];


const RecentWorks = () => {
  const trackRef = React.useRef(null);

  // Peek animation: só no celular (no desktop é grade, não há o que arrastar).
  // Quando a faixa entra na tela, desliza ~44px e volta, sinalizando que rola.
  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const isMobile = window.matchMedia("(max-width: 720px)").matches;
    if (reduce || !isMobile) return;
    let done = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !done) {
          done = true;
          io.disconnect();
          setTimeout(() => {
            track.scrollTo({ left: 44, behavior: "smooth" });
            setTimeout(() => track.scrollTo({ left: 0, behavior: "smooth" }), 520);
          }, 360);
        }
      });
    }, { threshold: 0.4 });
    io.observe(track);
    return () => io.disconnect();
  }, []);

  return (
    <section id="instagram" style={{ padding: "140px 0 120px" }}>
      <div className="container-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, marginBottom: 48, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 720 }}>
            <div className="section-tag" style={{ marginBottom: 20 }}>§ 06 · Últimos trabalhos</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.6vw, 72px)", margin: 0, lineHeight: 1 }}>
              O canteiro<br />
              <span style={{ fontStyle: "italic", color: "var(--accent)" }}>em tempo real.</span>
            </h2>
          </div>
          <a href={INSTAGRAM_URL} target="_blank" rel="noopener noreferrer"
            className="btn btn-ghost"
            style={{ height: 48, padding: "0 20px", fontSize: 14 }}>
            <InstagramIcon size={16} /> @{INSTAGRAM_HANDLE} no Instagram
          </a>
        </div>
      </div>

      {/* Faixa: grade no desktop, arrastável no celular (controlado via CSS) */}
      <div
        ref={trackRef}
        className="recent-track">
        {RECENT_WORKS.map((w, i) =>
          <a key={i} href={w.postUrl} target="_blank" rel="noopener noreferrer"
            data-reveal
            className="recent-card"
            style={{
              position: "relative",
              flex: "0 0 auto",
              aspectRatio: "1 / 1",
              overflow: "hidden",
              border: "1px solid var(--line)",
              background: "var(--ink)",
              display: "block",
              scrollSnapAlign: "start",
              '--reveal-delay': `${i * 60}ms`
            }}>

            <img src={asset(w.img)} alt={w.caption}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform .6s ease" }} />

            {/* Kind chip — top right */}
            <span style={{
              position: "absolute", top: 12, right: 12,
              fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase",
              color: "var(--paper)", background: "rgba(26,24,20,0.7)",
              padding: "5px 9px",
              backdropFilter: "blur(6px)",
              display: "inline-flex", alignItems: "center", gap: 5
            }}>
              <InstagramIcon size={11} /> {w.kind}
            </span>

            {/* Overlay caption */}
            <div className="recent-overlay" style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(to top, rgba(26,24,20,0.94) 0%, rgba(26,24,20,0.6) 38%, rgba(26,24,20,0) 72%)",
              display: "flex", alignItems: "flex-end",
              padding: 18,
              opacity: 0, transition: "opacity .35s ease"
            }}>
              <div style={{ color: "var(--paper)", display: "flex", flexDirection: "column", gap: 10, width: "100%" }}>
                <div style={{ fontFamily: "var(--display)", fontStyle: "italic", fontSize: 18, lineHeight: 1.25 }}>
                  {w.caption}
                </div>
                <div style={{
                  fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase",
                  color: "var(--accent-soft)",
                  display: "flex", alignItems: "center", gap: 6,
                  paddingTop: 8, borderTop: "1px solid rgba(242,237,229,0.2)"
                }}>
                  <InstagramIcon size={10} /> Ver no Instagram →
                </div>
              </div>
            </div>
          </a>
        )}
        {/* Espaçador final — só aparece no mobile (faixa) */}
        <div aria-hidden="true" className="recent-spacer" style={{ flex: "0 0 1px" }}></div>
      </div>

      <div className="container-wide">
        <div className="recent-hint" style={{ marginTop: 20, fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: ".06em", display: "flex", alignItems: "center", gap: 10 }}>
          <span aria-hidden="true" className="recent-hint-arrow" style={{ display: "inline-flex", gap: 3 }}>
            <span style={{ width: 14, height: 1, background: "var(--ink-3)", alignSelf: "center" }}></span>
            <svg viewBox="0 0 24 24" width="12" height="12" fill="none"><path d="M9 18l6-6-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </span>
          <span className="recent-hint-mobile">Arraste para ver mais · clique para abrir no Instagram</span>
          <span className="recent-hint-desktop">Clique em qualquer foto para abrir no Instagram</span>
        </div>
      </div>
    </section>
  );
};


// ─── INCLUDED / OFFER ───────────────────────────────────────────────────
const INCLUDED = [
"Diagnóstico técnico presencial — visita ao local e levantamento detalhado",
"Orçamento transparente e detalhado — sem letras miúdas, sem surpresa",
"Consultoria de projeto — sugestões técnicas para otimizar custo e performance",
"Execução supervisionada pelo especialista responsável",
"Sistemas certificados — aço galvanizado, gesso acartonado, isolantes de elite",
"Cronograma realista e cumprido — sem promessa furada de prazo",
"Canteiro limpo e organizado durante toda a obra",
"Pós-obra com suporte técnico especializado"];


// ─── BEFORE/AFTER GALLERY ──────────────────────────────────────────────
// Galeria de 6 transformações reais da Reforzza com slider arrastável.
// Cada par mostra: o estado original ("antes") e o resultado final ("depois").
// O usuário arrasta a barra vertical para revelar uma foto ou outra.
const BEFORE_AFTER = [
  { slot: "01",
    title: "Forro decorado com iluminação LED",
    subtitle: "Residencial · Cobertura de zinco virou sanca com LED azul",
    before: asset("assets/photos/before-after/slot-01-before.webp"),
    after:  asset("assets/photos/before-after/slot-01-after.webp") },
  { slot: "02",
    title: "Forro modular comercial",
    subtitle: "Galpão · Telhado metálico exposto → forro modular com spots",
    before: asset("assets/photos/before-after/slot-02-before.webp"),
    after:  asset("assets/photos/before-after/slot-02-after.webp") },
  { slot: "03",
    title: "Auditório de igreja — forro e iluminação",
    subtitle: "Igreja · Galpão vazio → auditório com forro modular e LED",
    before: asset("assets/photos/before-after/slot-03-before.webp"),
    after:  asset("assets/photos/before-after/slot-03-after.webp") },
  { slot: "04",
    title: "Auditório de igreja — paredes e acabamento",
    subtitle: "Igreja · Estrutura metálica → ambiente finalizado com drywall",
    before: asset("assets/photos/before-after/slot-04-before.webp"),
    after:  asset("assets/photos/before-after/slot-04-after.webp") },
  { slot: "05",
    title: "Forro residencial com luminárias embutidas",
    subtitle: "Residencial · Vigas expostas → forro liso com spots LED",
    before: asset("assets/photos/before-after/slot-05-before.webp"),
    after:  asset("assets/photos/before-after/slot-05-after.webp") },
  { slot: "06",
    title: "Forro de drywall residencial",
    subtitle: "Residencial · Laje cerâmica aparente → forro de gesso liso",
    before: asset("assets/photos/before-after/slot-06-before.webp"),
    after:  asset("assets/photos/before-after/slot-06-after.webp") },
];

const BeforeAfter = () => {
  const [active, setActive] = React.useState(0);
  const [pct, setPct] = React.useState(50);
  const dragRef = React.useRef(false);
  const frameRef = React.useRef(null);

  // Suporte a mouse + touch
  const onMove = React.useCallback((clientX) => {
    if (!frameRef.current) return;
    const rect = frameRef.current.getBoundingClientRect();
    const x = clientX - rect.left;
    const newPct = Math.max(0, Math.min(100, (x / rect.width) * 100));
    setPct(newPct);
  }, []);

  React.useEffect(() => {
    const onMouseMove = (e) => { if (dragRef.current) onMove(e.clientX); };
    const onTouchMove = (e) => { if (dragRef.current && e.touches[0]) onMove(e.touches[0].clientX); };
    const onEnd = () => { dragRef.current = false; document.body.style.userSelect = ''; };

    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onEnd);
    window.addEventListener('touchmove', onTouchMove, { passive: true });
    window.addEventListener('touchend', onEnd);
    return () => {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', onEnd);
      window.removeEventListener('touchmove', onTouchMove);
      window.removeEventListener('touchend', onEnd);
    };
  }, [onMove]);

  const startDrag = (clientX) => {
    dragRef.current = true;
    document.body.style.userSelect = 'none';
    onMove(clientX);
  };

  const current = BEFORE_AFTER[active];

  // Quando troca de par, volta o divisor pra 50%
  const select = (i) => {
    setActive(i);
    setPct(50);
  };

  return (
    <section id="transformacoes" style={{ padding: "140px 0 120px", borderTop: "1px solid var(--line)" }}>
      <div className="container-wide">

        {/* Cabeçalho */}
        <div data-reveal style={{ maxWidth: 760, marginBottom: 56 }}>
          <div className="section-tag" style={{ marginBottom: 20 }}>§ 05 · Transformações</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "0 0 24px", lineHeight: 1 }}>
            Antes e depois,<br />
            <span style={{ fontStyle: "italic", color: "var(--accent)" }}>em detalhe.</span>
          </h2>
          <p className="lede">
            Arraste a barra vertical para revelar cada transformação.
            São obras reais entregues pela Reforzza — do galpão metálico
            ao auditório completo, da laje exposta ao forro com iluminação
            de design.
          </p>
        </div>

        {/* Frame do slider */}
        <div data-reveal style={{ position: "relative", marginBottom: 32 }}>
          <div
            ref={frameRef}
            onMouseDown={(e) => startDrag(e.clientX)}
            onTouchStart={(e) => e.touches[0] && startDrag(e.touches[0].clientX)}
            style={{
              position: "relative",
              width: "100%",
              aspectRatio: "16 / 11",
              maxHeight: "76vh",
              background: "var(--paper-3)",
              border: "1px solid var(--line)",
              borderRadius: 12,
              overflow: "hidden",
              cursor: "ew-resize",
              userSelect: "none",
              touchAction: "none",
            }}
          >
            {/* DEPOIS (fundo, foto inteira visível) */}
            <img
              src={current.after}
              alt={`Depois — ${current.title}`}
              draggable="false"
              style={{
                position: "absolute", inset: 0,
                width: "100%", height: "100%",
                objectFit: "contain", objectPosition: "center",
                background: "var(--paper-3)",
                pointerEvents: "none",
              }}
            />

            {/* ANTES (em cima, com clipping pela %) */}
            <div style={{
              position: "absolute", inset: 0,
              clipPath: `inset(0 ${100 - pct}% 0 0)`,
              WebkitClipPath: `inset(0 ${100 - pct}% 0 0)`,
              transition: dragRef.current ? "none" : "clip-path 250ms ease",
              pointerEvents: "none",
            }}>
              <img
                src={current.before}
                alt={`Antes — ${current.title}`}
                draggable="false"
                style={{
                  width: "100%", height: "100%",
                  objectFit: "contain", objectPosition: "center",
                  background: "var(--paper-3)",
                }}
              />
            </div>

            {/* Etiquetas ANTES / DEPOIS */}
            <div style={{
              position: "absolute", top: 16, left: 16,
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em",
              textTransform: "uppercase", padding: "6px 12px",
              background: "rgba(26,24,20,0.78)", color: "var(--paper)",
              borderRadius: 999, backdropFilter: "blur(6px)",
              pointerEvents: "none",
              opacity: pct > 12 ? 1 : 0,
              transition: "opacity 200ms ease",
            }}>
              Antes
            </div>
            <div style={{
              position: "absolute", top: 16, right: 16,
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em",
              textTransform: "uppercase", padding: "6px 12px",
              background: "var(--accent)", color: "var(--accent-ink)",
              borderRadius: 999,
              pointerEvents: "none",
              opacity: pct < 88 ? 1 : 0,
              transition: "opacity 200ms ease",
            }}>
              Depois
            </div>

            {/* Linha divisória */}
            <div style={{
              position: "absolute", top: 0, bottom: 0,
              left: `${pct}%`, width: 2,
              background: "var(--paper)",
              transform: "translateX(-1px)",
              boxShadow: "0 0 0 1px rgba(26,24,20,0.18)",
              pointerEvents: "none",
              transition: dragRef.current ? "none" : "left 250ms ease",
            }} />

            {/* Handle central */}
            <div style={{
              position: "absolute", top: "50%",
              left: `${pct}%`,
              transform: "translate(-50%, -50%)",
              width: 48, height: 48,
              background: "var(--paper)",
              borderRadius: "50%",
              border: "1px solid var(--ink)",
              display: "grid", placeItems: "center",
              boxShadow: "0 6px 18px rgba(26,24,20,0.22)",
              cursor: "ew-resize",
              transition: dragRef.current ? "none" : "left 250ms ease",
            }}>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M6 6L2 10L6 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M14 6L18 10L14 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          </div>
        </div>

        {/* Legenda da imagem atual */}
        <div data-reveal style={{
          display: "flex", justifyContent: "space-between",
          alignItems: "flex-end", flexWrap: "wrap", gap: 24,
          marginBottom: 40,
        }}>
          <div style={{ flex: "1 1 380px" }}>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em",
              textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 8,
            }}>
              Obra {current.slot} de {String(BEFORE_AFTER.length).padStart(2, "0")}
            </div>
            <h3 className="display" style={{ fontSize: "clamp(22px, 2.2vw, 30px)", margin: "0 0 8px", lineHeight: 1.15 }}>
              {current.title}
            </h3>
            <p style={{ margin: 0, fontSize: 15, color: "var(--ink-2)" }}>
              {current.subtitle}
            </p>
          </div>

          {/* Navegação por dots (numeradas) */}
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {BEFORE_AFTER.map((item, i) => (
              <button
                key={i}
                onClick={() => select(i)}
                aria-label={`Ver transformação ${item.slot}`}
                style={{
                  width: 40, height: 40,
                  border: `1px solid ${i === active ? "var(--ink)" : "var(--line)"}`,
                  background: i === active ? "var(--ink)" : "transparent",
                  color: i === active ? "var(--paper)" : "var(--ink-3)",
                  borderRadius: 8,
                  fontFamily: "var(--mono)", fontSize: 12, fontWeight: 500,
                  cursor: "pointer",
                  transition: "all 200ms ease",
                }}
              >
                {item.slot}
              </button>
            ))}
          </div>
        </div>

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


// ─── PROCESS (Como funciona em 5 passos) ────────────────────────────────
const PROCESS = [
{ duration: "15 min · WhatsApp",
  title: "Visita e diagnóstico",
  desc: "Você descreve a obra e o especialista responsável vai ao local — levanta medidas, fotografa e identifica riscos antes de qualquer coisa começar." },
{ duration: "Até 3 dias",
  title: "Projeto e orçamento",
  desc: "Documento técnico com escopo, materiais certificados, cronograma com folga real e orçamento fechado. Sem letras miúdas, sem “imprevisto” inflando o custo no caminho." },
{ duration: "Conforme cronograma",
  title: "Execução supervisionada",
  desc: "Equipe própria, componentes certificados e canteiro limpo. Supervisão diária do especialista responsável e canal direto pelo WhatsApp durante toda a obra." },
{ duration: "Permanente",
  title: "Entrega e garantia",
  desc: "Vistoria final junto com você, acabamento conferido milímetro a milímetro e pós-obra com suporte técnico continuado." }];


const Process = () =>
<section id="processo" style={{ padding: "140px 0 120px", borderTop: "1px solid var(--line)" }}>
    <div className="container-wide">
      <div className="resp-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>

        <div className="sticky-col" style={{ position: "sticky", top: 96 }}>
          <div className="section-tag" style={{ marginBottom: 20 }}>§ 03 · Como funciona</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "0 0 28px", lineHeight: 1 }}>
            Do primeiro<br />contato à<br />
            <span style={{ fontStyle: "italic", color: "var(--accent)" }}>entrega.</span>
          </h2>
          <p className="lede">
            Quatro etapas, zero opacidade. Você sabe exatamente o que esperar
            em cada momento — sem surpresa, sem letra miúda.
          </p>
          <div style={{ marginTop: 32, display: "inline-flex", alignItems: "center", gap: 10, padding: "10px 16px", border: "1px solid var(--line)", borderRadius: 999, fontSize: 13, color: "var(--ink-3)" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }}></span>
            Primeira conversa: gratuita e sem compromisso
          </div>

          {/* Faixa de números + experiência internacional */}
          <div data-reveal style={{ marginTop: 40, paddingTop: 36, borderTop: "1px solid var(--line)" }}>
            <div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
              <div>
                <div className="display num" style={{ fontSize: 46, lineHeight: 1, color: "var(--accent)" }}>
                  <Counter target={10} suffix="+" />
                </div>
                <div style={{ fontSize: 11, fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: ".1em", color: "var(--ink-3)", marginTop: 6 }}>anos · IT/FR/BR</div>
              </div>
              <div>
                <div className="display" style={{ fontSize: 46, lineHeight: 1, color: "var(--accent)" }}>
                  <Counter target={9} />
                </div>
                <div style={{ fontSize: 11, fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: ".1em", color: "var(--ink-3)", marginTop: 6 }}>especialidades</div>
              </div>
              <div>
                <div className="display num" style={{ fontSize: 46, lineHeight: 1, color: "var(--accent)" }}>
                  <Counter target={500} prefix="+" />
                </div>
                <div style={{ fontSize: 11, fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: ".1em", color: "var(--ink-3)", marginTop: 6 }}>trabalhos realizados</div>
              </div>
            </div>
            <p style={{ marginTop: 24, fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-2)" }}>
              Nossa equipe traz a experiência de canteiros exigentes da Itália e da França —
              onde a tolerância para erro é zero. É esse rigor que aplicamos em cada obra.
            </p>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          {/* Linha vertical conectora */}
          <div aria-hidden="true" style={{
            position: "absolute",
            left: 19, top: 12, bottom: 12,
            width: 1, background: "var(--line)",
            zIndex: 0
          }}></div>

          <ol style={{ margin: 0, padding: 0, listStyle: "none", position: "relative" }}>
            {PROCESS.map((step, i) =>
            <li key={i} data-reveal style={{
              display: "grid",
              gridTemplateColumns: "40px 1fr",
              gap: 24,
              padding: "0 0 40px",
              position: "relative",
              '--reveal-delay': `${i * 80}ms`
            }}>
                {/* Bolinha numerada */}
                <div style={{
                  width: 40, height: 40, borderRadius: "50%",
                  background: "var(--paper)",
                  border: "1px solid var(--ink)",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--mono)", fontSize: 13, fontWeight: 500,
                  color: "var(--ink)",
                  position: "relative", zIndex: 1
                }}>
                  {String(i + 1).padStart(2, "0")}
                </div>

                {/* Conteúdo do passo */}
                <div style={{ paddingTop: 4 }}>
                  <div style={{
                    fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".14em",
                    textTransform: "uppercase", color: "var(--accent)", marginBottom: 8
                  }}>
                    {step.duration}
                  </div>
                  <h3 className="display" style={{
                    fontSize: "clamp(24px, 2.2vw, 30px)",
                    margin: "0 0 10px", lineHeight: 1.1
                  }}>
                    {step.title}
                  </h3>
                  <p style={{
                    margin: 0, fontSize: 16, lineHeight: 1.6,
                    color: "var(--ink-2)", maxWidth: "58ch"
                  }}>
                    {step.desc}
                  </p>
                </div>
              </li>
            )}
          </ol>

          {/* Bloco "sempre incluído" — absorvido da antiga seção Included */}
          <div data-reveal style={{ marginTop: 8, marginBottom: 32, padding: "28px 28px 32px", border: "1px solid var(--line)", background: "var(--paper-2)" }}>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".14em",
              textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 18
            }}>
              Sempre incluído no projeto
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px 28px" }} className="included-grid">
              {INCLUDED.map((line, i) =>
                <li key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 12, alignItems: "baseline" }}>
                  <span style={{ color: "var(--accent)", display: "inline-flex", alignItems: "center" }}>
                    <Check />
                  </span>
                  <span style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>{line}</span>
                </li>
              )}
            </ul>
          </div>

          {/* CTA WhatsApp */}
          <a className="btn" href={WHATSAPP.included}>
            <WhatsIcon /> Quero meu diagnóstico gratuito
          </a>
        </div>
      </div>
    </div>
  </section>;


// ─── INCLUDED (fundido em Process) ──────────────────────────────────────
// Alias no-op: o bloco "sempre incluído" agora vive dentro de Process.
const Included = () => null;

// ─── OBJECTIONS (fundido no FAQ → § 07) ─────────────────────────────────
// As objeções viraram o grupo "Dúvidas técnicas" dentro do FAQ.
// Componente mantido como no-op para compatibilidade.
const Objections = () => null;


const ObjItem = ({ idx, q, a, defaultOpen }) => {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div style={{ borderBottom: "1px solid var(--line)" }}>
      <button onClick={() => setOpen((o) => !o)} style={{
        width: "100%", textAlign: "left", border: 0, background: "transparent",
        padding: "26px 0", cursor: "pointer",
        display: "grid", gridTemplateColumns: "44px 1fr 28px", gap: 16, alignItems: "baseline"
      }}>
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)" }}>
          {String(idx + 1).padStart(2, "0")}
        </span>
        <span style={{ fontFamily: "var(--display)", fontSize: 26, lineHeight: 1.2, color: "var(--ink)" }}>{q}</span>
        <span style={{ color: "var(--ink-3)", transform: open ? "rotate(45deg)" : "rotate(0)", transition: "transform .25s ease" }}>
          <Plus size={16} />
        </span>
      </button>
      <div style={{
        maxHeight: open ? 240 : 0, overflow: "hidden", transition: "max-height .35s ease, opacity .35s ease, padding .35s ease",
        opacity: open ? 1 : 0, paddingBottom: open ? 28 : 0,
        paddingLeft: 60, paddingRight: 60
      }}>
        <p style={{ margin: 0, fontSize: 16, color: "var(--ink-2)", lineHeight: 1.6, maxWidth: "70ch" }}>{a}</p>
      </div>
    </div>);

};

// ─── GUARANTEE + URGENCY ────────────────────────────────────────────────
const Guarantee = () =>
<section style={{ padding: "140px 0 120px", background: "var(--ink)", color: "var(--paper)" }}>
    <div className="container-wide">
      <div className="resp-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
        <div>
          <div className="section-tag" style={{ color: "rgba(242,237,229,0.5)", marginBottom: 20 }}>§ 08 · Compromisso técnico</div>
          <h2 className="display" style={{ fontSize: "clamp(44px, 5vw, 80px)", margin: 0, lineHeight: 1, color: "var(--paper)" }}>
            O Compromisso<br />
            <span style={{ fontStyle: "italic", color: "var(--accent-soft)" }}>Reforzza.</span>
          </h2>
          <p style={{ fontSize: 18, color: "rgba(242,237,229,0.72)", maxWidth: "44ch", marginTop: 28 }}>
            Não é garantia de reembolso. É garantia de execução —
            do orçamento à última junta de acabamento.
          </p>

          {/* seal */}
          <div style={{ marginTop: 48, display: "inline-flex", alignItems: "center", gap: 16, padding: "16px 22px", border: "1px solid rgba(242,237,229,0.3)", borderRadius: 999 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true" style={{ color: "var(--accent-soft)" }}>
              <path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z" stroke="currentColor" strokeWidth="1.4" fill="none" />
              <path d="M8 12l3 3 5-6" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--accent-soft)" }}>
              ABNT · Equipe com vivência internacional · Pós-obra continuado
            </span>
          </div>
        </div>

        <div>
          {[
        { t: "Fidelidade orçamentária", d: "O investimento acordado é respeitado do início ao fim. Qualquer ajuste de escopo é apresentado com transparência total, antes de ser executado." },
        { t: "Conformidade normativa", d: "Total alinhamento com as normas da ABNT e padrões internacionais de engenharia. Cada sistema atende requisitos máximos de segurança e durabilidade." },
        { t: "Suporte pós-obra", d: "Após a entrega, você continua tendo canal direto com nosso especialista técnico para uso, manutenção ou ajuste." },
        { t: "Materiais certificados", d: "Apenas fornecedores selecionados de aço galvanizado, gesso acartonado e isolantes de elite. Sem componente “genérico” disfarçado." }].
        map((g, i) =>
        <div key={i} style={{ padding: "26px 0", borderBottom: i < 3 ? "1px solid rgba(242,237,229,0.18)" : 0, display: "grid", gridTemplateColumns: "44px 1fr", gap: 24 }}>
              <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "rgba(242,237,229,0.5)" }}>0{i + 1}</span>
              <div>
                <h3 style={{ fontFamily: "var(--display)", fontSize: 28, margin: "0 0 6px", lineHeight: 1.15 }}>{g.t}</h3>
                <p style={{ margin: 0, fontSize: 15, color: "rgba(242,237,229,0.7)", lineHeight: 1.55 }}>{g.d}</p>
              </div>
            </div>
        )}
        </div>
      </div>
    </div>
  </section>;


// ─── FAQ ────────────────────────────────────────────────────────────────
const FAQ_GROUPS = [
{ label: "Dúvidas técnicas",
  items: [
    { q: "Drywall não é frágil? Vai cair se eu encostar um móvel pesado?", a: "Mito de instalação amadora. Nosso sistema, executado com reforços corretos e estrutura de aço galvanizado, suporta cargas que muita parede de alvenaria não aguenta — móveis suspensos, prateleiras, TVs." },
    { q: "Vai ficar caro igual alvenaria tradicional?", a: "Na maioria dos casos, sai mais barato quando se soma tudo: tempo de obra menor, sem desperdício de material, sem custo de entulho, sem retrabalho. E sua propriedade fica disponível para uso muito antes." },
    { q: "Steel Frame aguenta o clima do Rio? Não enferruja?", a: "O aço galvanizado é tratado exatamente para isso. Resistente a umidade, mofo e cupins — durabilidade equivalente ou superior à alvenaria, sem problemas estruturais com infiltração." },
    { q: "Drywall serve para banheiro e área molhada?", a: "Sim — utilizamos placas verdes (RU — Resistentes à Umidade) específicas para áreas molhadas, com tratamento adequado." }
  ]},
{ label: "Antes de contratar",
  items: [
    { q: "Já fui mal atendido por construtora antes. Como sei que vocês são diferentes?", a: "Você fala diretamente com o especialista técnico responsável — não com vendedor, não com call center. E nossos contratos não se conquistam com discurso, e sim com obra entregue." },
    { q: "A Reforzza atende qual região?", a: "Atendemos toda a Cidade do Rio de Janeiro, Seropédica e Nova Iguaçu. Para projetos especiais em outras regiões, consulte pelo WhatsApp." },
    { q: "Atendem obras grandes (empresarial/comercial) e pequenas (residencial)?", a: "Sim. Desde reformas residenciais de alto padrão até obras corporativas e industriais. Nosso método se adapta à escala — o rigor técnico, não." },
    { q: "Quanto tempo leva uma obra com construção a seco?", a: "Depende do escopo, mas em geral uma obra a seco é entregue em 1/3 do tempo de uma obra em alvenaria tradicional. No diagnóstico técnico, você recebe cronograma realista." },
    { q: "Vocês fazem o projeto ou só executam?", a: "Trabalhamos em sinergia com arquitetos e engenheiros. Se você já tem projeto, executamos com precisão milimétrica. Se ainda não tem, oferecemos consultoria técnica e indicamos parceiros de confiança." },
    { q: "Como funciona o orçamento? É cobrado?", a: "O diagnóstico inicial pelo WhatsApp é gratuito. Os detalhes da visita técnica e do orçamento a gente combina diretamente com você na conversa." },
    { q: "Vocês dão garantia da obra?", a: "Sim. Além da garantia legal, oferecemos suporte técnico pós-obra, com orientações para manutenção e preservação do acabamento ao longo dos anos." }
  ]}];

// Lista plana — usada para numeração contínua e para o JSON-LD se houver.
const FAQ_ITEMS = FAQ_GROUPS.flatMap(g => g.items);


const FAQ = () => {
  let counter = 0;
  return (
    <section id="faq" style={{ padding: "140px 0 120px" }}>
      <div className="container-wide">
        <div className="resp-grid-2" style={{ display: "grid", gridTemplateColumns: "minmax(0, 380px) 1fr", gap: 80, alignItems: "start" }}>
          <div className="sticky-col" style={{ position: "sticky", top: 96 }}>
            <div className="section-tag" style={{ marginBottom: 20 }}>§ 07 · Perguntas frequentes</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "0 0 24px", lineHeight: 1 }}>
              As dúvidas que todo cliente <span style={{ fontStyle: "italic", color: "var(--accent)" }}>tem antes de assinar.</span>
            </h2>
            <p className="lede">Reunimos as perguntas técnicas e as práticas num lugar só. Se a sua não estiver aqui, fala com a gente no WhatsApp — respondemos em até 1h útil.</p>
          </div>

          <div>
            {FAQ_GROUPS.map((group, gi) =>
              <div key={gi} style={{ marginTop: gi === 0 ? 0 : 48 }}>
                <div style={{
                  fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em",
                  textTransform: "uppercase", color: "var(--accent)", marginBottom: 4,
                  paddingBottom: 14, borderBottom: "1px solid var(--ink)"
                }}>
                  {group.label}
                </div>
                {group.items.map((o) => {
                  const idx = counter++;
                  return <ObjItem key={idx} idx={idx} q={o.q} a={o.a} defaultOpen={false} />;
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};



// ─── FINAL CTA ──────────────────────────────────────────────────────────
const FinalCTA = () =>
<section style={{ padding: "160px 0 140px", background: "var(--paper-2)", borderTop: "1px solid var(--line)" }}>
    <div className="container-wide" style={{ textAlign: "center" }}>
      <div className="section-tag" style={{ marginBottom: 24 }}>§ 09 · Próximo passo</div>
      <h2 className="display" style={{ fontSize: "clamp(56px, 8vw, 140px)", margin: 0, lineHeight: 0.96, letterSpacing: "-0.02em" }}>
        Sua obra merece<br />
        <span style={{ fontStyle: "italic", color: "var(--accent)" }}>o padrão Reforzza.</span>
      </h2>

      <p className="lede" style={{ margin: "40px auto 0", textAlign: "center" }}>
        A decisão é simples: mais uma obra no padrão de sempre,
        ou entrar no padrão Reforzza? O primeiro passo é uma conversa técnica pelo WhatsApp.
        Sem compromisso, sem custo, sem pressão de venda.
      </p>

      <div style={{ marginTop: 56, display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
        <a className="btn btn-accent btn-lg" href={WHATSAPP.final} style={{ minWidth: 340 }}>
          <WhatsIcon /> Quero solicitar meu orçamento
        </a>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 14, justifyContent: "center", fontSize: 13, color: "var(--ink-3)" }}>
          <span style={{ fontFamily: "var(--mono)" }}>(21) 99510-8345</span>
          <span style={{ color: "var(--line)" }}>·</span>
          <span>Resposta em até 1h útil</span>
          <span style={{ color: "var(--line)" }}>·</span>
          <span>Cidade do RJ · Seropédica · Nova Iguaçu</span>
        </div>
      </div>

      {/* P.S. */}
      <div style={{ maxWidth: 720, margin: "120px auto 0", padding: "32px 36px", background: "var(--paper)", border: "1px solid var(--line)", textAlign: "left" }}>
        <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 12 }}>
          P.S. — última linha
        </div>
        <p style={{ margin: 0, fontFamily: "var(--display)", fontStyle: "italic", fontSize: 22, lineHeight: 1.45, color: "var(--ink-2)" }}>
          Lembra do detalhe invisível que define o luxo na escola europeia? É exatamente isso
          que faz a diferença entre uma obra que envelhece mal em 2 anos e uma obra que continua
          impecável depois de 10. A Reforzza foi construída para entregar o segundo tipo.
        </p>
      </div>
    </div>
  </section>;


// ─── FOOTER ─────────────────────────────────────────────────────────────
const Footer = () =>
<footer style={{ background: "var(--ink)", color: "rgba(242,237,229,0.7)", padding: "64px 0 32px" }}>
    <div className="container-wide">
      <div className="resp-grid-4" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40, marginBottom: 56 }}>
        <div style={{ color: "var(--paper)" }}>
          <Wordmark onDark={true} />
          <p style={{ fontSize: 14, marginTop: 18, maxWidth: "32ch", color: "rgba(242,237,229,0.62)" }}>
            Engenharia de construção a seco com rigor técnico de quem se formou na Itália, França e Brasil.
          </p>
        </div>
        <div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(242,237,229,0.45)", marginBottom: 14 }}>Contato</div>
          <div style={{ fontSize: 14, lineHeight: 1.9 }}>
            <div><a href={WHATSAPP.footer}>WhatsApp · (21) 99510-8345</a></div>
            <div>reforzzadrywall@gmail.com</div>
            <div>Resposta em até 1h útil</div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid rgba(242,237,229,0.18)" }}>
              <a href={`https://instagram.com/${INSTAGRAM_HANDLE}`} target="_blank" rel="noopener noreferrer"
                 style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--paper)", borderBottom: "1px solid rgba(242,237,229,0.3)", paddingBottom: 2 }}>
                <InstagramIcon size={14} /> Conheça nosso Instagram
              </a>
            </div>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(242,237,229,0.45)", marginBottom: 14 }}>Endereço</div>
          <div style={{ fontSize: 14, lineHeight: 1.6 }}>
            Avenida das Américas, 4200<br />
            Barra da Tijuca · Rio de Janeiro — RJ<br />
            <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "rgba(242,237,229,0.55)" }}>CEP 22.640-907</span>
          </div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(242,237,229,0.45)", margin: "20px 0 10px" }}>Atendimento</div>
          <div style={{ fontSize: 14, lineHeight: 1.7 }}>
            Cidade do Rio · Seropédica · Nova Iguaçu
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(242,237,229,0.45)", marginBottom: 14 }}>Especialidades</div>
          <div style={{ fontSize: 14, lineHeight: 1.9 }}>
            <div>Drywall · Steel Frame</div>
            <div>Forros · Coberturas</div>
            <div>Isolamento Termoacústico</div>
          </div>
        </div>
      </div>

      <div style={{ borderTop: "1px solid rgba(242,237,229,0.18)", paddingTop: 22, display: "flex", justifyContent: "space-between", gap: 20, flexWrap: "wrap", fontSize: 12, color: "rgba(242,237,229,0.45)", fontFamily: "var(--mono)" }}>
        <span>© 2026 Reforzza · CNPJ 33.105.889/0001-20</span>
        <span>RZA · Construção a seco · Rio de Janeiro</span>
      </div>
    </div>
  </footer>;


// ─── FLOATING WHATSAPP ──────────────────────────────────────────────────
const FloatingWA = () =>
<a href={WHATSAPP.floating}
className="floating-wa"
aria-label="Solicitar orçamento pelo WhatsApp"
style={{
  position: "fixed", right: 24, bottom: 24, zIndex: 40,
  height: 56, borderRadius: 999,
  background: "#1F8A5B", color: "white",
  display: "inline-flex", alignItems: "center", gap: 10,
  padding: "0 22px 0 18px",
  boxShadow: "0 12px 32px -8px rgba(31,138,91,.6), 0 0 0 6px rgba(31,138,91,.15)",
  transition: "transform .25s ease, box-shadow .25s ease",
  textDecoration: "none", whiteSpace: "nowrap",
}}
onMouseEnter={(e) => {
  e.currentTarget.style.transform = "scale(1.04)";
  e.currentTarget.style.boxShadow = "0 16px 40px -8px rgba(31,138,91,.7), 0 0 0 8px rgba(31,138,91,.18)";
}}
onMouseLeave={(e) => {
  e.currentTarget.style.transform = "scale(1)";
  e.currentTarget.style.boxShadow = "0 12px 32px -8px rgba(31,138,91,.6), 0 0 0 6px rgba(31,138,91,.15)";
}}>
  <WhatsIcon size={22} color="white" />
  {/* Texto só aparece no desktop — no mobile só o ícone via CSS */}
  <span className="floating-wa-label" style={{
    fontSize: 14, fontWeight: 500, letterSpacing: "0.01em", color: "white",
  }}>
    Solicitar orçamento
  </span>
</a>;


// ─── BARRA DE PROGRESSO DE LEITURA ──────────────────────────────────────
// Barra fina (2px) fixa no topo absoluto da página que enche conforme o
// usuário rola. Some quando está no topo. Usa cor de acento da marca.
// Performance: rAF + passive listener — não pesa no scroll.
const ReadProgress = () => {
  const [pct, setPct] = React.useState(0);
  const rafRef = React.useRef(0);

  React.useEffect(() => {
    const compute = () => {
      const doc = document.documentElement;
      const scrollTop = window.scrollY || doc.scrollTop;
      const max = (doc.scrollHeight - doc.clientHeight) || 1;
      const ratio = Math.min(100, Math.max(0, (scrollTop / max) * 100));
      setPct(ratio);
    };
    const onScroll = () => {
      if (rafRef.current) return;
      rafRef.current = requestAnimationFrame(() => {
        compute();
        rafRef.current = 0;
      });
    };
    compute();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  }, []);

  return (
    <div
      aria-hidden="true"
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        height: 2,
        zIndex: 100, // acima do header (que é zIndex 50 no design original)
        pointerEvents: 'none',
        background: 'transparent',
      }}
    >
      <div
        style={{
          height: '100%',
          width: `${pct}%`,
          background: 'var(--accent)',
          transition: 'width 80ms linear',
          opacity: pct < 1 ? 0 : 1,
        }}
      />
    </div>
  );
};


// ─── BOTÃO VOLTAR AO TOPO ───────────────────────────────────────────────
// Botão discreto no canto inferior esquerdo. Aparece após rolar ~600px,
// some no topo. Não compete com o WhatsApp (que fica à direita).
const BackToTop = () => {
  const [visible, setVisible] = React.useState(false);
  const rafRef = React.useRef(0);

  React.useEffect(() => {
    const check = () => {
      setVisible((window.scrollY || document.documentElement.scrollTop) > 600);
    };
    const onScroll = () => {
      if (rafRef.current) return;
      rafRef.current = requestAnimationFrame(() => {
        check();
        rafRef.current = 0;
      });
    };
    check();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', onScroll);
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  }, []);

  const toTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });

  return (
    <button
      onClick={toTop}
      aria-label="Voltar ao topo"
      className="back-to-top"
      style={{
        position: 'fixed',
        left: 24,
        bottom: 24,
        zIndex: 40,
        width: 44,
        height: 44,
        borderRadius: '50%',
        border: '1px solid var(--line)',
        background: 'rgba(242,237,229,0.85)',
        backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
        color: 'var(--ink)',
        display: 'grid',
        placeItems: 'center',
        cursor: 'pointer',
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(12px)',
        pointerEvents: visible ? 'auto' : 'none',
        transition: 'opacity 280ms ease, transform 280ms ease, border-color 200ms ease',
        boxShadow: '0 6px 18px -8px rgba(26,24,20,0.3)',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--ink)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line)'; }}
    >
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <path d="M8 13V3M8 3L3.5 7.5M8 3L12.5 7.5"
          stroke="currentColor" strokeWidth="1.6"
          strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
  );
};


// Expose globals so app.jsx can use them
Object.assign(window, {
  Nav, Hero, TrustStrip, PainPoints, Method, Benefits, Specialties,
  Proof, RecentWorks, BeforeAfter, Process, Included, Objections, Guarantee, FAQ, FinalCTA, Footer, FloatingWA,
  ReadProgress, BackToTop,
  WhatsIcon, ArrowRt, Check, Plus, Wordmark, InstagramIcon
});