/* sections.jsx — marquee, experience, why, included, process, faq, form */

/* ---------- simple line icons ---------- */
const Icon = {
  target: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0 M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0-10 0 M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0",
  shield: "M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z M9 12l2 2 4-4",
  bolt: "M13 3L4 14h6l-1 7 9-11h-6l1-7z",
  scale: "M4 20h16 M12 4v16 M12 4l-6 7h12l-6-7 M6 11a3 3 0 0 0 6 0 M12 11a3 3 0 0 0 6 0",
  compass: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0 M15.5 8.5l-2 5-5 2 2-5 5-2z",
  headset: "M4 13v-1a8 8 0 0 1 16 0v1 M4 13a2 2 0 0 1 2 2v2a2 2 0 0 1-4 0v-2 M20 13a2 2 0 0 0-2 2v2a2 2 0 0 0 4 0v-2 M18 19a4 4 0 0 1-4 3h-1"
};
function LineIcon({ d, size = 26 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      {d.split(" M").map((seg, i) => <path key={i} d={(i ? "M" : "") + seg} />)}
    </svg>);

}

/* ---------- 02 — Marquee (fundido ao hero) ---------- */
function MarqueeSection() {
  const platforms = [
  { name: "Shopify Plus", src: "assets/platforms/shopify-plus.png", h: 30 },
  { name: "VTEX", src: "assets/platforms/vtex.png", h: 40 },
  { name: "Nuvemshop", src: "assets/platforms/nuvemshop.png", h: 26 },
  { name: "Shopify", src: "assets/platforms/shopify.png", h: 34 },
  { name: "Tray", src: "assets/platforms/tray.png", h: 40 },
  { name: "Wake", src: "assets/platforms/wake.png", h: 38 }];

  return (
    <section className="sec-dark" style={{ padding: "clamp(8px,2vh,28px) 0 clamp(20px,3vw,36px)", background: "transparent" }}>
      <div className="container" style={{ marginBottom: 22 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, justifyContent: "center", maxWidth: 640, margin: "0 auto" }}>
          <span style={{ flex: 1, height: 1, background: "linear-gradient(90deg,transparent,var(--border-dark))" }} />
          <Reveal as="p" className="eyebrow" style={{ color: "var(--text-dark-faint)", whiteSpace: "nowrap" }}>Plataformas parceiras</Reveal>
          <span style={{ flex: 1, height: 1, background: "linear-gradient(90deg,var(--border-dark),transparent)" }} />
        </div>
      </div>
      <Marquee items={platforms} speed={74} />
    </section>);

}

