import Image from "next/image";
import { Leaf, ChefHat, Award } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import { buildMeta } from "@/lib/metadata";
import type { Metadata } from "next";

export const revalidate = 3600;

export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
  const { lang } = await params;
  return buildMeta(lang, "/hakkimizda", {
    title: "Hakkımızda | Kite Beach Akyaka",
    description: "10+ yıllık deneyim, 500+ mutlu misafir. Azmak nehri kıyısında doğa, kitesurf tutku ve yerel lezzetlerin buluşma noktası.",
  }, {
    title: "About Us | Kite Beach Akyaka",
    description: "10+ years of experience, 500+ happy guests. Where nature, kitesurf passion and local flavors meet on the banks of Azmak river.",
  });
}

const valuesTr = [
  {
    icon: Leaf,
    title: "Doğaya Saygı",
    desc: "Tesisimizdeki tüm süreçlerde sıfır atık ve sürdürülebilirlik ilkelerini benimsiyoruz. Geleceğe duyarlı bir konaklama deneyimi sunuyoruz.",
  },
  {
    icon: ChefHat,
    title: "Lokal Mutfak",
    desc: "Malzemelerimizin büyük bir bölümünü yerel üreticilerden ve Ege köylerinden temin ediyoruz. Taze, mevsimsel ve sürdürülebilir.",
  },
  {
    icon: Award,
    title: "Premium Deneyim",
    desc: "Kitesurf okulumuzdan restoranımıza kadar her noktada en yüksek kalite standartlarını sunuyoruz.",
  },
];

const valuesEn = [
  {
    icon: Leaf,
    title: "Respect for Nature",
    desc: "We adopt zero waste and sustainability principles in all processes of our facility. We offer an environmentally conscious stay experience.",
  },
  {
    icon: ChefHat,
    title: "Local Kitchen",
    desc: "We source a large portion of our ingredients from local producers and Aegean villages. Fresh, seasonal and sustainable.",
  },
  {
    icon: Award,
    title: "Premium Experience",
    desc: "From our kitesurf school to our restaurant, we offer the highest quality standards at every point.",
  },
];

const statsTr = [
  { value: "10+", label: "Yıllık Deneyim" },
  { value: "500+", label: "Mutlu Misafir"  },
  { value: "3",    label: "Profesyonel Eğitmen" },
  { value: "4",    label: "Benzersiz Aktivite" },
];

const statsEn = [
  { value: "10+", label: "Years Experience" },
  { value: "500+", label: "Happy Guests"  },
  { value: "3",    label: "Professional Instructor" },
  { value: "4",    label: "Unique Activity" },
];

