import React, { useEffect, useState } from "react";
import { Paintbrush, Palette, Package, Truck, Factory, Hammer, CheckCircle2, MapPin, Phone, Mail, ChevronRight, Droplet, Shield, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

// One-page website basato sul PDF "Gruppo Avanzi" con testi corretti e uniformati.
// Tech: React + Tailwind + shadcn/ui. Solo front‑end (nessun invio form).

const LOGO = "https://dummyimage.com/240x64/000/fff.png&text=GRUPPO+AVANZI"; // Sostituisci con il logo reale

const NAV = [
  { id: "home", label: "Home" },
  { id: "chi-siamo", label: "Chi siamo" },
  { id: "prodotti", label: "Prodotti" },
  { id: "servizi", label: "Servizi" },
  { id: "partnership", label: "Partnership" },
  { id: "dove-siamo", label: "Dove siamo" },
  { id: "contatti", label: "Contatti" },
];

const PRODOTTI = [
  { title: "Pitture murali", descr: "Interni/esterni: lavabili, traspiranti, antimuffa.", icon: Paintbrush },
  { title: "Smalti", descr: "All’acqua e a solvente per ferro, legno e altri supporti.", icon: Palette },
  { title: "Resine", descr: "Per pavimentazioni e rivestimenti ad alte prestazioni.", icon: Package },
  { title: "Impermeabilizzanti", descr: "Sistemi per tetti, terrazze e superfici esposte.", icon: Droplet },
  { title: "Colori personalizzati", descr: "Tintometri avanzati con spettrofotometro.", icon: Sparkles },
  { title: "Vernici su misura", descr: "Per auto, edilizia e industria.", icon: Factory },
  { title: "Vernici industriali", descr: "Per metalli, plastica e legno.", icon: Hammer },
  { title: "Carrozzeria (refinish)", descr: "Basi acqua/solvente, trasparenti, primer e fondi.", icon: Shield },
  { title: "Protettivi e impregnanti", descr: "Per legno, metalli e superfici edili.", icon: Shield },
  { title: "Additivi e catalizzatori", descr: "Per adesione e resistenze superiori.", icon: Package },
  { title: "Attrezzature", descr: "Pennelli, rulli, aerografi, pistole a spruzzo.", icon: Hammer },
  { title: "Materiali di supporto", descr: "Carta abrasiva, nastri e mascherature professionali.", icon: Package },
  { title: "Sistemi a cappotto", descr: "Soluzioni per isolamento termico di ogni genere.", icon: Shield },
  { title: "Cartongesso", descr: "Lastre 10/13 mm: ignifughe, idro, acustiche, accoppiate.", icon: Package },
];

const MARCHI = ["Sikkens", "Caparol", "Sigma", "Settef", "Max Meyer", "Cepro", "New Lac", "Atria", "Alcea"];
const DECORATIVI = ["Giorgio Graesan", "Cebos", "Valpaint"]; // correzione ortografia

const SEDI = [
  {
    ragione: "Colorificio Avanzi S.r.l.",
    piva: "Partita IVA 06011190961",
    ateco: "ATECO 46.73.2 – Commercio all’ingrosso di vernici e colori",
    indirizzo: "Via Montefior, 19, 20128 Milano (MI)",
    map: "https://www.google.com/maps?q=Via+Montefior+19+Milano",
    tel: "+39 000 000 000", // da aggiornare
    email: "info@colorificioavanzi.it",
  },
  {
    ragione: "Market Color S.r.l.",
    piva: "Partita IVA 00734460967",
    ateco: "ATECO 46.73.2 – Commercio all’ingrosso di vernici e colori",
    indirizzo: "Viale della Repubblica, 79, 20835 Muggiò (MB)", // denominazione completa strada
    map: "https://www.google.com/maps?q=Viale+della+Repubblica+79+Muggi%C3%B2",
    tel: "+39 347 348 1735", // numero confermato nel progetto
    email: "marketcolor@gruppoavanzi.it",
  },
  {
    ragione: "Nuova Gazzola S.r.l. / Bottega del Colore",
    piva: "Partita IVA 11909390962",
    ateco: "ATECO 47.52.1 – Dettaglio ferramenta, vernici e vetro piano",
    indirizzo: "Via Monte Altissimo, 7, 20156 Milano (MI)",
    indirizzo2: "Viale Argonne, 53, 20133 Milano (MI)",
    map: "https://www.google.com/maps?q=Via+Monte+Altissimo+7+Milano",
    tel: "+39 000 000 000",
    email: "nuovagazzola@gruppoavanzi.it",
  },
];

function useScrollSpy(ids: string[]) {
  const [active, setActive] = useState(ids[0]);
  useEffect(() => {
    const observers = ids.map((id) => {
      const el = document.getElementById(id);
      if (!el) return null as unknown as IntersectionObserver;
      const obs = new IntersectionObserver(
        (entries) => entries.forEach((e) => e.isIntersecting && setActive(id)),
        { rootMargin: "-40% 0px -55% 0px", threshold: [0, 0.2, 0.6] }
      );
      obs.observe(el);
      return obs;
    });
    return () => observers.forEach((o) => o && o.disconnect());
  }, [ids]);
  return active;
}

export default function GruppoAvanziSite() {
  const active = useScrollSpy(NAV.map((n) => n.id));
  const year = new Date().getFullYear();

  const scrollTo = (id: string) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-white via-[#f7f7fb] to-white text-slate-900">
      {/* Navbar */}
      <header className="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-white/70 bg-white/60 border-b">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
          <div className="flex items-center gap-3">
            <img src={LOGO} alt="Gruppo Avanzi" className="h-8 w-auto" />
            <Badge className="hidden sm:inline-flex rounded-full">Gruppo Colorifici Avanzi</Badge>
          </div>
          <nav className="hidden md:flex items-center gap-1">
            {NAV.map((item) => (
              <Button
                key={item.id}
                variant={active === item.id ? "default" : "ghost"}
                className="rounded-full"
                onClick={() => scrollTo(item.id)}
              >
                {item.label}
              </Button>
            ))}
          </nav>
          <div className="md:hidden">
            <Button className="rounded-full" onClick={() => scrollTo("contatti")}>Preventivo</Button>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section id="home" className="relative">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20">
          <div className="grid md:grid-cols-2 gap-10 items-center">
            <div>
              <Badge className="mb-4">Vernici • Resine • Decorativi • Carrozzeria</Badge>
              <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight">
                Colore, tecnologia e consulenza per edilizia, industria e carrozzeria.
              </h1>
              <p className="mt-4 text-lg text-slate-700">
                Scegli la qualità dei nostri marchi e l’esperienza del Gruppo Avanzi. Dal
                tintometrico al cantiere: soluzioni complete, supporto tecnico e risultati che durano.
              </p>
              <div className="mt-6 flex flex-wrap gap-3">
                <Button className="rounded-full" onClick={() => scrollTo("prodotti")}>
                  Scopri i prodotti <ChevronRight className="ml-1 h-4 w-4" />
                </Button>
                <Button variant="outline" className="rounded-full" onClick={() => scrollTo("contatti")}>
                  Richiedi un preventivo
                </Button>
              </div>
              <div className="mt-6 flex flex-wrap items-center gap-4 text-sm text-slate-600">
                <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4"/> Qualità e sostenibilità</div>
                <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4"/> Assistenza tecnica</div>
                <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4"/> Tinte archiviate fino a 10 anni</div>
              </div>
            </div>
            <div className="relative">
              <div className="aspect-[4/3] rounded-3xl bg-gradient-to-br from-fuchsia-200 via-sky-200 to-emerald-200 p-1 shadow-xl">
                <div className="h-full w-full rounded-2xl bg-white grid grid-cols-2 gap-2 p-2">
                  {["#fca5a5","#fdba74","#fde68a","#86efac","#93c5fd","#a5b4fc","#fbcfe8","#e5e7eb"].map((c, i) => (
                    <div key={i} className="rounded-xl border flex items-center justify-center" style={{background: c}}>
                      <span className="text-xs font-medium bg-white/80 rounded-full px-2 py-0.5 shadow">{c}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="absolute -bottom-6 -right-6 hidden sm:block">
                <Card className="rounded-2xl shadow-lg">
                  <CardContent className="p-4 flex items-center gap-3">
                    <Truck className="h-6 w-6"/>
                    <div>
                      <div className="text-sm font-semibold">Consegna in cantiere</div>
                      <div className="text-xs text-slate-600">Logistica rapida su Milano e Brianza</div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Chi siamo */}
      <section id="chi-siamo" className="py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-3 gap-8 items-start">
            <div className="md:col-span-2">
              <h2 className="text-3xl font-bold">Chi siamo</h2>
              <p className="mt-4 text-slate-700 leading-relaxed">
                Il <strong>Gruppo Colorifici Avanzi</strong> riunisce <strong>Colorificio Avanzi</strong>,
                <strong> Market Color</strong> e <strong>Nuova Gazzola / Bottega del Colore</strong>.
                Siamo specializzati in vernici per <em>edilizia</em>, <em>industria</em> e <em>carrozzeria</em>.
                Offriamo smalti, resine, pitture decorative, consulenza tecnica e soluzioni innovative,
                garantendo qualità, sostenibilità e supporto professionale.
              </p>
              <div className="mt-6 grid sm:grid-cols-3 gap-4">
                {[
                  { icon: CheckCircle2, text: "Esperti del colore" },
                  { icon: CheckCircle2, text: "Tintometrico con spettrofotometro" },
                  { icon: CheckCircle2, text: "Archivio tinte fino a 10 anni" },
                ].map((f, i) => (
                  <Card key={i} className="rounded-2xl">
                    <CardContent className="p-4 flex items-center gap-3 text-sm">
                      <f.icon className="h-5 w-5"/>
                      <span>{f.text}</span>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
            <div>
              <Card className="rounded-2xl border-fuchsia-200">
                <CardHeader>
                  <CardTitle>Settori serviti</CardTitle>
                </CardHeader>
                <CardContent className="grid gap-2 text-sm text-slate-700">
                  <div className="flex items-center gap-2"><Factory className="h-4 w-4"/> Industria</div>
                  <div className="flex items-center gap-2"><Hammer className="h-4 w-4"/> Edilizia / Cartongesso / Cappotti</div>
                  <div className="flex items-center gap-2"><Shield className="h-4 w-4"/> Carrozzeria e refinish</div>
                  <div className="flex items-center gap-2"><Paintbrush className="h-4 w-4"/> Decoratori e studi colore</div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Prodotti */}
      <section id="prodotti" className="py-20 bg-white">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex items-end justify-between flex-wrap gap-4">
            <h2 className="text-3xl font-bold">Prodotti</h2>
            <div className="text-sm text-slate-600">Catalogo sintetico — chiedi le schede tecniche e il colore perfetto.</div>
          </div>
          <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {PRODOTTI.map((p, idx) => (
              <Card key={idx} className="group rounded-2xl hover:shadow-lg transition">
                <CardHeader className="pb-2">
                  <div className="flex items-center gap-3">
                    <div className="h-10 w-10 rounded-xl bg-slate-100 flex items-center justify-center">
                      <p.icon className="h-5 w-5" />
                    </div>
                    <CardTitle className="text-lg">{p.title}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="text-slate-700 text-sm">{p.descr}</CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Servizi */}
      <section id="servizi" className="py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold">Servizi</h2>
          <div className="mt-8 grid md:grid-cols-3 gap-6">
            {[
              { title: "Consulenze tecniche in cantiere", descr: "Sopralluoghi e supporto applicativo per risultati a regola d’arte.", icon: Hammer },
              { title: "Consegna sul posto", descr: "Materiale recapitato direttamente in cantiere con logistica rapida.", icon: Truck },
              { title: "Tintometrico e spettrofotometro", descr: "Riproduzione e archiviazione tinte (fino a 10 anni).", icon: Palette },
            ].map((s, i) => (
              <Card key={i} className="rounded-2xl">
                <CardHeader className="pb-2">
                  <div className="flex items-center gap-3">
                    <div className="h-10 w-10 rounded-xl bg-slate-100 flex items-center justify-center">
                      <s.icon className="h-5 w-5" />
                    </div>
                    <CardTitle className="text-lg">{s.title}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="text-sm text-slate-700">{s.descr}</CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Partnership */}
      <section id="partnership" className="py-20 bg-white">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between flex-wrap gap-4">
            <h2 className="text-3xl font-bold">Partnership</h2>
            <Badge variant="secondary" className="rounded-full">Marchi selezionati</Badge>
          </div>
          <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <Card className="rounded-2xl">
              <CardHeader>
                <CardTitle>Marchi principali</CardTitle>
              </CardHeader>
              <CardContent className="flex flex-wrap gap-2 text-sm">
                {MARCHI.map((m) => (
                  <Badge key={m} className="rounded-full" variant="outline">{m}</Badge>
                ))}
              </CardContent>
            </Card>
            <Card className="rounded-2xl">
              <CardHeader>
                <CardTitle>Decorativi</CardTitle>
              </CardHeader>
              <CardContent className="flex flex-wrap gap-2 text-sm">
                {DECORATIVI.map((m) => (
                  <Badge key={m} className="rounded-full" variant="outline">{m}</Badge>
                ))}
              </CardContent>
            </Card>
            <Card className="rounded-2xl">
              <CardHeader>
                <CardTitle>Perché collaboriamo con loro</CardTitle>
              </CardHeader>
              <CardContent className="text-sm text-slate-700 space-y-2">
                <div className="flex gap-2 items-start"><CheckCircle2 className="h-4 w-4 mt-0.5"/> Qualità costante certificata</div>
                <div className="flex gap-2 items-start"><CheckCircle2 className="h-4 w-4 mt-0.5"/> Innovazione su sostenibilità e VOC ridotti</div>
                <div className="flex gap-2 items-start"><CheckCircle2 className="h-4 w-4 mt-0.5"/> Supporto tecnico e schede prodotto complete</div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Dove siamo */}
      <section id="dove-siamo" className="py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold">Dove siamo</h2>
          <div className="mt-8 grid lg:grid-cols-3 gap-6">
            {SEDI.map((s, i) => (
              <Card key={i} className="rounded-2xl">
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg">{s.ragione}</CardTitle>
                </CardHeader>
                <CardContent className="text-sm text-slate-700 space-y-2">
                  <div>{s.piva}</div>
                  <div>{s.ateco}</div>
                  <div className="flex items-start gap-2"><MapPin className="h-4 w-4 mt-0.5"/> <span>{s.indirizzo}</span></div>
                  {s.indirizzo2 && (
                    <div className="flex items-start gap-2"><MapPin className="h-4 w-4 mt-0.5"/> <span>{s.indirizzo2}</span></div>
                  )}
                  <div className="flex items-center gap-2"><Phone className="h-4 w-4"/> <a href={`tel:${s.tel}`} className="hover:underline">{s.tel}</a></div>
                  <div className="flex items-center gap-2"><Mail className="h-4 w-4"/> <a href={`mailto:${s.email}`} className="hover:underline">{s.email}</a></div>
                  <div className="mt-3">
                    <a href={s.map} target="_blank" rel="noreferrer">
                      <Button variant="outline" className="rounded-full">Apri mappa</Button>
                    </a>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
          <div className="mt-8 rounded-2xl overflow-hidden border">
            <iframe
              title="Mappa Milano"
              src="https://www.google.com/maps?q=Milano&output=embed"
              className="w-full h-[360px]"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
        </div>
      </section>

      {/* Contatti */}
      <section id="contatti" className="py-20 bg-white">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-10 items-start">
            <div>
              <h2 className="text-3xl font-bold">Contattaci</h2>
              <p className="mt-4 text-slate-700">
                Scrivici per preventivi, consulenze tecniche o per trovare il prodotto più adatto al tuo progetto.
              </p>
              <div className="mt-6 space-y-3 text-sm text-slate-700">
                <div className="flex items-center gap-2"><Phone className="h-4 w-4"/> <a href="tel:+393473481735" className="hover:underline">+39 347 348 1735</a> <span className="text-slate-400">(Market Color)</span></div>
                <div className="flex items-center gap-2"><Mail className="h-4 w-4"/> <a href="mailto:info@gruppoavanzi.it" className="hover:underline">info@gruppoavanzi.it</a></div>
              </div>
              <div className="mt-8 grid grid-cols-2 gap-4 text-sm">
                <Card className="rounded-2xl"><CardContent className="p-4"><div className="font-semibold">Orari</div><div className="text-slate-600">Lun–Ven 8:30–12:30 / 14:00–18:30<br/>Sab 8:30–12:30</div></CardContent></Card>
                <Card className="rounded-2xl"><CardContent className="p-4"><div className="font-semibold">Pagamenti</div><div className="text-slate-600">Contanti, carte, bonifico. Fattura elettronica.</div></CardContent></Card>
              </div>
            </div>
            <div>
              <Card className="rounded-2xl">
                <CardHeader>
                  <CardTitle>Richiedi un preventivo</CardTitle>
                </CardHeader>
                <CardContent>
                  <form className="grid gap-4" onSubmit={(e)=>e.preventDefault()}>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium">Nome e Cognome</label>
                      <Input placeholder="Es. Mario Rossi" required />
                    </div>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium">Email</label>
                      <Input type="email" placeholder="nome@azienda.it" required />
                    </div>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium">Telefono</label>
                      <Input type="tel" placeholder="Es. +39 3xx xxx xxxx" />
                    </div>
                    <div className="grid gap-2">
                      <label className="text-sm font-medium">Richiesta</label>
                      <Textarea placeholder="Raccontaci il tuo progetto, quantità, colori, tempi…" rows={5} />
                    </div>
                    <Button type="submit" className="rounded-full">Invia richiesta</Button>
                    <p className="text-xs text-slate-500">Compilando il form accetti l’informativa privacy. Verrai ricontattato da un consulente.</p>
                  </form>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t bg-white/80">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10 grid md:grid-cols-3 gap-8 text-sm">
          <div>
            <img src={LOGO} alt="Gruppo Avanzi" className="h-7 w-auto" />
            <p className="mt-3 text-slate-600">
              Vernici e soluzioni professionali per edilizia, industria e carrozzeria. Consulenza tecnica, tintometrico avanzato, consegna in cantiere.
            </p>
          </div>
          <div>
            <div className="font-semibold mb-3">Navigazione</div>
            <ul className="space-y-2">
              {NAV.map((n) => (
                <li key={n.id}><button className="hover:underline" onClick={() => scrollTo(n.id)}>{n.label}</button></li>
              ))}
            </ul>
          </div>
          <div>
            <div className="font-semibold mb-3">Contatti</div>
            <ul className="space-y-2 text-slate-600">
              <li className="flex items-center gap-2"><Phone className="h-4 w-4"/> +39 347 348 1735</li>
              <li className="flex items-center gap-2"><Mail className="h-4 w-4"/> info@gruppoavanzi.it</li>
              <li className="flex items-center gap-2"><MapPin className="h-4 w-4"/> Milano e Brianza</li>
            </ul>
            <div className="mt-4 text-xs text-slate-500">© {year} Gruppo Avanzi. Tutti i diritti riservati. <a className="underline" href="#">Privacy</a> • <a className="underline" href="#">Cookie</a></div>
          </div>
        </div>
      </footer>
    </div>
  );
}