/* global React */
/* Site V3 — sections (part B): KeyGains, SystemBenefits, Team, ClosingCTA, FooterV3 */

const { useReveal: useReveal_B } = window;

/* ============ KEY GAINS — 4 cards ============ */

const KEY_GAINS = [
  { icon: "fa-headset", title: "Desafogamento da Recepção", desc: "Pedidos, dúvidas e agendamentos saem do balcão e fluem direto para o setor certo." },
  { icon: "fa-coins", title: "Redução de custos e aumento do ticket médio", desc: "Operação enxuta e cardápio digital com venda sugestiva que aumenta o consumo." },
  { icon: "fa-crown", title: "Controle Total · serviço Premium", desc: "Sensação de exclusividade na palma da mão. Autonomia, privacidade e zero fricção." },
  { icon: "fa-brain", title: "Gestão Inteligente", desc: "IA mapeia padrões, indica gargalos e sugere soluções com base em dados reais." },
];

function KeyGains() {
  const ref = window.useReveal();
  return (
    <section ref={ref} className="section bg-deeper" id="ganhos">
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 56px" }}>
        <div className="reveal" style={{ marginBottom: 56 }}>
          <div className="divider-label"><span>Principais ganhos</span></div>
          <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 64, alignItems: "end" }}>
            <h2 style={{ fontSize: 64, fontWeight: 900, letterSpacing: "-0.045em", lineHeight: 0.95, margin: 0, color: "#fff", textWrap: "balance" }}>
              O que o seu hotel <span style={{ color: "#5b8cff" }}>ganha</span> com a LOMIENS.
            </h2>
            <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 16, fontWeight: 300, lineHeight: 1.6, margin: 0 }}>
              Quatro ganhos diretos que aparecem no dia 1: operação, receita, experiência e decisão.
            </p>
          </div>
        </div>

        <div className="reveal delay-1" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {KEY_GAINS.map((g, i) => (
            <div
              key={g.title}
              className="lh-card"
              style={{ borderRadius: 28, padding: "32px 26px 30px", position: "relative", overflow: "hidden", minHeight: 280, display: "flex", flexDirection: "column" }}
            >
              <i
                className={`fa-solid ${g.icon}`}
                style={{
                  position: "absolute",
                  right: -16,
                  bottom: -22,
                  fontSize: 180,
                  color: "rgba(47,107,255,0.07)",
                  pointerEvents: "none",
                }}
              ></i>
              <span style={{ fontSize: 10, fontWeight: 900, color: "rgba(255,255,255,0.4)", letterSpacing: "0.32em", marginBottom: 18, position: "relative" }}>
                0{i + 1}
              </span>
              <div
                style={{
                  width: 56, height: 56, borderRadius: 16,
                  background: "#2f6bff",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  marginBottom: 24,
                  boxShadow: "0 0 30px rgba(47,107,255,0.5)",
                  position: "relative",
                }}
              >
                <i className={`fa-solid ${g.icon}`} style={{ fontSize: 22, color: "#fff" }}></i>
              </div>
              <h4 style={{ fontSize: 22, fontWeight: 900, letterSpacing: "-0.02em", margin: "0 0 12px", color: "#fff", lineHeight: 1.15, position: "relative" }}>
                {g.title}
              </h4>
              <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 13, fontWeight: 300, lineHeight: 1.5, margin: 0, position: "relative" }}>
                {g.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ SYSTEM BENEFITS — 4 quadrants ============ */

const SYSTEM_BENEFITS = [
  {
    title: "Integração do Hotel",
    icon: "fa-arrows-to-circle",
    items: [
      "Rastreamento de pedidos em tempo real",
      "Garantia da integridade da informação",
      "Dispensa triagem humana",
      "Padronização de pedidos",
    ],
  },
  {
    title: "Maximização de Receita",
    icon: "fa-money-bill-trend-up",
    items: [
      "Venda sugestiva automática",
      "Cardápio visual e atrativo",
      "Ofertas em tempo real",
      "Gamificação do ambiente digital",
      "Agenda cultural e eventos",
      "Rota gastronômica de parceiros",
      "Mobilidade integrada com locadoras",
    ],
  },
  {
    title: "Experiência do Hóspede",
    icon: "fa-star",
    items: [
      "Autonomia e privacidade",
      "Sem barreira de idioma",
      "Update em tempo real do status dos pedidos",
      "Feedback usado para melhoria contínua",
      "Agenda do hotel em tempo real",
    ],
  },
  {
    title: "Dados Estratégicos & Decisões Inteligentes",
    icon: "fa-diagram-project",
    items: [
      "Filtragem dos problemas do hotel",
      "Sugestão de soluções por I.A",
      "Consultoria estratégica",
      "Engenharia de cardápio",
      "Indicador de performance da equipe",
      "Previsão de demanda",
      "Parcerias comerciais locais",
    ],
  },
];

function SystemBenefits() {
  const ref = window.useReveal();
  return (
    <section ref={ref} className="section" id="beneficios">
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 56px" }}>
        <div className="reveal" style={{ marginBottom: 56 }}>
          <span className="lh-badge" style={{ marginBottom: 22 }}>
            <span className="dot"></span>
            <span>Benefícios do nosso sistema</span>
          </span>
          <h2 style={{ fontSize: 64, fontWeight: 900, letterSpacing: "-0.045em", lineHeight: 0.95, margin: 0, color: "#fff", maxWidth: 900, textWrap: "balance" }}>
            Um sistema único de gestão, <span style={{ color: "#5b8cff" }}>ainda não existente</span> no mercado.
          </h2>
        </div>

        <div className="reveal delay-1" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18 }}>
          {SYSTEM_BENEFITS.map((b, i) => (
            <div
              key={b.title}
              className="lh-card"
              style={{ borderRadius: 28, padding: "32px 32px 28px", display: "flex", flexDirection: "column" }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22, paddingBottom: 18, borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
                <div
                  style={{
                    width: 48, height: 48, borderRadius: 14,
                    background: "rgba(47,107,255,0.15)", border: "1px solid rgba(47,107,255,0.3)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                  }}
                >
                  <i className={`fa-solid ${b.icon}`} style={{ fontSize: 18, color: "#7aa8ff" }}></i>
                </div>
                <h4 style={{ fontSize: 24, fontWeight: 900, letterSpacing: "-0.025em", margin: 0, color: "#fff" }}>
                  {b.title}
                </h4>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 28, rowGap: 0 }}>
                {b.items.map((item) => (
                  <div
                    key={item}
                    style={{
                      display: "flex",
                      alignItems: "flex-start",
                      gap: 11,
                      padding: "10px 0",
                      borderTop: "1px solid rgba(255,255,255,0.05)",
                    }}
                  >
                    <i className="fa-solid fa-check" style={{ color: "#5b8cff", fontSize: 11, marginTop: 4 }}></i>
                    <span style={{ fontSize: 13, color: "rgba(255,255,255,0.78)", fontWeight: 400, lineHeight: 1.45 }}>
                      {item}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ TEAM ============ */

const TEAM = [
  {
    name: "Caio Moraes",
    photo: "assets/team/caio.jpeg",
    cargo: "CEO & CTO · Fundador",
    academic: "Unesp · Engenharia Mecânica",
    desc: "Especialista em IA pela Albstadt-Sigmaringen University, com experiência em tratamento de dados na Bosch Sensortec (Alemanha) e certificação Black Belt Six Sigma. Une visão de negócio e liderança técnica para conduzir a LOMIENS com foco em inovação e eficiência.",
  },
  {
    name: "Gabriel Gambini",
    photo: "assets/team/Gambine.jpeg",
    cargo: "COO · Cofundador",
    academic: "Unesp · Engenharia Mecânica",
    desc: "PMP com experiência em estruturação e governança de projetos e no desenvolvimento de ferramentas preditivas. Na LOMIENS, lidera a operação, o treinamento da equipe e a governança de métricas e KPIs que garantem a performance dos clientes.",
  },
  {
    name: "Lívia Meireles",
    photo: "assets/team/livia.jpeg",
    cargo: "Diretora de Vendas & Suporte · Sócia Estratégica",
    academic: "Fatec · Gestão de Negócios",
    desc: "Certificação Green Belt e forte atuação em atendimento, relacionamento comercial e suporte estratégico. Impulsiona o crescimento da LOMIENS com foco em comunicação, eficiência e soluções sob medida, sempre priorizando proximidade e excelência.",
  },
  {
    name: "Leonardo Moraes",
    photo: "assets/team/Leo.jpeg",
    cargo: "Tech Lead · Sócio Estratégico",
    academic: "UNISAL · Engenharia da Computação",
    desc: "Desenvolve sistemas web sob medida de ponta a ponta, da arquitetura à entrega. Atua com SaaS, dashboards analíticos e integrações. Sócio e consultor de tecnologia da LOMIENS, plataforma de gestão para hotelaria.",
  },
  {
    name: "Katia Daud",
    photo: "assets/team/Katia.jpg",
    cargo: "Head of Growth · Sócia Estratégica",
    academic: "",
    desc: "Empresária, mentora de startups e especialista em crescimento estratégico. Conecta tecnologia, mercado e relacionamento para escalar negócios, liderando na LOMIENS a expansão e a aproximação com o setor hoteleiro.",
  },
];

function TeamSection() {
  const ref = window.useReveal();
  return (
    <section
      ref={ref}
      className="section"
      id="equipe"
      style={{
        background: "linear-gradient(180deg, #0a2150 0%, #08193c 50%, #061633 100%)",
        overflow: "hidden",
      }}
    >
      {/* Camadas de fundo premium */}
      <div className="lh-hex" style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none" }}></div>
      {/* Spotlight atrás do título */}
      <div
        style={{
          position: "absolute", top: "-5%", left: "50%", transform: "translateX(-50%)",
          width: "70%", height: "55%",
          background: "radial-gradient(ellipse, rgba(47,107,255,0.28), transparent 68%)",
          filter: "blur(80px)", pointerEvents: "none",
        }}
      ></div>
      {/* Glow lateral suave atrás dos cards */}
      <div
        style={{
          position: "absolute", bottom: "5%", left: "8%",
          width: "45%", height: "50%",
          background: "radial-gradient(ellipse, rgba(91,140,255,0.16), transparent 70%)",
          filter: "blur(90px)", pointerEvents: "none",
        }}
      ></div>

      <div style={{ position: "relative", zIndex: 1, maxWidth: 1440, margin: "0 auto", padding: "0 56px" }}>
        <div className="reveal" style={{ marginBottom: 64, textAlign: "center" }}>
          <span className="lh-badge" style={{ justifyContent: "center" }}>
            <span className="dot"></span>
            <span>Arquitetos da LOMIENS</span>
          </span>
          <h2 style={{ fontSize: 88, fontWeight: 900, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "16px 0 20px" }}>
            <span className="lh-laser">Sobre Nós</span>
          </h2>
          <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 18, fontWeight: 300, fontStyle: "italic", lineHeight: 1.6, margin: "0 auto", maxWidth: 640 }}>
            "Engenharia de precisão aplicada à inteligência de dados hoteleiros."
          </p>
        </div>

        {/* Dica de swipe (mobile) */}
        <div className="pricing-swipe" style={{ alignItems: "center", justifyContent: "center", gap: 10, marginBottom: 18, color: "rgba(47,107,255,0.7)" }}>
          <span style={{ fontSize: 9, fontWeight: 900, letterSpacing: "0.3em", textTransform: "uppercase" }}>Arraste para conhecer o time</span>
          <i className="fa-solid fa-chevron-right" style={{ fontSize: 10 }}></i>
        </div>

        <div className="team-grid reveal delay-1">
          {TEAM.map((m) => (
            <div key={m.name} className="team-card" style={{ padding: "36px 28px 28px", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 18 }}>
              {/* Foto em destaque — maior e centralizada */}
              <div
                className="team-photo"
                style={{
                  width: 152, height: 152,
                  clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
                  background: "linear-gradient(135deg, #7aa8ff, #2f6bff 55%, #5b8cff)",
                  padding: 3,
                  flexShrink: 0,
                }}
              >
                <div
                  style={{
                    width: "100%",
                    height: "100%",
                    clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
                    overflow: "hidden",
                    background: "#0a1830",
                  }}
                >
                  <img className="zoomable" src={m.photo} alt={m.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              </div>

              <div>
                <h4 style={{ fontSize: 23, fontWeight: 900, letterSpacing: "-0.02em", margin: 0, color: "#fff" }}>
                  {m.name}
                </h4>
                <p style={{ fontSize: 11, color: "#7aa8ff", letterSpacing: "0.16em", textTransform: "uppercase", margin: "8px 0 0", fontWeight: 800, lineHeight: 1.3 }}>
                  {m.cargo}
                </p>
              </div>

              <p
                className="team-bio"
                style={{
                  color: "rgba(255,255,255,0.72)",
                  fontSize: 13.5,
                  fontWeight: 300,
                  lineHeight: 1.65,
                  letterSpacing: "0.005em",
                  textAlign: "justify",
                  textJustify: "inter-word",
                  hyphens: "auto",
                  margin: 0,
                }}
              >
                {m.desc}
              </p>

              {m.academic ? (
                <div style={{ marginTop: "auto", display: "flex", alignItems: "center", justifyContent: "center", gap: 9, paddingTop: 14, borderTop: "1px solid rgba(255,255,255,0.08)", width: "100%" }}>
                  <i className="fa-solid fa-graduation-cap" style={{ color: "#7aa8ff", fontSize: 12 }}></i>
                  <span style={{ fontSize: 12.5, color: "rgba(255,255,255,0.85)", fontWeight: 600, lineHeight: 1.3 }}>
                    {m.academic}
                  </span>
                </div>
              ) : null}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CLOSING CTA — Vamos conversar sobre o seu hotel? ============ */

const CTA_POINTS = [
  { n: "01", title: "Onde estão seus gargalos hoje", desc: "Mapeamos o que trava operação e satisfação." },
  { n: "02", title: "Onde você perde tempo e receita", desc: "Estimativa do que está vazando todo dia." },
  { n: "03", title: "Como a LOMIENS pode ajudar", desc: "Plano sob medida. Não copia, adapta." },
];

function ClosingCTA() {
  const ref = window.useReveal();
  return (
    <section ref={ref} className="section" id="contato">
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 56px" }}>
        <div className="reveal lh-card" style={{ borderRadius: 40, padding: "72px 56px", position: "relative", overflow: "hidden", background: "linear-gradient(180deg, rgba(47,107,255,0.22) 0%, rgba(16,30,61,1) 70%)" }}>
          <div className="lh-hex" style={{ opacity: 0.4 }}></div>
          <div style={{ position: "relative", zIndex: 1, maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
              <span className="pulse-dot"></span>
              <span style={{ fontSize: 10, fontWeight: 900, color: "#7aa8ff", letterSpacing: "0.36em", textTransform: "uppercase" }}>
                Conversa de 30 minutos · sem compromisso
              </span>
            </div>
            <h2 style={{ fontSize: 76, fontWeight: 900, letterSpacing: "-0.045em", lineHeight: 0.95, margin: "0 0 18px", color: "#fff", textWrap: "balance" }}>
              Vamos conversar sobre o <span className="lh-laser">seu hotel</span>?
            </h2>
            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 18, fontWeight: 300, lineHeight: 1.5, margin: "0 auto 48px", maxWidth: 680 }}>
              Cada hotel tem uma operação diferente. A LOMIENS se adapta à sua realidade, não o contrário.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, marginBottom: 48 }}>
              {CTA_POINTS.map((p) => (
                <div key={p.n} className="lh-card" style={{ borderRadius: 24, padding: "26px 24px", textAlign: "left" }}>
                  <span className="lh-laser" style={{ fontSize: 32, fontWeight: 900, letterSpacing: "-0.04em", lineHeight: 1, display: "block", marginBottom: 14 }}>
                    {p.n}
                  </span>
                  <h4 style={{ fontSize: 18, fontWeight: 900, letterSpacing: "-0.02em", margin: "0 0 8px", color: "#fff" }}>
                    {p.title}
                  </h4>
                  <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 13, fontWeight: 300, lineHeight: 1.5, margin: 0 }}>
                    {p.desc}
                  </p>
                </div>
              ))}
            </div>

            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <a
                href="https://wa.me/5511998972006?text=Ol%C3%A1!%20Gostaria%20de%20agendar%20uma%20conversa%20sobre%20a%20LOMIENS%20para%20o%20meu%20hotel."
                target="_blank"
                rel="noopener noreferrer"
                className="lh-btn-primary btn-arrow-anim"
                style={{ textDecoration: "none" }}
              >
                <i className="fa-brands fa-whatsapp" style={{ fontSize: 15 }}></i>
                Agendar pelo WhatsApp
                <i className="fa-solid fa-arrow-right" style={{ fontSize: 10 }}></i>
              </a>
            </div>

            <div style={{ marginTop: 42, display: "flex", justifyContent: "center", gap: 14, flexWrap: "wrap" }}>
              <ContactLine icon="fa-envelope" label="lomienscomercial@gmail.com" href="mailto:lomienscomercial@gmail.com" />
              <ContactLine icon="fa-brands fa-instagram" label="@lomiens_da" href="https://instagram.com/lomiens_da" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactLine({ icon, label, href }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" className="contact-chip">
      <span className="contact-chip-ico">
        <i className={icon.startsWith("fa-brands") ? icon : `fa-solid ${icon}`}></i>
      </span>
      {label}
    </a>
  );
}

/* ============ FOOTER V3 — with real contacts ============ */

function FooterV3() {
  return (
    <footer style={{ padding: "64px 56px 32px", background: "#001529", borderTop: "1px solid rgba(255,255,255,0.06)" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 48, marginBottom: 48 }}>
          <div>
            <div className="lh-lockup" style={{ marginBottom: 18 }}>
              <div className="mark">
                <img src="assets/logo.png" alt="" />
              </div>
              <div className="word">
                <span className="name">LOMIENS</span>
                <span className="tag">data analysis</span>
              </div>
            </div>
            <p style={{ color: "rgba(255,255,255,0.55)", fontSize: 14, fontWeight: 300, lineHeight: 1.6, margin: "0 0 18px", maxWidth: 360 }}>
              Startup de tecnologia e inteligência de dados, dedicada à gestão operacional de hotéis, resorts e pousadas. Criada em 2025.
            </p>
          </div>
          <div>
            <span style={{ fontSize: 10, fontWeight: 900, color: "#7aa8ff", letterSpacing: "0.32em", textTransform: "uppercase", display: "block", marginBottom: 18 }}>
              Produto
            </span>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                { l: "Concierge digital", h: "#produto" },
                { l: "Painel da equipe", h: "#produto" },
                { l: "Dashboard com IA", h: "#beneficios" },
                { l: "IA Solucionadora", h: "#beneficios" },
              ].map((i) => (
                <li key={i.l}><a href={i.h} style={{ color: "rgba(255,255,255,0.6)", fontSize: 13, fontWeight: 400, textDecoration: "none" }}>{i.l}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <span style={{ fontSize: 10, fontWeight: 900, color: "#7aa8ff", letterSpacing: "0.32em", textTransform: "uppercase", display: "block", marginBottom: 18 }}>
              Empresa
            </span>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                { l: "Sobre", h: "#sobre" },
                { l: "Metodologia DMAIC", h: "#metodologia" },
                { l: "Pesquisa de mercado", h: "#pesquisa" },
                { l: "Equipe", h: "#equipe" },
              ].map((i) => (
                <li key={i.l}><a href={i.h} style={{ color: "rgba(255,255,255,0.6)", fontSize: 13, fontWeight: 400, textDecoration: "none" }}>{i.l}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <span style={{ fontSize: 10, fontWeight: 900, color: "#7aa8ff", letterSpacing: "0.32em", textTransform: "uppercase", display: "block", marginBottom: 18 }}>
              Contato
            </span>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              <li><a href="mailto:lomienscomercial@gmail.com" style={{ color: "rgba(255,255,255,0.7)", fontSize: 13, fontWeight: 500, textDecoration: "none" }}>lomienscomercial@gmail.com</a></li>
              <li><a href="https://instagram.com/lomiens_da" target="_blank" rel="noopener noreferrer" style={{ color: "rgba(255,255,255,0.7)", fontSize: 13, fontWeight: 500, textDecoration: "none" }}>@lomiens_da</a></li>
            </ul>
          </div>
        </div>
        <div style={{ paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.06)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14 }}>
          <span style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", fontWeight: 500, letterSpacing: "0.05em" }}>
            © {new Date().getFullYear()} LOMIENS · Inteligência operacional para hotelaria
          </span>
          <span style={{ fontSize: 9, fontWeight: 900, color: "rgba(255,255,255,0.3)", letterSpacing: "0.32em", textTransform: "uppercase" }}>
            Sofisticado · Técnico · Confiante
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ============ PLANS / PRICING ============ */

/* Modelo em cards — metáfora de classe de viagem (do básico ao topo) */
const PRICING = {
  tag: "Planos",
  title: "Escolha seu plano",
  subtitle: "Do primeiro sinal de inteligência à operação que aprende sozinha.",
  popular: "Mais escolhido",
  plans: [
    {
      name: "Essencial",
      cabin: "Econômica",
      accent: "#6b8fd6",
      desc: "O hotel começa a perceber o que acontece na operação.",
      modules: [
        { t: "WebApp via QR Code para hóspede", on: true },
        { t: "Painel único para colaboradores", on: true },
        { t: "Dashboard básico de solicitações", on: true },
        { t: "IA diagnóstica", on: false },
        { t: "Múltiplos espaços", on: false },
        { t: "White label do aplicativo", on: false },
        { t: "Relatórios estratégicos", on: false },
        { t: "Multi-unidade", on: false },
      ],
      ideal: "Pousadas e hostels com operação centralizada e poucos pontos de serviço.",
    },
    {
      name: "Standard",
      cabin: "Premium Economy",
      accent: "#2f6bff",
      desc: "Enxerga padrões e toma decisões com clareza.",
      modules: [
        { t: "WebApp via QR Code para hóspede", on: true },
        { t: "Painel único para colaboradores", on: true },
        { t: "Dashboard com indicadores operacionais", on: true },
        { t: "IA diagnóstica de gargalos e padrões", on: true },
        { t: "Até 3 espaços configuráveis", on: true },
        { t: "Consultoria estratégica inclusa", on: true },
        { t: "White label do aplicativo", on: false },
        { t: "Relatórios estratégicos", on: false },
        { t: "Multi-unidade", on: false },
      ],
      ideal: "Hotéis 2 a 3 estrelas com restaurante, piscina ou spa e mais de um ponto de serviço.",
    },
    {
      name: "Pro",
      cabin: "Executiva",
      accent: "#4f9bf5",
      desc: "Domínio total da operação com inteligência estratégica.",
      modules: [
        { t: "WebApp via QR Code para hóspede", on: true },
        { t: "Painel único para colaboradores", on: true },
        { t: "Dashboard com KPIs customizáveis", on: true },
        { t: "IA profunda com diagnóstico e plano de ação", on: true },
        { t: "Espaços ilimitados", on: true },
        { t: "Relatórios estratégicos completos", on: true },
        { t: "White label do aplicativo", on: true },
        { t: "Consultoria estratégica inclusa", on: true },
        { t: "Multi-unidade", on: false },
      ],
      ideal: "Hotéis 4 estrelas, resorts e operações multi-espaço que precisam de inteligência contínua.",
    },
    {
      name: "Premium",
      cabin: "Primeira Classe",
      accent: "#6e8bff",
      desc: "Controle estratégico total. A operação aprende e evolui.",
      modules: [
        { t: "WebApp via QR Code para hóspede", on: true },
        { t: "Painel único para colaboradores", on: true },
        { t: "Dashboard completo + KPIs customizáveis", on: true },
        { t: "IA profunda + melhoria contínua", on: true },
        { t: "Espaços ilimitados", on: true },
        { t: "Relatórios estratégicos avançados", on: true },
        { t: "White label do aplicativo", on: true },
        { t: "Multi-unidade + integrações customizadas", on: true },
        { t: "Consultoria estratégica dedicada", on: true },
      ],
      ideal: "Redes hoteleiras, resorts premium e grandes operações com visão estratégica consolidada.",
    },
  ],
};
const POPULAR = 1; // card em destaque (Standard)

function PlanCard({ plan, popular }) {
  return (
    <article
      className={"plan-card reveal" + (popular ? " is-popular" : "")}
      style={{ "--plan-accent": plan.accent }}
    >
      {popular && <span className="plan-flag">{PRICING.popular}</span>}

      <header className="plan-head">
        <h3 className="plan-name">{plan.name}</h3>
        <p className="plan-desc">{plan.desc}</p>
      </header>

      <span className="plan-rule"></span>

      <span className="plan-modules-label">Módulos</span>
      <ul className="plan-modules">
        {plan.modules.map((m, i) => (
          <li key={i} className={"plan-mod" + (m.on ? "" : " off")}>
            <span className="plan-box">
              {m.on && <i className="fa-solid fa-check"></i>}
            </span>
            <span>{m.t}</span>
          </li>
        ))}
      </ul>

      <div className="plan-ideal">
        <strong>Ideal para</strong>
        {plan.ideal}
      </div>

      <a href="#contato" className="plan-cta">
        Saiba mais
        <i className="fa-solid fa-arrow-up-right-from-square"></i>
      </a>
    </article>
  );
}

function PlansSection() {
  const ref = window.useReveal();
  const P = PRICING;

  return (
    <section ref={ref} className="section" id="planos" style={{ position: "relative", overflow: "hidden" }}>
      {/* Glow de fundo */}
      <div
        style={{
          position: "absolute", top: "0%", left: "50%", transform: "translateX(-50%)",
          width: "60%", height: "55%",
          background: "radial-gradient(ellipse, rgba(47,107,255,0.18), transparent 70%)",
          filter: "blur(80px)", pointerEvents: "none",
        }}
      ></div>

      <div style={{ position: "relative", zIndex: 1, maxWidth: 1280, margin: "0 auto", padding: "0 40px" }}>
        {/* Cabeçalho */}
        <div className="reveal" style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="lh-badge" style={{ justifyContent: "center" }}>
            <span className="dot"></span>
            <span>{P.tag}</span>
          </span>
          <h2 style={{ fontSize: 72, fontWeight: 900, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "14px 0 18px", color: "#fff" }}>
            {P.title}
          </h2>
          <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 18, fontWeight: 300, margin: "0 auto", maxWidth: 560 }}>
            {P.subtitle}
          </p>
        </div>

        {/* Cards de planos */}
        <div className="plans-grid">
          {P.plans.map((plan, c) => (
            <PlanCard key={c} plan={plan} popular={c === POPULAR} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  KeyGains, SystemBenefits, TeamSection, ClosingCTA, FooterV3, PlansSection,
});