import { Heart, HandHeart, Instagram, Share2 } from "lucide-react";
import { parseVideoEmbed, type AwarenessVideo } from "@/lib/awareness-videos";
import AwarenessVideoCard from "@/components/AwarenessVideoCard";
import Reveal from "@/components/Reveal";

type Props = {
  eyebrow: string;
  title: string;
  subtitle: string;
  videos: AwarenessVideo[];
  instagramUrl: string;
  shareUrl: string;
};

/**
 * Sección de sensibilización: videos + llamados a la acción (seguir, aportar, compartir).
 * Se enciende/apaga desde /admin/sensibilizacion.
 */
export default function AwarenessSection({ eyebrow, title, subtitle, videos, instagramUrl, shareUrl }: Props) {
  const shareText = `${title} — Conoce y apoya a la Fundación Creciendo con Amor: ${shareUrl}`;
  const whatsappShare = `https://wa.me/?text=${encodeURIComponent(shareText)}`;

  // Los videos verticales (reels/shorts) se ven mejor en grilla de 3; los horizontales en 2
  const allVertical = videos.every((v) => parseVideoEmbed(v.url)?.vertical);
  const grid =
    videos.length === 1
      ? "mx-auto max-w-3xl"
      : allVertical
        ? "grid items-start gap-6 sm:grid-cols-2 lg:grid-cols-3"
        : "grid items-start gap-6 md:grid-cols-2";

  return (
    <section
      id="historias"
      className="relative scroll-mt-20 overflow-hidden bg-gradient-to-b from-[#fdf2f7] via-white to-[#f3eefe] py-20"
    >
      <Heart className="float-slow pointer-events-none absolute left-[5%] top-12 h-10 w-10 text-brand-pink/30" aria-hidden />
      <Heart className="float-slower pointer-events-none absolute bottom-16 right-[6%] h-8 w-8 text-brand-purple/25" aria-hidden />

      <div className="relative mx-auto max-w-6xl px-4">
        <Reveal className="mx-auto mb-12 max-w-2xl text-center">
          {eyebrow && <p className="font-script text-3xl text-brand-pink md:text-4xl">{eyebrow}</p>}
          <h2 className="mt-1 text-2xl font-extrabold text-brand-ink md:text-3xl">{title}</h2>
          {subtitle && <p className="mt-3 text-brand-muted">{subtitle}</p>}
        </Reveal>

        {videos.length > 0 && (
          <div className={grid}>
            {videos.map((video, i) => (
              <Reveal key={`${video.url}-${i}`} delay={Math.min(i, 3) * 0.1}>
                <AwarenessVideoCard video={video} />
              </Reveal>
            ))}
          </div>
        )}

        <Reveal className="mx-auto mt-14 max-w-3xl rounded-3xl bg-brand-gradient p-8 text-center text-white shadow-xl shadow-brand-purple/20 md:p-10">
          <p className="font-serif text-xl leading-snug md:text-2xl">
            Cada aporte, por pequeño que parezca, tiene un impacto real.
          </p>
          <p className="mt-2 text-sm text-white/85">
            Súmate desde hoy: síguenos, comparte estas historias o haz tu aporte.
          </p>
          <div className="mt-7 flex flex-wrap justify-center gap-3">
            <a
              href="#transferencia"
              className="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 font-bold text-brand-purple shadow-lg transition hover:bg-brand-soft"
            >
              <HandHeart className="h-4 w-4" aria-hidden /> Quiero aportar
            </a>
            {instagramUrl && (
              <a
                href={instagramUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-full border border-white/60 bg-white/10 px-6 py-3 font-bold text-white backdrop-blur transition hover:bg-white/20"
              >
                <Instagram className="h-4 w-4" aria-hidden /> Síguenos
              </a>
            )}
            <a
              href={whatsappShare}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-full border border-white/60 bg-white/10 px-6 py-3 font-bold text-white backdrop-blur transition hover:bg-white/20"
            >
              <Share2 className="h-4 w-4" aria-hidden /> Compartir
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}