'use client'

import { useState } from 'react'
import Link from 'next/link'

const PLATFORM_URL = 'https://www.catastralai.cl/login'

const features = [
  {
    num: '01', nombre: 'Mapa Interactivo',
    descripcion: '628 capas de catastro minero y ambiental. Concesiones, manifestaciones, mensuras, pedimentos, litio, relaves, humedales, cuencas hidrológicas y áreas protegidas — Chile y Perú en una sola vista.',
    detalle: ['628 capas disponibles', 'Chile + Perú (INGEMMET)', 'Búsqueda por ROL o titular', 'Superposición ambiental MMA/SEA'],
  },
  {
    num: '02', nombre: 'Informe AI 5×5',
    descripcion: 'Análisis territorial automático en ~6 segundos. Titular, tipo de derecho, distribución de vecinos (manifestaciones, pedimentos, mensuras), restricciones ambientales y una conclusión con recomendaciones.',
    detalle: ['Generación en ~6 segundos', 'Análisis de vecinos por tipo', 'Restricciones MMA-SEA', 'Conclusión automatizada'],
  },
  {
    num: '03', nombre: 'Remates Mineros',
    descripcion: 'Nóminas del Boletín Oficial de Minería cruzadas con estado vigente. Filtra por empresa, propietario, RUT, ROL, causa o comuna. Incluye reporte por empresa y verificación en tiempo real.',
    detalle: ['2.614 nóminas indexadas', '442.745 concesiones', '$282.596M adeudado', 'Enlace al Diario Oficial'],
  },
  {
    num: '04', nombre: 'GeoLab',
    descripcion: 'Carga tus propios archivos geoespaciales (KML, KMZ, SHP, GeoJSON) y superponlos sobre el catastro oficial. Los archivos se eliminan al cerrar sesión para garantizar privacidad.',
    detalle: ['KML, KMZ, SHP, GeoJSON', 'Superposición ambiental', 'Análisis de metalogenia', 'Privacidad garantizada'],
  },
  {
    num: '05', nombre: 'Boletín Minero',
    descripcion: 'Búsqueda inteligente sobre 125.000+ documentos del Boletín Oficial. Filtros por titular, ROL, empresa, región, año. Búsqueda exacta, exclusión de términos y coincidencias aproximadas.',
    detalle: ['125.000+ documentos', 'Búsqueda semántica', 'Múltiples filtros', 'Próximamente'],
    pronto: true,
  },
  {
    num: '06', nombre: 'Alertas Predictivas AI',
    descripcion: 'El sistema detecta los hitos legales de cada concesión y calcula plazos automáticamente según la ley minera. Envía alertas personalizadas por email con días de anticipación al vencimiento.',
    detalle: ['Plazos automáticos', 'Alertas por email', 'Ley minera chilena', 'Prevención de caducidad'],
  },
]

const perfiles = [
  { icon: '⛏', titulo: 'Compañías Mineras', desc: 'Gestión de cartera, alertas de plazos y análisis territorial de sus propiedades.' },
  { icon: '📐', titulo: 'Consultoras', desc: 'Informes AI instantáneos, GeoLab para proyectos propios y análisis ambiental.' },
  { icon: '⚖', titulo: 'Estudios Jurídicos', desc: 'Catastro en tiempo real, directorio de titulares y due diligence minero.' },
  { icon: '💼', titulo: 'Inversionistas', desc: 'Identificación de zonas estratégicas y monitoreo de remates mineros.' },
]

