/* global React, GlowButton, BlurOrb, Reveal, Icon, IconPill, GlassCard, SectionTitle, Eyebrow, HeroPhone */

const { useEffect, useRef, useState } = React;

/* ====================== HERO ====================== */
function Hero() {
  return (
    <section id="top" style={{ position: "relative", height: "100vh", display: "flex", alignItems: "center", overflow: "hidden" }}>
      {/* mesh + orbs */}
      <BlurOrb size={520} color="#234EFF" opacity={0.45} style={{ left: "-10%", top: "-10%" }} />
      <BlurOrb size={420} color="#5B7FFF" opacity={0.35} style={{ right: "-8%", top: "30%" }} />
      <BlurOrb size={300} color="#6EE7FF" opacity={0.18} style={{ left: "30%", bottom: "-10%" }} />
      <Grid />
      <Particles />

      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto", padding: "0 24px", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "center", width: "100%" }} className="hero-grid">
        <div>
          <Reveal>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", borderRadius: 999, background: "rgba(91,127,255,0.10)", border: "1px solid rgba(91,127,255,0.30)", color: "#5B7FFF", fontSize: 12, fontWeight: 600, fontFamily: "var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 24 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "#5B7FFF", boxShadow: "0 0 8px #5B7FFF" }} />
              Para o agrônomo moderno
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(44px, 6vw, 72px)", lineHeight: 0.95, letterSpacing: "-0.03em", color: "var(--ata-fg)", margin: 0 }}>
              O Assistente Técnico para o Agrônomo<br />
              <span style={{ background: "linear-gradient(135deg,#234EFF,#5B7FFF)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>em um só lugar.</span>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 18, lineHeight: 1.6, color: "var(--ata-fg-muted)", maxWidth: 560, marginTop: 24 }}>
              Gerencie clientes, propriedades, talhões, aplicações e agenda de forma simples, rápida e inteligente.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <GlowButton href="https://wa.me/5543988080987" iconLeft="whatsapp">Falar no WhatsApp</GlowButton>
              <GlowButton secondary href="#features">Ver funcionalidades</GlowButton>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 48, display: "flex", gap: 20, flexWrap: "wrap", color: "var(--ata-fg-subtle)", fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "var(--font-sans)" }}>
              <span>iOS · Android</span>
              <span>Sem papel</span>
              <span>Atualização em tempo real</span>
            </div>
          </Reveal>
        </div>

        <div className="hero-phone-col">
          <Reveal delay={120} style={{ display: "flex", justifyContent: "center" }}>
            <HeroPhone scale={0.95} screen="dashboard" />
          </Reveal>
        </div>
      </div>

      <style>{`
        @keyframes ata-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
        @media (max-width: 880px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .hero-phone-col { display: none !important; }
        }
      `}</style>
    </section>
  );
}

function Grid() {
  return <div style={{
    position: "absolute", inset: 0,
    backgroundImage: "linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)",
    backgroundSize: "48px 48px",
    maskImage: "radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 90%)",
    WebkitMaskImage: "radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 90%)",
    pointerEvents: "none",
  }} />;
}

function Particles() {
  const dots = Array.from({ length: 14 });
  return <>
    {dots.map((_, i) => {
      const left = (i * 73) % 100, top = (i * 47) % 100, dur = 8 + (i % 6), delay = (i * 0.7) % 6, sz = 3 + (i % 3);
      return <div key={i} style={{
        position: "absolute", left: `${left}%`, top: `${top}%`,
        width: sz, height: sz, borderRadius: 999, background: "#5B7FFF",
        opacity: 0.25 + (i % 4) * 0.12,
        boxShadow: "0 0 12px #5B7FFF",
        animation: `ata-particle ${dur}s ease-in-out ${delay}s infinite`,
        pointerEvents: "none",
      }}/>;
    })}
    <style>{`@keyframes ata-particle { 0%,100% { transform: translateY(0); opacity: 0.2 } 50% { transform: translateY(-30px); opacity: 0.6 } }`}</style>
  </>;
}

