import { useState } from "react"
import Carrusel from "./components/Carrusel"

// Fundación Terapeandog — sitio institucional (v2, con marca real)
// Paleta e identidad tomadas del manual de marca (Canva). Inspiración de estructura: fundaciontregua.cl
// TODO reemplazar por el cliente: fotos reales, cifras de impacto, testimonios reales,
// datos de contacto, redes y medio de donación.

const LOGO = "/logo-terapeandog.png"

const NAV = [
  { href: "#nosotros", label: "Nosotros" },
  { href: "#programas", label: "Programas" },
  { href: "#galeria", label: "Galería" },
  { href: "#impacto", label: "Impacto" },
  { href: "#testimonios", label: "Testimonios" },
  { href: "#contacto", label: "Contacto" },
]

// Orden de pilares como Fundación Tregua: Salud, Educación, Bienestar
const PROGRAMAS = [
  {
    icono: "❤️",
    titulo: "Salud",
    texto:
      "Terapias asistidas con perros que apoyan la rehabilitación física, cognitiva y emocional, junto a profesionales de la salud.",
  },
  {
    icono: "📚",
    titulo: "Educación",
    texto:
      "Programas en escuelas y comunidades que fomentan la empatía, la tenencia responsable y el respeto por los animales.",
  },
  {
    icono: "🌿",
    titulo: "Bienestar",
    texto:
      "Acompañamiento que reduce el estrés y la ansiedad, promoviendo calidad de vida a través del vínculo con los perros.",
  },
]

const AYUDAS = [
  { icono: "🎁", titulo: "Dona", texto: "Tu aporte financia sesiones, el cuidado de los perros y nuestros programas.", cta: "Quiero donar" },
  { icono: "🙌", titulo: "Sé voluntario/a", texto: "Suma tu tiempo y talento a las actividades y visitas de la fundación.", cta: "Postular" },
  { icono: "📣", titulo: "Difunde", texto: "Comparte nuestra misión y ayúdanos a llegar a más personas.", cta: "Compartir" },
]

const TESTIMONIOS = [
  { texto: "Ver a mi hijo sonreír durante las sesiones con los perros no tiene precio. Notamos avances que no lográbamos de otra forma.", autor: "Carla", rol: "Madre de participante" },
  { texto: "El programa transformó el ambiente de nuestra sala. Los niños aprendieron empatía y responsabilidad de una manera única.", autor: "Rodrigo", rol: "Profesor" },
  { texto: "Las visitas de Terapeandog son el momento más esperado de la semana para nuestros adultos mayores.", autor: "Patricia", rol: "Centro de día" },
]

function Navbar() {
  const [abierto, setAbierto] = useState(false)
  return (
    <header className="sticky top-0 z-50 bg-nube/90 backdrop-blur border-b border-brand-100">
      <nav className="mx-auto max-w-6xl px-4 h-16 flex items-center justify-between">
        <a href="#inicio" className="flex items-center gap-2.5 font-extrabold text-brand-800 text-lg">
          <img src={LOGO} alt="Terapeandog" className="h-10 w-10 rounded-full object-cover" />
          Terapeandog
        </a>
        <ul className="hidden md:flex items-center gap-7 text-sm font-medium text-brand-700">
          {NAV.map((n) => (
            <li key={n.href}><a href={n.href} className="hover:text-brand-500 transition-colors">{n.label}</a></li>
          ))}
        </ul>
        <a href="#contacto" className="hidden md:inline-flex rounded-full bg-brand-600 px-5 py-2 text-sm font-semibold text-white hover:bg-brand-700 transition-colors">
          Apóyanos
        </a>
        <button className="md:hidden text-brand-800 text-2xl" onClick={() => setAbierto((v) => !v)} aria-label="Menú">
          {abierto ? "✕" : "☰"}
        </button>
      </nav>
      {abierto && (
        <ul className="md:hidden border-t border-brand-100 bg-nube px-4 py-3 space-y-1 text-brand-700">
          {NAV.map((n) => (
            <li key={n.href}><a href={n.href} onClick={() => setAbierto(false)} className="block py-2 hover:text-brand-500">{n.label}</a></li>
          ))}
          <li><a href="#contacto" onClick={() => setAbierto(false)} className="block mt-2 rounded-full bg-brand-600 px-5 py-2 text-center font-semibold text-white">Apóyanos</a></li>
        </ul>
      )}
    </header>
  )
}

