'use client';

import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef, useState, useEffect } from 'react';
import Image from 'next/image';

export default function About() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // Prevent hydration mismatch by using consistent initial state
  const shouldAnimate = mounted && isInView;

  return (
    <section id="about" className="py-20 md:py-32 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto" ref={ref}>
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
            className="flex flex-col items-center mb-8"
          >
            <div className="relative w-32 h-32 md:w-40 md:h-40 mb-6">
              <Image
                src="https://polishlessonsamsterdam.com/images/monika-small.jpg"
                alt="Monika Zatylny"
                fill
                className="rounded-full object-cover border-4 border-orange-600 shadow-lg"
                sizes="(max-width: 768px) 128px, 160px"
                unoptimized
              />
            </div>
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-800 mb-4 text-center">
              About Me
            </h2>
            <p className="text-lg md:text-xl text-orange-600 font-semibold mb-8 text-center">
              Monika Zatylny, MA - Language Coach
            </p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
            className="prose prose-lg max-w-none text-slate-700 leading-relaxed"
          >
            <p className="text-lg md:text-xl mb-6">
              I like helping people find solutions that work. I&apos;ve been studying multilingualism from different 
              perspectives for the past 20 years - as a linguist, teacher and coach/counsellor - so I see a bigger 
              picture than most people who are used to just one personal or occupational perspective.
            </p>
            <p className="text-lg md:text-xl mb-6">
              I listen to really hear what you&apos;re saying and help you understand, strategise and grow.
            </p>
            <p className="text-lg md:text-xl">
              My thesis focused on bilingualism and its challenges related with pronunciation and spelling. I&apos;ve 
              been teaching foreign languages in Austria, Poland, Spain and the Netherlands for over 20 years.
            </p>
          </motion.div>
        </div>
      </div>
    </section>
  );
}