/* ====================== FEATURES ====================== */
function Features() {
  const items = [
    { icon: "users",     t: "Cadastro de Clientes",   d: "Cadastre clientes, contatos e histórico técnico em segundos." },
    { icon: "home",      t: "Gestão de Propriedades", d: "Cada propriedade no seu lugar — área, cultura e responsável." },
    { icon: "layers",    t: "Controle de Talhões",    d: "Divida a área em talhões e acompanhe cada um de perto." },
    { icon: "droplets",  t: "Aplicações e Produtos",  d: "Registre aplicações com produto, dose, alvo e data." },
    { icon: "calendar",  t: "Agenda Inteligente",     d: "Visitas, retornos e prazos em uma agenda unificada." },
    { icon: "bell",      t: "Notificações",           d: "Alertas automáticos para você e sua equipe técnica." },
    { icon: "map",       t: "Mapa da Propriedade",    d: "Visualize talhões e aplicações em mapa interativo." },
    { icon: "history",   t: "Histórico Técnico",      d: "Tudo registrado, pesquisável e exportável quando precisar." },
    { icon: "sparkles",  t: "Organização Completa",   d: "Toda a rotina técnica do agrônomo em um único lugar." },
  ];
  return (
    <section id="features" style={{ position: "relative", padding: "120px 24px", maxWidth: 1280, margin: "0 auto" }}>
      <BlurOrb size={400} color="#234EFF" opacity={0.20} style={{ left: "-15%", top: "20%" }} />
      <Reveal style={{ textAlign: "center", marginBottom: 64 }}>
        <Eyebrow>Funcionalidades</Eyebrow>
        <SectionTitle gradient="em um só lugar.">Tudo do cliente</SectionTitle>
        <p style={{ marginTop: 20, fontSize: 18, color: "var(--ata-fg-muted)", maxWidth: 560, marginInline: "auto" }}>
          Um produto pensado de ponta a ponta para a rotina do agrônomo. Sem papel. Sem planilha. Sem fricção.
        </p>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="feat-grid">
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 60}>
            <GlassCard radius={28} padding={28} style={{ display: "flex", flexDirection: "column", gap: 18, height: "100%", minHeight: 220 }}>
              <IconPill icon={it.icon} size={48} />
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20, letterSpacing: "-0.012em", color: "var(--ata-fg)" }}>{it.t}</div>
                <div style={{ marginTop: 8, fontSize: 14, lineHeight: 1.55, color: "var(--ata-fg-muted)" }}>{it.d}</div>
              </div>
            </GlassCard>
          </Reveal>
        ))}
      </div>
      <style>{`
        @media (max-width: 980px) { .feat-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ====================== HOW IT WORKS ====================== */
function HowItWorks() {
  const steps = [
    { n: "01", t: "Cadastre o cliente",    d: "Dados e contatos em segundos." },
    { n: "02", t: "Adicione propriedades", d: "Localização, área e cultura." },
    { n: "03", t: "Organize talhões",      d: "Divida e acompanhe cada um." },
    { n: "04", t: "Registre aplicações",   d: "Produtos, dose e data." },
    { n: "05", t: "Acompanhe em tempo real", d: "Tudo sincronizado, sempre." },
  ];
  return (
    <section id="how" style={{ position: "relative", padding: "120px 24px", maxWidth: 1280, margin: "0 auto" }}>
      <BlurOrb size={360} color="#5B7FFF" opacity={0.20} style={{ right: "-15%", top: "20%" }} />
      <Reveal style={{ textAlign: "center", marginBottom: 72 }}>
        <Eyebrow>Como funciona</Eyebrow>
        <SectionTitle gradient="cinco passos.">Comece em</SectionTitle>
      </Reveal>
      <div style={{ position: "relative" }}>
        <div style={{ position: "absolute", top: 28, left: "8%", right: "8%", height: 2, background: "linear-gradient(90deg, transparent, rgba(91,127,255,0.5), transparent)" }} className="how-line" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 20, position: "relative" }} className="how-grid">
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 100} style={{ textAlign: "center" }}>
              <div style={{ width: 56, height: 56, borderRadius: 999, margin: "0 auto",
                background: "linear-gradient(135deg, rgba(35,78,255,0.30), rgba(91,127,255,0.18))",
                border: "1px solid rgba(91,127,255,0.50)",
                color: "#5B7FFF", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16,
                display: "flex", alignItems: "center", justifyContent: "center",
                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.10), 0 0 24px rgba(35,78,255,0.30)",
                position: "relative", zIndex: 1, background: "rgba(13,19,36,1)",
              }}>{s.n}</div>
              <div style={{ marginTop: 18, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, color: "var(--ata-fg)", letterSpacing: "-0.012em" }}>{s.t}</div>
              <div style={{ marginTop: 6, fontSize: 13, color: "var(--ata-fg-muted)" }}>{s.d}</div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .how-grid { grid-template-columns: repeat(2, 1fr) !important; } .how-line { display: none } }
        @media (max-width: 480px) { .how-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ====================== DIFERENCIAL ====================== */
function Diferencial() {
  return (
    <section id="diferencial" style={{ position: "relative", padding: "120px 24px", maxWidth: 1280, margin: "0 auto" }}>
      <Reveal style={{ textAlign: "center", marginBottom: 64 }}>
        <Eyebrow>Diferencial</Eyebrow>
        <SectionTitle gradient="o agrônomo moderno.">O ATA foi criado para</SectionTitle>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 28, alignItems: "center" }} className="dif-grid">
        <Reveal>
          <GlassCard hover={false} padding={32} style={{ minHeight: 320 }}>
            <Eyebrow style={{ marginBottom: 20 }}>Antes</Eyebrow>
            {[
              "Caderno físico que se perde",
              "Planilhas que ninguém atualiza",
              "WhatsApp desorganizado e perdido",
              "Histórico que fica só na sua cabeça",
              "Visitas esquecidas ou duplicadas",
            ].map((t, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "10px 0", borderBottom: i < 4 ? "1px dashed rgba(255,255,255,0.06)" : "none" }}>
                <div style={{ width: 28, height: 28, borderRadius: 999, background: "rgba(255,92,122,0.12)", border: "1px solid rgba(255,92,122,0.40)", display: "flex", alignItems: "center", justifyContent: "center", color: "#FF5C7A", flexShrink: 0 }}>
                  <Icon name="x" size={14} stroke={2.5} />
                </div>
                <div style={{ fontSize: 15, color: "var(--ata-fg-muted)" }}>{t}</div>
              </div>
            ))}
          </GlassCard>
        </Reveal>
        <div className="dif-arrow" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, color: "var(--ata-fg-subtle)", letterSpacing: "0.10em", textTransform: "uppercase" }}>vs</div>
          <Icon name="arrow" size={28} style={{ color: "#5B7FFF" }} />
        </div>
        <Reveal delay={120}>
          <GlassCard hover={false} padding={32} style={{ minHeight: 320, background: "linear-gradient(135deg, rgba(35,78,255,0.10), rgba(91,127,255,0.05))", borderColor: "rgba(91,127,255,0.30)" }}>
            <Eyebrow style={{ marginBottom: 20 }}>Com o ATA</Eyebrow>
            {[
              "Tudo centralizado no celular",
              "Atualização automática e em tempo real",
              "Histórico técnico pesquisável",
              "Agenda inteligente com lembretes",
              "Equipe alinhada, papel zero",
            ].map((t, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "10px 0", borderBottom: i < 4 ? "1px dashed rgba(255,255,255,0.06)" : "none" }}>
                <div style={{ width: 28, height: 28, borderRadius: 999, background: "linear-gradient(135deg,#234EFF,#5B7FFF)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", flexShrink: 0, boxShadow: "0 0 12px rgba(35,78,255,0.5)" }}>
                  <Icon name="check" size={14} stroke={2.5} />
                </div>
                <div style={{ fontSize: 15, color: "var(--ata-fg)", fontWeight: 500 }}>{t}</div>
              </div>
            ))}
          </GlassCard>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 880px) { .dif-grid { grid-template-columns: 1fr !important; } .dif-arrow { transform: rotate(90deg); margin: 8px auto } }
      `}</style>
    </section>
  );
}

