import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import {
  Zap,
  ShieldCheck,
  Clock,
  Phone,
  Menu,
  CheckCircle2,
  Wrench,
  Home as HomeIcon,
  Building2,
  ClipboardCheck,
  Cpu,
  Bolt,
  FileCheck,
} from "lucide-react";

const SECTIONS = [
  { id: "home", label: "Início" },
  { id: "servicos", label: "Serviços" },
  { id: "diferenciais", label: "Diferenciais" },
  { id: "sobre", label: "Sobre" },
  { id: "portfolio", label: "Portfólio" },
  { id: "depoimentos", label: "Depoimentos" },
  { id: "contato", label: "Contato" },
];

const WHATSAPP = "https://wa.me/55139997853183?text=Ol%C3%A1%20El%C3%A9trica%20Neves!%20Gostaria%20de%20um%20or%C3%A7amento.";

export default function SiteInstitucionalEletricaNeves() {
  const [open, setOpen] = useState(false);

  return (
<div className="bg-slate-50 text-slate-900">
    <Header open={open} setOpen={setOpen} />
    <main className="space-y-24">
        <Hero />
        <Servicos />
        <Diferenciais />
        <Sobre />
        <Marcas />
        <Portfolio />
        <Depoimentos />
        <Contato />
    </main>
    <Footer />
</div>
  );
}

function Header({ open, setOpen }) {
  return (
<header className="sticky top-0 z-50 border-b bg-white">
    <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
        <div className="flex items-center gap-2">
            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-600 text-white">
                <Bolt className="h-5 w-5" />
            </div>
            <div>
                <p className="font-semibold">Elétrica Neves</p>
                <p className="text-xs text-slate-500">Desde 1990</p>
            </div>
        </div>

        <nav className="hidden items-center gap-6 md:flex">
            {SECTIONS.map((s) => (
            <a key={s.id} href={`#${s.id}`} className="text-sm hover:text-blue-700">
                {s.label}
            </a>
            ))}
            <Button asChild size="sm">
                <a href={WHATSAPP} target="_blank">WhatsApp</a>
            </Button>
        </nav>

        <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger className="md:hidden">
                <Menu />
            </SheetTrigger>
            <SheetContent side="right" className="space-y-6">
                {SECTIONS.map((s) => (
                <a key={s.id}
                   href={`#${s.id}`}
                   onClick={() =>
                    setOpen(false)}
                    className="block text-base"
                    >
                    {s.label}
                </a>
                ))}
                <Button asChild className="w-full">
                    <a href={WHATSAPP} target="_blank">WhatsApp</a>
                </Button>
            </SheetContent>
        </Sheet>
    </div>
</header>
  );
}

function Hero() {
  return (
<section id="home" className="mx-auto max-w-7xl px-4 pt-24">
    <div className="grid gap-10 md:grid-cols-2">
        <div className="space-y-6">
            <Badge className="w-fit">Desde 1990</Badge>
            <h1 className="text-4xl font-bold">Venda e manutenção de equipamentos elétricos</h1>
            <p className="text-slate-600">
                Referência em rebobinamento de motores, bombas d’água, compressores,
                geradores e ferramentas elétricas em Santos/SP.
            </p>
            <div className="flex gap-4">
                <Button asChild>
                    <a href={WHATSAPP} target="_blank">Solicitar orçamento</a>
                </Button>
                <Button variant="outline" asChild>
                    <a href="#servicos">Ver serviços</a>
                </Button>
            </div>
        </div>
        <div className="flex items-center justify-center rounded-2xl bg-slate-200 text-slate-500">
            Imagem institucional / oficina
        </div>
    </div>
</section>
  );
}

function Servicos() {
  const items = [
    { icon:
<Cpu />, title: "Rebobinamento de Motores", desc: "Serviço técnico especializado com garantia." },
    { icon:
<HomeIcon />, title: "Bombas d’água", desc: "Venda, manutenção e instalação." },
    { icon:
<Zap />, title: "Compressores e Geradores", desc: "Manutenção completa e venda." },
    { icon:
<Wrench />, title: "Ferramentas Elétricas", desc: "Conserto de diversos equipamentos." },
    { icon:
<Clock />, title: "Atendimento Emergencial", desc: "Falta d’água em prédios." },
  ];

  return (
<section id="servicos" className="mx-auto max-w-7xl px-4">
    <h2 className="mb-10 text-3xl font-bold">Serviços</h2>
    <div className="grid gap-6 md:grid-cols-3">
        {items.map((it, i) => (
        <Card key={i}>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">{it.icon}{it.title}</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-slate-600">{it.desc}</CardContent>
        </Card>
        ))}
    </div>
</section>
  );
}

