// Main App
const { useEffect, useRef, useState } = React;

const WA_BASE = "https://wa.me/555591185532";
const waLink = (msg) => `${WA_BASE}?text=${encodeURIComponent(msg)}`;
const WA_GERAL = "Olá Aline! Quero saber mais sobre isenção fiscal para compra de veículo.";

// --- Reveal on scroll ---
const useReveal = () => {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal, .reveal-left, .reveal-right");
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("visible");
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);
};

// --- Nav ---
const Nav = () =>
<nav className="nav">
    <div className="nav-inner">
      <a href="#top" aria-label="Início — Dalla Costa Isenções PCD" style={{ display: "inline-flex", alignItems: "center" }}>
        <Logo height={52} variant="image" />
      </a>
      <ul className="nav-links">
        <li><a href="#publicos">Quem tem direito</a></li>
        <li><a href="#como-funciona">Como funciona</a></li>
        <li><a href="#formulario">Análise gratuita</a></li>
        <li><a href="#faq">Perguntas</a></li>
      </ul>
      <a className="btn btn-whatsapp nav-mobile-cta" href={waLink(WA_GERAL)} target="_blank" rel="noreferrer" aria-label="Fale conosco no WhatsApp para uma análise gratuita">
        <Icon name="whatsapp" size={16} />
        <span className="nav-cta-label">Análise gratuita</span>
        <Icon name="arrow-right" size={14} />
      </a>
    </div>
  </nav>;


// --- Hero ---
const Hero = () =>
<section id="top" className="hero">
    <div className="container">
      <div className="hero-grid">
        <div className="reveal-left">
          <div className="chip">
            <span className="chip-dot" />
            Isenção fiscal para compra de veículos · Rio Grande do Sul
          </div>
          <h1>
            Você tem <span style={{ color: "#001e40" }}>direito legal</span> a um desconto de até <span className="hl">30%</span> para adiquirir um carro 0km. {"\n"}Só falta <span className="hl">acioná-lo</span>.
          </h1>
          <p className="hero-sub">Famílias com diagnóstico de TEA, pessoas com deficiência física, mental, visual ou auditiva e taxistas profissionais têm isenção garantida em IPI, ICMS e IPVA. Nós cuidamos de todo o processo desde a análise do laudo até o desconto aplicado na concessionária.

        </p>
          <div className="hero-ctas">
            <a className="btn btn-whatsapp" href={waLink(WA_GERAL)} target="_blank" rel="noreferrer">
              <Icon name="whatsapp" size={18} />
              Quero saber se tenho direito
            </a>
            <a className="btn btn-ghost" href="#publicos">
              <Icon name="arrow-down" size={16} />
              Quem tem direito?
            </a>
          </div>
          <div className="hero-trust">Contadora CRC-RS · Atendimento em todo o RS · +150 famílias e profissionais atendidos

        </div>
          <div className="hero-kpis">
            <div>
              <div className="kpi-num">Até 30%</div>
              <div className="kpi-label">Economia máxima no valor do veículo</div>
            </div>
            <div>
              <div className="kpi-num">Quem:</div>
              <div className="kpi-label">TEA · PCD · Taxistas</div>
            </div>
            <div>
              <div className="kpi-num">100%</div>
              <div className="kpi-label">Processos aprovados em primeira instância</div>
            </div>
          </div>
        </div>
        <div className="reveal-right">
          <HeroVisual />
        </div>
      </div>
    </div>
  </section>;


// --- Marquee ---
const Marquee = () => {
  const words = [
  "Isenção IPI", "Isenção ICMS", "Isenção IPVA", "Autismo TEA",
  "PCD Física", "PCD Visual", "PCD Auditiva", "Taxistas",
  "Rio Grande do Sul", "Processo completo", "Direito garantido"];

  const dup = [...words, ...words];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {dup.map((w, i) =>
        <span key={i} className="marquee-item">{w}</span>
        )}
      </div>
    </div>);

};

// --- Seletor de público ---
const SeletorSection = () =>
<section id="publicos" className="section" style={{ background: "var(--surface)" }}>
    <div className="container">
      <div className="reveal">
        <span className="eyebrow h-eyebrow-orange"></span>
        <h2 className="section-title">Qual é o seu caso?</h2>
        <p className="lead" style={{ marginTop: 14 }}>
          Cada público tem requisitos, documentos e limites diferentes. Selecione o seu perfil para ver o que se aplica.
        </p>
      </div>
      <div className="reveal">
        <PersonaSelector />
      </div>
    </div>
  </section>;


