'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useLang } from '@/context/LangContext';

const faqs = [
  {
    question: {
      en: 'How does GreenLens identify a plant?',
      de: 'Wie erkennt GreenLens eine Pflanze?',
      es: '¿Cómo identifica GreenLens una planta?'
    },
    answer: {
      en: 'GreenLens analyzes the plant photo and combines that with app-side care guidance so you can move from scan to next steps faster.',
      de: 'GreenLens analysiert das Pflanzenfoto und verbindet das Ergebnis mit Pflegehinweisen in der App, damit du schneller zu klaren nächsten Schritten kommst.',
      es: 'GreenLens analiza la foto de la planta y combina el resultado con indicaciones de cuidado dentro de la app para que avances más rápido.'
    }
  },
  {
    question: {
      en: 'Is GreenLens free to use?',
      de: 'Ist GreenLens kostenlos?',
      es: '¿Es GreenLens gratuito?'
    },
    answer: {
      en: 'GreenLens includes free functionality plus paid options such as subscriptions and credit top-ups for advanced AI features.',
      de: 'GreenLens bietet kostenlose Funktionen und zusätzlich kostenpflichtige Optionen wie Abos und Credit-Top-ups für erweiterte KI-Funktionen.',
      es: 'GreenLens incluye funciones gratuitas y también opciones de pago como suscripciones y créditos para funciones de IA más amplias.'
    }
  },
  {
    question: {
      en: 'Can I use GreenLens offline?',
      de: 'Kann ich GreenLens offline nutzen?',
      es: '¿Puedo usar GreenLens sin conexión?'
    },
    answer: {
      en: 'Plant identification and health checks require an internet connection. Your saved collection, care notes, and watering reminders are available offline.',
      de: 'Pflanzenidentifikation und Gesundheitscheck benötigen eine Internetverbindung. Deine gespeicherte Sammlung, Pflegenotizen und Gieß-Erinnerungen sind offline verfügbar.',
      es: 'La identificación de plantas y el control de salud requieren conexión a internet. Tu colección guardada, notas de cuidado y recordatorios de riego están disponibles sin conexión.'
    }
  },
  {
    question: {
      en: 'What kind of plants can I use GreenLens for?',
      de: 'Für welche Pflanzen kann ich GreenLens nutzen?',
      es: '¿Para qué tipo de plantas puedo usar GreenLens?'
    },
    answer: {
      en: 'GreenLens covers 450+ plant species including houseplants, garden plants, and succulents. It is built for everyday plant owners who want identification and care guidance in one place.',
      de: 'GreenLens umfasst über 450 Pflanzenarten, darunter Zimmerpflanzen, Gartenpflanzen und Sukkulenten. Die App richtet sich an Pflanzenbesitzer, die Identifikation und Pflege an einem Ort wollen.',
      es: 'GreenLens cubre más de 450 especies de plantas, incluyendo plantas de interior, de jardín y suculentas. Está pensada para quienes quieren identificación y cuidado en un solo lugar.'
    }
  },
  {
    question: {
      en: 'How do I start my plant collection?',
      de: 'Wie starte ich meine Pflanzensammlung?',
      es: '¿Cómo empiezo mi colección de plantas?'
    },
    answer: {
      en: 'Start with a scan, review the result, and save the plant to your collection to keep notes, reminders, and follow-up care in one place.',
      de: 'Starte mit einem Scan, prüfe das Ergebnis und speichere die Pflanze in deiner Sammlung, damit Notizen, Erinnerungen und Pflege an einem Ort bleiben.',
      es: 'Empieza con un escaneo, revisa el resultado y guarda la planta en tu colección para mantener notas, recordatorios y cuidado en un solo lugar.'
    }
  }
];

const TEXT = {
  de: { tag: 'Fragen', h2: ['Häufig gestellte', 'Fragen'], desc: 'Alles, was du über GreenLens und den Einstieg wissen musst.' },
  en: { tag: 'Questions', h2: ['Frequently Asked', 'Questions'], desc: 'Everything you need to know about GreenLens and getting started.' },
  es: { tag: 'Preguntas', h2: ['Preguntas', 'Frecuentes'], desc: 'Todo lo que necesitas saber sobre GreenLens y el inicio.' },
}

export default function FAQ() {
  const { lang } = useLang();
  const [activeIndex, setActiveIndex] = useState<number | null>(null);
  const text = TEXT[lang];

  return (
    <section id="faq" className="section faq">
      <div className="container">
        <div className="section-header reveal">
          <span className="tag">{text.tag}</span>
          <h2>{text.h2[0]} <em>{text.h2[1]}</em></h2>
          <p className="section-desc">
            {text.desc}
          </p>
        </div>

        <div className="faq-grid reveal delay-1">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className={`faq-item ${activeIndex === index ? 'active' : ''}`}
              onClick={() => setActiveIndex(activeIndex === index ? null : index)}
            >
              <div className="faq-question">
                <h3>{faq.question[lang]}</h3>
                <span className="faq-icon">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </div>
              <AnimatePresence>
                {activeIndex === index && (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: 'auto', opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.3, ease: 'easeInOut' }}
                    className="faq-answer"
                  >
                    <p>{faq.answer[lang]}</p>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          ))}
        </div>
      </div>

      <style jsx>{`
        .faq {
          background: var(--cream-alt);
          padding: var(--s16) 0;
        }
        .section-header {
          text-align: center;
          max-width: 600px;
          margin: 0 auto var(--s12);
        }
        .section-header h2 em {
          display: block;
          font-style: italic;
          color: var(--green);
        }
        .section-desc {
          font-size: 1.05rem;
          color: var(--muted);
          margin-top: var(--s2);
        }
        .faq-grid {
          max-width: 800px;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          gap: var(--s3);
        }
        .faq-item {
          background: var(--white);
          border-radius: var(--r-lg);
          border: 1px solid rgba(19, 31, 22, 0.04);
          cursor: pointer;
          overflow: hidden;
          transition: border var(--t), box-shadow var(--t), transform var(--t);
        }
        .faq-item:hover {
          border-color: rgba(42, 92, 63, 0.15);
          transform: translateY(-2px);
          box-shadow: 0 10px 30px rgba(19, 31, 22, 0.05);
        }
        .faq-item.active {
          border-color: var(--green);
          box-shadow: 0 15px 40px rgba(42, 92, 63, 0.1);
        }
        .faq-question {
          padding: var(--s4) var(--s6);
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
        }
        .faq-question h3 {
          font-family: var(--body);
          font-size: 1.05rem;
          font-weight: 700;
          color: var(--dark);
          margin: 0;
        }
        .faq-icon {
          color: var(--muted);
          transition: transform var(--t);
        }
        .faq-item.active .faq-icon {
          transform: rotate(180deg);
          color: var(--green);
        }
        .faq-answer {
          padding: 0 var(--s6) var(--s4);
        }
        .faq-answer p {
          color: var(--muted);
          font-size: 0.95rem;
          line-height: 1.6;
          margin: 0;
        }

        @media (max-width: 768px) {
          .faq-question {
            padding: var(--s3) var(--s4);
          }
          .faq-answer {
            padding: 0 var(--s4) var(--s3);
          }
        }
      `}</style>
    </section>
  );
}