import React from "react"; import { motion } from "framer-motion"; import { ArrowUpRight, Camera, Dumbbell, Battery, Tv, Grid2X2, Sparkles } from "lucide-react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button";

const projects = [ { name: "Vision360", status: "Em definição", icon: Camera, objective: "Padronizar registros fotográficos de lojas e ambientes, permitindo acompanhar pontos específicos por unidade, projeto e empresa.", audience: "Operações, trade marketing e gestão de lojas", domain: "vision360.tcheck.com.br", featured: true, }, { name: "Shape tCheck", status: "Protótipo em evolução", icon: Dumbbell, objective: "Comparar suplementos e alimentos por custo-benefício real, como proteína, calorias, preço e indicadores de compra inteligente.", audience: "Consumidores, vendedores e compradores de suplementos", domain: "shape.tcheck.com.br", featured: false, }, { name: "Sam tCheck", status: "V1 em construção", icon: Tv, objective: "Organizar produtos Samsung em tabelas inteligentes para facilitar comparação, preço, categoria e tomada de decisão de venda.", audience: "Vendas Samsung, promotores e consultores", domain: "sam.tcheck.com.br", featured: false, }, { name: "Pilha tCheck", status: "Ideia validada", icon: Battery, objective: "Comparar pilhas AA, AAA e recarregáveis por preço unitário, tipo, capacidade estimada e melhor custo-benefício.", audience: "Consumidores e compradores recorrentes", domain: "pilha.tcheck.com.br", featured: false, }, ];

export default function TCheckLabsHome() { return ( <main className="min-h-screen bg-neutral-950 text-white"> <section className="relative overflow-hidden border-b border-white/10"> <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.14),transparent_34%),radial-gradient(circle_at_bottom_right,rgba(255,255,255,0.08),transparent_30%)]" /> <div className="relative mx-auto max-w-7xl px-6 py-10 md:py-16"> <nav className="mb-16 flex items-center justify-between"> <div className="flex items-center gap-3"> <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-neutral-950 shadow-lg"> <Grid2X2 className="h-5 w-5" /> </div> <div> <p className="text-lg font-bold tracking-tight">tCheck Labs</p> <p className="text-xs text-white/50">labs.tcheck.com.br</p> </div> </div> <Button className="hidden rounded-2xl bg-white px-5 text-neutral-950 hover:bg-white/90 md:inline-flex"> Ver projetos </Button> </nav>

<div className="grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-end">
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/70">
            <Sparkles className="h-4 w-4" />
            Laboratório de produtos digitais práticos
          </div>
          <h1 className="max-w-4xl text-5xl font-black leading-[0.95] tracking-tight md:text-7xl">
            Projetos simples, úteis e com cara de produto grande.
          </h1>
          <p className="mt-6 max-w-2xl text-lg leading-8 text-white/65">
            A tCheck Labs reúne ferramentas criadas para organizar informações,
            comparar produtos, padronizar processos e transformar planilhas em
            decisões mais rápidas.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.15 }}
          className="rounded-[2rem] border border-white/10 bg-white/[0.04] p-5 shadow-2xl backdrop-blur"
        >
          <p className="text-sm font-semibold uppercase tracking-[0.25em] text-white/40">
            Em andamento
          </p>
          <div className="mt-5 grid grid-cols-2 gap-3">
            <Metric value="04" label="Projetos ativos" />
            <Metric value="01" label="Hub central" />
            <Metric value="05" label="Sites planejados" />
            <Metric value="∞" label="Novas ideias" />
          </div>
        </motion.div>
      </div>
    </div>
  </section>

  <section className="mx-auto max-w-7xl px-6 py-12 md:py-16">
    <div className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
      <div>
        <p className="text-sm font-semibold uppercase tracking-[0.25em] text-white/40">
          Produtos
        </p>
        <h2 className="mt-3 text-3xl font-bold tracking-tight md:text-4xl">
          O ecossistema tCheck
        </h2>
      </div>
      <p className="max-w-xl text-white/55">
        Cada card pode virar uma página própria com detalhes, prints, status,
        domínio e botão de acesso quando o projeto estiver publicado.
      </p>
    </div>

    <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
      {projects.map((project, index) => (
        <ProjectCard key={project.name} project={project} index={index} />
      ))}
    </div>
  </section>

  <section className="mx-auto max-w-7xl px-6 pb-14">
    <div className="rounded-[2rem] border border-white/10 bg-white/[0.04] p-6 md:p-8">
      <div className="grid gap-8 md:grid-cols-[0.8fr_1.2fr] md:items-center">
        <div>
          <p className="text-sm font-semibold uppercase tracking-[0.25em] text-white/40">
            Próximo passo
          </p>
          <h3 className="mt-3 text-3xl font-bold">Um portal para apresentar tudo.</h3>
        </div>
        <p className="text-white/60">
          O labs.tcheck.com.br funciona como vitrine oficial: apresenta o que cada
          ferramenta resolve, mostra o estágio de desenvolvimento e direciona o
          usuário para o subdomínio certo quando cada produto estiver no ar.
        </p>
      </div>
    </div>
  </section>
</main>

); }

function Metric({ value, label }) { return ( <div className="rounded-3xl border border-white/10 bg-neutral-950/50 p-4"> <p className="text-3xl font-black">{value}</p> <p className="mt-1 text-sm text-white/45">{label}</p> </div> ); }

function ProjectCard({ project, index }) { const Icon = project.icon;

return ( <motion.article initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.45, delay: index * 0.08 }} className="h-full" > <Card className={group h-full overflow-hidden rounded-[2rem] border-white/10 bg-white/[0.04] text-white shadow-xl transition hover:-translate-y-1 hover:bg-white/[0.07] ${project.featured ? "md:col-span-1" : ""}}> <CardContent className="flex h-full flex-col p-6"> <div className="mb-6 flex items-start justify-between gap-4"> <div className="flex h-13 w-13 items-center justify-center rounded-2xl bg-white text-neutral-950"> <Icon className="h-6 w-6" /> </div> <span className="rounded-full border border-white/10 px-3 py-1 text-xs text-white/55"> {project.status} </span> </div>

<h3 className="text-2xl font-black tracking-tight">{project.name}</h3>
      <p className="mt-4 min-h-[120px] text-sm leading-6 text-white/58">
        {project.objective}
      </p>

      <div className="mt-5 rounded-2xl bg-neutral-950/50 p-4">
        <p className="text-xs uppercase tracking-[0.2em] text-white/35">Público</p>
        <p className="mt-2 text-sm text-white/65">{project.audience}</p>
      </div>

      <div className="mt-auto pt-6">
        <button className="flex w-full items-center justify-between rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white/70 transition group-hover:bg-white group-hover:text-neutral-950">
          <span>{project.domain}</span>
          <ArrowUpRight className="h-4 w-4" />
        </button>
      </div>
    </CardContent>
  </Card>
</motion.article>

); }