/* ---------- 03 — Experiência (light, layout 2 colunas) ---------- */
const EXP_ICONS = {
  star: "M12 3.2l2.6 5.7 6.2.6-4.7 4.1 1.4 6.1L12 16.9 6.5 19.7l1.4-6.1L3.2 9.5l6.2-.6z",
  cart: "M3 4h2.2l2.3 11.2a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.78L20.5 8H6 M9.5 20a1 1 0 1 0 .01 0 M17 20a1 1 0 1 0 .01 0",
  layers: "M12 3.3l8.5 4.6-8.5 4.6-8.5-4.6 8.5-4.6z M3.7 12.3l8.3 4.5 8.3-4.5 M3.7 16.4l8.3 4.5 8.3-4.5"
};
function ExperienceSection() {
  const stats = [
  { icon: EXP_ICONS.star, to: 20, suffix: "+", label: "anos de experiência acumulada" },
  { icon: EXP_ICONS.cart, to: 200, suffix: "+", label: "projetos de E‑Commerce entregues" },
  { icon: EXP_ICONS.layers, to: 100, suffix: "+", label: "negócios acelerados" }];

  return (
    <section id="experiencia" className="sec sec-light">
      <div className="container">
        <div className="exp-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0,42fr) minmax(0,58fr)", gap: "clamp(28px,4vw,60px)", alignItems: "center" }}>

          {/* ---- Coluna esquerda: mockup protagonista + partículas orbitando ---- */}
          <Reveal className="exp-visual" style={{ position: "relative" }}>
            <div className="exp-stage">
              {/* glow roxo extremamente suave atrás do dispositivo */}
              <div className="exp-glow" aria-hidden="true" />

              {/* partículas orbitando — camada atrás do mockup */}
              <div className="exp-orbits exp-orbits--back" aria-hidden="true">
                <div className="orb orb--a"><i className="dot dot--purple" /></div>
                <div className="orb orb--b"><i className="dot dot--white" /></div>
                <div className="orb orb--c"><i className="dot dot--purple sm" /></div>
              </div>

              {/* mockup — protagonista */}
              <div className="exp-shadow" aria-hidden="true" />
              <img src="assets/experience-mockup-v5.png" alt="Loja virtual de E‑Commerce em tablet e celular" className="exp-mockup" />

              {/* partículas orbitando — camada na frente (dá a volta nos dispositivos) */}
              <div className="exp-orbits exp-orbits--front" aria-hidden="true">
                <div className="orb orb--d"><i className="dot dot--white sm" /></div>
                <div className="orb orb--e"><i className="dot dot--purple" /></div>
                <div className="orb orb--f"><i className="dot dot--white xs" /></div>
              </div>
            </div>
          </Reveal>

          {/* ---- Coluna direita: conteúdo + cards ---- */}
          <div>
            <SectionHead max={620}
            eyebrow="Experiência comprovada"
            title={<><span style={{ fontSize: "40px" }}>Mais de </span><span className="accent" style={{ fontSize: "40px" }}>20 anos</span><span style={{ fontSize: "40px" }}> de </span><br /><span style={{ fontSize: "40px" }}>experiência acumulada</span></>}
            sub={<>Já ajudamos centenas de negócios a estruturar e acelerar<br />seus projetos de E‑Commerce com foco em alta performance.</>} />
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 10, marginTop: 28 }}>
              {stats.map((s, i) =>
              <Reveal key={i} delay={i * 110} className="exp-stat spot-card" style={{
                display: "inline-flex", alignItems: "center", gap: 14, alignSelf: "flex-start",
                background: "var(--surface-light)", border: "1px solid var(--border-light)", borderRadius: "14px",
                padding: "9px 20px 9px 11px", boxShadow: "0 4px 14px rgba(20,12,28,.05)"
              }}>
                  <span style={{ flex: "0 0 auto", width: 40, height: 40, borderRadius: 11, display: "grid", placeItems: "center", color: "var(--purple)", background: "rgba(159,1,237,.10)", border: "1px solid rgba(159,1,237,.22)" }}>
                    <LineIcon d={s.icon} size={20} />
                  </span>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 2 }}>
                    <div style={{ fontFamily: "Rubik", fontWeight: 800, fontSize: "clamp(1.7rem,2.9vw,2.2rem)", lineHeight: 1, letterSpacing: "-.03em", color: "var(--text-light)" }}>
                      <Counter to={s.to} prefix={s.prefix || ""} suffix={s.suffix || ""} />
                    </div>
                    <div className="text-dim" style={{ fontSize: ".82rem", lineHeight: 1.2 }}>{s.label}</div>
                  </div>
                </Reveal>
              )}
            </div>
          </div>
        </div>
        <SectionCTA label="Receber orçamento" mt={48} />
      </div>
      <style>{`
        .exp-visual{display:flex;align-items:center;justify-content:center}
        /* spotlight suave nos cards de métrica (segue o mouse via --x/--y) */
        .exp-stat>*{position:relative;z-index:1}
        .spot-card.exp-stat::after{display:none}
        .spot-card.exp-stat::before{z-index:0;background:radial-gradient(300px 300px at var(--x,-400px) var(--y,-400px),rgba(159,1,237,.16),transparent 72%);filter:blur(16px)}
        .exp-stage{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
        .exp-mockup{position:relative;z-index:3;width:100%;max-width:560px;height:auto;display:block;filter:drop-shadow(0 28px 56px rgba(20,12,28,.22));animation:expFloat 7s var(--ease) infinite}
        .exp-shadow{position:absolute;z-index:2;bottom:11%;left:50%;width:64%;height:46px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(20,12,28,.22),transparent 70%);filter:blur(10px);animation:expShadow 7s var(--ease) infinite}
        .exp-glow{position:absolute;z-index:1;width:70%;height:70%;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(159,1,237,.14),transparent 68%);filter:blur(26px);animation:expPulse 7s ease-in-out infinite}
        /* partículas orbitando — wrappers giram, ponto fica no topo do círculo */
        .exp-orbits{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
        .exp-orbits--back{z-index:2}
        .exp-orbits--front{z-index:4}
        .orb{position:absolute;left:0;top:0;transform-origin:0 0}
        .orb i.dot{position:absolute;border-radius:50%;left:0;top:0}
        .dot--purple{background:var(--purple);box-shadow:0 0 10px 1px rgba(159,1,237,.85),0 0 4px rgba(159,1,237,.9)}
        .dot--white{background:#fff;box-shadow:0 0 10px 1px rgba(207,107,255,.7),0 0 4px rgba(255,255,255,.9)}
        .dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}
        .dot.sm{width:6px;height:6px;margin:-3px 0 0 -3px}
        .dot.xs{width:4px;height:4px;margin:-2px 0 0 -2px}
        /* cada órbita: raio via translateX no dot, giro via rotate no wrapper */
        .orb--a{animation:orbSpin 26s linear infinite}
        .orb--a i{transform:translateX(248px)}
        .orb--b{animation:orbSpin 34s linear infinite reverse}
        .orb--b i{transform:translateX(286px) translateY(40px)}
        .orb--c{animation:orbSpin 30s linear infinite}
        .orb--c i{transform:translateX(210px) translateY(-150px)}
        .orb--d{animation:orbSpin 22s linear infinite reverse}
        .orb--d i{transform:translateX(266px) translateY(120px)}
        .orb--e{animation:orbSpin 38s linear infinite}
        .orb--e i{transform:translateX(300px) translateY(-90px)}
        .orb--f{animation:orbSpin 28s linear infinite reverse}
        .orb--f i{transform:translateX(230px) translateY(170px)}
        .dot{animation:orbTwinkle 5s ease-in-out infinite}
        .orb--b i,.orb--d i,.orb--f i{animation-delay:1.6s}
        .orb--c i,.orb--e i{animation-delay:3s}
        @keyframes orbSpin{to{transform:rotate(360deg)}}
        @keyframes orbTwinkle{0%,100%{opacity:.45}50%{opacity:1}}
        @keyframes expFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
        @keyframes expShadow{0%,100%{opacity:.7;transform:translateX(-50%) scaleX(1)}50%{opacity:.45;transform:translateX(-50%) scaleX(.9)}}
        @keyframes expPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.06)}}
        @media(prefers-reduced-motion:reduce){.exp-mockup,.exp-glow,.exp-shadow,.orb,.dot{animation:none!important}}
        @media(max-width:880px){
          .exp-grid{grid-template-columns:1fr!important;gap:8px!important}
          .exp-visual{min-height:0!important;margin-bottom:4px}
          .exp-stage{max-width:440px}
          .exp-orbits{transform:scale(.74)}
          .exp-grid .exp-visual{order:-1}
          .exp-stat{align-self:stretch!important;display:flex!important}
        }
        @media(max-width:540px){
          .exp-stat{gap:12px!important;padding:8px 16px 8px 9px!important}
          .exp-stat span:first-child{width:36px!important;height:36px!important}
          .exp-stat>div{flex-direction:column!important;align-items:flex-start!important;gap:1px!important}
        }
      `}</style>
    </section>);

}