function Diferenciais() {
  const items = [
    { icon:
<ShieldCheck />, text: "Mais de 30 anos de experiência" },
    { icon:
<CheckCircle2 />, text: "Serviço rápido e garantido" },
    { icon:
<Building2 />, text: "Atendimento predial e residencial" },
    { icon:
<Phone />, text: "Emergências em Santos e região" },
  ];

  return (
<section id="diferenciais" className="bg-white py-20">
    <div className="mx-auto max-w-7xl px-4">
        <h2 className="mb-10 text-3xl font-bold">Diferenciais</h2>
        <div className="grid gap-6 md:grid-cols-4">
            {items.map((i, idx) => (
            <div key={idx} className="flex items-center gap-3">
                {i.icon}
                <p>{i.text}</p>
            </div>
            ))}
        </div>
    </div>
</section>
  );
}

function Sobre() {
  return (
<section id="sobre" className="mx-auto max-w-7xl px-4">
    <h2 className="mb-6 text-3xl font-bold">Sobre a empresa</h2>
    <p className="max-w-3xl text-slate-600">
        Fundada em 1990, a Elétrica Neves atua em Santos/SP oferecendo venda e manutenção
        de equipamentos elétricos com foco em qualidade, confiança e atendimento rápido.
    </p>
</section>
  );
}

function Marcas() {
  const marcas = ["DARKA","FAMAC","TOYAMA","TEKNA","TRAMONTINA","CHIAPERINI","MARCON","LYNUS"];

  return (
<section className="mx-auto max-w-7xl px-4">
    <h3 className="mb-4 text-xl font-semibold">Assistência técnica autorizada</h3>
    <div className="flex flex-wrap gap-3">
        {marcas.map((m) => (
        <Badge key={m} variant="secondary">{m}</Badge>
        ))}
    </div>
</section>
  );
}

function Portfolio() {
  const projetos = [
    { title: "Rebobinamento de motor", desc: "Motor trifásico industrial." },
    { title: "Bomba d’água predial", desc: "Manutenção completa." },
    { title: "Gerador a diesel", desc: "Revisão e testes." },
  ];

  return (
<section id="portfolio" className="mx-auto max-w-7xl px-4">
    <h2 className="mb-10 text-3xl font-bold">Portfólio</h2>
    <div className="grid gap-6 md:grid-cols-3">
        {projetos.map((p, i) => (
        <Card key={i}>
            <CardHeader>
                <CardTitle>{p.title}</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-slate-600">{p.desc}</CardContent>
        </Card>
        ))}
    </div>
</section>
  );
}

function Depoimentos() {
  const depo = [
    { nome: "Marcos Oliveira", texto: "Resolveram no mesmo dia." },
    { nome: "Luciana Pires", texto: "Ótimo atendimento." },
    { nome: "Condomínio Jardim Mar", texto: "Equipe confiável." },
  ];

  return (
<section id="depoimentos" className="bg-white py-20">
    <div className="mx-auto max-w-7xl px-4">
        <h2 className="mb-10 text-3xl font-bold">Depoimentos</h2>
        <div className="grid gap-6 md:grid-cols-3">
            {depo.map((d, i) => (
            <Card key={i}>
                <CardContent className="pt-6">
                    <p className="italic">“{d.texto}”</p>
                    <p className="mt-4 text-sm font-medium">{d.nome}</p>
                </CardContent>
            </Card>
            ))}
        </div>
    </div>
</section>
  );
}

function Contato() {
  return (
<section id="contato" className="mx-auto max-w-7xl px-4 py-20">
    <h2 className="mb-6 text-3xl font-bold">Contato</h2>
    <form className="grid gap-4 md:max-w-md">
        <Input placeholder="Nome" />
        <Input placeholder="E-mail" />
        <Input placeholder="Telefone" />
        <Textarea placeholder="Mensagem" />
        <Button className="gap-2"><ClipboardCheck className="h-4 w-4" /> Enviar</Button>
    </form>
</section>
  );
}

function Footer() {
  return (
<footer className="border-t bg-white py-10">
    <div className="mx-auto max-w-7xl px-4 text-sm text-slate-600">
        © {new Date().getFullYear()} Elétrica Neves — Santos/SP
    </div>
</footer>
  );
}