import { Code2, Palette, Plug } from "lucide-react";
import { bio, timeline } from "@/data/about";
import { site } from "@/data/site";
import { Container } from "@/components/ui/Container";
import { SectionHeading } from "@/components/ui/SectionHeading";

const icons = { code: Code2, plug: Plug, palette: Palette };

export function About() {
  return (
    <section id="about" className="py-24 sm:py-28">
      <Container>
        <SectionHeading
          title="About"
          description="An overview of my professional profile, expertise, and approach."
        />

        <div className="grid gap-16 lg:grid-cols-2">
          <div>
            <h3 className="text-xl font-semibold">{bio.intro}</h3>
            <div className="mt-5 space-y-4 text-base leading-relaxed text-slate-500 dark:text-slate-400">
              {bio.paragraphs.map((p) => (
                <p key={p}>{p}</p>
              ))}
            </div>

            <blockquote className="mt-8 border-l-2 border-indigo pl-4 text-sm italic text-slate-500 dark:border-indigo-light dark:text-slate-400">
              &ldquo;{bio.quote}&rdquo;
            </blockquote>

            <div className="mt-8 rounded border border-border-light bg-surface-light px-5 py-4 text-sm text-slate-600 dark:border-border-dark dark:bg-surface-dark dark:text-slate-300">
              {site.availability}
            </div>

            <div className="mt-10 grid gap-6 sm:grid-cols-3">
              {bio.strengths.map((strength) => {
                const Icon = icons[strength.icon as keyof typeof icons];
                return (
                  <div key={strength.title}>
                    <Icon className="h-5 w-5 text-indigo dark:text-indigo-light" />
                    <h4 className="mt-3 text-sm font-semibold text-slate-950 dark:text-white">
                      {strength.title}
                    </h4>
                    <p className="mt-1.5 text-sm text-slate-500 dark:text-slate-400">
                      {strength.description}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>

          <div>
            <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400 dark:text-slate-500">
              Journey
            </h3>
            <ol className="mt-6 space-y-8 border-l border-border-light pl-6 dark:border-border-dark">
              {timeline.map((entry) => (
                <li key={entry.year} className="relative">
                  <span className="absolute -left-[29px] top-1 h-2.5 w-2.5 rounded-full border-2 border-indigo bg-paper dark:border-indigo-light dark:bg-ink" />
                  <span className="font-mono text-sm text-indigo dark:text-indigo-light">
                    {entry.year}
                  </span>
                  <p className="mt-1.5 text-base text-slate-600 dark:text-slate-300">
                    {entry.description}
                  </p>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </Container>
    </section>
  );
}