import { ShieldCheck, Ruler, Scissors, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

export function LandingContent() {
  return (
    <div className="w-full max-w-4xl mx-auto space-y-12 py-12">
      {/* Hero Section */}
      <section className="text-center space-y-6 px-4">
        <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground">
          Controle total da qualidade em obras metálicas e civis — <br className="hidden md:block" />
          <span className="text-primary">direto no canteiro, em Realidade Aumentada.</span>
        </h2>
        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
          visualize. Meça. inspire confiança.
        </p>
      </section>

      {/* Benefits Section */}
      <section className="grid md:grid-cols-3 gap-6 px-4">
        <div className="rounded-xl border bg-card p-6 space-y-4 hover:border-primary/50 transition-colors">
          <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
            <ShieldCheck className="h-6 w-6 text-primary" />
          </div>
          <h3 className="text-lg font-semibold text-foreground">
            Inspeção por Checklist Digital com Gravação de Voz
          </h3>
          <p className="text-sm text-muted-foreground">
            Elimine planilhas de papel. Faça inspeções de qualidade diretamente no modelo 3D, com aprovação ou reprovação de cada item e anotações por voz — tudo rastreável e auditável.
          </p>
        </div>

        <div className="rounded-xl border bg-card p-6 space-y-4 hover:border-primary/50 transition-colors">
          <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
            <Ruler className="h-6 w-6 text-primary" />
          </div>
          <h3 className="text-lg font-semibold text-foreground">
            Medições Precisas em AR com Snap Inteligente
          </h3>
          <p className="text-sm text-muted-foreground">
            O controlador XR identifica automaticamente vértices, arestas e furos nos modelos IFC. O resultado são medições em milímetros reais, sem depender de trena ou cálculos manuais.
          </p>
        </div>

        <div className="rounded-xl border bg-card p-6 space-y-4 hover:border-primary/50 transition-colors">
          <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
            <Scissors className="h-6 w-6 text-primary" />
          </div>
          <h3 className="text-lg font-semibold text-foreground">
            Cortes de Seção Interativos para Análise Estrutural
          </h3>
          <p className="text-sm text-muted-foreground">
            Visualize o interior de estruturas metálicas com cortes dinâmicos nos eixos X, Y e Z — sem desmontar nada. Ideal para validar projetos complexos antes da montagem.
          </p>
        </div>
      </section>

      {/* Final CTA Section */}
      <section className="px-4 text-center space-y-6">
        <div className="rounded-2xl border border-border bg-gradient-to-b from-card to-muted/20 p-8 md:p-12">
          <p className="text-muted-foreground max-w-2xl mx-auto text-base md:text-lg leading-relaxed">
            Atrasos por erros de medição, retrabalho por falhas de comunicação e perdas por não conformidade são o pesadelo de qualquer gestão de produção metalmecânica ou obra civil. O SteelXR coloca o modelo 3D IFC no canteiro — em AR — para que engenheiros e gestores tomem decisões precisas no momento certo. <span className="font-semibold text-foreground">Menos retrabalho, mais produtividade, entregas dentro do prazo.</span>
          </p>
          <div className="mt-8 flex justify-center gap-4">
            <Button size="lg" className="gap-2">
              Começar Agora
              <ArrowRight className="h-4 w-4" />
            </Button>
            <Button size="lg" variant="outline" className="gap-2">
              Ver Demonstração
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}