/* ---------- 04 — Por que STG (dark, 6 cards) ---------- */
function WhySection() {
  const cards = [
  { icon: Icon.target, t: "Plataforma ideal", d: "Escolha estratégica da tecnologia certa para o momento e o tamanho da sua operação" },
  { icon: Icon.shield, t: "Migração segura", d: "Proteção total da operação durante a transição, sem perda de faturamento" },
  { icon: Icon.bolt, t: "Performance", d: "Projetos focados em velocidade, experiência e conversão em cada etapa" },
  { icon: Icon.scale, t: "Escalabilidade", d: "Estruturas preparadas para crescer junto com a demanda do negócio" },
  { icon: Icon.compass, t: "Visão estratégica", d: "Não entregamos apenas tecnologia entregamos uma operação pensada para o longo prazo" },
  { icon: Icon.headset, t: "Suporte real", d: "Acompanhamento próximo após a publicação, com gente que conhece o seu projeto" }];

  return (
    <section id="porque" className="sec sec-dark">
      <div className="container">
        <SectionHead center eyebrow="Por que a STG Consult" max={620}
        title={<>Tecnologia é meio<br /><span className="accent">Operação é o resultado</span></>}
        sub="Seis pilares que separam um site bonito de uma operação digital preparada para escalar" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(290px,1fr))", gap: 22, marginTop: 44 }}>
          {cards.map((c, i) =>
          <Reveal key={i} delay={i % 3 * 90} className="card" style={{ padding: "28px 30px" }}>
              <div style={{ width: 54, height: 54, borderRadius: 14, display: "grid", placeItems: "center", color: "var(--purple-300)", background: "rgba(170,0,238,.12)", border: "1px solid rgba(170,0,238,.28)", marginBottom: 22 }}>
                <LineIcon d={c.icon} size={26} />
              </div>
              <h3 className="h3" style={{ marginBottom: 12 }}>{c.t}</h3>
              <p className="text-dim" style={{ fontSize: "1rem" }}>{c.d}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Suporte total (dark, acompanhamento humanizado) ---------- */
function SupportSection() {
  return (
    <section id="suporte" className="sec sec-dark" style={{ background: "linear-gradient(180deg,#070507,#0e0a12 50%,#070507)", position: "relative", overflow: "hidden", padding: "clamp(40px,6vw,72px) 0" }}>
      <div className="glow" style={{ width: 560, height: 560, background: "var(--purple-glow)", bottom: "-20%", right: "-12%", opacity: .2 }} />
      <div className="container" style={{ position: "relative" }}>
        <div className="support-grid" style={{ display: "grid", gridTemplateColumns: ".8fr 1.2fr", gap: 20, alignItems: "center", maxWidth: 900, margin: "0 auto" }}>
          <Reveal style={{ display: "flex", justifyContent: "flex-end" }}>
            <img src="assets/suporte-img.png" alt="Cliente satisfeito usando o celular" className="support-img" style={{ width: "100%", maxWidth: 443, height: "auto", display: "block" }} />
          </Reveal>
          <div>
            <Reveal as="div" delay={140} className="eyebrow" style={{ color: "rgb(170, 0, 238)", marginBottom: 18 }}>Suporte total</Reveal>
            <Reveal as="h2" delay={240} className="h2" style={{ fontSize: "40px", marginBottom: 22 }}>Acompanhamento <br />personalizado <span className="accent" style={{ fontSize: "40px", color: "rgb(255, 255, 255)" }}><br />durante o projeto</span></Reveal>
            <Reveal as="p" delay={360} className="text-dim" style={{ fontSize: "16px", lineHeight: 1.7 }}>Nosso time acompanha você e sua equipe durante todo <br />o processo de implantação do E‑Commerce, orientando <br />sobre cada ponto importante para o sucesso do projeto, <br />tirando dúvidas e oferecendo treinamento para a operação <br />do painel administrativo incluindo cadastro de produtos, <br />configuração de promoções e troca de banners.</Reveal>
          </div>
        </div>
      </div>
      <style>{`
        .support-img{animation:supFloat 7s var(--ease) infinite;filter:drop-shadow(0 24px 48px rgba(20,12,28,.28))}
        @keyframes supFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
        @media(prefers-reduced-motion:reduce){.support-img{animation:none}}
        @media(max-width:860px){.support-grid{grid-template-columns:1fr!important;gap:32px!important}}
      `}</style>
    </section>);

}

/* ---------- Scroll-animation card (adapted from ContainerScroll / framer) ---------- */
function useScrollProgress(ref) {
  const [p, setP] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (matchMedia("(prefers-reduced-motion:reduce)").matches) {setP(1);return;}
    let raf;
    const upd = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || 1;
      const prog = (vh - r.top) / (vh * 0.92);
      setP(Math.min(1, Math.max(0, prog)));
    };
    const onScroll = () => {cancelAnimationFrame(raf);raf = requestAnimationFrame(upd);};
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    upd();
    return () => {window.removeEventListener("scroll", onScroll);window.removeEventListener("resize", onScroll);cancelAnimationFrame(raf);};
  }, []);
  return p;
}

function ContainerScroll({ titleComponent, children }) {
  const ref = useRef(null);
  const p = useScrollProgress(ref);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const ck = () => setIsMobile(window.innerWidth <= 768);
    ck();
    window.addEventListener("resize", ck);
    return () => window.removeEventListener("resize", ck);
  }, []);
  const rotate = 20 * (1 - p);
  const scale = isMobile ? 0.82 + 0.13 * p : 1.05 - 0.05 * p;
  const translate = -40 * p;
  return (
    <div ref={ref} style={{ display: "flex", alignItems: "center", justifyContent: "center", position: "relative", padding: "0 20px" }}>
      <div style={{ width: "100%", perspective: "1000px" }}>
        <div style={{ transform: `translateY(${translate}px)`, maxWidth: 760, margin: "0 auto", textAlign: "center", willChange: "transform" }}>
          {titleComponent}
        </div>
        <div style={{
          transform: `rotateX(${rotate}deg) scale(${scale})`, transformStyle: "preserve-3d", willChange: "transform",
          maxWidth: 1060, width: "100%", margin: "16px auto 0",
          border: "1px solid var(--border-dark-strong)", borderRadius: 30, padding: "clamp(8px,1.4vw,14px)",
          background: "linear-gradient(180deg,#211a29,#0e0a12)",
          boxShadow: "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 233px 65px rgba(170,0,238,.07)"
        }}>
          <div style={{ borderRadius: 20, overflow: "hidden", background: "#0a070d", border: "1px solid var(--border-dark)" }}>
            {children}
          </div>
        </div>
      </div>
    </div>);

}

