'use client';

import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';

export default function About() {
  const t = useTranslations('About');

  return (
    <section id="about" className="py-24 bg-warm-white dark:bg-near-black border-t border-sand/20 dark:border-charcoal/50 transition-colors duration-300">
      <div className="max-w-[1200px] mx-auto px-6 grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
        
        {/* Left Column: Premium SVG Placeholder for Avatar/Photo */}
        <motion.div 
          initial={{ opacity: 0, x: -30 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, margin: '-100px' }}
          transition={{ duration: 0.8 }}
          className="col-span-1 md:col-span-5 flex justify-center"
        >
          <div className="relative w-full max-w-[340px] aspect-square rounded-2xl overflow-hidden border border-sand dark:border-charcoal bg-warm-white dark:bg-charcoal/30 shadow-sm flex items-center justify-center p-6 group">
            {/* Architectural gridlines for designer aesthetic */}
            <div className="absolute inset-0 grid grid-cols-6 grid-rows-6 opacity-10 pointer-events-none">
              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[16.6%]"></div>
              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[33.3%]"></div>
              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[50%]"></div>
              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[66.6%]"></div>
              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[83.3%]"></div>
            </div>

            {/* Glowing gradient backdrops */}
            <div className="absolute -top-12 -left-12 w-32 h-32 rounded-full bg-teal-brand/10 dark:bg-teal-brand/20 blur-2xl group-hover:scale-110 transition-transform duration-500" />
            <div className="absolute -bottom-12 -right-12 w-32 h-32 rounded-full bg-terracotta/10 dark:bg-terracotta/20 blur-2xl group-hover:scale-110 transition-transform duration-500" />

            {/* Inner diagram representation of LLM/Web alignment */}
            <svg 
              viewBox="0 0 200 200" 
              fill="none" 
              xmlns="http://www.w3.org/2000/svg" 
              className="w-48 h-48 text-charcoal/20 dark:text-warm-white/10 group-hover:rotate-6 transition-transform duration-700"
            >
              {/* Outer ring */}
              <circle cx="100" cy="100" r="80" stroke="currentColor" strokeWidth="1" strokeDasharray="4 4" />
              {/* Core shape */}
              <path d="M100 30 L160 140 L40 140 Z" stroke="currentColor" strokeWidth="1.5" />
              <circle cx="100" cy="80" r="24" stroke="currentColor" strokeWidth="1" />
              <line x1="100" y1="30" x2="100" y2="170" stroke="currentColor" strokeWidth="1" />
              <line x1="20" y1="100" x2="180" y2="100" stroke="currentColor" strokeWidth="1" />
            </svg>

            {/* Label indicating image placeholder */}
            <div className="absolute bottom-4 left-4 right-4 text-center py-2 px-3 bg-warm-white/90 dark:bg-near-black/90 border border-sand/40 dark:border-charcoal/60 rounded-lg backdrop-blur-sm transition-all duration-300">
              <span className="text-xs font-semibold uppercase tracking-wider text-charcoal/50 dark:text-warm-white/40">
                [ Image Placeholder ]
              </span>
            </div>
          </div>
        </motion.div>

        {/* Right Column: Narrative Copy */}
        <motion.div 
          initial={{ opacity: 0, x: 30 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, margin: '-100px' }}
          transition={{ duration: 0.8 }}
          className="col-span-1 md:col-span-7 flex flex-col justify-center space-y-6"
        >
          <div>
            <h2 className="text-xs font-semibold tracking-widest text-terracotta uppercase mb-2">
              {t('title')}
            </h2>
            <h3 className="text-3xl font-extrabold tracking-tight text-charcoal dark:text-warm-white">
              {t('subtitle')}
            </h3>
          </div>

          <div className="space-y-4 text-charcoal/80 dark:text-warm-white/70 leading-relaxed font-normal text-base md:text-[17px]">
            <p>{t('p1')}</p>
            <p>{t('p2')}</p>
            <p>{t('p3')}</p>
          </div>
        </motion.div>

      </div>
    </section>
  );
}