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

export const metadata = {
  title: "Services | Lynkedup Technologies",
  description: "The services we offer.",
};

const services = [
  {
    title: "Brand Identity",
    desc: "Logos, design systems, and the rules that hold them together.",
  },
  {
    title: "Web Design & Development",
    desc: "Marketing sites and product surfaces built to scale.",
  },
  {
    title: "Content Strategy",
    desc: "Editorial systems that compound into search and audience growth.",
  },
  {
    title: "Performance Marketing",
    desc: "Paid, organic, and lifecycle programs measured on revenue.",
  },
];

export default function ServicesPage() {
  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">Services</h1>
            <p className="lk-page-subtitle lead" data-aos="fade-up" data-aos-delay="200">
              End-to-end design, build, and growth for ambitious brands.
            </p>
          </div>
        </section>

        <section className="lk-services-grid py-5">
          <div className="container">
            <div className="row g-4">
              {services.map((s, idx) => (
                <div className="col-md-6" key={s.title} data-aos="fade-up" data-aos-delay={(idx % 2) * 100}>
                  <article className="lk-service-card p-4 rounded-4 h-100">
                    <h3>{s.title}</h3>
                    <p className="mb-0">{s.desc}</p>
                  </article>
                </div>
              ))}
            </div>
          </div>
        </section>

        <CTA
          title="Need something specific?"
          description="We tailor every engagement to where your brand actually is today."
          buttonText="Talk to us"
        />
      </main>

      <Footer />
    </>
  );
}