export default async function HakkimizdaPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const isEn = lang === "en";

  const displayValues = isEn ? valuesEn : valuesTr;
  const displayStats = isEn ? statsEn : statsTr;

  return (
    <div className="min-h-screen bg-background pt-40 pb-10">
      {/* Page Header */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-16">
        <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4 animate-fade-up">
          {isEn ? "Who We Are" : "Biz Kimiz"}
        </span>
        <h1 className="font-serif text-5xl md:text-6xl text-dark font-bold animate-fade-up delay-100 mb-6">
          {isEn ? "Our Story" : "Hikayemiz"}
        </h1>
        <p className="text-muted text-lg max-w-2xl mx-auto animate-fade-up delay-200">
          {isEn ? "Where the wind, sea and river meet." : "Rüzgarın, denizin ve nehrin kesiştiği yerde."}
        </p>
      </div>

      {/* Story */}
      <section className="py-24 bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <ScrollReveal>
              <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
                {isEn ? "In the Heart of Akyaka" : "Akyaka'nın Kalbinde"}
              </span>
              <h2 className="font-serif text-4xl font-bold text-dark mb-6 leading-tight">
                {isEn ? <>A Journey<br />of Passion</> : <>Bir Tutku<br />Yolculuğu</>}
              </h2>
              <div className="space-y-4 text-gray-500 leading-relaxed text-[15px]">
                <p>
                  {isEn ? (
                    "Kite Beach Akyaka was born right on the banks of the Azmak River flowing into the crystal waters of the Gulf of Gokova. Our goal was to offer our guests much more than a typical stay; to create a unique living space that integrates the passion for kitesurfing with nature, comfort, and good food."
                  ) : (
                    "Kite Beach Akyaka, Gökova Körfezi'nin kristal sularına dökülen Azmak Nehri'nin hemen kıyısında doğdu. Amacımız, misafirlerimize sıradan bir konaklamadan çok daha fazlasını sunmak; rüzgar sörfü tutkusunu doğayla, konforla ve iyi yemekle bütünleştiren eşsiz bir yaşam alanı yaratmaktı."
                  )}
                </p>
                <p>
                  {isEn ? (
                    "With our nature-friendly architecture, our kitchen supporting local producers, and our professional training center, we aim to be the face of sustainable tourism in Akyaka."
                  ) : (
                    "Doğaya saygılı mimarimiz, lokal üreticileri destekleyen mutfağımız ve profesyonel eğitim merkezimizle, Akyaka'nın sürdürülebilir turizm yüzü olmayı hedefliyoruz."
                  )}
                </p>
              </div>
            </ScrollReveal>

            <ScrollReveal delay={150}>
              <div className="relative h-[460px] rounded-3xl overflow-hidden">
                <Image
                  src="/kitesurf.png"
                  alt="Kitesurf"
                  fill
                  sizes="(max-width: 768px) 100vw, 50vw"
                  className="object-cover"
                />
              </div>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="py-20 bg-primary">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal stagger className="grid grid-cols-2 md:grid-cols-4 gap-0 divide-x divide-white/10">
            {displayStats.map((s, i) => (
              <div key={i} className="text-center py-8 px-6">
                <span className="block font-serif text-4xl font-bold text-white mb-2">{s.value}</span>
                <span className="block text-white/50 text-[12px] uppercase tracking-wider">{s.label}</span>
              </div>
            ))}
          </ScrollReveal>
        </div>
      </section>

      {/* Values */}
      <section className="py-24 bg-background">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal className="text-center mb-14">
            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
              {isEn ? "What We Believe" : "Ne İnanıyoruz"}
            </span>
            <h2 className="font-serif text-4xl font-bold text-dark">{isEn ? "Our Values" : "Değerlerimiz"}</h2>
          </ScrollReveal>

          <ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {displayValues.map((v, i) => {
              const Icon = v.icon;
              return (
                <div key={i} className="bg-white rounded-2xl p-8 border border-sand card-lift">
                  <div className="w-12 h-12 bg-primary/8 rounded-xl flex items-center justify-center mb-6">
                    <Icon size={22} className="text-primary" />
                  </div>
                  <h3 className="font-serif text-xl font-bold text-dark mb-3">{v.title}</h3>
                  <p className="text-gray-500 text-[14px] leading-relaxed">{v.desc}</p>
                </div>
              );
            })}
          </ScrollReveal>
        </div>
      </section>

      {/* Vision */}
      <section className="py-24 bg-dark text-white">
        <div className="max-w-3xl mx-auto px-4 text-center">
          <ScrollReveal>
            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
              {isEn ? "Our Vision" : "Vizyonumuz"}
            </span>
            <blockquote className="font-serif text-3xl md:text-4xl font-bold leading-tight mb-8">
              {isEn 
                ? "\"To be the face of sustainable tourism in Akyaka and to offer each of our guests a unique escape.\""
                : "\"Akyaka'nın sürdürülebilir turizm yüzü olmak ve her misafirimize benzersiz bir kaçış sunmak.\""}
            </blockquote>
            <div className="section-line mx-auto" />
          </ScrollReveal>
        </div>
      </section>
    </div>
  );
}