import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import CTA from "@/components/sections/CTA";

export const metadata = {
  title: "Work | Lynkedup Technologies",
  description: "A selection of our recent work.",
};

const projects = [
  { title: "Brand System — Northwind", category: "Branding" },
  { title: "Marketing Site — Helio", category: "Web" },
  { title: "Content Engine — Orbit", category: "Content" },
  { title: "Product UI — Kepler", category: "Product" },
];

export default function WorkPage() {
  return (
    <>
      <Header />

      <main className="lk-page-main">
        <section className="lk-page-hero py-5">
          <div className="container py-5">
            <h1 className="lk-page-title" data-aos="fade-up" data-aos-delay="100">Our Work</h1>
            <p className="lk-page-subtitle lead" data-aos="fade-up" data-aos-delay="200">
              Selected projects across brand, web, and content.
            </p>
          </div>
        </section>

        <section className="lk-work-grid py-5">
          <div className="container">
            <div className="row g-4">
              {projects.map((p, idx) => (
                <div className="col-md-6" key={p.title} data-aos="fade-up" data-aos-delay={(idx % 2) * 100}>
                  <article className="lk-work-card p-4 rounded-4 h-100">
                    <span className="lk-work-category small text-uppercase">
                      {p.category}
                    </span>
                    <h3 className="mt-2">{p.title}</h3>
                  </article>
                </div>
              ))}
            </div>
          </div>
        </section>

        <CTA
          title="Have a project in mind?"
          description="Tell us about your goals and we'll show you what's possible."
          buttonText="Start a project"
        />
      </main>

      <Footer />
    </>
  );
}
