import React from 'react';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';

const AIFeatureSection = () => {
  const { t } = useTranslation();
  return (
    <section id="ai-agent" className="w-full grid grid-cols-1 lg:grid-cols-2 gap-20 items-center py-32 px-margin_edge max-w-screen-2xl mx-auto border-t-2 border-primary/10">
      <motion.div
        initial={{ opacity: 0, x: -50 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true }}
        className="flex flex-col gap-8"
      >
        <div className="flex items-center gap-4 text-secondary">
          <span className="material-symbols-outlined text-4xl">neurology</span>
          <span className="text-xl font-bold uppercase tracking-widest">{t('landing.adhd_edge', 'The ADHD Edge')}</span>
        </div>
        <h2 className="text-6xl font-display-lg text-primary">{t('landing.ai_find_path', 'Let AI find the path when you get stuck.')}</h2>
        <p className="text-2xl text-on-surface-variant leading-relaxed">
          {t('landing.ai_desc', "TaskFlow handles the cognitive load. When a plan hits a wall, our AI agent sketches out a comprehensive strategy tree, finding alternatives so you don't have to.")}
        </p>
        <motion.div
          whileHover={{ rotate: 0 }}
          className="mt-4 bg-surface-container-lowest p-8 rough-border rough-shadow inline-block transform rotate-1 max-w-md"
        >
          <div className="flex items-center gap-4 border-b-2 border-primary/20 pb-4 mb-6">
            <span className="material-symbols-outlined text-4xl text-primary">robot_2</span>
            <span className="text-sm font-bold text-on-surface-variant uppercase tracking-[0.2em]">{t('canvas.ai_assistant', 'AI Assistant')}</span>
          </div>
          <p className="font-accent-note text-3xl text-primary">
            "{t('landing.ai_example_input', "I'm blocked on user growth. What now?")}"
          </p>
          <div className="flex justify-end mt-6">
            <button className="bg-primary text-on-primary font-bold py-2 px-6 rough-border shadow-sm">
              {t('landing.ai_adapt_plan', 'Adapt Plan')}
            </button>
          </div>
        </motion.div>
      </motion.div>
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        whileInView={{ opacity: 1, scale: 1 }}
        viewport={{ once: true }}
        className="relative min-h-[600px] w-full bg-surface-container-lowest rough-border rough-shadow overflow-hidden rounded-2xl flex items-center justify-center p-8"
      >
        <div className="absolute inset-0 graph-paper-bg opacity-30 pointer-events-none"></div>
        <svg viewBox="0 0 1000 600" className="w-full h-full max-w-[950px] z-10 overflow-visible">
          <motion.circle
            cx="150" cy="300" r="40"
            fill="none" stroke="var(--color-secondary)" strokeWidth="1" strokeDasharray="4 4"
            animate={{ r: [40, 60, 40], opacity: [0.5, 0, 0.5] }}
            transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
          />
          <motion.path
            initial={{ pathLength: 0 }}
            whileInView={{ pathLength: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.8, duration: 2, ease: "easeInOut" }}
            d="M 280 300 Q 350 300 380 200 Q 400 120 500 120 M 280 300 Q 380 300 500 300 M 280 300 Q 350 300 380 400 Q 400 480 500 480"
            fill="none" stroke="#181919" strokeWidth="4" strokeLinecap="round"
            className="opacity-70"
          />
          {/* Nodes simplified for extraction */}
          <foreignObject x="20" y="240" width="260" height="120">
            <div className="bg-secondary-container/20 p-5 rough-border text-center font-bold text-2xl h-full flex items-center justify-center">
              {t('landing.ai_early_users', 'Acquire Early Users')}
            </div>
          </foreignObject>
        </svg>
      </motion.div>
    </section>
  );
};

export default AIFeatureSection;