/* ====================== APP PREVIEW ====================== */
function AppPreview() {
  const [active, setActive] = useState("dashboard");
  const tabs = [
    { id: "dashboard",  label: "Dashboard" },
    { id: "clientes",   label: "Clientes" },
    { id: "agenda",     label: "Agenda" },
    { id: "aplicacoes", label: "Aplicações" },
    { id: "mapa",       label: "Mapa" },
  ];
  return (
    <section id="app" style={{ position: "relative", padding: "120px 24px", maxWidth: 1280, margin: "0 auto", overflow: "hidden" }}>
      <BlurOrb size={500} color="#234EFF" opacity={0.30} style={{ left: "50%", top: "30%", transform: "translateX(-50%)" }} />
      <Reveal style={{ textAlign: "center", marginBottom: 56 }}>
        <Eyebrow>App</Eyebrow>
        <SectionTitle gradient="onde quer que você vá.">Sua rotina técnica</SectionTitle>
      </Reveal>
      <Reveal delay={100} style={{ display: "flex", justifyContent: "center", marginBottom: 48 }}>
        <div style={{ display: "inline-flex", padding: 6, borderRadius: 999, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", backdropFilter: "blur(20px)", flexWrap: "wrap" }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setActive(t.id)} style={{
              padding: "10px 18px", borderRadius: 999, border: "none", cursor: "pointer",
              fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 13,
              background: active === t.id ? "linear-gradient(135deg,#234EFF,#5B7FFF)" : "transparent",
              color: active === t.id ? "#fff" : "var(--ata-fg-muted)",
              boxShadow: active === t.id ? "0 0 20px rgba(35,78,255,0.45)" : "none",
              transition: "all .35s cubic-bezier(0.16,1,0.3,1)",
            }}>{t.label}</button>
          ))}
        </div>
      </Reveal>
      <Reveal delay={150} style={{ display: "flex", justifyContent: "center", position: "relative", zIndex: 1 }}>
        <HeroPhone scale={1} screen={active} />
      </Reveal>
    </section>
  );
}

