'use client'

import Image from 'next/image'
import { useLang } from '@/context/LangContext'

const STEPS = {
  de: [
    { num: '01', title: 'Pflanze fotografieren', desc: 'Öffne die App, richte die Kamera auf deine Pflanze und tippe auf Scan. Das war\'s schon.' },
    { num: '02', title: 'KI identifiziert sofort', desc: 'In unter einer Sekunde erhältst du den genauen Namen, die Art und alle wichtigen Eckdaten.' },
    { num: '03', title: 'Pflegeplan erhalten', desc: 'GreenLens erstellt automatisch einen personalisierten Pflegeplan passend zu deiner Pflanze und deinem Standort.' },
    { num: '04', title: 'Wachstum verfolgen', desc: 'Dokumentiere Fotos, tracke das Gießen und lass dich an wichtige Pflegetermine erinnern.' },
  ],
  en: [
    { num: '01', title: 'Photograph your plant', desc: 'Open the app, point the camera at your plant and tap Scan. That\'s it.' },
    { num: '02', title: 'AI identifies instantly', desc: 'In under a second you get the exact name, species and all key details.' },
    { num: '03', title: 'Receive care plan', desc: 'GreenLens automatically creates a personalized care plan for your plant and location.' },
    { num: '04', title: 'Track growth', desc: 'Document photos, track watering and get reminded of important care dates.' },
  ],
  es: [
    { num: '01', title: 'Fotografía tu planta', desc: 'Abre la app, apunta la cámara a tu planta y toca Escanear. Eso es todo.' },
    { num: '02', title: 'La IA identifica al instante', desc: 'En menos de un segundo obtienes el nombre exacto, la especie y todos los datos clave.' },
    { num: '03', title: 'Recibe el plan de cuidado', desc: 'GreenLens crea automáticamente un plan de cuidado personalizado para tu planta y ubicación.' },
    { num: '04', title: 'Seguimiento del crecimiento', desc: 'Documenta fotos, registra el riego y recibe recordatorios de citas de cuidado importantes.' },
  ],
}

const TAG = { de: 'So funktionierts', en: 'How it works', es: 'Cómo funciona' }
const H2 = {
  de: ['Einfacher', 'als du', 'denkst.'],
  en: ['Simpler', 'than you', 'think.'],
  es: ['Más fácil', 'de lo que', 'crees.'],
}
const ALT = {
  de: 'GreenLens App in Verwendung – Pflanze wird gescannt',
  en: 'GreenLens app in use – scanning a plant',
  es: 'App GreenLens en uso – escaneando una planta',
}

export default function HowItWorks() {
  const { lang } = useLang()
  const steps = STEPS[lang]
  const h2 = H2[lang]

  return (
    <section className="how" id="how" aria-labelledby="how-heading">
      <div className="container">

        <div className="how-text">
          <p className="tag">{TAG[lang]}</p>
          <h2 id="how-heading">
            {h2[0]}<br />{h2[1]}<br /><em>{h2[2]}</em>
          </h2>

          <div className="how-steps">
            {steps.map((s, i) => (
              <div className={`how-step reveal delay-${i + 1}`} key={s.num}>
                <div className="how-step-num">{s.num}</div>
                <div>
                  <h4>{s.title}</h4>
                  <p>{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="how-visual reveal-fade delay-2">
          <div className="how-img-wrap" style={{ position: 'relative', height: '500px' }}>
            <Image
              src="/scan-feature.png"
              alt={ALT[lang]}
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              style={{ objectFit: 'cover', borderRadius: '24px' }}
            />
          </div>
        </div>

      </div>
    </section>
  )
}