"use client";

import Image from "next/image";
import Link from "next/link";
import { useLang } from "@/context/LanguageContext";
import { t } from "@/lib/translations";

const statValues = ["10+", "50+", "99%", "5+"];

export default function AboutPage() {
  const { lang } = useLang();
  const tr = t[lang].about;

  return (
    <>
      {/* Hero */}
      <section className="py-24 bg-surface-container-low">
        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div>
            <p className="text-primary font-bold uppercase tracking-widest text-sm mb-4">{tr.badge}</p>
            <h1 className="font-headline text-5xl font-extrabold text-on-surface leading-tight mb-6">
              {tr.heroTitle}
            </h1>
            <p className="text-on-surface-variant text-lg leading-relaxed mb-6">{tr.heroP1}</p>
            <p className="text-on-surface-variant text-lg leading-relaxed">{tr.heroP2}</p>
          </div>
          <div className="relative">
            <div className="aspect-video rounded-2xl overflow-hidden shadow-2xl relative">
              <Image
                src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLhC7YbrOjSOGDGykeub9Gv0rqDRi0hsNMmSzAoG3tzjUzncwKtV5K2b-JucjJmrRd0rspULAI38-t0UOTxm7u5e6Uz8mzil4O21TBJXMxZrSUH-h_BULKkAvi4YCmuYo-oGdB9vSNIxKTi5Kc72Rs9P9UeKcCTiFGah96K5s0reCKu6rypkeW5jfkMBK_xqyvcnqiXORWcDlkTE4iYyhYD6kXTmH5wC5k-8is7FHrgCsD2o_NDFF7oCJ_VfnLF3WiW21KNgszLOo"
                alt="Tim IPTEK"
                fill
                className="object-cover"
                unoptimized
              />
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="py-16 bg-primary">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center text-white">
            {statValues.map((value, i) => (
              <div key={i}>
                <div className="text-4xl font-black font-headline mb-2">{value}</div>
                <div className="text-blue-200 text-sm uppercase tracking-widest font-medium">{tr.stats[i]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mission & Vision */}
      <section className="py-24 bg-surface">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="bg-surface-container-low p-10 rounded-2xl">
              <div className="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-6">
                <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>visibility</span>
              </div>
              <h2 className="font-headline text-2xl font-bold mb-4">{tr.visionTitle}</h2>
              <p className="text-on-surface-variant leading-relaxed">{tr.visionDesc}</p>
            </div>
            <div className="bg-surface-container-low p-10 rounded-2xl">
              <div className="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-6">
                <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>flag</span>
              </div>
              <h2 className="font-headline text-2xl font-bold mb-4">{tr.missionTitle}</h2>
              <p className="text-on-surface-variant leading-relaxed">{tr.missionDesc}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="py-24 bg-surface-container-low">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="font-headline text-4xl font-extrabold text-on-surface mb-4">{tr.valuesTitle}</h2>
            <p className="text-on-surface-variant max-w-xl mx-auto">{tr.valuesSub}</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {tr.values.map((v) => (
              <div key={v.title} className="bg-surface-container-lowest p-8 rounded-xl hover:shadow-lg transition-all hover:-translate-y-1">
                <div className="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-4">
                  <span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>{v.icon}</span>
                </div>
                <h3 className="font-headline text-xl font-bold mb-2">{v.title}</h3>
                <p className="text-sm text-on-surface-variant leading-relaxed">{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 bg-inverse-surface text-white text-center">
        <div className="max-w-3xl mx-auto px-6">
          <h2 className="font-headline text-4xl font-extrabold mb-6">{tr.ctaTitle}</h2>
          <p className="text-slate-400 mb-10 text-lg">{tr.ctaSub}</p>
          <Link href="/contact" className="bg-gradient-to-br from-primary to-primary-container text-white px-10 py-4 rounded-lg font-bold text-lg hover:opacity-90 transition-all inline-block">
            {tr.ctaBtn}
          </Link>
        </div>
      </section>
    </>
  );
}