const faqs = [
  { p: '¿Qué es Miner Data?', r: 'Miner Data es la plataforma de inteligencia catastral minera de SYM3. Integra, estructura y analiza datos catastrales oficiales de Chile y Perú, transformando el flujo de datos en información accionable.' },
  { p: '¿De dónde vienen los datos?', r: 'Integramos fuentes oficiales: Sernageomin, INGEMMET, MINEM, Boletín Oficial de Minería, Diario Oficial y capas ambientales del MMA, SEA, cuencas hidrológicas y áreas protegidas.' },
  { p: '¿Cómo funcionan los Informes AI 5×5?', r: 'Seleccionas una propiedad o ingresas una coordenada. La plataforma genera en ~6 segundos un informe con datos registrales, vecinos, restricciones ambientales y recomendaciones automáticas.' },
  { p: '¿Puedo cargar mis propios archivos geoespaciales?', r: 'Sí. GeoLab acepta KML, KMZ, SHP, ZIP y GeoJSON. Los archivos se visualizan junto al catastro oficial y se eliminan automáticamente al cerrar sesión.' },
  { p: '¿Cubre Perú?', r: 'Sí. Integra el catastro de Perú vía INGEMMET y MINEM: concesiones Tituladas, En Trámite, Extinguidas, Bloqueadas y Consentidas, con límites administrativos por departamento.' },
  { p: '¿Qué son las Alertas Predictivas?', r: 'El sistema calcula automáticamente los plazos legales de cada concesión según la ley minera y envía alertas por email con anticipación antes de que caduque.' },
  { p: '¿Necesito instalar algo?', r: 'No. Es 100% web. Funciona en cualquier navegador moderno sin instalación.' },
]