/* ---------- 05 — O que está incluso (scroll-animation screen) ---------- */
function IncludedSection() {
  const items = [
  ["Homepage otimizada", "Carregamento rápido e layout inteligente"],
  ["Páginas de produto", "Estrutura pensada para conversão"],
  ["Checkout", "Fluxo curto, seguro e sem fricção"],
  ["Integrações", "ERP, pagamentos e logística conectados"],
  ["SEO On Page", "Site otimizado para o Google e IAs"],
  ["Pixel e GA4", "Rastreamento configurado e ativo"],
  ["Experiência do usuário", "Navegação intuitiva + busca inteligente"],
  ["Mobile First", "Ótima experiência pelo celular"]];

  return (
    <section id="incluso" className="sec sec-light">
      <ContainerScroll
        titleComponent={
        <>
          <div className="eyebrow" style={{ textAlign: "center", color: "rgb(170, 0, 238)", marginBottom: 18 }}>O que está incluso</div>
          <h2 className="h2" style={{ maxWidth: 900, margin: "0 auto", fontSize: "40px", whiteSpace: "nowrap" }}>
            Tudo que seu projeto precisa para ir além
          </h2>
        </>}>
        <div style={{ padding: "clamp(20px,3vw,36px)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, paddingBottom: 18, marginBottom: 24, borderBottom: "1px solid var(--border-dark)" }}>
            <img src="assets/stg-icon.png" alt="STG" style={{ height: 22, width: "auto" }} />
            <span style={{ fontFamily: "JetBrains Mono,monospace", fontSize: 11, letterSpacing: ".16em", color: "var(--text-dark-faint)" }}>SUA OPERAÇÃO · TUDO INCLUSO</span>
            <span style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
              {["#ff5f57", "#febc2e", "#28c840"].map((c) => <span key={c} style={{ width: 9, height: 9, borderRadius: 99, background: c, opacity: .8 }} />)}
            </span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }}>
            {items.map(([t, d], i) => <div key={i} style={{
              background: "rgba(255,252,252,.03)", border: "1px solid var(--border-dark)", borderRadius: 14,
              padding: "16px 18px", display: "flex", flexDirection: "column", gap: 8, transition: "border-color .35s, background .35s"
            }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = "rgba(170,0,238,.4)";e.currentTarget.style.background = "rgba(170,0,238,.06)";}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = "var(--border-dark)";e.currentTarget.style.background = "rgba(255,252,252,.03)";}}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 26, height: 26, borderRadius: 8, background: "rgba(170,0,238,.14)", border: "1px solid rgba(170,0,238,.3)", display: "grid", placeItems: "center", color: "var(--purple-300)", flex: "0 0 auto" }}>
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg>
                  </span>
                  <h3 style={{ fontFamily: "Rubik", fontWeight: 600, fontSize: "1.05rem", letterSpacing: "-.01em", color: "var(--text-dark)" }}>{t}</h3>
                </div>
                <p style={{ fontSize: ".85rem", color: "var(--text-dark-dim)", paddingLeft: 36, lineHeight: 1.5 }}>{d}</p>
              </div>
            )}
          </div>
        </div>
      </ContainerScroll>
      <div className="container">
        <SectionCTA label="Quero desenvolver meu E‑Commerce" mt={36} />
      </div>
    </section>);

}

