import { Download, ArrowLeft, ExternalLink } from 'lucide-react';
import Link from 'next/link';

export const metadata = {
  title: 'Términos y Condiciones — Horux 360',
};

const PDF_URL = '/legal/terminos-y-condiciones.pdf';

export default function TerminosPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <header className="sticky top-0 z-10 border-b bg-background/95 backdrop-blur">
        <div className="mx-auto max-w-6xl px-6 py-3 flex items-center justify-between gap-4">
          <Link href="/login" className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
            <ArrowLeft className="h-4 w-4" />
            Volver
          </Link>
          <h1 className="text-base sm:text-lg font-semibold truncate">Términos y Condiciones</h1>
          <div className="flex items-center gap-3">
            <a
              href={PDF_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="hidden sm:flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
              title="Abrir en nueva pestaña"
            >
              <ExternalLink className="h-4 w-4" />
              Abrir
            </a>
            <a
              href={PDF_URL}
              download
              className="flex items-center gap-2 text-sm font-medium text-primary hover:underline"
            >
              <Download className="h-4 w-4" />
              Descargar
            </a>
          </div>
        </div>
      </header>

      {/* El PDF se renderiza con el viewer nativo del navegador — preserva
          fuentes, tablas, numeración, listas, todo el formato original. El
          fallback para móviles que no soportan inline PDF aparece abajo. */}
      <main className="flex-1 mx-auto w-full max-w-6xl px-2 sm:px-6 py-4">
        <object
          data={PDF_URL}
          type="application/pdf"
          className="w-full h-[calc(100vh-120px)] min-h-[600px] rounded border"
          aria-label="Términos y Condiciones de Horux 360"
        >
          {/* Fallback: navegadores/móviles sin viewer inline */}
          <div className="p-8 text-center space-y-4">
            <p className="text-muted-foreground">
              Tu navegador no puede mostrar el PDF directamente.
            </p>
            <div className="flex flex-wrap gap-3 justify-center">
              <a
                href={PDF_URL}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 px-4 py-2 rounded bg-primary text-primary-foreground font-medium hover:bg-primary/90"
              >
                <ExternalLink className="h-4 w-4" />
                Abrir en nueva pestaña
              </a>
              <a
                href={PDF_URL}
                download
                className="inline-flex items-center gap-2 px-4 py-2 rounded border hover:bg-accent"
              >
                <Download className="h-4 w-4" />
                Descargar PDF
              </a>
            </div>
          </div>
        </object>
      </main>
    </div>
  );
}