import { Code2, Sparkles } from "lucide-react";
import { profile } from "../data/profile";
import SectionHeading from "../components/SectionHeading";
import PhotoFrame from "../components/PhotoFrame";
import Reveal from "../components/Reveal";

const journey = ["Técnico", "Aprendiz", "Programador", "Creador", "Solucionador"];

export default function About() {
  return (
    <section id="sobre-mi" className="container-px py-28 md:py-36">
      <div className="mx-auto max-w-6xl grid gap-16 lg:grid-cols-[0.8fr_1.2fr] items-start">
        <Reveal className="relative">
          <PhotoFrame
            src={profile.photoAlt}
            alt={profile.name}
            className="max-w-sm mx-auto lg:mx-0"
          />

          <div className="mt-4 max-w-sm mx-auto lg:mx-0 grid grid-cols-3 gap-3">
            <img
              src={profile.photoExtra}
              alt={profile.name}
              className="aspect-square w-full object-cover rounded-2xl border border-[color:var(--color-border)] hover:-translate-y-1 transition-transform duration-300"
            />
            <img
              src={profile.photo}
              alt={profile.name}
              className="aspect-square w-full object-cover object-top rounded-2xl border border-[color:var(--color-border)] hover:-translate-y-1 transition-transform duration-300"
            />
            <div className="glass aspect-square w-full rounded-2xl grid place-items-center">
              <img
                src={profile.logo}
                alt={profile.logoAlt}
                className="h-10 w-10 object-contain opacity-90"
              />
            </div>
          </div>

          <div className="glass mt-4 max-w-sm mx-auto lg:mx-0 rounded-2xl p-4 flex items-center gap-3">
            <Sparkles size={18} className="text-[color:var(--color-accent)] shrink-0" />
            <p className="text-sm text-[color:var(--color-muted)]">
              "No solo aprendo tecnología. La utilizo para crear soluciones."
            </p>
          </div>
        </Reveal>

        <div className="flex flex-col gap-10">
          <SectionHeading
            eyebrow="Sobre mí"
            title="De la curiosidad al código"
            subtitle={profile.aboutText}
          />

          <Reveal delay={0.1}>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              {profile.stats.map((stat) => (
                <div
                  key={stat.label}
                  className="glass rounded-2xl p-5 hover:-translate-y-1 transition-transform duration-300"
                >
                  <p className="text-2xl font-display font-semibold text-gradient">{stat.value}</p>
                  <p className="mt-1 text-xs text-[color:var(--color-muted)]">{stat.label}</p>
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal delay={0.15}>
            <div className="glass rounded-2xl p-6">
              <div className="flex items-center gap-2 mb-5 font-mono text-xs uppercase tracking-widest text-[color:var(--color-muted)]">
                <Code2 size={14} />
                mi_evolución.map()
              </div>
              <div className="flex flex-wrap items-center gap-2 sm:gap-0">
                {journey.map((step, i) => (
                  <div key={step} className="flex items-center">
                    <span
                      className={`text-sm px-3 py-1.5 rounded-full border ${
                        i === journey.length - 1
                          ? "border-[color:var(--color-accent)] text-[color:var(--color-accent)]"
                          : "border-[color:var(--color-border)] text-[color:var(--color-muted)]"
                      }`}
                    >
                      {step}
                    </span>
                    {i < journey.length - 1 && (
                      <span className="hidden sm:inline text-[color:var(--color-border)] mx-2">
                        &rarr;
                      </span>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}
