import Hero from "@/components/content/Hero";
import Testimonials from "@/components/content/Testimonials";
import RotatingWord from "@/components/content/RotatingWord";
import SectionLabel from "@/components/layout/SectionLabel";
import AccentLink from "@/components/navigation/AccentLink";
import ProjectCard from "@/components/content/ProjectCard";
import { testimonials, projects } from "@/constants";

export default function HomePage() {
  return (
    <div>
      <Hero label="Angel Mankel">
        <div className="space-y-5 mb-4">
          <p className="font-serif italic text-3xl leading-[1.3]">
            I&apos;m{" "}
            <RotatingWord
              items={["a developer", "a creative", "a tinkerer"]}
            />
            .
          </p>

          <p className="text-[19px] leading-[1.65]">
            Building software people rely on — and understanding what makes those
            people tick — is what drives my greatest ambitions.
          </p>

          <p className="text-[19px] leading-[1.65]">
            I&apos;m the kind of engineer who picks up whatever the problem needs and
            keeps digging — into the code, and into the people it&apos;s meant for.
            The throughline isn&apos;t a stack, it&apos;s the curiosity.
          </p>
        </div>

        <div>
          <AccentLink label="About Me" link="/about" />
        </div>
      </Hero>
      
      {/* Projects */}
      <div className="mt-20">
        <SectionLabel label="Selected Projects" />

        {projects.slice(0,3).map((project, index) => (
          <ProjectCard key={index} {...project} />
        ))}

        <div className="mt-5">
          <AccentLink label="See all projects" link="/projects" />
        </div>
      </div>
      
      {/* Testimonials */}
      <div className="mt-20">
        <SectionLabel label="What people say" />
        <div className="mt-5">
          <Testimonials items={testimonials} />
        </div>
      </div>
    </div>
  );
}