"use client"

import { ArrowRight } from "lucide-react"
import { services } from "@/lib/brochure-data"
import { CoverSymbol } from "./slide-symbols"

export function CoverSlide({ onExplore }: { onExplore: () => void }) {
  return (
    <div className="bg-noise relative h-full w-full">
      {/* Constellation network */}
      <div className="bg-network absolute inset-0" aria-hidden="true" />

      {/* Top accent line */}
      <div
        className="absolute left-0 top-0 h-px w-full bg-gradient-to-r from-transparent via-primary/50 to-transparent"
        aria-hidden="true"
      />

      <div className="relative z-10 mx-auto flex h-full w-full max-w-7xl items-center px-6 pt-20 pb-10 md:py-24 md:px-12 lg:px-16">
        <div className="grid w-full gap-8 md:grid-cols-12 md:gap-12">
          {/* ── Main content: left 7 cols ── */}
          <div className="flex flex-col justify-center md:col-span-7">
            {/* Logo */}
            <img
              src="/tera-logo.png"
              alt="Logo de Tera Cooperativa Tecnológica"
              className="animate-fade-in-up mb-10 size-16 rounded-md object-contain md:size-20"
            />

            {/* Mono tag */}
            <span className="animate-fade-in-up anim-delay-1 mb-6 inline-block font-mono text-[13px] uppercase tracking-[0.25em] text-foreground/60">
              tera · cooperativa tecnológica
            </span>

            {/* Hero title */}
            <h1 className="animate-fade-in-up anim-delay-2 font-heading text-5xl font-extrabold leading-[0.92] tracking-[-0.03em] text-foreground sm:text-6xl md:text-7xl xl:text-8xl">
              Tecnología
              <br />
              que impulsa
              <br />
              <span className="text-primary">tu negocio</span>
            </h1>

            {/* Description */}
            <p className="animate-fade-in-up anim-delay-3 mt-8 max-w-md text-base leading-relaxed text-foreground/75 md:text-[17px]">
              Desarrollamos software, implementamos Odoo, alojamos tus
              plataformas, diseñamos tu marca y sumamos talento a tu equipo.
              Todo desde un solo lugar.
            </p>

            {/* CTA */}
            <div className="animate-fade-in-up anim-delay-4 mt-10 flex items-center gap-6">
              <button
                onClick={onExplore}
                className="group inline-flex items-center gap-3 rounded-lg border border-primary bg-primary px-7 py-3.5 text-xs font-semibold uppercase tracking-[0.15em] text-primary-foreground transition-all hover:bg-transparent hover:text-primary"
              >
                Explorar servicios
                <ArrowRight className="size-3.5 transition-transform group-hover:translate-x-1" />
              </button>
              <span className="hidden font-mono text-[11px] uppercase tracking-widest text-foreground/40 md:inline">
                deslizá · flechas · rueda
              </span>
            </div>
          </div>

          {/* ── Right column: decorative + service index ── */}
          <div className="hidden md:col-span-5 md:flex md:flex-col md:items-end md:justify-between md:py-4">
            {/* Large "TERA" watermark text + cooperative symbol */}
            <div className="relative">
              <CoverSymbol className="absolute -left-16 -top-10 size-[20rem] text-foreground/[0.1] lg:size-[24rem]" />
              <span
                className="animate-fade-in anim-delay-5 pointer-events-none relative select-none font-heading text-[11rem] font-black leading-none tracking-tighter text-foreground/[0.03] lg:text-[14rem] xl:text-[16rem]"
                aria-hidden="true"
              >
                TERA
              </span>
            </div>

            {/* Service index */}
            <nav className="animate-fade-in-up anim-delay-6 border-l border-border/60 pl-5">
              <span className="mb-3 block font-mono text-[13px] uppercase tracking-[0.18em] text-foreground/65">
                Servicios
              </span>
              <div className="space-y-2.5">
                {services.map((s) => (
                  <div key={s.id} className="flex items-baseline gap-3">
                    <span className="font-mono text-[11px] font-medium text-primary">
                      {s.index}
                    </span>
                    <span className="text-[15px] font-semibold text-foreground/85">
                      {s.title}
                    </span>
                  </div>
                ))}
              </div>
            </nav>
          </div>

          {/* ── Mobile service pills ── */}
          <div className="animate-fade-in-up anim-delay-5 flex flex-col gap-y-1.5 border-t border-border/40 pt-4 md:hidden">
            {services.map((s) => (
              <span
                key={s.id}
                className="flex items-center gap-2 font-mono text-[11px]"
              >
                <span className="text-primary">{s.index}</span>
                <span className="text-muted-foreground">{s.title}</span>
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Bottom accent line */}
      <div
        className="absolute bottom-0 left-0 h-px w-full bg-gradient-to-r from-border/30 via-border to-border/30"
        aria-hidden="true"
      />
    </div>
  )
}