// --- Tese / Gap chart ---
const TeseSection = () =>
<section className="section" style={{ background: "var(--surface-low)" }}>
    <div className="container">
      <div className="gap-grid">
        <div className="reveal-left">
          <GapChart />
        </div>
        <div className="reveal-right">
          <span className="eyebrow"></span>
          <h2 className="section-title">O benefício existe. A maioria nunca usou.</h2>
          <ul style={{ listStyle: "none", padding: 0, margin: "26px 0 0", display: "flex", flexDirection: "column", gap: 18 }}>
            <li style={{ display: "flex", gap: 14 }}>
              <div style={{ width: 28, height: 28, flex: "0 0 auto", borderRadius: 6, background: "rgba(243,112,33,0.12)", color: "#F37021", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14 }}>1</div>
              <div>
                <strong style={{ color: "#001e40", fontWeight: 700 }}>A lei é clara há décadas.</strong>{" "}
                <span style={{ color: "#43474f" }}>A Lei 8.989/95 e o Convênio ICMS 38/12 consolidaram direitos que raramente são acionados por desconhecimento do enquadramento.</span>
              </div>
            </li>
            <li style={{ display: "flex", gap: 14 }}>
              <div style={{ width: 28, height: 28, flex: "0 0 auto", borderRadius: 6, background: "rgba(243,112,33,0.12)", color: "#F37021", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14 }}>2</div>
              <div>
                <strong style={{ color: "#001e40", fontWeight: 700 }}>A burocracia é técnica, não impossível.</strong>{" "}
                <span style={{ color: "#43474f" }}>Três órgãos — Receita Federal, Receita Estadual, SEFAZ-RS — cada um com formulários e prazos próprios.</span>
              </div>
            </li>
            <li style={{ display: "flex", gap: 14 }}>
              <div style={{ width: 28, height: 28, flex: "0 0 auto", borderRadius: 6, background: "rgba(243,112,33,0.12)", color: "#F37021", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14 }}>3</div>
              <div>
                <strong style={{ color: "#001e40", fontWeight: 700 }}>Uma rejeição atrasa meses.</strong>{" "}
                <span style={{ color: "#43474f" }}>A maioria das rejeições ocorre por erros formais de documentação — corrigíveis em origem com análise especializada.</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>;


