"use client";

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { Waves, Leaf, Music } from 'lucide-react';
import Image from 'next/image';

const features = [
  { icon: Waves, titleKey: 'card1_title', descKey: 'card1_desc', color: 'text-aqua',   bg: 'bg-aqua/10'   },
  { icon: Leaf,  titleKey: 'card2_title', descKey: 'card2_desc', color: 'text-amber',  bg: 'bg-amber/10'  },
  { icon: Music, titleKey: 'card3_title', descKey: 'card3_desc', color: 'text-coral',  bg: 'bg-coral/10'  },
];

export default function About({ dbAbout }: { dbAbout?: any }) {
  const t = useTranslations('About');

  const titleVal = dbAbout?.title || t('title');
  const descVal = dbAbout?.description || t('description');
  const imgUrl = dbAbout?.image || "https://picsum.photos/800/1100?random=2";

  const featuresList = [
    { 
      icon: Waves, 
      title: dbAbout?.card1Title || t('card1_title'), 
      desc: dbAbout?.card1Desc || t('card1_desc'), 
      color: 'text-aqua',   bg: 'bg-aqua/10'   
    },
    { 
      icon: Leaf,  
      title: dbAbout?.card2Title || t('card2_title'), 
      desc: dbAbout?.card2Desc || t('card2_desc'), 
      color: 'text-amber',  bg: 'bg-amber/10'  
    },
    { 
      icon: Music, 
      title: dbAbout?.card3Title || t('card3_title'), 
      desc: dbAbout?.card3Desc || t('card3_desc'), 
      color: 'text-coral',  bg: 'bg-coral/10'  
    },
  ];

  return (
    <section id="about" className="py-28 bg-sand text-midnight relative">
      <div className="container mx-auto px-6 lg:px-12">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">

          {/* Left content */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="space-y-8"
          >
            <div>
              <span className="text-xs tracking-[0.4em] uppercase font-black text-coral mb-4 block">
                — Beach &amp; More
              </span>
              <h2 className="font-heading text-5xl md:text-6xl font-black leading-tight text-midnight mb-6">
                {titleVal}
              </h2>
              <p className="text-lg leading-relaxed text-midnight/60 whitespace-pre-wrap">{descVal}</p>
            </div>

            <div className="space-y-2">
              {featuresList.map(({ icon: Icon, title, desc, color, bg }, i) => (
                <motion.div
                  key={title}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 + 0.2 }}
                  className="flex items-start gap-4 p-4 rounded-2xl hover:bg-sandy/50 transition-colors"
                >
                  <div className={`p-3 rounded-xl ${bg} ${color} flex-shrink-0`}>
                    <Icon size={20} />
                  </div>
                  <div>
                    <h3 className="font-heading text-lg font-bold mb-0.5">{title}</h3>
                    <p className="text-midnight/55 text-sm leading-relaxed">{desc}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>

          {/* Right image */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative"
          >
            {/* Glow ring */}
            <div
              className="absolute inset-0 rounded-3xl opacity-30 blur-2xl scale-105"
              style={{ background: 'linear-gradient(135deg, #FF5A36, #FFA827, #00BFA5)' }}
            />
            <div className="relative h-[560px] w-full rounded-3xl overflow-hidden shadow-2xl">
              <Image
                src={imgUrl}
                alt="Kozmos atmosferi"
                fill
                priority
                sizes="(max-width: 1024px) 100vw, 50vw"
                className="object-cover"
              />
              <div
                className="absolute inset-0"
                style={{ background: 'linear-gradient(to top, rgba(8,13,24,0.35) 0%, transparent 55%)' }}
              />
            </div>
          </motion.div>

        </div>
      </div>
    </section>
  );
}