import { ArrowUpRight, Star } from "lucide-react";
import { GithubIcon } from "./BrandIcons";
import Reveal from "./Reveal";

export default function FeaturedProject({ project, onOpen }) {
  return (
    <Reveal>
      <div className="glow-border rounded-3xl">
        <div className="glass grain rounded-3xl overflow-hidden grid lg:grid-cols-2">
          <button
            onClick={() => onOpen(project)}
            className="relative aspect-[16/10] lg:aspect-auto text-left"
          >
            {project.image && !project.image.startsWith("[") ? (
              <img src={project.image} alt={project.name} className="h-full w-full object-cover" />
            ) : (
              <div className="h-full w-full min-h-[260px] bg-gradient-to-br from-[color:var(--color-surface)] to-[color:var(--color-bg-soft)] grid place-items-center">
                <span className="font-mono text-xs text-[color:var(--color-muted)]">
                  [CAPTURA_{project.id.toUpperCase()}]
                </span>
              </div>
            )}
          </button>

          <div className="p-8 md:p-10 flex flex-col gap-5">
            <span className="inline-flex w-fit items-center gap-1.5 text-xs font-mono uppercase tracking-widest text-[color:var(--color-accent)]">
              <Star size={13} fill="currentColor" /> Proyecto destacado
            </span>

            <h3 className="font-display text-2xl md:text-3xl font-semibold leading-tight">
              {project.name}
            </h3>

            <p className="text-[color:var(--color-muted)] leading-relaxed">{project.short}</p>

            <div className="grid sm:grid-cols-2 gap-4 text-sm">
              <div>
                <p className="text-xs uppercase tracking-widest text-[color:var(--color-muted)] mb-1">
                  Problema
                </p>
                <p className="text-[color:var(--color-ink)]/90 line-clamp-3">{project.problem}</p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-widest text-[color:var(--color-muted)] mb-1">
                  Resultado
                </p>
                <p className="text-[color:var(--color-ink)]/90 line-clamp-3">{project.result}</p>
              </div>
            </div>

            <div className="flex flex-wrap gap-1.5">
              {project.tech.map((t) => (
                <span
                  key={t}
                  className="text-[11px] px-2 py-1 rounded-md bg-[color:var(--color-accent)]/10 text-[color:var(--color-accent)]"
                >
                  {t}
                </span>
              ))}
            </div>

            <div className="mt-2 flex flex-wrap items-center gap-4">
              <button
                onClick={() => onOpen(project)}
                className="inline-flex items-center gap-2 rounded-full bg-[color:var(--color-accent)] text-[#05070d] font-medium px-5 py-2.5 hover:-translate-y-0.5 transition-transform"
              >
                Ver caso completo <ArrowUpRight size={16} />
              </button>
              <a
                href={project.links.code}
                className="inline-flex items-center gap-2 text-sm font-medium hover:text-[color:var(--color-accent)] transition-colors"
              >
                <GithubIcon size={16} /> Código
              </a>
            </div>
          </div>
        </div>
      </div>
    </Reveal>
  );
}
