"use client";

import { motion } from "framer-motion";
import Image from "next/image";

export default function About({ dict }: { dict: any }) {
  const stats = [
    { value: "5+", label: dict.about.stats.years },
    { value: "10K+", label: dict.about.stats.guests },
    { value: "4.8★", label: dict.about.stats.rating },
  ];

  return (
    <section id="about" className="py-24 bg-sand-light text-sea-dark overflow-hidden">
      <div className="container mx-auto px-6 max-w-6xl">
        <div className="grid md:grid-cols-2 gap-16 items-center">

          {/* Text side */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.8 }}
            className="space-y-6"
          >
            {/* Label with decorative lines */}
            <div className="flex items-center gap-3">
              <span className="w-8 h-px bg-coral" />
              <h2 className="text-sm font-bold tracking-widest uppercase text-coral">{dict.about.title}</h2>
              <span className="w-8 h-px bg-coral" />
            </div>

            <h3 className="text-4xl md:text-5xl font-serif leading-tight" dangerouslySetInnerHTML={{ __html: dict.about.heading }}></h3>

            <p className="text-base opacity-75 leading-relaxed">
              {dict.about.p1}
            </p>
            <p className="text-base opacity-75 leading-relaxed">
              {dict.about.p2}
            </p>

            {/* Stats row */}
            <div className="grid grid-cols-3 gap-6 pt-6 border-t border-sand-dark/40">
              {stats.map((stat) => (
                <div key={stat.label} className="text-center">
                  <div className="text-2xl md:text-3xl font-serif font-bold text-sea-dark">{stat.value}</div>
                  <div className="text-xs text-gray-500 uppercase tracking-wide mt-1">{stat.label}</div>
                </div>
              ))}
            </div>
          </motion.div>

          {/* Image side */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative h-[520px] w-full"
          >
            {/* Shadow shape behind */}
            <div className="absolute inset-0 bg-sand-dark/25 rounded-t-full rounded-br-full transform translate-x-5 translate-y-5" />
            {/* Image clipped to shape */}
            <div className="absolute inset-0 rounded-t-full rounded-br-full overflow-hidden shadow-2xl">
              <Image
                src="/moy-beach.jpg"
                alt="Moy Beach Atmosphere"
                fill
                className="object-cover"
                sizes="(max-width: 768px) 100vw, 50vw"
              />
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}