import type { Metadata } from "next";
import Image from "next/image";
import { AnimatedSection } from "@/components/ui/AnimatedSection";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { ProcessTimeline } from "@/components/sections/ProcessTimeline";
import { CTASection } from "@/components/sections/CTASection";
import { images } from "@/data/content";

export const metadata: Metadata = {
  title: "Design Process",
  description:
    "Understand Aureva Studio's design process from discovery call, site visit, moodboard, space planning, 3D visualization, material selection, budget planning, execution, quality check, and handover.",
};

export default function ProcessPage() {
  return (
    <>
      <section className="relative overflow-hidden bg-charcoal pt-36 text-warm-white md:pt-44">
        <Image
          src={images.dining}
          alt="Elegant dining interior showing luxury design process outcomes"
          fill
          priority
          sizes="100vw"
          className="object-cover opacity-45"
        />
        <div className="absolute inset-0 bg-soft-black/72" />
        <div className="luxury-container relative z-10 pb-20">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Design Process"
              title="From concept to completion, beautifully managed."
              copy="A clear, premium process helps you make confident decisions before execution and understand what happens at every stage."
              inverse
            />
          </AnimatedSection>
        </div>
      </section>

      <section className="section-y marble-surface">
        <div className="luxury-container grid gap-12 lg:grid-cols-[0.78fr_1.22fr]">
          <AnimatedSection>
            <SectionHeader
              eyebrow="How We Work"
              title="A transparent journey for premium interiors and architecture planning."
              copy="Every stage adds clarity: from requirements and moodboards to 3D visualization, budgets, site coordination, and final handover."
            />
          </AnimatedSection>
          <AnimatedSection delay={0.1}>
            <ProcessTimeline />
          </AnimatedSection>
        </div>
      </section>

      <CTASection title="Start with a discovery call and leave with a clearer path." />
    </>
  );
}