'use client'

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

const ICONS = [
  <svg key="a" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-light)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M9.5 2a2.5 2.5 0 0 1 5 0v.5a2 2 0 0 0 1.5 1.94V6a2 2 0 0 0 2 2h.5a2.5 2.5 0 0 1 0 5H18a2 2 0 0 0-2 2v.56A2.5 2.5 0 0 1 14.5 22h-5A2.5 2.5 0 0 1 7 19.56V18a2 2 0 0 0-2-2h-.5a2.5 2.5 0 0 1 0-5H5a2 2 0 0 0 2-2V4.44A2 2 0 0 0 8.5 2.5z" />
    <circle cx="12" cy="12" r="2" />
  </svg>,
  <svg key="b" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-light)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
  </svg>,
  <svg key="c" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-light)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
    <circle cx="12" cy="10" r="3" />
  </svg>,
  <svg key="d" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-light)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
  </svg>,
]

const ITEMS = {
  de: [
    { title: 'Scan-basierte Erkennung', desc: 'Vom Foto zur besseren Einordnung in wenigen Schritten.' },
    { title: 'Pflegeorientierte Hinweise', desc: 'Hilft dir, nächste Pflegeentscheidungen schneller zu treffen.' },
    { title: 'Sammlung und Verlauf', desc: 'Behalte Scans, Pflanzen und Notizen an einem Ort.' },
    { title: 'Lexikon und Suche', desc: 'Suche Pflanzen und vergleiche Informationen in einer App.' },
  ],
  en: [
    { title: 'Scan-based identification', desc: 'Move from photo to clearer plant context in a few steps.' },
    { title: 'Care-focused guidance', desc: 'Helps you make faster next-step care decisions.' },
    { title: 'Collection and history', desc: 'Keep scans, plants, and notes in one place.' },
    { title: 'Lexicon and search', desc: 'Look up plants and compare information in one app.' },
  ],
  es: [
    { title: 'Identificacion basada en escaneo', desc: 'Pasa de una foto a un contexto mas claro en pocos pasos.' },
    { title: 'Guias centradas en cuidado', desc: 'Te ayuda a decidir los siguientes pasos mas rapido.' },
    { title: 'Coleccion e historial', desc: 'Guarda escaneos, plantas y notas en un solo lugar.' },
    { title: 'Lexico y busqueda', desc: 'Busca plantas y compara informacion dentro de una app.' },
  ],
}

const TAG_TEXT = { de: 'Technologie', en: 'Technology', es: 'Tecnologia' }
const BODY_TEXT = {
  de: 'GreenLens verbindet Scan-Ergebnisse, Pflegekontext und Sammlungsverwaltung in einer App. So kommst du schneller von einem Pflanzenfoto zu einer verständlichen Entscheidung.',
  en: 'GreenLens combines scan results, care context, and collection management in one app, helping you move from plant photo to a clearer decision faster.',
  es: 'GreenLens combina resultados de escaneo, contexto de cuidado y gestion de coleccion en una sola app para ayudarte a pasar de una foto a una decision mas clara.',
}

export default function Intelligence() {
  const { lang } = useLang()
  const items = ITEMS[lang]

  return (
    <section className="intelligence" id="intelligence" aria-labelledby="intel-heading">
      <div className="container">
        <div className="intelligence-text reveal">
          <p className="tag">{TAG_TEXT[lang]}</p>
          <h2 id="intel-heading">
            Botanical<br />
            <em>Intelligence.</em>
          </h2>
          <p>{BODY_TEXT[lang]}</p>

          <div className="intelligence-list">
            {items.map((item, i) => (
              <div className="intelligence-item" key={item.title}>
                <div className="intelligence-item-icon">{ICONS[i]}</div>
                <div>
                  <h4>{item.title}</h4>
                  <p>{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="intelligence-visual reveal-fade delay-2">
          <div className="intelligence-img-frame" style={{ position: 'relative', height: '600px', overflow: 'hidden' }}>
            <Image
              src="/ai-analysis.png"
              alt="Botanical AI plant analysis visualization"
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              style={{ objectFit: 'cover' }}
            />
            <div className="intelligence-img-overlay" />
            <div className="intelligence-overlay-text">
              <h3>
                Botanical<br />
                <em>Intelligence.</em>
              </h3>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