/* ---------- 06 — Processo (timeline conectada) ---------- */
function ProcessSection() {
  const steps = [
  ["01", "Arquitetura e Planejamento", "Levantamento de requisitos e mapeamento de integrações necessárias"],
  ["02", "Criação de Layouts (UX / UI)", "Produção de layouts totalmente responsivos com protótipos navegáveis"],
  ["03", "Implementação e Integração", "Desenvolvimento front-end e integração com meios de pagamento e entrega"],
  ["04", "Configuração e Treinamento", "Configuração das regras de negócio e treinamento para operação do painel administrativo"],
  ["05", "Testes e Publicação", "Homologação do projeto com testes de compra e publicação da loja (go-live)"],
  ["06", "Manutenção e Suporte", "Ajustes, correções, atualização de conteúdos e evolução contínua do site", "Opcional"]];

  const tlRef = useRef(null);
  const lineRef = useRef(null);
  const rowsRef = useRef([]);
  const lineTop = useRef(32);
  const lineH = useRef(0);
  const centersRel = useRef([]);
  const [line, setLine] = useState({ top: 32, height: 0 });

  // Scroll-linked timeline: the connector line grows from top to bottom in sync
  // with scroll progress, and each step (marker + card) surges into view as the
  // line front reaches it. Driven imperatively (rAF-free, timer/poll-backed) so
  // it works even where time-based CSS is frozen.
  useEffect(() => {
    const tl = tlRef.current;
    if (!tl) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    const measure = () => {
      const nodes = tl.querySelectorAll(".proc-node");
      if (nodes.length < 2) return;
      const rTop = tl.getBoundingClientRect().top;
      const centers = [].map.call(nodes, (n) => {const r = n.getBoundingClientRect();return r.top - rTop + r.height / 2;});
      const top = centers[0];
      const H = Math.max(0, centers[centers.length - 1] - top);
      lineTop.current = top;lineH.current = H;
      centersRel.current = centers.map((c) => c - top);
      setLine({ top, height: H });
      apply();
    };

    const apply = () => {
      const H = lineH.current;
      if (reduce) {
        if (lineRef.current) lineRef.current.style.transform = "scaleY(1)";
        rowsRef.current.forEach((el) => {if (el) {el.style.opacity = "1";el.style.transform = "none";}});
        return;
      }
      if (H <= 0) return;
      const vh = window.innerHeight || 0;
      const tlRect = tl.getBoundingClientRect();
      const lineStartVY = tlRect.top + lineTop.current;
      const anchorY = vh * 0.6; // growth front sits at 60% of the viewport
      let filled = anchorY - lineStartVY; // px of line revealed so far
      filled = Math.max(0, Math.min(H, filled));
      const progress = filled / H;
      if (lineRef.current) lineRef.current.style.transform = "scaleY(" + progress + ")";
      const centers = centersRel.current;
      const SPAN = 80;
      rowsRef.current.forEach((el, i) => {
        if (!el) return;
        const c = centers[i] != null ? centers[i] : i / Math.max(1, steps.length - 1) * H;
        // each step completes exactly as the line front reaches its marker
        // center (surges over the preceding SPAN px) — so the LAST step, whose
        // center sits at the very end of the line (filled caps at H), still
        // reaches full opacity instead of being stuck at 0.
        const t = filled <= 0 ? 0 : Math.max(0, Math.min(1, (filled - (c - SPAN)) / SPAN));
        const e = 1 - Math.pow(1 - t, 3);
        el.style.opacity = String(e);
        el.style.transform = "translate3d(" + -26 * (1 - e) + "px,0,0)";
      });
    };

    // initial hidden state (JS drives it; if JS never runs the rows stay at
    // their default opacity:1, so nothing is ever permanently invisible)
    if (!reduce) {
      rowsRef.current.forEach((el) => {if (el) {el.style.opacity = "0";el.style.transform = "translate3d(-26px,0,0)";}});
      if (lineRef.current) lineRef.current.style.transform = "scaleY(0)";
    }

    measure();
    const mt = setTimeout(measure, 450);
    window.addEventListener("resize", measure);
    const io = new IntersectionObserver(() => apply(), { threshold: [0, 0.1, 0.3, 0.6, 0.9, 1] });
    io.observe(tl);
    window.addEventListener("scroll", apply, { passive: true });
    const its = [setTimeout(apply, 80), setTimeout(apply, 320), setTimeout(apply, 720)];
    const poll = setInterval(apply, 250);
    apply();
    return () => {
      window.removeEventListener("resize", measure);
      window.removeEventListener("scroll", apply);
      io.disconnect();
      clearTimeout(mt);its.forEach(clearTimeout);clearInterval(poll);
    };
  }, []);

  return (
    <section id="processo" className="sec sec-dark" style={{ background: "linear-gradient(180deg,#070507,#0e0a12 50%,#070507)" }}>
      <div className="glow" style={{ width: 560, height: 560, background: "var(--purple-glow)", top: "20%", left: "-12%", opacity: .25 }} />
      <div className="container" style={{ position: "relative" }}>
        <SectionHead center eyebrow="Como funciona" max={900}
        title={<span style={{ fontSize: "40px", whiteSpace: "nowrap" }}>Um método claro, do <span className="accent" style={{ fontSize: "40px", color: "rgb(255, 255, 255)" }}>briefing à publicação</span></span>} eyebrowColor="rgb(170, 0, 238)" />

        <div ref={tlRef} className="proc-timeline" style={{ position: "relative", maxWidth: 880, margin: "64px auto 0" }}>
          {/* connector line — z-index 0 (below markers + cards); only the scrolled portion shows */}
          <div aria-hidden="true" ref={lineRef} className="proc-line" style={{ position: "absolute", left: 31, top: line.top, height: line.height, width: 2, background: "linear-gradient(180deg,var(--purple),var(--purple-300))", borderRadius: 2, transformOrigin: "top", transform: "scaleY(0)", zIndex: 0 }} />
          {steps.map(([n, t, d, badge], i) =>
          <div key={i} ref={(el) => rowsRef.current[i] = el} className="proc-row" style={{
            position: "relative", display: "grid", gridTemplateColumns: "64px 1fr", gap: 26, alignItems: "flex-start",
            paddingBottom: i === steps.length - 1 ? 0 : 22, willChange: "opacity, transform"
          }}>
              <div className="proc-node" style={{
              width: 64, height: 64, borderRadius: 18, display: "grid", placeItems: "center",
              fontFamily: "Rubik", fontWeight: 800, fontSize: "1.5rem", letterSpacing: "-.02em",
              color: "var(--purple-300)", background: "#1b1026", border: "1px solid rgba(170,0,238,.42)",
              position: "relative", zIndex: 2
            }}>{n}</div>
              <div className="card" style={{ padding: "26px 30px", position: "relative", zIndex: 1 }}>
                <h3 className="h3" style={{ marginBottom: 10, fontSize: "27px", display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                  {t}
                  {badge && <span style={{ fontFamily: "JetBrains Mono,monospace", fontSize: ".62rem", fontWeight: 500, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--purple-300)", background: "rgba(170,0,238,.12)", border: "1px solid rgba(170,0,238,.34)", borderRadius: 99, padding: "4px 11px" }}>{badge}</span>}
                </h3>
                <p className="text-dim" style={{ fontSize: "1.02rem" }}>{d}</p>
              </div>
            </div>
          )}
        </div>
      </div>
      <style>{`
        @media(max-width:600px){
          .proc-row{grid-template-columns:48px 1fr!important;gap:16px!important}
          .proc-node{width:48px!important;height:48px!important;border-radius:14px!important;font-size:1.15rem!important}
          .proc-line{left:23px!important}
          .proc-row .card{padding:20px 22px!important}
        }
      `}</style>
    </section>);

}

/* ---------- 07 — FAQ (light accordion) ---------- */
function FaqItem({ q, a, open, onToggle }) {
  const bodyRef = useRef(null);
  return (
    <div style={{ borderBottom: "1px solid var(--border-light)" }}>
      <button onClick={onToggle} aria-expanded={open} style={{
        width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
        background: "none", border: "none", padding: "26px 4px", textAlign: "left", color: "var(--text-light)"
      }}>
        <span style={{ fontFamily: "Rubik", fontWeight: 600, fontSize: "clamp(1.1rem,1.8vw,1.3rem)", letterSpacing: "-.01em" }}>{q}</span>
        <span style={{ flex: "0 0 auto", width: 34, height: 34, borderRadius: 99, border: "1px solid var(--border-light)", display: "grid", placeItems: "center", color: "var(--purple)", transition: "transform .4s var(--ease), background .3s", transform: open ? "rotate(45deg)" : "none", background: open ? "rgba(170,0,238,.08)" : "transparent" }}>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
        </span>
      </button>
      <div style={{ maxHeight: open ? bodyRef.current?.scrollHeight || 200 : 0, overflow: "hidden", transition: "max-height .5s var(--ease)" }}>
        <p ref={bodyRef} className="text-dim" style={{ padding: "0 4px 28px", fontSize: "1.02rem", maxWidth: 720 }}>{a}</p>
      </div>
    </div>);

}
function FaqSection() {
  const faqs = [
  ["Quanto tempo leva?", "Em média, 8 a 10 semanas, dependendo da maturidade e complexidade do projeto."],
  ["Vocês fazem migração?", "Sim. Migração de plataforma é uma das nossas especialidades, conduzida de forma controlada para proteger faturamento, SEO e histórico da operação."],
  ["Trabalham com quais plataformas?", "VTEX, Wake, Shopify Plus, Tray, Nuvemshop e Shopify. A escolha da plataforma é parte do trabalho estratégico."],
  ["Há suporte após a publicação?", "Sim. Damos suporte por 30 dias para quaisquer ajustes e correções que sejam necessários após o go-live do projeto."],
  ["O layout é personalizado?", "Sim. Cada operação é estruturada sob medida com um layout exclusivo ou um template personalizado com a identidade visual da marca."],
  ["Atendem operações complexas?", "Sim. Soluções híbridas (varejo e atacado), integrações com ERP, múltiplos canais, catálogos extensos e regras específicas de negócio são parte do nosso dia a dia."]];

  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="sec sec-light">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "minmax(0,360px) 1fr", gap: 56, alignItems: "start" }}>
        <div className="faq-head">
          <SectionHead eyebrow="Perguntas frequentes"
          title={<><span style={{ fontSize: "40px" }}>Ainda com </span><span className="accent" style={{ fontSize: "40px" }}>dúvidas?</span></>}
          sub="As respostas para o que mais perguntam antes de começar um projeto." />
        </div>
        <div>
          {faqs.map(([q, a], i) =>
          <Reveal key={i} delay={i * 40}>
              <FaqItem q={q} a={a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            </Reveal>
          )}
        </div>
      </div>
      <style>{`@media(max-width:860px){#faq .container{grid-template-columns:1fr!important;gap:36px!important}}`}</style>
    </section>);

}

/* ---------- 08 — Formulário final (dark) ---------- */
const SEGMENTOS = ["Moda e vestuário", "Beleza e cosméticos", "Saúde e suplementos", "Casa e decoração", "Móveis e acessórios", "Alimentos e bebidas", "Eletrônicos", "B2B / Atacado", "Serviços", "Outro"];

const QF_STEPS = [
{ k: "empresa", type: "text", q: "Qual o nome da sua empresa?", ph: "Nome da empresa", micro: "Assim já chegamos preparados para a conversa.", btn: "Continuar" },
{ k: "nome", type: "text", q: "Qual seu nome?", ph: "Digite seu nome", micro: "Queremos tornar nosso contato mais próximo.", btn: "Continuar" },
{ k: "whatsapp", type: "tel", q: "Qual o número do seu WhatsApp?", ph: "(00) 00000-0000", micro: "Retornaremos por esse número.", btn: "Continuar" },
{ k: "email", type: "email", q: "Qual é o seu e-mail?", ph: "voce@empresa.com", micro: "Utilizamos apenas para contato e envio de informações relevantes.", btn: "Finalizar" }];

function fmtWhats(v) {
  const d = v.replace(/\D/g, "").slice(0, 11);
  if (d.length <= 2) return d;
  if (d.length <= 7) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
  return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
}

const DDDS_BR = new Set([11,12,13,14,15,16,17,18,19,21,22,24,27,28,31,32,33,34,35,37,38,41,42,43,44,45,46,47,48,49,51,53,54,55,61,62,63,64,65,66,67,68,69,71,73,74,75,77,79,81,82,83,84,85,86,87,88,89,91,92,93,94,95,96,97,98,99]);
function celularValido(v) {
  const d = (v || "").replace(/\D/g, "");
  if (d.length !== 11) return false;
  if (!DDDS_BR.has(Number(d.slice(0, 2)))) return false;
  return d[2] === "9";
}

function ContactSection() {
  // step: -1 = abertura · 0..4 = perguntas · 5 = final
  const [step, setStep] = useState(-1);
  const [form, setForm] = useState({ nome: "", whatsapp: "", email: "", empresa: "", segmento: "", segmentoOutro: "" });
  const outroRef = useRef(null);
  const [err, setErr] = useState("");
  const [selOpen, setSelOpen] = useState(false);
  const inputRef = useRef(null);

  useEffect(() => {
    if (step >= 0 && step < QF_STEPS.length) {
      const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 280);
      return () => clearTimeout(t);
    }
  }, [step]);

  useEffect(() => {setSelOpen(false);}, [step]);

  const progress = step < 0 ? 0 : Math.min(step + 1, QF_STEPS.length) / QF_STEPS.length * 100;

  const valid = (k, v) => {
    if (k === "whatsapp") return celularValido(v);
    if (k === "email") return /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v);
    if (k === "segmento") return v.trim().length > 0 && (v !== "Outro" || form.segmentoOutro.trim().length > 0);
    return v.trim().length > 0;
  };

  const set = (k) => (e) => {
    const v = k === "whatsapp" ? fmtWhats(e.target.value) : e.target.value;
    setForm((f) => ({ ...f, [k]: v }));
    if (err) setErr("");
  };

  const next = () => {
    const cur = QF_STEPS[step];
    if (!valid(cur.k, form[cur.k])) {
      setErr(
        cur.k === "whatsapp" ? "Informe um celular válido: DDD + 9 dígitos (ex: (11) 91234-5678)." :
        cur.k === "email" ? "Informe um e-mail válido." :
        cur.k === "segmento" && !form.segmento ? "Selecione um segmento." :
        cur.k === "segmento" ? "Descreva o seu segmento." :
        "Este campo é obrigatório.");
      (cur.k === "segmento" && form.segmento === "Outro" ? outroRef.current : inputRef.current)?.focus();
      return;
    }
    setErr("");
    setStep((s) => s + 1);
  };

  const back = () => {setErr("");setStep((s) => Math.max(-1, s - 1));};
  const onKey = (e) => {if (e.key === "Enter") {e.preventDefault();next();}};

  const cur = step >= 0 && step < QF_STEPS.length ? QF_STEPS[step] : null;

  return (
    <section id="contato" className="sec sec-dark" style={{ background: "transparent", position: "relative", overflow: "hidden" }}>
      <div className="glow" style={{ width: 700, height: 700, background: "var(--purple-glow)", bottom: "-30%", left: "50%", transform: "translateX(-50%)", opacity: .3 }} />
      <div className="container" style={{ position: "relative", maxWidth: 720 }}>
        {/* Barra de progresso */}
        {step >= 0 && step < QF_STEPS.length &&
        <div className="qf-progress">
          <div className="qf-progress__fill" style={{ width: progress + "%" }} />
        </div>
        }

        <div className="qf-stage">
          {/* ---------- Abertura ---------- */}
          {step === -1 &&
          <div key="intro" className="qf-screen">
              <span className="qf-eyebrow" style={{ color: "rgb(170, 0, 238)" }}>Próximo passo</span>
              <h2 className="qf-title" style={{ fontSize: "40px" }}>Quer um orçamento <span className="accent" style={{ fontSize: "40px", color: "rgb(255, 255, 255)" }}>sem compromisso?</span></h2>
              <p className="qf-support">Informe seus dados e nossa equipe entrará em contato
            </p>
              <div className="qf-actions">
                <button type="button" className="btn btn-primary qf-cta" onClick={() => setStep(0)}>Começar<ArrowIcon /></button>
              </div>
            </div>}

          {/* ---------- Perguntas ---------- */}
          {cur && <div key={"q" + step} className="qf-screen">
              <span className="qf-step-count">Etapa {step + 1} de {QF_STEPS.length}</span>
              <h2 className="qf-question">{cur.q}</h2>

              {cur.type === "select" ?
            <div className="qf-select-wrap">
                  <button type="button" ref={inputRef}
              className={"qf-input qf-select" + (err && !form.segmento ? " err" : "") + (selOpen ? " open" : "")}
              aria-haspopup="listbox" aria-expanded={selOpen}
              onClick={() => setSelOpen((o) => !o)}
              onKeyDown={(e) => {
                if (e.key === "Enter" && !selOpen && form.segmento && form.segmento !== "Outro") {e.preventDefault();next();} else
                if (e.key === "ArrowDown" || e.key === " ") {e.preventDefault();setSelOpen(true);} else
                if (e.key === "Escape") setSelOpen(false);
              }}>
                    <span style={{ color: form.segmento ? "var(--text-dark)" : "var(--text-dark-faint)" }}>{form.segmento || cur.ph}</span>
                    <svg className="qf-select__chev" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
                  </button>
                  {selOpen &&
              <ul className="qf-options" role="listbox">
                    {SEGMENTOS.map((s) =>
                <li key={s} role="option" aria-selected={form.segmento === s}
                className={"qf-option" + (form.segmento === s ? " sel" : "")}
                onClick={() => {setForm((f) => ({ ...f, segmento: s }));if (err) setErr("");setSelOpen(false);}}>
                        {s}
                        {form.segmento === s &&
                  <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg>}
                      </li>
                )}
                  </ul>
              }
                  {form.segmento === "Outro" &&
              <input ref={outroRef} type="text" autoFocus className={"qf-input qf-input--outro" + (err ? " err" : "")}
              placeholder="Descreva o seu segmento" value={form.segmentoOutro} onChange={set("segmentoOutro")} onKeyDown={onKey} />
              }
                </div> :

            <input ref={inputRef} type={cur.type} className={"qf-input" + (err ? " err" : "")}
            placeholder={cur.ph} value={form[cur.k]} onChange={set(cur.k)} onKeyDown={onKey}
            inputMode={cur.type === "tel" ? "tel" : cur.type === "email" ? "email" : "text"}
            autoComplete={cur.k === "nome" ? "name" : cur.k === "email" ? "email" : cur.k === "whatsapp" ? "tel" : "organization"} />
            }

              <p className={"qf-micro" + (err ? " qf-micro--err" : "")}>{err || cur.micro}</p>

              <div className="qf-actions">
                <button type="button" className="qf-back" onClick={back}>Voltar</button>
                <button type="button" className="btn btn-primary qf-cta" onClick={next}>{cur.btn}<ArrowIcon /></button>
              </div>
            </div>
          }

          {/* ---------- Final ---------- */}
          {step === QF_STEPS.length &&
          <div key="done" className="qf-screen qf-screen--center">
              <div className="qf-check">
                <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg>
              </div>
              <h2 className="qf-title">Recebemos suas informações.</h2>
              <p className="qf-support">Em breve, nossa equipe entrará em contato pelo WhatsApp.</p>
              <div className="qf-actions">
                <a className="btn btn-primary qf-cta" href="#top">Quero falar com um consultor agora<ArrowIcon /></a>
              </div>
            </div>
          }
        </div>
      </div>

      <style>{`
        .qf-progress{height:3px;border-radius:99px;background:rgba(255,252,252,.08);overflow:hidden;margin-bottom:clamp(40px,7vw,64px)}
        .qf-progress__fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--purple-300,#cf6bff));transition:width .42s cubic-bezier(.4,0,.2,1)}
        .qf-stage{min-height:clamp(360px,52vh,440px);display:flex;align-items:flex-start}
        .qf-screen{width:100%;animation:qfIn .26s cubic-bezier(.16,.84,.44,1) both}
        .qf-screen--center{text-align:center;display:flex;flex-direction:column;align-items:center}
        @keyframes qfIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
        @media(prefers-reduced-motion:reduce){.qf-screen{animation:none}}

        .qf-eyebrow,.qf-step-count{display:inline-block;font-family:JetBrains Mono,monospace;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-300,#cf6bff);margin-bottom:18px}
        .qf-title{font-size:clamp(1.9rem,5.4vw,2.7rem);font-weight:800;letter-spacing:-1px;line-height:1.06;margin-bottom:18px}
        .qf-question{font-size:clamp(1.55rem,4.6vw,2.15rem);font-weight:700;letter-spacing:-.6px;line-height:1.12;margin-bottom:26px;text-wrap:pretty}
        .qf-support{font-size:clamp(1rem,2.4vw,1.12rem);color:var(--text-dark-dim);line-height:1.6;max-width:48ch;margin-bottom:36px}
        .qf-screen--center .qf-support{margin-inline:auto}

        .qf-input{width:100%;background:transparent;border:none;border-bottom:2px solid var(--border-dark-strong);border-radius:0;padding:14px 2px;color:var(--text-dark);font-family:inherit;font-size:clamp(1.25rem,3.4vw,1.6rem);font-weight:500;outline:none;transition:border-color .2s}
        .qf-input::placeholder{color:var(--text-dark-faint);font-weight:400}
        .qf-input:focus{border-bottom-color:var(--purple)}
        .qf-input.err{border-bottom-color:#ff5f57}
        .qf-select-wrap{position:relative}
        .qf-select{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;cursor:pointer;font-size:clamp(1.1rem,2.4vw,1.35rem)!important;font-weight:500;line-height:1.3}
        .qf-select__chev{flex:0 0 auto;color:var(--purple-300,#cf6bff);transition:transform .3s var(--ease)}
        .qf-select.open .qf-select__chev{transform:rotate(180deg)}
        .qf-select.open{border-bottom-color:var(--purple)}
        .qf-options{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 10px);list-style:none;margin:0;padding:6px;max-height:288px;overflow-y:auto;background:#16101c;border:1px solid var(--border-dark-strong);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);animation:qfSelIn .2s var(--ease) both}
        @keyframes qfSelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
        .qf-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:9px;font-size:1rem;font-weight:500;color:var(--text-dark-dim);cursor:pointer;transition:background .18s,color .18s}
        .qf-option:hover{background:rgba(170,0,238,.12);color:var(--text-dark)}
        .qf-option.sel{color:var(--purple-300,#cf6bff);background:rgba(170,0,238,.08)}
        .qf-options::-webkit-scrollbar{width:8px}
        .qf-options::-webkit-scrollbar-thumb{background:var(--border-dark-strong);border-radius:99px}
        .qf-input--outro{margin-top:18px;animation:qfIn .26s cubic-bezier(.16,.84,.44,1) both}

        .qf-micro{margin-top:16px;font-size:.92rem;color:var(--text-dark-faint);line-height:1.5;min-height:1.4em;transition:color .2s}
        .qf-micro--err{color:#ff7a73}

        .qf-actions{display:flex;align-items:center;gap:20px;margin-top:clamp(32px,5vw,44px)}
        .qf-screen--center .qf-actions{justify-content:center;margin-top:8px}
        .qf-cta{padding:1.05em 1.6em;font-size:1.02rem}
        .qf-back{background:none;border:none;color:var(--text-dark-faint);font-family:inherit;font-size:.95rem;cursor:pointer;padding:8px 4px;transition:color .2s}
        .qf-back:hover{color:var(--text-dark)}

        .qf-check{width:64px;height:64px;border-radius:99px;background:rgba(170,0,238,.16);border:1px solid rgba(170,0,238,.4);display:grid;place-items:center;margin-bottom:24px;color:var(--purple-300,#cf6bff)}
        @media(max-width:540px){.qf-actions{flex-wrap:wrap;gap:14px}.qf-cta{flex:1;justify-content:center}}
      `}</style>
    </section>);

}