// --- Arguments (6 cards) ---
const ArgSection = () => {
  const args = [
  { stat: "Até 30%", sl: "economia real", title: "Economia garantida por lei", body: "Não é promoção. É direito federal e estadual consolidado há décadas." },
  { stat: "Órgãos públicos", sl: "processo unificado", title: "Receita Federal + Receita Estadual + SEFAZ-RS", body: "Coordenamos o protocolo em todos os órgãos. Sem você precisar entender a burocracia." },
  { stat: "100%", sl: "taxa de aprovação", title: "Nenhum processo rejeitado por documentação", body: "Domínio técnico dos formulários específicos e dos requisitos de cada perfil." },
  { stat: "R$ 200k", sl: "teto de IPI (2026)", title: "Limite atualizado da Lei 8.989/95", body: "A isenção de IPI cobre veículos 0km de até R$200 mil — inclui SUVs, sedãs médios e picapes." },
  { stat: "100%", sl: "atendimento remoto", title: "Sem deslocamento. Todo o RS.", body: "Processos protocolados digitalmente. Atendemos de Porto Alegre ao interior do estado." },
  { stat: "2–3 anos", sl: "ciclo de renovação", title: "Troque de carro, renove o benefício", body: "Taxistas: 2 anos. PCD e TEA: 3 anos. Você pode usar o benefício mais de uma vez." }];

  return (
    <section className="section" style={{ background: "#fff" }}>
      <div className="container">
        <div className="reveal">
          <span className="eyebrow h-eyebrow-orange"></span>
          <h2 className="section-title">6 razões para não fazer sozinho</h2>
        </div>
        <div className="arg-grid">
          {args.map((a, i) =>
          <div key={i} className="arg-card reveal">
              <div className="arg-stat">{a.stat}</div>
              <div className="arg-stat-label">{a.sl}</div>
              <div className="arg-title">{a.title}</div>
              <div className="arg-body">{a.body}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// --- Pull band ---
const PullBand = () =>
<section className="pull-band">
    <div className="container">
      <p className="pull-band-text">
        Você não precisa entender a legislação.{" "}
        <span className="hl">Só precisa saber que ela está do seu lado.</span>
      </p>
    </div>
  </section>;



// --- Processo / Timeline ---
const ProcessoSection = () => {
  const steps = [
  { t: "Análise gratuita de elegibilidade", s: "Diagnóstico por perfil — TEA, PCD ou taxista — a partir do laudo, alvará e documentação inicial." },
  { t: "Levantamento documental", s: "Check-list personalizado conforme o seu perfil; revisão dos laudos e certidões antes do protocolo." },
  { t: "Protocolo de IPI — Receita Federal", s: "Autorização de isenção de IPI via sistema SISEN. Etapa obrigatória para ICMS no caso taxista." },
  { t: "Protocolo de ICMS — Receita Estadual RS", s: "Enquadramento estadual conforme Convênio ICMS 38/12 e legislação vigente no RS." },
  { t: "Compra com desconto na concessionária", s: "Veículo 0km com isenção aplicada diretamente na nota fiscal pela concessionária parceira." },
  { t: "Protocolo de IPVA — SEFAZ-RS", s: "Isenção ativada no sistema estadual; efeito já no licenciamento seguinte." }];


  const [visible, setVisible] = useState(new Set());
  const ref = useRef(null);

  useEffect(() => {
    const root = ref.current;
    if (!root) return;
    const items = root.querySelectorAll(".timeline-item");
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const idx = Number(e.target.dataset.idx);
          setVisible((prev) => new Set(prev).add(idx));
        }
      });
    }, { threshold: 0.45 });
    items.forEach((i) => obs.observe(i));
    return () => obs.disconnect();
  }, []);

  return (
    <section id="como-funciona" className="section" style={{ background: "var(--surface-low)" }}>
      <div className="container">
        <div className="reveal">
          <span className="eyebrow h-eyebrow-orange">Como funciona</span>
          <h2 className="section-title">Do laudo/alvará ao desconto aplicado, são 6 etapas:</h2>
        </div>
        <div ref={ref} className="timeline" style={{ maxWidth: 780 }}>
          {steps.map((st, i) =>
          <div key={i} data-idx={i} className={`timeline-item ${visible.has(i) ? "visible" : ""}`}>
              <div className="timeline-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="timeline-body">
                <h3 style={{ padding: "0px" }}>{st.t}</h3>
                <p>{st.s}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// --- Formulário ---
const FormSectionWrap = () =>
<section id="formulario" className="section" style={{ background: "#fff" }}>
    <div className="container">
      <div className="form-grid">
        <div className="reveal-left">
          <span className="eyebrow h-eyebrow-orange">Análise gratuita</span>
          <h2 className="section-title">Pronto para fazer 
a sua análise?</h2>
          <p className="lead" style={{ marginTop: 14 }}>
            Preencha o formulário ao lado. A Aline avalia seu caso pessoalmente e retorna em até 24 horas com um diagnóstico claro.
          </p>
          <ul className="benefit-list">
            <li><Icon name="check-circle" size={20} style={{ color: "#1a7a4a", flex: "0 0 auto" }} /> <span>Diagnóstico gratuito e sem compromisso</span></li>
            <li><Icon name="check-circle" size={20} style={{ color: "#1a7a4a", flex: "0 0 auto" }} /> <span>Resposta em até 24 horas no WhatsApp</span></li>
            <li><Icon name="check-circle" size={20} style={{ color: "#1a7a4a", flex: "0 0 auto" }} /> <span>Check-list documental personalizado ao seu perfil</span></li>
            <li><Icon name="check-circle" size={20} style={{ color: "#1a7a4a", flex: "0 0 auto" }} /> <span>Honorários só apresentados após o diagnóstico</span></li>
            <li><Icon name="check-circle" size={20} style={{ color: "#1a7a4a", flex: "0 0 auto" }} /> <span>Atendimento 100% remoto em todo o RS</span></li>
          </ul>
        </div>
        <div className="reveal-right">
          <FormSection />
        </div>
      </div>
    </div>
  </section>;

// --- FAQ ---
const FAQSection = () =>
<section id="faq" className="section" style={{ background: "var(--surface)" }}>
    <div className="container" style={{ maxWidth: 880 }}>
      <div className="reveal">
        <span className="eyebrow"></span>
        <h2 className="section-title">Perguntas frequentes:</h2>
      </div>
      <div className="reveal">
        <FAQ />
      </div>
    </div>
  </section>;


// --- Final CTA + Footer ---
const FinalCTA = () =>
<section className="final-cta">
    <div className="container final-cta-inner">
      <h2>Seu direito <span className="hl">está garantido</span>. Use-o.</h2>
      <p>Converse com a Aline sem compromisso. Em 15 minutos você sabe se tem direito e qual desconto.</p>
      <div className="final-cta-ctas">
        <a className="btn btn-whatsapp" href={waLink(WA_GERAL)} target="_blank" rel="noreferrer">
          <Icon name="whatsapp" size={18} />
          Falar com a Aline no WhatsApp
        </a>
        <a className="btn btn-ghost-light" href="#formulario">
          Preencher o formulário
        </a>
      </div>
      <div className="final-trust">Contadora CRC-RS · Rio Grande do Sul · Atendimento 100% remoto</div>
    </div>
  </section>;


const Footer = () =>
<footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <Logo height={80} light variant="image" />
          <p className="footer-tag" style={{ marginTop: 18 }}>
            Contabilidade especializada em isenções fiscais para compra de veículos no Rio Grande do Sul.
          </p>
        </div>
        <div>
          <h4>Públicos</h4>
          <ul>
            <li><a href="#publicos">Famílias TEA</a></li>
            <li><a href="#publicos">Pessoas com Deficiência</a></li>
            <li><a href="#publicos">Taxistas</a></li>
          </ul>
        </div>
        <div>
          <h4>Serviços</h4>
          <ul>
            <li><a href="#como-funciona">Isenção IPI</a></li>
            <li><a href="#como-funciona">Isenção ICMS</a></li>
            <li><a href="#como-funciona">Isenção IPVA</a></li>
            <li><a href="#como-funciona">Processo completo</a></li>
          </ul>
        </div>
        <div>
          <h4>Contato</h4>
          <ul>
            <li><a href={waLink(WA_GERAL)} target="_blank" rel="noreferrer"><Icon name="whatsapp" size={14} style={{ verticalAlign: "middle", marginRight: 6 }} />WhatsApp</a></li>
            <li><a href="https://instagram.com/dallacostaisencoes.pcd" target="_blank" rel="noreferrer"><Icon name="instagram" size={14} style={{ verticalAlign: "middle", marginRight: 6 }} />@dallacostaisencoes.pcd</a></li>
            <li><a href="#"><Icon name="map-pin" size={14} style={{ verticalAlign: "middle", marginRight: 6 }} />Rio Grande do Sul</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Dalla Costa Contabilidade e Isenções PCD. Todos os direitos reservados.</span>
        <span style={{ maxWidth: "52ch" }}>
          Conteúdo informativo. A elegibilidade e os limites são analisados caso a caso conforme a legislação vigente (Lei 8.989/95, Convênio ICMS 38/12 e normas estaduais RS).
        </span>
      </div>
    </div>
  </footer>;


// Sticky WhatsApp FAB — mobile-only, primary conversion lever
const WhatsappFab = () =>
<a
  className="wa-fab"
  href={waLink(WA_GERAL)}
  target="_blank"
  rel="noreferrer"
  aria-label="Falar no WhatsApp com a Aline">
  
    <span className="wa-fab-icon">
      <Icon name="whatsapp" size={18} />
    </span>
    Falar no WhatsApp
  </a>;

const App = () => {
  useReveal();
  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <SeletorSection />
      <TeseSection />
      <ArgSection />
      <PullBand />
      <ProcessoSection />
      <FormSectionWrap />
      <FAQSection />
      <FinalCTA />
      <Footer />
      <WhatsappFab />
      <TweaksPanel />
    </>);

};

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