import Image from "next/image";
import Link from "next/link";
import { Star, ArrowRight } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

interface AboutSectionProps {
  aboutData: {
    image: string;
    badge: string;
    statsGuestCount: string;
    statsGuestLabel: string;
    statsYearCount: string;
    statsYearLabel: string;
    badgeIkoTitle: string;
    badgeIkoLabel: string;
    titleLine1: string;
    titleLine2: string;
    titleHighlight: string;
    description1: string;
    description2: string;
  };
  lang: string;
}

export default function AboutSection({ aboutData, lang }: AboutSectionProps) {
  return (
    <section className="py-28 bg-background overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
          <ScrollReveal className="relative">
            <div className="relative h-[540px] lg:h-[660px] rounded-3xl overflow-hidden shadow-2xl">
              <Image
                src={aboutData.image}
                alt={aboutData.badge}
                fill
                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                className="object-cover"
              />
            </div>
            {/* Stats card */}
            <div className="absolute -bottom-5 -right-4 md:-right-8 bg-white rounded-2xl p-6 shadow-xl border border-sand">
              <div className="grid grid-cols-2 gap-6 divide-x divide-sand">
                <div className="text-center">
                  <span className="block font-serif text-3xl font-bold text-primary">{aboutData.statsGuestCount}</span>
                  <span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsGuestLabel}</span>
                </div>
                <div className="text-center pl-6">
                  <span className="block font-serif text-3xl font-bold text-primary">{aboutData.statsYearCount}</span>
                  <span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsYearLabel}</span>
                </div>
              </div>
            </div>
            {/* IKO badge */}
            <div className="absolute -top-4 -left-4 bg-accent text-white rounded-2xl p-4 shadow-lg">
              <Star className="w-4 h-4 mb-1" fill="white" />
              <span className="block text-xs font-bold leading-none">{aboutData.badgeIkoTitle}</span>
              <span className="block text-[10px] opacity-80 mt-0.5">{aboutData.badgeIkoLabel}</span>
            </div>
          </ScrollReveal>

          <ScrollReveal delay={200}>
            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
              {aboutData.badge}
            </span>
            <h2 className="font-serif text-4xl md:text-5xl lg:text-6xl font-bold text-dark leading-[1.05] mb-8">
              {aboutData.titleLine1}<br />{aboutData.titleLine2}<br />
              <span className="text-primary italic">{aboutData.titleHighlight}</span>
            </h2>
            <p className="text-gray-600 leading-relaxed mb-5">
              {aboutData.description1}
            </p>
            <p className="text-gray-600 leading-relaxed mb-10">
              {aboutData.description2}
            </p>
            <div className="section-line mb-8" />
            <Link
              href={`/${lang}/hakkimizda`}
              className="inline-flex items-center gap-2 text-dark font-bold text-sm tracking-wide group"
            >
              <span className="border-b-2 border-accent pb-0.5">
                {lang === "en" ? "Read Our Story" : "Hikayemizi Okuyun"}
              </span>
              <ArrowRight className="w-4 h-4 group-hover:translate-x-1.5 transition-transform" />
            </Link>
          </ScrollReveal>
        </div>
      </div>
    </section>
  );
}