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

const WA_BASE = "https://wa.me/555591185532";
const WA_GERAL = encodeURIComponent("Olá! Vim pela Holanda Veículos. Quero comprar um VW 0km com desconto PCD/TEA e quero saber se tenho direito à isenção.");
const waLink = (msg) => `${WA_BASE}?text=${encodeURIComponent(msg)}`;

// --- 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 — Holanda Veículos · Desconto PCD / TEA" style={{ display: "inline-flex", alignItems: "center" }}>
        <Logo height={48} variant="image" />
      </a>
      <ul className="nav-links">
        <li><a href="#modelos">Modelos</a></li>
        <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={`${WA_BASE}?text=${WA_GERAL}`} target="_blank" rel="noopener 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">

          <h1>
            Seu <span style={{ color: "#001E50" }}>Volkswagen 0km</span> com até <span className="hl">30% de desconto</span>. Isenção para <span className="hl">PCD, TEA e TAXISTA</span>.
          </h1>
          <p className="hero-sub">Polo, Virtus, T-Cross, Nivus e Tera disponíveis na Holanda Veículos com isenção de IPI, ICMS e IPVA garantida por lei. Famílias com diagnóstico de TEA, pessoas com deficiência e taxistas profissionais podem comprar seu VW com desconto real.
        </p>
          <div className="hero-ctas">
            <a className="btn btn-navy" href="#formulario">
              Quero saber se tenho direito
            </a>
            <a className="btn btn-ghost" href="#modelos">
              <Icon name="arrow-down" size={16} />
              Ver modelos elegíveis
            </a>
          </div>
          <div className="hero-trust">Holanda Veículos · Concessionária VW oficial · Responsável técnica: Dalla Costa Contabilidade (CRC-RS)
        </div>

        </div>
        <div className="reveal-right">
          <HeroVisual />
        </div>
      </div>
    </div>
  </section>;