/* ====================== WHATSAPP CTA ====================== */
function WhatsappCta() {
  return (
    <section style={{ padding: "80px 24px", maxWidth: 1280, margin: "0 auto" }}>
      <Reveal>
        <GlassCard hover={false} padding={56} radius={36} className="cta-card" style={{
          textAlign: "center", position: "relative", overflow: "hidden",
          background: "linear-gradient(135deg, rgba(35,78,255,0.18), rgba(91,127,255,0.08))",
          borderColor: "rgba(91,127,255,0.35)",
        }}>
          <BlurOrb size={400} color="#234EFF" opacity={0.45} style={{ left: "-10%", top: "-30%" }} />
          <BlurOrb size={300} color="#5B7FFF" opacity={0.35} style={{ right: "-8%", bottom: "-30%" }} />
          <div style={{ position: "relative" }}>
            <Eyebrow>Suporte e atendimento</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(32px, 4.5vw, 52px)", lineHeight: 1.05, letterSpacing: "-0.022em", color: "var(--ata-fg)", margin: "8px 0 16px" }}>
              Atendimento rápido e direto pelo WhatsApp.
            </h2>
            <p style={{ fontSize: 17, color: "var(--ata-fg-muted)", maxWidth: 520, margin: "0 auto 32px" }}>
              Sem tickets, sem esperas. Você fala direto com o time do ATA.
            </p>
            <GlowButton href="https://wa.me/5543988080987" iconLeft="whatsapp">Conversar Agora</GlowButton>
          </div>
        </GlassCard>
      </Reveal>
    </section>
  );
}