export default function InformacionPage() {
  const [faqOpen, setFaqOpen] = useState(null)

  return (
    <div className="pt-24 pb-28">

      {/* Header */}
      <section className="max-w-3xl mx-auto px-6 mb-20">
        <p className="section-label mb-5">La plataforma</p>
        <h1 className="text-4xl md:text-5xl leading-tight mb-5">
          <span className="font-semibold text-[#1a1a1a]">Funcionalidades diseñadas</span>
          <br />
          <span className="font-light text-zinc-600">para la minería real.</span>
        </h1>
        <p className="text-sm font-light text-zinc-400 leading-relaxed">
          Cada módulo resuelve un problema concreto — con datos oficiales, IA integrada y velocidad industrial.
        </p>
      </section>

      {/* Features grid */}
      <section className="max-w-6xl mx-auto px-6 mb-28">
        <div className="grid md:grid-cols-2 gap-px bg-zinc-100">
          {features.map(f => (
            <div key={f.num} className={`bg-white p-8 ${f.pronto ? 'opacity-60' : ''}`}>
              <div className="flex items-start justify-between mb-5">
                <span className="text-xs font-light text-zinc-300">{f.num}</span>
                {f.pronto && (
                  <span className="text-xs font-light border border-zinc-200 text-zinc-400 px-3 py-0.5 rounded-full">Próximamente</span>
                )}
              </div>
              <h3 className="text-sm font-medium text-[#1a1a1a] mb-3">{f.nombre}</h3>
              <p className="text-xs font-light text-zinc-400 leading-relaxed mb-5">{f.descripcion}</p>
              <div className="grid grid-cols-2 gap-2">
                {f.detalle.map(d => (
                  <div key={d} className="flex items-center gap-2">
                    <span className="w-1 h-1 rounded-full bg-[#C0513A] shrink-0" />
                    <span className="text-xs font-light text-zinc-400">{d}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Perfiles */}
      <section className="bg-white border-y border-zinc-100 py-24">
        <div className="max-w-6xl mx-auto px-6">
          <div className="mb-12">
            <p className="section-label mb-4">¿Para quién es?</p>
            <h2 className="text-3xl leading-snug">
              <span className="font-semibold text-[#1a1a1a]">Construida para</span>
              <span className="font-light text-zinc-400"> toda la industria.</span>
            </h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-px bg-zinc-100">
            {perfiles.map(p => (
              <div key={p.titulo} className="bg-white p-7">
                <div className="text-2xl mb-4">{p.icon}</div>
                <h3 className="text-sm font-medium text-[#1a1a1a] mb-2">{p.titulo}</h3>
                <p className="text-xs font-light text-zinc-400 leading-relaxed">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Planes */}
      <section className="max-w-5xl mx-auto px-6 py-24">
        <div className="mb-12">
          <p className="section-label mb-4">Planes</p>
          <h2 className="text-3xl leading-snug">
            <span className="font-semibold text-[#1a1a1a]">Acceso que se adapta</span>
            <span className="font-light text-zinc-400"> a tu operación.</span>
          </h2>
        </div>
        <div className="grid md:grid-cols-3 gap-4">
          {/* Free */}
          <div className="bg-white border border-zinc-100 rounded-2xl p-7 flex flex-col">
            <h3 className="text-sm font-medium text-[#1a1a1a] mb-1">Explorador</h3>
            <p className="text-xs font-light text-zinc-400 mb-5">Para conocer la plataforma</p>
            <div className="text-2xl font-semibold text-[#1a1a1a] mb-6">Gratis</div>
            <ul className="space-y-2.5 flex-1 mb-8">
              {['Mapa interactivo básico', 'Panel de estadísticas', 'Directorio minero', 'Remates limitados'].map(f => (
                <li key={f} className="text-xs font-light text-zinc-400 flex gap-2">
                  <span className="text-zinc-300 mt-0.5">—</span> {f}
                </li>
              ))}
            </ul>
            <a href={PLATFORM_URL} target="_blank" rel="noopener noreferrer" className="btn-outline text-xs text-center w-full block">
              Crear cuenta gratis
            </a>
          </div>

          {/* Pro */}
          <div className="bg-[#1a1a1a] rounded-2xl p-7 flex flex-col relative">
            <span className="absolute top-0 right-6 -translate-y-1/2 bg-[#C0513A] text-white text-xs font-light px-3 py-1 rounded-full">Popular</span>
            <h3 className="text-sm font-medium text-white mb-1">Profesional</h3>
            <p className="text-xs font-light text-zinc-500 mb-5">Para equipos técnicos</p>
            <div className="text-2xl font-semibold text-white mb-6">Consultar</div>
            <ul className="space-y-2.5 flex-1 mb-8">
              {['Informes AI 5×5 ilimitados', 'GeoLab completo', 'Catastro Chile + Perú', 'Remates completos', 'Alertas predictivas AI'].map(f => (
                <li key={f} className="text-xs font-light text-zinc-400 flex gap-2">
                  <span className="text-[#C0513A] mt-0.5">—</span> {f}
                </li>
              ))}
            </ul>
            <Link href="/contacto" className="bg-white text-[#1a1a1a] text-xs text-center py-2.5 rounded-full font-medium hover:bg-zinc-100 transition-colors block">
              Solicitar acceso
            </Link>
          </div>

          {/* Enterprise */}
          <div className="bg-white border border-zinc-100 rounded-2xl p-7 flex flex-col">
            <h3 className="text-sm font-medium text-[#1a1a1a] mb-1">Empresa</h3>
            <p className="text-xs font-light text-zinc-400 mb-5">Para compañías mineras</p>
            <div className="text-2xl font-semibold text-[#1a1a1a] mb-6">A medida</div>
            <ul className="space-y-2.5 flex-1 mb-8">
              {['Todo lo del plan Pro', 'Múltiples usuarios', 'Integraciones API', 'Onboarding dedicado', 'Soporte prioritario'].map(f => (
                <li key={f} className="text-xs font-light text-zinc-400 flex gap-2">
                  <span className="text-zinc-300 mt-0.5">—</span> {f}
                </li>
              ))}
            </ul>
            <Link href="/contacto" className="btn-primary text-xs text-center w-full block">
              Hablar con ventas →
            </Link>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="max-w-2xl mx-auto px-6">
        <p className="section-label mb-6">FAQ</p>
        <div className="divide-y divide-zinc-100">
          {faqs.map((faq, i) => (
            <div key={i}>
              <button onClick={() => setFaqOpen(faqOpen === i ? null : i)}
                className="w-full flex items-center justify-between py-4 text-left">
                <span className="text-sm font-light text-[#1a1a1a] pr-6">{faq.p}</span>
                <span className={`text-zinc-300 text-sm transition-transform duration-200 shrink-0 ${faqOpen === i ? 'rotate-45' : ''}`}>+</span>
              </button>
              {faqOpen === i && (
                <p className="pb-5 text-xs font-light text-zinc-400 leading-relaxed">{faq.r}</p>
              )}
            </div>
          ))}
        </div>
      </section>
    </div>
  )
}