/* ============== Reveal-on-scroll wrapper ============== */
const Reveal = ({ children, delay = 0, as: Tag = "div", className = "", ...rest }) => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { setShown(true); obs.unobserve(el); } }),
      { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`reveal ${shown ? "in" : ""} ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
      {...rest}
    >
      {children}
    </Tag>
  );
};

/* ============== NAV ============== */
const Nav = ({ tweaks, setTweak }) => {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="nav-logo">
          <img src="Lunar.code_icone_sem_fundo.png" alt="Lunar Code" style={{ height: 60, width: 60, objectFit: "contain" }} />
          Lunar Code
        </div>
        <div className="nav-links">
          <a href="#sobre">Sobre</a>
          <a href="#dores">Dores</a>
          <a href="#cases">Cases</a>
          <a href="#anatomia">Anatomia</a>
          <a href="#processo">Processo</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#contato" className="nav-cta">Iniciar projeto</a>
      </div>
    </nav>
  );
};

/* ============== ABOUT ============== */
const About = () => (
  <section id="sobre">
    <div className="wrap">
      <Reveal className="section-head">
        <span className="eyebrow">Sobre · 01</span>
        <h2>Software <span className="italic">artesanal</span>, pensado para resolver.</h2>
      </Reveal>
      <div className="about">
        <Reveal as="div" className="about-display" delay={100}>
          Não vendemos licenças genéricas construímos sistemas <span className="italic">sob medida</span> para problemas reais que sua empresa já vive todos os dias.
        </Reveal>
        <Reveal as="div" className="about-side" delay={200}>
          <p>
            A Lunar Code nasce da convicção de que toda empresa carrega um conjunto de processos únicos e que software genérico raramente dá conta deles. Atendemos times que ainda dependem de planilhas, controles manuais e ferramentas que não conversam entre si.
          </p>
          <p>
            Hoje temos dois sistemas em produção, em setores muito distintos: <b style={{ color: "var(--text)" }}>telecomunicações</b> e <b style={{ color: "var(--text)" }}>advocacia</b>. A linha que conecta os dois é simples: olhamos para o problema com profundidade, e entregamos um software que faz o time trabalhar melhor.
          </p>
          <div style={{ display: "flex", gap: 24, marginTop: 8, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 32 }}>Discovery</div>
              <div style={{ fontSize: 12, color: "var(--text-faint)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Entendemos o problema</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 32 }}>Build</div>
              <div style={{ fontSize: 12, color: "var(--text-faint)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Construímos com ciclo curto</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 32 }}>Operar</div>
              <div style={{ fontSize: 12, color: "var(--text-faint)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Mantemos vivo no longo prazo</div>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

/* ============== DORES ============== */
const Dores = () => {
  const dores = [
    { icon: <Icons.Clock />, t: "Tempo perdido em processo manual", d: "Planilhas que cada hora alguém quebra, retrabalho diário, pessoas duplicando tarefas que um sistema poderia resolver em segundos." },
    { icon: <Icons.Layers />, t: "Ferramentas que não conversam", d: "CRM aqui, planilha ali, WhatsApp no meio. Os dados existem mas espalhados, e ninguém consegue ver o todo." },
    { icon: <Icons.Eye />, t: "Falta de visibilidade", d: "Sem dashboards, indicadores, histórico. Decisões importantes acabam tomadas no “acho que sim”." },
    { icon: <Icons.Shield />, t: "Risco operacional crescendo", d: "Erros humanos, perda de informação, fraudes invisíveis. O custo aparece tarde e caro." },
    { icon: <Icons.Cpu />, t: "Sistema antigo que ninguém entende", d: "Um software comprado há 10 anos, que ninguém mais dá suporte, e o time já desenvolveu “gambiarras” para cada limitação." },
    { icon: <Icons.Users />, t: "Equipe sem ferramentas", d: "Bons profissionais perdendo horas em tarefas mecânicas quando deveriam estar focados no que ninguém mais consegue fazer." },
  ];
  return (
    <section id="dores">
      <div className="wrap">
        <Reveal className="section-head">
          <span className="eyebrow">Dores · 02</span>
          <h2>As dores que <span className="italic">resolvemos</span>.</h2>
          <p className="lead">Você já viveu pelo menos três destas. A boa notícia é que existe solução e ela cabe no seu orçamento, no seu prazo, e no seu time.</p>
        </Reveal>
        <Reveal>
          <div className="dores-grid">
            {dores.map((d, i) => (
              <div className="dor" key={i}>
                <div className="dor-icon">{d.icon}</div>
                <span className="dor-num">0{i + 1}</span>
                <h3>{d.t}</h3>
                <p>{d.d}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ============== CASES ============== */
const Cases = () => (
  <section id="cases" style={{ background: "var(--bg-2)" }}>
    <div className="wrap">
      <Reveal className="section-head">
        <span className="eyebrow">Cases · 03</span>
        <h2>Sistemas em <span className="italic">produção</span>.</h2>
        <p className="lead">Dois mercados diferentes, mesmo princípio: software desenhado para o problema real do cliente.</p>
      </Reveal>

      <div className="cases">
        <Reveal>
          <div className="case">
            <div className="case-info">
              <span className="case-tag">
                <span className="pulse" />
                Telecom · Em operação
              </span>
              <div className="case-name">Sentinela</div>
              <p>Plataforma de monitoramento e segurança para infraestrutura de Vivo e Claro. Previne roubo de cabos em poste, organiza vistorias de sites, gerencia equipes em campo e centraliza inteligência sobre suspeitos e ocorrências.</p>
              <div className="case-feats">
                <span className="case-feat">Vistorias de site</span>
                <span className="case-feat">Gestão de equipes</span>
                <span className="case-feat">Banco de suspeitos</span>
                <span className="case-feat">Registro de passagens</span>
                <span className="case-feat">Dashboards gerenciais</span>
              </div>
              <a href="#contato" className="btn btn-ghost" style={{ alignSelf: "flex-start", marginTop: 12 }}>
                Conversar sobre um projeto parecido
                <Icons.Arrow className="arrow" size={16} />
              </a>
            </div>
            <div className="case-mock">
              <SentinelaSlot />
            </div>
          </div>
        </Reveal>

        <Reveal delay={100}>
          <div className="case case-alt">
            <div className="case-info">
              <span className="case-tag">
                <span className="pulse" />
                Advocacia · Em operação
              </span>
              <div className="case-name">Lumine</div>
              <p>Sistema de gestão completo para escritórios de advocacia. O advogado tem em um só lugar clientes, casos, documentos, financeiro, prazos e agenda com integração nativa ao Google Calendar e geração de documentos em poucos cliques.</p>
              <div className="case-feats">
                <span className="case-feat">Gestão de clientes</span>
                <span className="case-feat">Casos & prazos</span>
                <span className="case-feat">Documentos</span>
                <span className="case-feat">Financeiro</span>
                <span className="case-feat">Google Calendar</span>
                <span className="case-feat">Geração de documentos</span>
              </div>
              <a href="#contato" className="btn btn-ghost" style={{ alignSelf: "flex-start", marginTop: 12 }}>
                Conversar sobre um projeto parecido
                <Icons.Arrow className="arrow" size={16} />
              </a>
            </div>
            <div className="case-mock">
              <LumineSlot />
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

/* ============== PROCESSO ============== */
const Processo = () => {
  const steps = [
    { n: "01", t: "Imersão", d: "Mergulhamos no seu processo. Conversamos com quem usa, vemos as planilhas, mapeamos as exceções. Só depois desenhamos." },
    { n: "02", t: "Protótipo", d: "Em duas semanas você vê uma versão clicável do sistema. Validamos com o time antes de uma linha de código de produção." },
    { n: "03", t: "Construção", d: "Entregas semanais, software funcionando. Você acompanha o avanço, dá feedback contínuo, ajusta rota cedo." },
    { n: "04", t: "Operação", d: "Subimos para produção, treinamos o time e ficamos por perto. Software vivo precisa de gente cuidando." },
  ];
  return (
    <section id="processo">
      <div className="wrap">
        <Reveal className="section-head">
          <span className="eyebrow">Processo · 05</span>
          <h2>Como <span className="italic">trabalhamos</span>.</h2>
          <p className="lead">Quatro etapas, transparência absoluta, ciclos curtos. Você nunca fica seis meses sem ver nada andar.</p>
        </Reveal>
        <Reveal>
          <div className="process-steps">
            {steps.map((s, i) => (
              <RevealStep key={s.n} step={s} idx={i} />
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};
const RevealStep = ({ step, idx }) => {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setSeen(true); obs.unobserve(el); } },
      { threshold: 0.3 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} className={`step ${seen ? "in" : ""}`} style={{ transitionDelay: `${idx * 120}ms` }}>
      <span className="step-num">{step.n}</span>
      <h3>{step.t}</h3>
      <p>{step.d}</p>
    </div>
  );
};

/* ============== TIPOS DE SISTEMAS ============== */
const Tipos = () => {
  const tipos = [
    { icon: <Icons.Box />, t: "ERPs internos", d: "Centralize operação, estoque, ordens, equipes substitua aquele ERP genérico que ninguém aguenta mais." },
    { icon: <Icons.Chart />, t: "Dashboards gerenciais", d: "Indicadores em tempo real, integrações com seus sistemas existentes, decisão baseada em dado real." },
    { icon: <Icons.Shield />, t: "Sistemas de segurança", d: "Monitoramento, alertas, gestão de incidentes, controle de campo como o Sentinela." },
    { icon: <Icons.File />, t: "Gestão documental", d: "Geração, organização, busca e auditoria de documentos com fluxos de aprovação." },
    { icon: <Icons.Bolt />, t: "Automação de processos", d: "Tire a planilha do caminho. Robotize o que é repetitivo e devolva tempo ao seu time." },
    { icon: <Icons.Users />, t: "CRMs sob medida", d: "Pipeline desenhado para o jeito que seu time vende, não para o jeito que um SaaS genérico quer que você venda." },
  ];
  return (
    <section id="tipos">
      <div className="wrap">
        <Reveal className="section-head">
          <span className="eyebrow">Capacidades · 06</span>
          <h2>O que <span className="italic">construímos</span>.</h2>
          <p className="lead">Cada projeto é único, mas estes são os tipos de sistema que mais resolvem dor nas empresas que atendemos.</p>
        </Reveal>
        <Reveal>
          <div className="tipos-grid">
            {tipos.map((t, i) => (
              <TipoCard key={i} {...t} />
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};
const TipoCard = ({ icon, t, d }) => {
  const ref = React.useRef(null);
  return (
    <div
      ref={ref}
      className="tipo"
      onMouseMove={(e) => {
        const r = ref.current.getBoundingClientRect();
        ref.current.style.setProperty("--mx", `${e.clientX - r.left}px`);
        ref.current.style.setProperty("--my", `${e.clientY - r.top}px`);
      }}
    >
      <div className="tipo-icon">{icon}</div>
      <h3>{t}</h3>
      <p>{d}</p>
    </div>
  );
};

/* ============== STACK ============== */
const StackVis = () => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf, last = performance.now();
    const tick = (now) => { setT((p) => p + (now - last) / 1000); last = now; raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  const items = ["React", "Next.js", "Node", "Python", "PostgreSQL", "AWS", "Docker", "Tailwind"];
  return (
    <div className="stack-vis">
      <svg viewBox="-200 -200 400 400" width="100%" height="100%">
        <defs>
          <radialGradient id="coreGrad" cx="0.5" cy="0.5">
            <stop offset="0" stopColor="#8aafff" />
            <stop offset="1" stopColor="rgba(91,141,239,0)" />
          </radialGradient>
        </defs>
        <circle cx="0" cy="0" r="60" fill="url(#coreGrad)" opacity="0.4" />
        <circle cx="0" cy="0" r="36" fill="rgba(138, 175, 255, 0.15)" stroke="rgba(138, 175, 255, 0.4)" />
        <text x="0" y="4" textAnchor="middle" fill="#8aafff" fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="2">CORE</text>
        {[80, 130, 180].map((r, i) => (
          <circle key={r} cx="0" cy="0" r={r} fill="none" stroke="rgba(138, 175, 255, 0.12)" strokeDasharray={i % 2 ? "2 6" : "0"} />
        ))}
        {items.map((tech, i) => {
          const angle = t * (i % 2 === 0 ? 0.15 : -0.1) + (i / items.length) * Math.PI * 2;
          const r = i % 3 === 0 ? 80 : i % 3 === 1 ? 130 : 180;
          const x = Math.cos(angle) * r;
          const y = Math.sin(angle) * r;
          return (
            <g key={tech} transform={`translate(${x},${y})`}>
              <rect x="-30" y="-12" width="60" height="24" rx="12" fill="rgba(10, 18, 36, 0.9)" stroke="rgba(138, 175, 255, 0.3)" />
              <text x="0" y="4" textAnchor="middle" fill="#e8ecf5" fontFamily="JetBrains Mono, monospace" fontSize="10">{tech}</text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};
const Stack = () => {
  const groups = [
    { l: "Frontend", chips: ["React", "Next.js", "TypeScript", "Tailwind", "Framer Motion"] },
    { l: "Backend", chips: ["Node.js", "Python", "PostgreSQL", "Redis", "Prisma"] },
    { l: "Infra", chips: ["AWS", "Docker", "GitHub Actions", "Cloudflare"] },
    { l: "Integrações", chips: ["Google Calendar", "WhatsApp API", "Stripe", "Webhooks"] },
  ];
  return (
    <section id="stack">
      <div className="wrap">
        <Reveal className="section-head">
          <span className="eyebrow">Stack · 07</span>
          <h2>Tecnologias <span className="italic">modernas</span>, escolha consciente.</h2>
          <p className="lead">Usamos um conjunto enxuto de ferramentas maduras para entregar rápido hoje e manter fácil amanhã.</p>
        </Reveal>
        <div className="stack-display">
          <Reveal as="div" style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            {groups.map((g) => (
              <div key={g.l}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-faint)", marginBottom: 12 }}>
                  {g.l}
                </div>
                <div className="stack-list">
                  {g.chips.map((c) => <span className="stack-chip" key={c}>{c}</span>)}
                </div>
              </div>
            ))}
          </Reveal>
          <Reveal delay={150}>
            <StackVis />
          </Reveal>
        </div>
      </div>
    </section>
  );
};

/* ============== FAQ ============== */
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Quanto tempo leva um projeto?", a: "Depende do escopo. Um MVP enxuto costuma ficar pronto em 6 a 10 semanas. Sistemas maiores são entregues por módulos, com versões em produção a cada 3-4 semanas." },
    { q: "Vocês trabalham com contrato fechado ou por hora?", a: "Os dois modelos. Para escopos bem definidos preferimos contrato fechado. Para evoluções contínuas, manutenção e times integrados, trabalhamos com squad mensal." },
    { q: "O código fica com a minha empresa?", a: "Sim 100% do código-fonte é seu. Repositório no GitHub da sua organização, propriedade intelectual transferida em contrato. Sem amarras." },
    { q: "Vocês cuidam da infra também?", a: "Sim. Cuidamos do provisionamento na AWS (ou cloud de sua preferência), CI/CD, monitoramento, backups e suporte. Se preferir, integramos com seu time de TI." },
    { q: "E depois que o sistema sobe?", a: "Mantemos um contrato de operação com SLAs claros: monitoramento contínuo, correções, suporte ao usuário e evoluções. Software vivo precisa de gente cuidando." },
    { q: "Atendem fora de Belo Horizonte?", a: "Atendemos remotamente em todo o Brasil. Para projetos que demandam presença, vamos a campo nas etapas-chave (discovery, treinamento, go-live)." },
  ];
  return (
    <section id="faq">
      <div className="wrap">
        <Reveal className="section-head">
          <span className="eyebrow">FAQ · 08</span>
          <h2>Perguntas <span className="italic">frequentes</span>.</h2>
        </Reveal>
        <Reveal>
          <div className="faq-list">
            {items.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{it.q}</span>
                  <span className="plus" />
                </div>
                <div className="faq-a"><p>{it.a}</p></div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ============== CONTATO ============== */
const Contato = () => {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };
  return (
    <section id="contato" className="contato">
      <div className="wrap contato-inner">
        <Reveal as="div" className="contato-info">
          <span className="eyebrow">Contato · 09</span>
          <div className="contato-title">
            Vamos
            <br />
            <span className="italic">construir</span> juntos.
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.55, maxWidth: 440 }}>
            Conte o que você quer resolver. Em até 48h respondemos com uma
            proposta de imersão sem custo, sem compromisso.
          </p>
          <div className="contato-points">
            <div className="contato-point">
              <Icons.Mail />
              <div>
                <span className="label">Email</span>
                <span className="val">lunar.code.pro@gmail.com</span>
              </div>
            </div>
            <div className="contato-point">
              <Icons.Phone />
              <div>
                <span className="label">WhatsApp</span>
                <span className="val">+55 (31) 9 8335-1923</span>
              </div>
            </div>
            <div className="contato-point">
              <Icons.Pin />
              <div>
                <span className="label">Base</span>
                <span className="val">
                  Belo Horizonte · Brasil · Atendemos remotamente
                </span>
              </div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={150}>
          <form className="form" onSubmit={submit}>
            <div className="field-row">
              <div className="field">
                <label>Nome</label>
                <input type="text" placeholder="Seu nome" required />
              </div>
              <div className="field">
                <label>Empresa</label>
                <input type="text" placeholder="Onde você trabalha" />
              </div>
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" placeholder="voce@empresa.com" required />
            </div>
            <div className="field">
              <label>Tipo de projeto</label>
              <select required>
                <option>Sistema interno do zero</option>
                <option>Evolução / refactor de sistema existente</option>
                <option>Automação de processo</option>
                <option>Dashboard / BI</option>
                <option>Ainda não sei quero entender</option>
              </select>
            </div>
            <div className="field">
              <label>Conte o que você quer resolver</label>
              <textarea
                placeholder="Descreva a dor, os processos atuais, quem usa..."
                required
              />
            </div>
            <button
              type="submit"
              className={`form-submit ${sent ? "sent" : ""}`}
            >
              {sent ? (
                <>
                  <Icons.Check size={18} /> Mensagem enviada
                </>
              ) : (
                <>
                  Enviar mensagem <Icons.Arrow size={18} />
                </>
              )}
            </button>
          </form>
        </Reveal>
      </div>
    </section>
  );
};

/* ============== FOOTER ============== */
const Footer = () => (
  <footer>
    <div className="wrap">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="nav-logo">
            <img src="Lunar.code_logo_sem_fundo.png" alt="Lunar Code" style={{ height: 100, objectFit: "contain" }} />
          </div>
          <p>
            Fábrica de software focada em resolver problemas internos com
            sistemas sob medida. Sediada em Belo Horizonte, atende todo o
            Brasil.
          </p>
        </div>
        <div className="footer-col">
          <h4>Site</h4>
          <a href="#sobre">Sobre</a>
          <a href="#dores">Dores</a>
          <a href="#cases">Cases</a>
          <a href="#processo">Processo</a>
        </div>
        <div className="footer-col">
          <h4>Produtos</h4>
          <a href="#cases">Sentinela</a>
          <a href="#cases">Lumine</a>
          <a href="#contato">Sob medida</a>
        </div>
        <div className="footer-col">
          <h4>Contato</h4>
          <a href="mailto:lunar.code.pro@gmail.com">lunar.code.pro@gmail.com</a>
          <a href="#">LinkedIn</a>
          <a href="#">Instagram</a>
        </div>
      </div>

      <div className="footer-mega">Lunar.</div>

      <div className="footer-bottom">
        <span>© 2026 Lunar Code Todos os direitos reservados.</span>
        <span>Feito em Belo Horizonte · Brasil</span>
      </div>
    </div>
  </footer>
);

window.Nav = Nav;
window.About = About;
window.Dores = Dores;
window.Cases = Cases;
window.Processo = Processo;
window.Tipos = Tipos;
window.Stack = Stack;
window.FAQ = FAQ;
window.Contato = Contato;
window.Footer = Footer;