'use client';

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 builder", "a tinkerer"]}
            />
            .
          </p>

          <p className="text-[19px] leading-[1.65]">
            I build software people actually use, and I care about the people on
            the other side of it as much as the code.
          </p>

          <p className="text-[19px] leading-[1.65]">
            I&apos;ll pick up whatever a problem needs and keep digging until it
            works. The constant isn&apos;t a particular stack — it&apos;s the
            curiosity that got me here.
          </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>
  );
}