import type { Metadata } from "next";
import Image from "next/image";
import { LazySection } from "@/components/LazySection";
import { Skeleton, SkeletonWave } from "@/components/Skeleton";

export const metadata: Metadata = {
  title: "Contatti | CiMa Progetti",
  description: "Parliamo del tuo prossimo progetto digitale.",
};

export default function Contatti() {
  return (
    <div className="pt-32 pb-24 px-6 lg:px-8 max-w-7xl mx-auto overflow-x-hidden">
      {/* Hero Section - Priority render */}
      <section className="grid grid-cols-1 lg:grid-cols-12 mb-16 lg:mb-24">
        <div className="col-span-12 md:col-span-8">
          <h1 className="text-huge font-black uppercase text-on-surface mb-8">
            CONTATTI
          </h1>
          <div className="h-2 w-24 bg-primary mt-4" />
        </div>
        <div className="col-span-12 md:col-start-9 md:col-span-4 mt-8 md:mt-auto">
          <p className="text-on-surface-variant font-medium text-lg lg:text-xl leading-relaxed">
            Parliamo del tuo prossimo progetto. Nessun impegno, solo una conversazione.
          </p>
        </div>
      </section>

      {/* General Contacts - Lazy loaded */}
      <LazySection
        className="lazy-section grid grid-cols-1 lg:grid-cols-12 mb-16 lg:mb-24 gap-6 lg:gap-12"
        skeletonHeight="300px"
        skeletonCount={1}
      >
        <div className="col-span-12 md:col-span-5 border-t border-outline-variant/20 pt-8">
          <h2 className="text-xs font-black tracking-[0.2em] uppercase text-zinc-400 mb-12">
            contatti
          </h2>
          <div className="space-y-12">
            <div>
              <p className="text-xs font-bold uppercase tracking-widest text-primary mb-3">
                whatsapp
              </p>
              <a
                className="text-2xl sm:text-3xl lg:text-4xl font-black tracking-tighter text-on-surface hover:text-primary transition-colors duration-300"
                href="tel:+393382451171"
              >
                +39 338 245 1171
              </a>
            </div>
            <div>
              <p className="text-xs font-bold uppercase tracking-widest text-primary mb-3">
                email
              </p>
              <a
                className="text-2xl sm:text-3xl lg:text-4xl font-black tracking-tighter text-on-surface hover:text-primary transition-colors duration-300 underline decoration-2 underline-offset-8"
                href="mailto:info@cimaprogetti.it"
              >
                info@cimaprogetti.it
              </a>
            </div>
          </div>
        </div>

        {/* Structural Visual Element */}
        <div className="hidden md:block col-start-7 col-span-6 relative overflow-hidden h-[360px]">
          <Image
            alt="Concrete architecture geometric detail"
            className="w-full h-full object-cover grayscale brightness-90 hover:brightness-100 transition-all duration-700"
            src="/images/contatti.jpg"
            width={800}
            height={360}
            loading="lazy"
          />
          <div className="absolute inset-0 bg-primary/5 mix-blend-multiply" />
        </div>
      </LazySection>

      {/* People Behind CiMa - Lazy loaded */}
      <LazySection
        className="lazy-section mb-12"
        skeletonHeight="400px"
        skeletonCount={1}
      >
        <section className="mb-12">
          <div className="border-t border-outline-variant/20 pt-8 mb-8">
            <h2 className="text-xs font-black tracking-[0.2em] uppercase text-zinc-400">
              people behind cima
            </h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/10">
            {/* Nicola Leone Ciardi */}
            <div className="bg-background py-12 pr-0 md:pr-12">
              <div className="flex flex-col h-full">
                <div className="mb-6">
                  <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black tracking-tighter text-on-surface mb-2">
                    Nicola Leone Ciardi
                  </h3>
                  <p className="text-primary font-bold uppercase text-[10px] tracking-[0.2em]">
                    Co-Founder &amp; CEO
                  </p>
                </div>
                <p className="text-on-surface-variant mb-10 max-w-sm text-base leading-relaxed">
                  Management and computer science.
                </p>
                <div className="mt-auto space-y-4">
                  <a
                    className="flex items-center space-x-3 text-on-surface hover:text-primary transition-colors"
                    href="tel:+393382451178"
                  >
                    <span className="material-symbols-outlined text-primary">
                      call
                    </span>
                    <span className="font-bold tracking-tight">
                      +39 338 245 1178
                    </span>
                  </a>
                  <a
                    className="flex items-center space-x-3 text-on-surface hover:text-primary transition-colors"
                    href="mailto:nicolaleone.ciardi@cimaprogetti.it"
                  >
                    <span className="material-symbols-outlined text-primary">
                      mail
                    </span>
                    <span className="font-bold tracking-tight">
                      nicolaleone.ciardi@cimaprogetti.it
                    </span>
                  </a>
                </div>
              </div>
            </div>

            {/* Valentina Madaudo */}
            <div className="bg-background py-12 md:pl-12 border-t md:border-t-0 md:border-l border-outline-variant/10">
              <div className="flex flex-col h-full">
                <div className="mb-6">
                  <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black tracking-tighter text-on-surface mb-2">
                    Valentina Madaudo
                  </h3>
                  <p className="text-primary font-bold uppercase text-[10px] tracking-[0.2em]">
                    Co-Founder &amp; CFO
                  </p>
                </div>
                <p className="text-on-surface-variant mb-10 max-w-sm text-base leading-relaxed">
                  Jr Engineer &amp; economist for sustainable development.
                </p>
                <div className="mt-auto space-y-4">
                  <a
                    className="flex items-center space-x-3 text-on-surface hover:text-primary transition-colors"
                    href="tel:+393393580805"
                  >
                    <span className="material-symbols-outlined text-primary">
                      call
                    </span>
                    <span className="font-bold tracking-tight">
                      +39 339 358 0805
                    </span>
                  </a>
                  <a
                    className="flex items-center space-x-3 text-on-surface hover:text-primary transition-colors"
                    href="mailto:valentina.madaudo@cimaprogetti.it"
                  >
                    <span className="material-symbols-outlined text-primary">
                      mail
                    </span>
                    <span className="font-bold tracking-tight">
                      valentina.madaudo@cimaprogetti.it
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>
      </LazySection>
    </div>
  );
}