/* ====================== FUTURE ====================== */
function Future() {
  const items = [
    { icon: "sparkles", t: "IA para recomendações", d: "Sugestões inteligentes baseadas no histórico de cada talhão." },
    { icon: "chart",    t: "Relatórios inteligentes", d: "Análises automáticas, exportáveis em um clique." },
    { icon: "map",      t: "Mapas avançados",        d: "Camadas de produtividade, NDVI e zoneamento." },
    { icon: "shield",   t: "Gestão completa",         d: "Compliance, MAPA, receituário — tudo integrado." },
    { icon: "globe",    t: "Integrações abertas",     d: "ERPs, sensores, planilhas — onde você precisar." },
    { icon: "zap",      t: "Sincronização offline",   d: "Trabalhe em campo, sincronize quando voltar." },
  ];
  return (
    <section id="future" style={{ position: "relative", padding: "120px 24px", maxWidth: 1280, margin: "0 auto" }}>
      <Reveal style={{ textAlign: "center", marginBottom: 64 }}>
        <Eyebrow>Roadmap</Eyebrow>
        <SectionTitle gradient="já está em construção.">O futuro do ATA</SectionTitle>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="future-grid">
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 60}>
            <GlassCard radius={24} padding={24} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <IconPill icon={it.icon} size={40} />
                <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--ata-fg-subtle)" }}>Em breve</span>
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, color: "var(--ata-fg)", letterSpacing: "-0.012em" }}>{it.t}</div>
                <div style={{ marginTop: 6, fontSize: 13, color: "var(--ata-fg-muted)", lineHeight: 1.5 }}>{it.d}</div>
              </div>
            </GlassCard>
          </Reveal>
        ))}
      </div>
      <style>{`
        @media (max-width: 980px) { .future-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 600px) { .future-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ====================== FOOTER ====================== */
function Footer() {
  return (
    <footer style={{ position: "relative", padding: "80px 24px 48px", borderTop: "1px solid rgba(255,255,255,0.06)", marginTop: 80 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 48, marginBottom: 48, flexWrap: "wrap" }}>
          <img src="assets/ata-logo.svg" alt="ATA" style={{ height: 44, filter: "brightness(0) invert(1)" }} />
          <p style={{ margin: 0, fontSize: 14, color: "var(--ata-fg-muted)", lineHeight: 1.6, maxWidth: 280 }}>
            Tecnologia para o agrônomo moderno. Menos papel. Mais produtividade.
          </p>
          <GlowButton size="md" href="https://wa.me/5543988080987" iconLeft="whatsapp">Falar no WhatsApp</GlowButton>
          <div style={{ display: "flex", gap: 24 }}>
            {[
              { l: [
                { label: "Funcionalidades", href: "#features" },
                { label: "Como funciona", href: "#how" }
              ] },
            ].map((c, i) => (
              c.l.map((item, j) => (
                <a key={j} href={item.href} style={{ fontSize: 14, color: "var(--ata-fg-muted)", textDecoration: "none", transition: "color .3s" }} onMouseEnter={e => e.currentTarget.style.color = "var(--ata-fg)"} onMouseLeave={e => e.currentTarget.style.color = "var(--ata-fg-muted)"}>{item.label}</a>
              ))
            ))}
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: "0 auto", paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.06)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24, fontSize: 12, color: "var(--ata-fg-subtle)", fontFamily: "var(--font-sans)" }}>
        <div>© 2026 ATA · Todos os direitos reservados.</div>
        <div style={{ display: "flex", gap: 24 }}>
          <a href="#" style={{ color: "var(--ata-fg-muted)", textDecoration: "none", transition: "color .3s" }} onMouseEnter={e => e.currentTarget.style.color = "var(--ata-fg)"} onMouseLeave={e => e.currentTarget.style.color = "var(--ata-fg-muted)"}>Termos</a>
          <a href="#" style={{ color: "var(--ata-fg-muted)", textDecoration: "none", transition: "color .3s" }} onMouseEnter={e => e.currentTarget.style.color = "var(--ata-fg)"} onMouseLeave={e => e.currentTarget.style.color = "var(--ata-fg-muted)"}>Política de Privacidade</a>
        </div>
      </div>
    </footer>
  );
}

/* ====================== PRICING ====================== */
function Pricing() {
  const features = [
    "Clientes, propriedades e talhões ilimitados",
    "Aplicações e agenda em tempo real",
    "Histórico técnico pesquisável",
    "Mapa interativo da propriedade",
    "Notificações automáticas",
    "Sincronização iOS e Android",
    "Suporte direto pelo WhatsApp",
    "Atualizações contínuas",
  ];
  return (
    <section id="pricing" style={{ position: "relative", padding: "120px 24px", maxWidth: 1280, margin: "0 auto" }}>
      <BlurOrb size={520} color="#234EFF" opacity={0.30} style={{ left: "50%", top: "10%", transform: "translateX(-50%)" }} />
      <BlurOrb size={360} color="#5B7FFF" opacity={0.22} style={{ right: "-10%", bottom: "10%" }} />

      <Reveal style={{ textAlign: "center", marginBottom: 56 }}>
        <Eyebrow>Plano</Eyebrow>
        <SectionTitle gradient="por um preço justo.">Tudo o que você precisa</SectionTitle>
        <p style={{ marginTop: 20, fontSize: 18, color: "var(--ata-fg-muted)", maxWidth: 560, marginInline: "auto" }}>
          Um plano único, sem pegadinhas. Cancele quando quiser.
        </p>
      </Reveal>

      <Reveal delay={120} style={{ display: "flex", justifyContent: "center" }}>
        <GlassCard hover={false} padding={0} radius={36} style={{
          maxWidth: 520, width: "100%", overflow: "hidden",
          background: "linear-gradient(135deg, rgba(35,78,255,0.14), rgba(91,127,255,0.06))",
          borderColor: "rgba(91,127,255,0.35)",
          boxShadow: "0 24px 80px rgba(0,0,0,0.55), 0 0 60px rgba(35,78,255,0.30), inset 0 1px 0 rgba(255,255,255,0.10)",
        }}>
          <div style={{ padding: "40px 40px 32px", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
              <div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.10em", textTransform: "uppercase", color: "#5B7FFF" }}>ATA Pro</div>
                <div style={{ marginTop: 6, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24, letterSpacing: "-0.018em", color: "var(--ata-fg)" }}>Plano completo</div>
              </div>
              <span style={{ padding: "6px 14px", borderRadius: 999, background: "rgba(46,212,162,0.10)", border: "1px solid rgba(46,212,162,0.35)", color: "#2ED4A2", fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>Mais escolhido</span>
            </div>
            <div style={{ marginTop: 28, display: "flex", alignItems: "baseline", gap: 8 }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, color: "var(--ata-fg-muted)" }}>R$</span>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 72, lineHeight: 0.95, letterSpacing: "-0.03em", color: "var(--ata-fg)" }}>69<span style={{ fontSize: 36, fontWeight: 700 }}>,90</span></span>
              <span style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--ata-fg-muted)", marginLeft: 4 }}>/ mês</span>
            </div>
            <div style={{ marginTop: 8, fontSize: 13, color: "var(--ata-fg-subtle)" }}>Cobrança mensal · Cancele quando quiser</div>
            <div style={{ marginTop: 24 }}>
              <GlowButton href="#" iconRight="arrow" style={{ width: "100%" }}>Assinar agora</GlowButton>
            </div>
          </div>
          <div style={{ padding: "28px 40px 40px" }}>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--ata-fg-subtle)", marginBottom: 16 }}>Incluído</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px 24px" }} className="pricing-feats">
              {features.map((f, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ width: 22, height: 22, borderRadius: 999, background: "linear-gradient(135deg,#234EFF,#5B7FFF)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", flexShrink: 0, boxShadow: "0 0 10px rgba(35,78,255,0.45)" }}>
                    <Icon name="check" size={12} stroke={2.6} />
                  </div>
                  <div style={{ fontSize: 14, color: "var(--ata-fg)", lineHeight: 1.4 }}>{f}</div>
                </div>
              ))}
            </div>
          </div>
        </GlassCard>
      </Reveal>

      <style>{`
        @media (max-width: 560px) { .pricing-feats { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, Features, HowItWorks, Diferencial, AppPreview, WhatsappCta, Future, Pricing, Footer });