function Hero() {
  return (
    <section id="inicio" className="relative overflow-hidden bg-gradient-to-b from-brand-100 via-brand-50 to-white">
      <div className="mx-auto max-w-6xl px-4 py-20 md:py-28 grid md:grid-cols-2 gap-10 items-center">
        <div>
          <span className="inline-flex items-center gap-2 rounded-full bg-white text-brand-600 px-4 py-1 text-sm font-medium shadow-sm ring-1 ring-brand-100">
            🐕 Terapias asistidas con perros
          </span>
          <h1 className="mt-5 text-4xl md:text-5xl font-extrabold tracking-tight text-brand-800 leading-tight">
            Dejando huellas en <span className="text-brand-500">cada corazón</span>.
          </h1>
          <p className="mt-5 text-lg text-brand-700/90 max-w-xl">
            En Fundación Terapeandog creemos que el vínculo entre las personas y los perros puede
            ser una poderosa herramienta para promover el bienestar, la educación y la salud,
            desde el respeto mutuo.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a href="#programas" className="rounded-full bg-brand-600 px-7 py-3 font-semibold text-white hover:bg-brand-700 transition-colors">
              Conoce nuestro trabajo
            </a>
            <a href="#contacto" className="rounded-full border border-brand-400 px-7 py-3 font-semibold text-brand-700 hover:bg-brand-50 transition-colors">
              Apóyanos
            </a>
          </div>
        </div>
        <div className="relative flex justify-center">
          <div className="absolute inset-0 bg-gradient-to-br from-brand-300/40 to-azul-300/40 blur-3xl rounded-full" />
          <img src={LOGO} alt="Logo Fundación Terapeandog" className="relative w-72 h-72 md:w-96 md:h-96 object-contain drop-shadow-xl" />
        </div>
      </div>
    </section>
  )
}