/* ---------- Footer (minimal, não-corporativo) ---------- */
function Footer() {
  const link = { color: "var(--text-dark-dim)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 11, fontSize: ".95rem", transition: "color .25s" };
  const hoverOn = (e) => e.currentTarget.style.color = "#aa00ee";
  const hoverOff = (e) => e.currentTarget.style.color = "var(--text-dark-dim)";
  const heading = { fontFamily: "Rubik", fontWeight: 700, fontSize: "1.02rem", color: "#aa00ee", marginBottom: 20, letterSpacing: "-.01em" };

  return (
    <footer style={{ background: "transparent", padding: "0 0 40px", color: "var(--text-dark)", position: "relative" }}>
      <div className="container">
        <div style={{ borderTop: "1px solid rgba(255,255,255,.12)", paddingTop: 56 }}>
          <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0,1.8fr) auto auto", gap: 48, alignItems: "start", justifyContent: "space-between" }}>
            {/* Quem é a STG */}
            <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
              <img src="assets/stg-logo-light.png" alt="STG Consult" style={{ height: 80, width: "auto", flex: "0 0 auto" }} />
              <p style={{ fontSize: "15.2px", color: "var(--text-dark-dim)", lineHeight: 1.7, maxWidth: 340 }}>Criamos, migramos e estruturamos operações de E‑Commerce com foco em performance e escala.</p>
            </div>

            {/* Contato */}
            <div>
              <h3 style={heading}>Contato</h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
                <a href="mailto:contato@stgconsult.com.br" style={link} onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
                  <svg style={{ flex: "0 0 auto" }} viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#aa00ee" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></svg>
                  contato@stgconsult.com.br
                </a>
                <a href="https://wa.me/5585997604972?text=Ol%C3%A1%2C%20quero%20falar%20com%20um%20consultor" target="_blank" rel="noopener noreferrer" style={link} onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
                  <svg style={{ flex: "0 0 auto" }} viewBox="0 0 24 24" width="18" height="18" fill="#aa00ee"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm5.8 14.16c-.24.68-1.42 1.31-1.96 1.36-.5.05-.99.23-3.4-.71-2.86-1.13-4.68-4.05-4.82-4.24-.14-.19-1.15-1.53-1.15-2.92s.73-2.07.99-2.35c.26-.28.57-.35.76-.35.19 0 .38 0 .55.01.18.01.42-.07.65.5.24.58.81 2 .88 2.15.07.14.12.31.02.5-.09.19-.14.31-.28.48-.14.16-.29.37-.42.49-.14.14-.28.29-.12.57.16.28.72 1.18 1.54 1.91 1.06.94 1.95 1.24 2.23 1.38.28.14.44.12.6-.07.16-.19.69-.81.87-1.08.18-.28.37-.23.62-.14.25.09 1.6.75 1.87.89.28.14.46.21.53.33.07.12.07.68-.17 1.36Z" /></svg>
                  (85) 99760-4972
                </a>
              </div>
            </div>

            {/* Siga-nos */}
            <div>
              <h3 style={heading}>Siga-nos</h3>
              <div style={{ display: "flex", gap: 12 }}>
                <a href="https://www.instagram.com/stgconsult" target="_blank" rel="noopener" aria-label="Instagram" style={{ width: 44, height: 44, borderRadius: 12, display: "grid", placeItems: "center", color: "var(--text-dark)", border: "1px solid var(--border-dark-strong)", transition: "color .25s, border-color .25s, background .25s" }}
                onMouseEnter={(e) => { e.currentTarget.style.color = "#aa00ee"; e.currentTarget.style.borderColor = "rgba(170,0,238,.5)"; e.currentTarget.style.background = "rgba(170,0,238,.08)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dark)"; e.currentTarget.style.borderColor = "var(--border-dark-strong)"; e.currentTarget.style.background = "transparent"; }}>
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8"><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.2" fill="currentColor" stroke="none" /></svg>
                </a>
                <a href="https://www.linkedin.com/company/stg-consult/posts/?feedView=all" target="_blank" rel="noopener" aria-label="LinkedIn" style={{ width: 44, height: 44, borderRadius: 12, display: "grid", placeItems: "center", color: "var(--text-dark)", border: "1px solid var(--border-dark-strong)", transition: "color .25s, border-color .25s, background .25s" }}
                onMouseEnter={(e) => { e.currentTarget.style.color = "#aa00ee"; e.currentTarget.style.borderColor = "rgba(170,0,238,.5)"; e.currentTarget.style.background = "rgba(170,0,238,.08)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dark)"; e.currentTarget.style.borderColor = "var(--border-dark-strong)"; e.currentTarget.style.background = "transparent"; }}>
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5 2.5 2.5 0 0 0 4.98 3.5ZM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.75V21h-4v-4.9c0-1.17-.02-2.67-1.9-2.67-1.9 0-2.2 1.27-2.2 2.58V21h-4z" /></svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr!important;gap:36px!important}.footer-grid>*:first-child{grid-column:1 / -1}}@media(max-width:520px){.footer-grid{grid-template-columns:1fr!important}}`}</style>
    </footer>);

}

Object.assign(window, {
  MarqueeSection, ExperienceSection, WhySection, SupportSection, IncludedSection,
  ProcessSection, FaqSection, ContactSection, Footer, LineIcon
});