// --- Marquee ---
const Marquee = () => {
  const words = [
  "VW Polo", "VW Virtus", "VW T-Cross", "VW Nivus", "VW Tera",
  "Isenção IPI", "Isenção ICMS", "Isenção IPVA",
  "Autismo TEA", "PCD Física", "PCD Visual", "PCD Auditiva", "Taxistas",
  "Holanda Veículos", "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>);

};

// --- Modelos VW elegíveis ---
const ModelosSection = () => {
  const modelos = [
    { nome: "Volkswagen Polo",    tag: "Hatch compacto", foto: "https://assets.disaltecnologia.com.br/catalog/cover/0b36d6d7fccd889c3a556df89cb38f14.webp", desc: "Líder de vendas. Versões elegíveis dentro do teto de R$ 200 mil do IPI." },
    { nome: "Volkswagen Virtus",  tag: "Sedã compacto",  foto: "https://assets.disaltecnologia.com.br/catalog/cover/5d070078f173485a9dbda89deb1161af.webp", desc: "Conforto de sedã com porta-malas generoso. Ideal para uso familiar TEA/PCD." },
    { nome: "Volkswagen T-Cross", tag: "SUV compacto",   foto: "https://assets.disaltecnologia.com.br/catalog/cover/eeac24cda459224ec7651cc0d93f5265.webp", desc: "SUV com altura confortável para acesso — versões elegíveis à isenção de IPI." },
    { nome: "Volkswagen Nivus",   tag: "SUV coupé",      foto: "https://assets.disaltecnologia.com.br/catalog/cover/19555d3d10b415c680300062ec352b7f.webp", desc: "Design esportivo com tecnologia VW Play. Elegível em versões de entrada." },
    { nome: "Volkswagen Tera",    tag: "SUV",            foto: "https://assets.disaltecnologia.com.br/catalog/cover/a47e0c2b5eea982044ed7ad56b1a9ed9.webp", desc: "Chegou o Volkswagen Tera. Novo SUV elegível à isenção PCD e TEA." },
  ];

  return (
    <section id="modelos" className="section" style={{ background: "#fff" }}>
      <div className="container">
        <div className="reveal">
          <span className="eyebrow h-eyebrow-orange">Modelos elegíveis</span>
          <h2 className="section-title">Qual Volkswagen você quer levar com desconto?</h2>
          <p className="lead" style={{ marginTop: 14 }}>
            Estes são os modelos Holanda Veículos que se enquadram na isenção fiscal PCD / TEA dentro do teto atual da Lei 8.989/95. Versões e disponibilidade variam — confirmamos no atendimento.
          </p>
        </div>
        <div className="modelos-grid">
          {modelos.map((m, i) =>
            <div key={i} className="modelo-card reveal">
              <div className="modelo-img" style={{ padding: 0, overflow: "hidden" }}>
                <img src={m.foto} alt={m.nome} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div className="modelo-body">
                <span className="modelo-tag">{m.tag}</span>
                <h3 className="modelo-nome">{m.nome}</h3>
                <p className="modelo-desc">{m.desc}</p>
                <a className="modelo-cta" href={waLink('Olá! Quero saber sobre o ' + m.nome + ' com isenção PCD/TEA pela Holanda Veículos.')} target="_blank" rel="noopener noreferrer">
                  Quero este com desconto
                  <Icon name="arrow-right" size={14} />
                </a>
              </div>
            </div>
          )}
        </div>
        <p style={{ fontSize: 13, color: "var(--on-surf-v)", marginTop: 24, textAlign: "center" }}>
          Disponibilidade sujeita ao estoque Holanda. Elegibilidade conforme versão e teto de IPI vigente (R$ 200.000 em 2026).
        </p>
      </div>
    </section>
  );
};

// --- 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(227,6,19,0.12)", color: "#E30613", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14 }}>1</div>
              <div>
                <strong style={{ color: "#001E50", 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(227,6,19,0.12)", color: "#E30613", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14 }}>2</div>
              <div>
                <strong style={{ color: "#001E50", 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(227,6,19,0.12)", color: "#E30613", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14 }}>3</div>
              <div>
                <strong style={{ color: "#001E50", 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: "Desconto que é direito legal", body: "Não é promoção Holanda. É isenção federal e estadual consolidada pela Lei 8.989/95 e Convênio ICMS 38/12." },
  { stat: "5 modelos", sl: "prontos para você", title: "Polo, Virtus, T-Cross, Nivus e Tera", body: "Versões Volkswagen elegíveis disponíveis no estoque Holanda. Entrega com isenção já aplicada na nota." },
  { stat: "100%", sl: "taxa de aprovação", title: "Nenhum processo rejeitado por documentação", body: "Dalla Costa conduz o protocolo técnico com domínio dos formulários e requisitos de cada perfil." },
  { stat: "R$ 200k", sl: "teto de IPI (2026)", title: "Limite atualizado da Lei 8.989/95", body: "Todos os modelos VW Polo, Virtus, T-Cross, Nivus e Tera se enquadram confortavelmente no teto atual." },
  { stat: "Órgãos públicos", sl: "processo unificado", title: "Receita Federal + Receita Estadual + SEFAZ-RS", body: "Você compra na Holanda. A responsável técnica Dalla Costa cuida de toda a burocracia em paralelo." },
  { stat: "2–3 anos", sl: "ciclo de renovação", title: "Troque de VW, renove o benefício", body: "Taxistas: 2 anos. PCD e TEA: 3 anos. Mesmo combo de parceria na próxima compra." }];

  return (
    <section className="section" style={{ background: "#fff" }}>
      <div className="container">
        <div className="reveal">
          <span className="eyebrow h-eyebrow-orange">Por que comprar na Holanda com a isenção</span>
          <h2 className="section-title">Concessionária VW + responsável técnica em isenção</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 do VW 0km na Holanda Veículos", s: "Seu Polo, Virtus, T-Cross, Nivus ou Tera retirado diretamente na Holanda, com a isenção já aplicada na nota fiscal." },
  { 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 levar
seu VW com desconto?</h2>
          <p className="lead" style={{ marginTop: 14 }}>
            Preencha o formulário ao lado. Nossa responsável técnica, Aline Dalla Costa (CRC-RS), avalia seu caso pessoalmente e em até 24h você recebe diagnóstico e próximos passos com a Holanda Veículos.
          </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>Modelo VW reservado na Holanda conforme disponibilidade</span></li>
            <li><Icon name="check-circle" size={20} style={{ color: "#1a7a4a", flex: "0 0 auto" }} /> <span>Honorários Dalla Costa apresentados após o diagnóstico</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 Volkswagen <span className="hl">com até 30% OFF</span>. Direito seu. Holanda VW.</h2>
      <p>Converse com a responsável técnica sem compromisso. Em 15 minutos você sabe se tem direito e qual modelo VW cabe no seu benefício.</p>
      <div className="final-cta-ctas">
        <a className="btn btn-whatsapp" href={`${WA_BASE}?text=${WA_GERAL}`} target="_blank" rel="noopener noreferrer">
          <Icon name="whatsapp" size={18} />
          Falar no WhatsApp agora
        </a>
        <a className="btn btn-ghost-light" href="#formulario">
          Preencher o formulário
        </a>
      </div>
      <div className="final-trust">Holanda Veículos · Concessionária VW · Responsável técnica: Dalla Costa Contabilidade (CRC-RS)</div>
    </div>
  </section>;


const Footer = () =>
<footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <Logo height={72} light variant="image" />
          <p className="footer-tag" style={{ marginTop: 18 }}>
            Concessionária Volkswagen no Rio Grande do Sul. Parceira oficial da Dalla Costa Contabilidade para venda de VW 0km com isenção PCD e TEA.
          </p>
        </div>
        <div>
          <h4>Modelos</h4>
          <ul>
            <li><a href="#modelos">Polo</a></li>
            <li><a href="#modelos">T-Cross</a></li>
            <li><a href="#modelos">Nivus</a></li>
            <li><a href="#modelos">Virtus</a></li>
            <li><a href="#modelos">Tera</a></li>
          </ul>
        </div>
        <div>
          <h4>Públicos elegíveis</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>Contato</h4>
          <ul>
            <li><a href={`${WA_BASE}?text=${WA_GERAL}`} target="_blank" rel="noopener noreferrer"><Icon name="whatsapp" size={14} style={{ verticalAlign: "middle", marginRight: 6 }} />WhatsApp</a></li>
            <li><a href="#formulario"><Icon name="arrow-right" size={14} style={{ verticalAlign: "middle", marginRight: 6 }} />Análise gratuita</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 Holanda Veículos · Em parceria com Dalla Costa Contabilidade (responsável técnica pela isenção fiscal — CRC-RS).</span>
        <span style={{ maxWidth: "52ch" }}>
          Conteúdo informativo. Elegibilidade, versões e limites analisados caso a caso conforme legislação vigente (Lei 8.989/95, Convênio ICMS 38/12 e normas estaduais RS). Volkswagen é marca da Volkswagen AG.
        </span>
      </div>
    </div>
  </footer>;


// Sticky WhatsApp FAB — mobile-only, primary conversion lever
const WhatsappFab = () =>
<a
  className="wa-fab"
  href={`${WA_BASE}?text=${WA_GERAL}`}
  target="_blank"
  rel="noopener 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 />
      <ModelosSection />
      <SeletorSection />
      <ArgSection />
      <PullBand />
      <ProcessoSection />
      <FormSectionWrap />
      <FAQSection />
      <FinalCTA />
      <Footer />
      <WhatsappFab />
    </>);

};

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