function Nosotros() {
  return (
    <section id="nosotros" className="mx-auto max-w-6xl px-4 py-20">
      <div className="grid md:grid-cols-2 gap-12 items-center">
        <div>
          <p className="text-brand-500 font-semibold uppercase tracking-wide text-sm">Quiénes somos</p>
          <h2 className="mt-2 text-3xl font-bold text-brand-800">Nuestra misión</h2>
          <blockquote className="mt-6 border-l-4 border-brand-400 pl-5 text-lg text-brand-700 italic">
            “Creemos que el vínculo entre las personas y los perros puede convertirse en una
            poderosa herramienta para promover el bienestar, la educación y la salud, siempre
            que se construya desde el respeto mutuo.”
          </blockquote>
          <p className="mt-6 text-brand-700/90">
            Trabajamos con equipos de personas y perros preparados para acompañar a quienes más
            lo necesitan, en colaboración con instituciones de salud, educación y organizaciones
            sociales.
          </p>
        </div>
        <div className="grid sm:grid-cols-2 gap-4">
          {[
            { t: "Respeto mutuo", d: "El bienestar del perro es tan importante como el de las personas." },
            { t: "Vínculo", d: "Construimos relaciones de confianza y afecto genuino." },
            { t: "Profesionalismo", d: "Trabajamos junto a especialistas de cada área." },
            { t: "Comunidad", d: "Llevamos nuestros programas a quienes más lo necesitan." },
          ].map((v) => (
            <div key={v.t} className="rounded-2xl bg-nube border border-brand-100 p-5">
              <h3 className="font-semibold text-brand-800">{v.t}</h3>
              <p className="mt-1 text-sm text-brand-700/70">{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

function Programas() {
  return (
    <section id="programas" className="bg-nube py-20">
      <div className="mx-auto max-w-6xl px-4">
        <div className="text-center max-w-2xl mx-auto">
          <p className="text-brand-500 font-semibold uppercase tracking-wide text-sm">Qué hacemos</p>
          <h2 className="mt-2 text-3xl font-bold text-brand-800">Nuestros programas</h2>
          <p className="mt-4 text-brand-700/80">
            Intervenciones asistidas con perros organizadas en tres áreas de acción.
          </p>
        </div>
        <div className="mt-12 grid md:grid-cols-3 gap-6">
          {PROGRAMAS.map((p) => (
            <div key={p.titulo} className="rounded-3xl bg-white p-8 shadow-sm border border-brand-100 hover:shadow-md hover:-translate-y-1 transition-all">
              <div className="w-14 h-14 rounded-2xl bg-brand-100 flex items-center justify-center text-3xl">{p.icono}</div>
              <h3 className="mt-5 text-xl font-bold text-brand-800">{p.titulo}</h3>
              <p className="mt-3 text-brand-700/80">{p.texto}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

function Galeria() {
  return (
    <section id="galeria" className="mx-auto max-w-6xl px-4 py-20">
      <div className="text-center max-w-2xl mx-auto mb-12">
        <p className="text-brand-500 font-semibold uppercase tracking-wide text-sm">Momentos</p>
        <h2 className="mt-2 text-3xl font-bold text-brand-800">Nuestra galería</h2>
        <p className="mt-4 text-brand-700/80">Imágenes de nuestras terapias y actividades con la comunidad.</p>
      </div>
      <Carrusel />
    </section>
  )
}

function Impacto() {
  // TODO reemplazar por cifras reales de la fundación
  const stats = [
    { n: "+500", l: "Personas acompañadas" },
    { n: "12", l: "Perros de terapia" },
    { n: "20", l: "Instituciones aliadas" },
    { n: "5", l: "Años de trabajo" },
  ]
  return (
    <section id="impacto" className="mx-auto max-w-6xl px-4 py-20">
      <div className="rounded-3xl bg-gradient-to-br from-brand-600 to-brand-800 text-white px-6 py-12">
        <h2 className="text-center text-2xl font-bold">Nuestro impacto</h2>
        <div className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {stats.map((s) => (
            <div key={s.l}>
              <div className="text-4xl font-extrabold">{s.n}</div>
              <div className="mt-1 text-brand-200 text-sm">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

function Testimonios() {
  return (
    <section id="testimonios" className="bg-nube py-20">
      <div className="mx-auto max-w-6xl px-4">
        <div className="text-center max-w-2xl mx-auto">
          <p className="text-brand-500 font-semibold uppercase tracking-wide text-sm">Voces</p>
          <h2 className="mt-2 text-3xl font-bold text-brand-800">Lo que nos cuentan</h2>
        </div>
        <div className="mt-12 grid md:grid-cols-3 gap-6">
          {TESTIMONIOS.map((t) => (
            <figure key={t.autor} className="rounded-3xl bg-white p-8 border border-brand-100 flex flex-col">
              <div className="text-4xl text-brand-300 leading-none">“</div>
              <blockquote className="mt-2 text-brand-700/90 flex-1">{t.texto}</blockquote>
              <figcaption className="mt-6 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-brand-200 flex items-center justify-center text-brand-700 font-bold">
                  {t.autor[0]}
                </div>
                <div>
                  <div className="font-semibold text-brand-800 text-sm">{t.autor}</div>
                  <div className="text-xs text-brand-700/60">{t.rol}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  )
}

function Ayudar() {
  return (
    <section id="ayudar" className="mx-auto max-w-6xl px-4 py-20">
      <div className="text-center max-w-2xl mx-auto">
        <p className="text-brand-500 font-semibold uppercase tracking-wide text-sm">Súmate</p>
        <h2 className="mt-2 text-3xl font-bold text-brand-800">Cómo puedes ayudar</h2>
        <p className="mt-4 text-brand-700/80">Cada aporte nos permite llegar a más personas y cuidar mejor a nuestros perros.</p>
      </div>
      <div className="mt-12 grid md:grid-cols-3 gap-6">
        {AYUDAS.map((a) => (
          <div key={a.titulo} className="rounded-3xl bg-white p-8 border border-brand-100 flex flex-col text-center items-center">
            <div className="w-14 h-14 rounded-2xl bg-brand-100 flex items-center justify-center text-3xl">{a.icono}</div>
            <h3 className="mt-5 text-xl font-bold text-brand-800">{a.titulo}</h3>
            <p className="mt-3 text-brand-700/80 flex-1">{a.texto}</p>
            <a href="#contacto" className="mt-6 inline-flex justify-center rounded-full bg-brand-600 px-5 py-2.5 font-semibold text-white hover:bg-brand-700 transition-colors">
              {a.cta}
            </a>
          </div>
        ))}
      </div>
    </section>
  )
}

function Contacto() {
  const [enviado, setEnviado] = useState(false)
  function onSubmit(e) {
    e.preventDefault()
    // TODO conectar a un servicio de correo real (Formspree, EmailJS o backend propio)
    setEnviado(true)
  }
  return (
    <section id="contacto" className="bg-gradient-to-b from-white to-brand-50 py-20">
      <div className="mx-auto max-w-6xl px-4 grid md:grid-cols-2 gap-12">
        <div>
          <p className="text-brand-500 font-semibold uppercase tracking-wide text-sm">Contacto</p>
          <h2 className="mt-2 text-3xl font-bold text-brand-800">Hablemos</h2>
          <p className="mt-4 text-brand-700/80">
            ¿Quieres llevar nuestros programas a tu institución, colaborar o ser voluntario/a?
            Escríbenos y te responderemos a la brevedad.
          </p>
          {/* TODO reemplazar por datos reales */}
          <ul className="mt-6 space-y-3 text-brand-700">
            <li>📧 contacto@terapeandog.cl</li>
            <li>📱 +56 9 0000 0000</li>
            <li>📍 Chile</li>
            <li className="flex gap-3 pt-2 text-2xl">
              <a href="#" aria-label="Instagram">📸</a>
              <a href="#" aria-label="Facebook">👍</a>
            </li>
          </ul>
        </div>
        <form onSubmit={onSubmit} className="rounded-3xl bg-white border border-brand-100 shadow-sm p-6 md:p-8 space-y-4">
          {enviado ? (
            <div className="text-center py-10">
              <div className="text-5xl">🐾</div>
              <p className="mt-4 text-lg font-semibold text-brand-600">¡Gracias por escribirnos!</p>
              <p className="mt-1 text-brand-700/60 text-sm">Te responderemos pronto.</p>
            </div>
          ) : (
            <>
              <div>
                <label className="block text-sm font-medium text-brand-700 mb-1">Nombre</label>
                <input required type="text" className="w-full rounded-xl border border-brand-200 px-4 py-2.5 focus:border-brand-500 focus:ring-2 focus:ring-brand-100 outline-none" />
              </div>
              <div>
                <label className="block text-sm font-medium text-brand-700 mb-1">Email</label>
                <input required type="email" className="w-full rounded-xl border border-brand-200 px-4 py-2.5 focus:border-brand-500 focus:ring-2 focus:ring-brand-100 outline-none" />
              </div>
              <div>
                <label className="block text-sm font-medium text-brand-700 mb-1">Mensaje</label>
                <textarea required rows={4} className="w-full rounded-xl border border-brand-200 px-4 py-2.5 focus:border-brand-500 focus:ring-2 focus:ring-brand-100 outline-none resize-none" />
              </div>
              <button type="submit" className="w-full rounded-full bg-brand-600 px-6 py-3 font-semibold text-white hover:bg-brand-700 transition-colors">
                Enviar mensaje
              </button>
            </>
          )}
        </form>
      </div>
    </section>
  )
}

function Footer() {
  return (
    <footer className="bg-brand-900 text-brand-200">
      <div className="mx-auto max-w-6xl px-4 py-12 grid md:grid-cols-3 gap-8">
        <div>
          <div className="flex items-center gap-2.5 font-bold text-white">
            <img src={LOGO} alt="Terapeandog" className="h-10 w-10 rounded-full object-cover" />
            Fundación Terapeandog
          </div>
          <p className="mt-3 text-sm text-brand-300">Dejando huellas en cada corazón.</p>
        </div>
        <div>
          <h4 className="font-semibold text-white">Navegación</h4>
          <ul className="mt-3 space-y-2 text-sm">
            {NAV.map((n) => <li key={n.href}><a href={n.href} className="hover:text-white transition-colors">{n.label}</a></li>)}
          </ul>
        </div>
        <div>
          <h4 className="font-semibold text-white">Contacto</h4>
          <ul className="mt-3 space-y-2 text-sm text-brand-300">
            <li>📧 contacto@terapeandog.cl</li>
            <li>📍 Chile</li>
          </ul>
        </div>
      </div>
      <div className="border-t border-brand-800">
        <p className="mx-auto max-w-6xl px-4 py-5 text-sm text-brand-400">
          © {new Date().getFullYear()} Fundación Terapeandog. Todos los derechos reservados.
        </p>
      </div>
    </footer>
  )
}

function App() {
  return (
    <div className="min-h-screen bg-white text-tinta antialiased">
      <Navbar />
      <main>
        <Hero />
        <Nosotros />
        <Programas />
        <Galeria />
        <Impacto />
        <Testimonios />
        <Ayudar />
        <Contacto />
      </main>
      <Footer />
    </div>
  )
}

export default App
