"use client";

import Image from "next/image";
import {
  CheckCircle2,
  Target,
  Eye,
  Sparkles,
  Award,
  ShieldCheck,
  Users,
  Wrench,
} from "lucide-react";
import { PageHero } from "@/components/page-hero";
import { SectionHeading } from "@/components/ui/section-heading";
import { CtaSection } from "@/components/sections/cta";
import { useLanguage } from "@/components/language-provider";

const valueIcons = [Users, Wrench, Sparkles, Award, ShieldCheck];

export default function AboutPage() {
  const { t } = useLanguage();

  return (
    <>
      <PageHero
        eyebrow={t.about.hero.eyebrow}
        title={t.about.hero.title}
        description={t.about.hero.description}
        image="/images/client/slika6.webp"
      />

      <section className="relative section-padding overflow-hidden bg-white">
        <Image
          src="/images/client/slika4.webp"
          alt=""
          aria-hidden
          fill
          sizes="100vw"
          className="absolute inset-0 -z-10 object-cover opacity-[0.05]"
        />
        <div className="container-wide relative grid grid-cols-1 gap-16 lg:grid-cols-12 lg:gap-20">
          <div className="lg:col-span-7">
            <SectionHeading
              eyebrow={t.about.story.eyebrow}
              title={t.about.story.title}
            />
            <div className="mt-8 flex flex-col gap-5 text-base leading-relaxed text-steel-600">
              <p>{t.about.story.p1}</p>
              <p>{t.about.story.p2}</p>
              <p>{t.about.story.p3}</p>
            </div>
          </div>

          <div className="lg:col-span-5">
            <div className="relative overflow-hidden rounded-2xl border border-steel-100 bg-steel-50">
              <div className="relative aspect-[4/5]">
                <Image
                  src="/images/client/slika2.jpg"
                  alt={t.about.story.facilityValue}
                  fill
                  sizes="(max-width: 1024px) 100vw, 40vw"
                  className="object-cover"
                />
                <div
                  aria-hidden
                  className="absolute inset-0 bg-gradient-to-t from-steel-900/40 to-transparent"
                />
              </div>
              <div className="absolute bottom-5 left-5 right-5 rounded-xl bg-white/95 p-5 backdrop-blur">
                <div className="text-xs font-semibold uppercase tracking-wider text-steel-500">
                  {t.about.story.facility}
                </div>
                <div className="mt-1 font-display text-lg font-semibold text-steel-900">
                  {t.about.story.facilityValue}
                </div>
                <div className="mt-1 text-sm text-steel-600">
                  {t.about.story.facilitySub}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="relative section-padding overflow-hidden bg-steel-50/60">
        <Image
          src="/images/client/slika3.jpg"
          alt=""
          aria-hidden
          fill
          sizes="100vw"
          className="absolute inset-0 -z-10 object-cover opacity-[0.06]"
        />
        <div className="container-wide relative grid grid-cols-1 gap-8 lg:grid-cols-2">
          <div className="flex h-full flex-col justify-between rounded-2xl border border-steel-100 bg-white p-8 sm:p-10">
            <div>
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-steel-900 text-white">
                <Target className="h-5 w-5" />
              </div>
              <h2 className="mt-6 font-display text-3xl font-semibold text-steel-900">
                {t.about.mission.title}
              </h2>
              <p className="mt-4 text-base leading-relaxed text-steel-600">
                {t.about.mission.body}
              </p>
            </div>
            <div className="mt-8 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-steel-500">
              <CheckCircle2 className="h-4 w-4" />
              {t.about.mission.chip}
            </div>
          </div>

          <div className="flex h-full flex-col justify-between rounded-2xl border border-steel-100 bg-white p-8 sm:p-10">
            <div>
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-steel-900 text-white">
                <Eye className="h-5 w-5" />
              </div>
              <h2 className="mt-6 font-display text-3xl font-semibold text-steel-900">
                {t.about.vision.title}
              </h2>
              <p className="mt-4 text-base leading-relaxed text-steel-600">
                {t.about.vision.body}
              </p>
            </div>
            <div className="mt-8 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-steel-500">
              <CheckCircle2 className="h-4 w-4" />
              {t.about.vision.chip}
            </div>
          </div>
        </div>
      </section>

      <section className="relative section-padding overflow-hidden bg-white">
        <Image
          src="/images/client/slika1.jpg"
          alt=""
          aria-hidden
          fill
          sizes="100vw"
          className="absolute inset-0 -z-10 object-cover opacity-[0.05]"
        />
        <div className="container-wide relative">
          <SectionHeading
            eyebrow={t.about.values.eyebrow}
            title={t.about.values.title}
            align="center"
          />
          <div className="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5">
            {t.about.values.items.map((v, i) => {
              const Icon = valueIcons[i % valueIcons.length];
              return (
                <div
                  key={v.title}
                  className="group relative overflow-hidden rounded-2xl border border-steel-100 bg-white p-6 transition-all hover:-translate-y-1 hover:border-steel-200 hover:shadow-[0_30px_60px_-30px_rgba(15,26,42,0.2)]"
                >
                  <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-steel-50 text-steel-900">
                    <Icon className="h-5 w-5" />
                  </div>
                  <h3 className="mt-5 font-display text-base font-semibold text-steel-900">
                    {v.title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-steel-600">
                    {v.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <CtaSection />
    </>
  );
}