export default function SiteApresentacao() {
  const sistemas = [
    {
      nome: 'e-SUS-Facility',
      descricao:
        'Plataforma estratégica para gestão da saúde pública, com relatórios nominais, indicadores em tempo real e apoio à tomada de decisão.',
      destaque: 'Gestão em tempo real',
    },
    {
      nome: 'PEP - Prontuário Eletrônico do Paciente',
      descricao:
        'Sistema hospitalar completo para triagem, atendimento, prescrições, exames, evolução clínica e organização assistencial.',
      destaque: 'Hospital mais organizado',
    },
    {
      nome: 'e-Frotas',
      descricao:
        'Controle completo de veículos, motoristas, abastecimentos, manutenções, viagens, pneus e ordens de serviço.',
      destaque: 'Controle total da frota',
    },
    {
      nome: 'Sistemas sob medida',
      descricao:
        'Desenvolvimento de soluções personalizadas para prefeituras, empresas e instituições, conforme cada necessidade.',
      destaque: 'Projeto personalizado',
    },
  ];

  const servicosTopo = [
    'Levantamento topográfico planialtimétrico',
    'Georreferenciamento de imóveis rurais',
    'Regularização de imóveis urbanos e rurais',
    'Memorial descritivo e planta técnica',
    'Desmembramento, remembramento e retificação',
    'Apoio técnico para usucapião e inventário',
  ];

  const diferenciais = [
    'Atendimento técnico e especializado',
    'Soluções modernas e seguras',
    'Experiência com gestão pública',
    'Precisão técnica em campo e escritório',
    'Apresentação profissional dos serviços',
    'Projetos adaptados ao cliente',
  ];

  return (
    <div className="min-h-screen bg-[#07111f] text-white selection:bg-cyan-400 selection:text-slate-950">
      <style>{`
        html { scroll-behavior: smooth; }
        body { background: #07111f; }

        .glass {
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.12);
          box-shadow: 0 20px 50px rgba(0,0,0,0.25);
          backdrop-filter: blur(14px);
        }

        .hero-grid {
          background-image:
            linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
          background-size: 38px 38px;
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.2));
        }

        .shine {
          position: relative;
          overflow: hidden;
        }

        .shine::after {
          content: '';
          position: absolute;
          top: -120%;
          left: -120%;
          width: 120%;
          height: 260%;
          transform: rotate(25deg);
          background: linear-gradient(
            to right,
            transparent 0%,
            rgba(255,255,255,0.04) 35%,
            rgba(255,255,255,0.18) 50%,
            rgba(255,255,255,0.04) 65%,
            transparent 100%
          );
          transition: 0.8s ease;
        }

        .shine:hover::after {
          left: 130%;
        }

        .title-gradient {
          background: linear-gradient(90deg, #7dd3fc 0%, #67e8f9 35%, #86efac 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        .soft-border {
          border: 1px solid rgba(125, 211, 252, 0.16);
        }

        .section-title::before {
          content: '';
          display: block;
          width: 70px;
          height: 4px;
          border-radius: 999px;
          margin-bottom: 14px;
          background: linear-gradient(90deg, #22d3ee, #34d399);
        }

        .card-hover {
          transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
        }

        .card-hover:hover {
          transform: translateY(-6px);
          border-color: rgba(125,211,252,0.35);
          box-shadow: 0 24px 60px rgba(8, 145, 178, 0.18);
        }

        .btn-main {
          background: linear-gradient(135deg, #22d3ee, #34d399);
          color: #04111d;
          font-weight: 800;
          box-shadow: 0 16px 40px rgba(34, 211, 238, 0.28);
        }

        .btn-main:hover {
          transform: translateY(-2px);
          box-shadow: 0 20px 44px rgba(34, 211, 238, 0.34);
        }

        .btn-outline {
          border: 1px solid rgba(255,255,255,0.14);
          background: rgba(255,255,255,0.04);
        }

        .btn-outline:hover {
          background: rgba(255,255,255,0.09);
          transform: translateY(-2px);
        }

        .number-badge {
          width: 52px;
          height: 52px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 18px;
          font-size: 1.15rem;
          font-weight: 900;
          background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(52,211,153,0.18));
          border: 1px solid rgba(255,255,255,0.1);
        }
      `}</style>

      <section className="relative overflow-hidden border-b border-white/10">
        <div className="hero-grid absolute inset-0" />
        <div className="absolute -top-24 left-[-80px] h-72 w-72 rounded-full bg-cyan-500/20 blur-3xl" />
        <div className="absolute top-16 right-[-40px] h-80 w-80 rounded-full bg-emerald-500/20 blur-3xl" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.14),transparent_28%),radial-gradient(circle_at_bottom_right,rgba(16,185,129,0.14),transparent_28%)]" />

        <div className="relative mx-auto max-w-7xl px-6 py-8 lg:px-10">
          <header className="flex flex-col gap-4 rounded-[28px] border border-white/10 bg-white/5 px-5 py-4 backdrop-blur md:flex-row md:items-center md:justify-between">
            <div>
              <div className="text-xl font-black tracking-wide">GEOTEC <span className="text-cyan-300">|</span> TECNOLOGIA & TOPOGRAFIA</div>
              <div className="mt-1 text-sm text-slate-300">Soluções digitais, topografia e regularização imobiliária</div>
            </div>
            <nav className="flex flex-wrap gap-2 text-sm font-medium text-slate-200">
              <a href="#inicio" className="rounded-full px-4 py-2 transition hover:bg-white/10">Início</a>
              <a href="#tecnologia" className="rounded-full px-4 py-2 transition hover:bg-white/10">Tecnologia</a>
              <a href="#topografia" className="rounded-full px-4 py-2 transition hover:bg-white/10">Topografia</a>
              <a href="#diferenciais" className="rounded-full px-4 py-2 transition hover:bg-white/10">Diferenciais</a>
              <a href="#contato" className="rounded-full px-4 py-2 transition hover:bg-white/10">Contato</a>
            </nav>
          </header>
        </div>

        <div id="inicio" className="relative mx-auto max-w-7xl px-6 pb-20 pt-8 lg:px-10 lg:pb-28 lg:pt-10">
          <div className="grid items-center gap-10 lg:grid-cols-[1.1fr,0.9fr]">
            <div>
              <div className="mb-5 inline-flex rounded-full border border-cyan-300/20 bg-cyan-300/10 px-4 py-2 text-sm font-semibold text-cyan-200">
                Dois ramos. Uma apresentação forte e profissional.
              </div>
              <h1 className="max-w-4xl text-4xl font-black leading-tight sm:text-5xl lg:text-6xl">
                Seu site para <span className="title-gradient">tecnologia</span>, <br />
                <span className="title-gradient">topografia</span> e regularização de imóveis
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
                Uma vitrine moderna para apresentar seus sistemas, destacar seus serviços técnicos e transmitir credibilidade para prefeituras, empresas, proprietários e parceiros.
              </p>

              <div className="mt-8 flex flex-wrap gap-4">
                <a href="#tecnologia" className="btn-main rounded-2xl px-6 py-3 transition">
                  Ver sistemas
                </a>
                <a href="#topografia" className="btn-outline rounded-2xl px-6 py-3 font-bold text-white transition">
                  Ver topografia
                </a>
              </div>

              <div className="mt-10 grid max-w-3xl gap-4 sm:grid-cols-3">
                <div className="glass rounded-3xl p-5">
                  <div className="text-3xl font-black text-cyan-300">02</div>
                  <div className="mt-2 text-sm text-slate-300">Áreas estratégicas de atuação</div>
                </div>
                <div className="glass rounded-3xl p-5">
                  <div className="text-3xl font-black text-cyan-300">100%</div>
                  <div className="mt-2 text-sm text-slate-300">Foco em apresentação profissional</div>
                </div>
                <div className="glass rounded-3xl p-5">
                  <div className="text-3xl font-black text-cyan-300">+Valor</div>
                  <div className="mt-2 text-sm text-slate-300">Imagem forte para conquistar clientes</div>
                </div>
              </div>
            </div>

            <div className="grid gap-5 sm:grid-cols-2">
              <div className="glass shine card-hover rounded-[30px] p-6">
                <div className="mb-4 flex items-center justify-between">
                  <span className="number-badge">01</span>
                  <span className="rounded-full bg-cyan-400/10 px-3 py-1 text-xs font-bold uppercase tracking-[0.2em] text-cyan-200">Tecnologia</span>
                </div>
                <h3 className="text-2xl font-black">Sistemas inteligentes</h3>
                <p className="mt-3 leading-7 text-slate-300">
                  Apresente plataformas modernas para saúde, gestão pública, contratos, frotas e rotinas administrativas.
                </p>
              </div>

              <div className="glass shine card-hover rounded-[30px] p-6 sm:mt-10">
                <div className="mb-4 flex items-center justify-between">
                  <span className="number-badge">02</span>
                  <span className="rounded-full bg-emerald-400/10 px-3 py-1 text-xs font-bold uppercase tracking-[0.2em] text-emerald-200">Topografia</span>
                </div>
                <h3 className="text-2xl font-black">Precisão técnica</h3>
                <p className="mt-3 leading-7 text-slate-300">
                  Mostre seus trabalhos de campo, georreferenciamento, mapas, plantas e regularização de imóveis com autoridade.
                </p>
              </div>

              <div className="glass shine card-hover rounded-[30px] p-6">
                <div className="mb-4 flex items-center justify-between">
                  <span className="number-badge">03</span>
                  <span className="rounded-full bg-white/10 px-3 py-1 text-xs font-bold uppercase tracking-[0.2em] text-white/80">Imagem</span>
                </div>
                <h3 className="text-2xl font-black">Apresentação premium</h3>
                <p className="mt-3 leading-7 text-slate-300">
                  Layout bonito, elegante e profissional para transmitir confiança logo no primeiro acesso.
                </p>
              </div>

              <div className="glass shine card-hover rounded-[30px] p-6 sm:mt-10">
                <div className="mb-4 flex items-center justify-between">
                  <span className="number-badge">04</span>
                  <span className="rounded-full bg-white/10 px-3 py-1 text-xs font-bold uppercase tracking-[0.2em] text-white/80">Resultados</span>
                </div>
                <h3 className="text-2xl font-black">Mais credibilidade</h3>
                <p className="mt-3 leading-7 text-slate-300">
                  Um site bem apresentado valoriza sua marca, seus serviços e sua autoridade no mercado.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="tecnologia" className="mx-auto max-w-7xl px-6 py-20 lg:px-10">
        <div className="section-title max-w-3xl">
          <span className="rounded-full bg-cyan-400/10 px-4 py-2 text-sm font-bold uppercase tracking-[0.22em] text-cyan-200">
            Ramo 01
          </span>
          <h2 className="mt-5 text-3xl font-black sm:text-4xl">Tecnologia e desenvolvimento de sistemas</h2>
          <p className="mt-4 text-lg leading-8 text-slate-300">
            Espaço ideal para apresentar seus softwares, módulos, diferenciais, benefícios para os clientes e os problemas que suas soluções resolvem.
          </p>
        </div>

        <div className="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {sistemas.map((item) => (
            <article key={item.nome} className="card-hover rounded-[30px] border border-white/10 bg-[#0a1729] p-6 shadow-2xl">
              <div className="mb-5 inline-flex rounded-2xl bg-cyan-400/10 px-3 py-2 text-xs font-black uppercase tracking-[0.18em] text-cyan-200">
                {item.destaque}
              </div>
              <h3 className="text-xl font-black leading-8">{item.nome}</h3>
              <p className="mt-4 text-sm leading-7 text-slate-300">{item.descricao}</p>
              <div className="mt-6 h-px bg-gradient-to-r from-cyan-400/30 to-transparent" />
              <button className="mt-6 rounded-2xl border border-cyan-300/20 bg-cyan-300/10 px-4 py-2 text-sm font-bold text-cyan-200 transition hover:bg-cyan-300/15">
                Saiba mais
              </button>
            </article>
          ))}
        </div>
      </section>

      <section id="topografia" className="border-y border-white/10 bg-[#091523]">
        <div className="mx-auto max-w-7xl px-6 py-20 lg:px-10">
          <div className="grid gap-10 lg:grid-cols-[1fr,0.95fr]">
            <div>
              <div className="section-title max-w-3xl">
                <span className="rounded-full bg-emerald-400/10 px-4 py-2 text-sm font-bold uppercase tracking-[0.22em] text-emerald-200">
                  Ramo 02
                </span>
                <h2 className="mt-5 text-3xl font-black sm:text-4xl">Topografia e regularização de imóveis</h2>
                <p className="mt-4 text-lg leading-8 text-slate-300">
                  Uma área feita para destacar sua experiência em campo, seus serviços técnicos, seus trabalhos executados e sua atuação em regularização imobiliária.
                </p>
              </div>

              <div className="mt-10 grid gap-4 sm:grid-cols-2">
                {servicosTopo.map((item, index) => (
                  <div key={item} className="card-hover rounded-[26px] border border-white/10 bg-white/5 p-5 shadow-xl">
                    <div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-emerald-400/10 font-black text-emerald-200">
                      {index + 1}
                    </div>
                    <div className="text-base font-semibold leading-7 text-slate-100">{item}</div>
                  </div>
                ))}
              </div>
            </div>

            <aside className="glass rounded-[34px] p-8">
              <div className="rounded-full bg-white/10 px-4 py-2 text-sm font-bold uppercase tracking-[0.2em] text-white/80 w-fit">
                Destaque profissional
              </div>
              <h3 className="mt-5 text-2xl font-black leading-9">Mostre credibilidade, precisão e segurança jurídica</h3>
              <p className="mt-5 leading-8 text-slate-300">
                Nesta área você pode inserir fotos de levantamentos, mapas, croquis, plantas, memoriais descritivos, certificações, regularizações concluídas e serviços prestados.
              </p>
              <p className="mt-4 leading-8 text-slate-300">
                O objetivo é fortalecer sua imagem profissional e deixar claro que você atua com seriedade, técnica e responsabilidade documental.
              </p>

              <div className="mt-8 grid gap-4">
                <div className="rounded-3xl border border-white/10 bg-white/5 p-5">
                  <div className="text-sm font-bold uppercase tracking-[0.15em] text-emerald-200">Campo</div>
                  <div className="mt-2 text-slate-300">Execução técnica com equipamentos e precisão nas medições.</div>
                </div>
                <div className="rounded-3xl border border-white/10 bg-white/5 p-5">
                  <div className="text-sm font-bold uppercase tracking-[0.15em] text-cyan-200">Documentação</div>
                  <div className="mt-2 text-slate-300">Plantas, memoriais, georreferenciamento e suporte à regularização.</div>
                </div>
                <div className="rounded-3xl border border-white/10 bg-white/5 p-5">
                  <div className="text-sm font-bold uppercase tracking-[0.15em] text-white/80">Confiança</div>
                  <div className="mt-2 text-slate-300">Uma apresentação que transmite segurança para clientes e parceiros.</div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <section id="diferenciais" className="mx-auto max-w-7xl px-6 py-20 lg:px-10">
        <div className="section-title max-w-3xl">
          <span className="rounded-full bg-white/10 px-4 py-2 text-sm font-bold uppercase tracking-[0.22em] text-white/80">
            Diferenciais
          </span>
          <h2 className="mt-5 text-3xl font-black sm:text-4xl">O que fortalece sua apresentação</h2>
          <p className="mt-4 text-lg leading-8 text-slate-300">
            Um site bem construído precisa unir imagem profissional, clareza na comunicação e uma estrutura bonita em todos os detalhes.
          </p>
        </div>

        <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
          {diferenciais.map((item) => (
            <div key={item} className="card-hover rounded-[28px] border border-white/10 bg-[#0a1729] p-6 shadow-xl">
              <div className="mb-4 h-1.5 w-16 rounded-full bg-gradient-to-r from-cyan-400 to-emerald-400" />
              <h3 className="text-lg font-black">{item}</h3>
            </div>
          ))}
        </div>
      </section>

      <section id="contato" className="mx-auto max-w-7xl px-6 pb-24 lg:px-10">
        <div className="relative overflow-hidden rounded-[38px] border border-cyan-300/15 bg-gradient-to-br from-cyan-400/10 via-sky-400/5 to-emerald-400/10 p-8 shadow-2xl lg:p-12">
          <div className="absolute -right-16 -top-16 h-52 w-52 rounded-full bg-cyan-400/10 blur-3xl" />
          <div className="absolute -bottom-20 left-0 h-52 w-52 rounded-full bg-emerald-400/10 blur-3xl" />

          <div className="relative grid gap-10 lg:grid-cols-[1.15fr,0.85fr] lg:items-center">
            <div>
              <span className="rounded-full bg-white/10 px-4 py-2 text-sm font-bold uppercase tracking-[0.22em] text-cyan-200">
                Contato
              </span>
              <h2 className="mt-5 text-3xl font-black sm:text-4xl lg:text-5xl">
                Vamos transformar sua atuação em uma presença digital de alto nível
              </h2>
              <p className="mt-5 max-w-2xl text-lg leading-8 text-slate-300">
                Apresente seus sistemas, seus serviços topográficos e sua experiência em regularização imobiliária com um visual marcante, elegante e profissional.
              </p>
            </div>

            <div className="glass rounded-[32px] p-7">
              <div className="space-y-4 text-slate-200">
                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3"><strong className="text-white">Telefone:</strong> (colocar aqui)</div>
                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3"><strong className="text-white">E-mail:</strong> (colocar aqui)</div>
                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3"><strong className="text-white">Instagram:</strong> (colocar aqui)</div>
                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3"><strong className="text-white">Local de atuação:</strong> (colocar aqui)</div>
              </div>

              <div className="mt-6 flex flex-wrap gap-3">
                <a href="#" className="btn-main rounded-2xl px-5 py-3 transition">Solicitar atendimento</a>
                <a href="#inicio" className="btn-outline rounded-2xl px-5 py-3 font-bold text-white transition">Voltar ao topo</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}