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

const values = [
  {
    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: "IKO sertifikalı kitesurf okulumuzdandan odalarımıza kadar her noktada en yüksek kalite standartlarını sunuyoruz.",
  },
];

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

export default function HakkimizdaPage() {
  return (
    <div className="min-h-screen bg-background">

      {/* Page Header */}
      <section className="relative h-[55vh] w-full flex items-end overflow-hidden">
        <div className="absolute inset-0">
          <Image
            src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop"
            alt="Hakkımızda"
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-dark/85 via-dark/30 to-black/20" />
        </div>
        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14 w-full">
          <span className="block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-3 animate-fade-up">
            Biz Kimiz
          </span>
          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
            Hikayemiz
          </h1>
          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
            Rüzgarın, denizin ve nehrin kesiştiği yerde.
          </p>
        </div>
      </section>

      {/* 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">
                Akyaka'nın Kalbinde
              </span>
              <h2 className="font-serif text-4xl font-bold text-dark mb-6 leading-tight">
                Bir Tutku<br />Yolculuğu
              </h2>
              <div className="space-y-4 text-gray-500 leading-relaxed text-[15px]">
                <p>
                  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>
                  Doğaya saygılı mimarimiz, lokal üreticileri destekleyen mutfağımız ve IKO
                  standartlarındaki 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="https://images.unsplash.com/photo-1526367790999-0150786686a2?q=80&w=2940&auto=format&fit=crop"
                  alt="Kitesurf"
                  fill
                  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">
            {stats.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">
              Ne İnanıyoruz
            </span>
            <h2 className="font-serif text-4xl font-bold text-dark">Değerlerimiz</h2>
          </ScrollReveal>

          <ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {values.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">
              Vizyonumuz
            </span>
            <blockquote className="font-serif text-3xl md:text-4xl font-bold leading-tight mb-8">
              "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>
  );
}