import type { Metadata } from "next";
import { Download, ExternalLink, FileText } from "lucide-react";

export const metadata: Metadata = {
  title: "Bases del Sorteo",
  description: "Bases y condiciones del sorteo solidario Concursando con Amor.",
};

export default function BasesPage() {
  // #toolbar=1 ayuda en Chrome; #view=FitH ajusta al ancho
  const pdfSrc = "/bases.pdf#view=FitH&toolbar=1";

  return (
    <main className="min-h-[calc(100vh-4rem)] bg-brand-soft flex flex-col">
      <div className="mx-auto max-w-6xl w-full px-4 py-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-slate-200">
        <div className="flex items-center gap-3">
          <FileText className="w-6 h-6 text-brand-purple shrink-0" />
          <div>
            <h1 className="text-xl sm:text-2xl font-extrabold text-brand-ink">Bases del Sorteo</h1>
            <p className="text-brand-muted text-sm">Documento oficial (PDF)</p>
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <a
            href="/bases.pdf"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-slate-300 bg-white text-sm font-semibold text-brand-ink hover:border-brand-purple transition-colors"
          >
            <ExternalLink className="w-4 h-4" />
            Abrir en pestaña nueva
          </a>
          <a
            href="/bases.pdf"
            download="bases-concursando-con-amor.pdf"
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-gradient text-sm font-bold text-white hover:opacity-90 transition-colors"
          >
            <Download className="w-4 h-4" />
            Descargar PDF
          </a>
        </div>
      </div>

      {/* Visor a casi toda la ventana */}
      <div className="flex-1 px-2 sm:px-4 py-3">
        <object
          data={pdfSrc}
          type="application/pdf"
          className="w-full h-[calc(100vh-9rem)] min-h-[70vh] rounded-2xl border border-slate-200 bg-white"
          aria-label="Bases del sorteo - Concursando con Amor"
        >
          {/* Fallback si el navegador no embebe PDFs (Safari iOS, etc.) */}
          <div className="flex flex-col items-center justify-center gap-4 p-10 text-center bg-white rounded-2xl border border-slate-200 min-h-[50vh]">
            <FileText className="w-12 h-12 text-slate-300" />
            <p className="text-brand-muted max-w-md">
              Tu navegador no puede mostrar el PDF dentro de la página. Ábrelo o descárgalo para
              leer las bases.
            </p>
            <div className="flex flex-wrap gap-3 justify-center">
              <a
                href="/bases.pdf"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-slate-300 text-brand-ink hover:border-brand-purple"
              >
                <ExternalLink className="w-4 h-4" /> Abrir PDF
              </a>
              <a
                href="/bases.pdf"
                download="bases-concursando-con-amor.pdf"
                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-brand-gradient text-white font-bold"
              >
                <Download className="w-4 h-4" /> Descargar
              </a>
            </div>
          </div>
        </object>
      </div>
    </main>
  );
}