import type { Metadata } from "next";
import Image from "next/image";
import { CheckCircle2 } from "lucide-react";
import { AnimatedSection } from "@/components/ui/AnimatedSection";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { StatsSection } from "@/components/sections/StatsSection";
import { CTASection } from "@/components/sections/CTASection";
import { TrustBadges } from "@/components/sections/TrustBadges";
import { images } from "@/data/content";

export const metadata: Metadata = {
  title: "About",
  description:
    "Meet Aureva Studio, a luxury interior design and architecture studio for homes, villas, commercial interiors, and turnkey execution.",
};

const standards = [
  "Lifestyle-first planning for every room",
  "Architecture, interiors, furniture, lighting, and decor as one language",
  "Material recommendations shaped by beauty, durability, and budget",
  "Site supervision, quality checks, and handover-focused execution",
];

export default function AboutPage() {
  return (
    <>
      <section className="relative overflow-hidden bg-charcoal pt-36 text-warm-white md:pt-44">
        <div className="absolute inset-0 opacity-45">
          <Image
            src={images.material}
            alt="Luxury material palette with stone, wood, and warm interior finishes"
            fill
            priority
            sizes="100vw"
            className="object-cover"
          />
          <div className="absolute inset-0 bg-soft-black/70" />
        </div>
        <div className="luxury-container relative z-10 pb-20">
          <AnimatedSection>
            <p className="mb-5 text-sm font-semibold uppercase text-champagne">
              About Aureva Studio
            </p>
            <h1 className="max-w-5xl font-serif text-5xl font-semibold leading-[1.02] text-balance md:text-7xl">
              Luxury interiors crafted around your lifestyle, site, and story.
            </h1>
            <p className="mt-6 max-w-3xl text-lg leading-9 text-warm-white/76">
              Aureva Studio brings together interior design, architecture
              planning, furniture detailing, material selection, and turnkey
              coordination for clients who want a complete, premium experience.
            </p>
          </AnimatedSection>
        </div>
      </section>

      <section className="section-y marble-surface">
        <div className="luxury-container grid items-center gap-12 lg:grid-cols-[1.05fr_0.95fr]">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Studio Story"
              title="A design studio built for calm decisions and beautiful delivery."
              copy="We believe premium design is not only about expensive finishes. It is about proportion, comfort, light, storage, movement, and the confidence that every detail has been considered before site work begins."
            />
            <p className="mt-6 text-base leading-8 text-muted">
              Our process is personal but structured. We listen deeply, plan
              precisely, visualize clearly, and execute with a focus on quality
              and long-term use. The result is a space that feels refined,
              comfortable, and ready for real life.
            </p>
          </AnimatedSection>
          <AnimatedSection delay={0.1}>
            <div className="relative overflow-hidden rounded-[36px] border border-charcoal/10 bg-warm-white p-3 shadow-[0_24px_70px_rgba(24,21,17,0.14)]">
              <div className="relative aspect-[0.92] overflow-hidden rounded-[28px]">
                <Image
                  src={images.architecture}
                  alt="Modern architectural home with premium spatial planning"
                  fill
                  sizes="(min-width: 1024px) 45vw, 100vw"
                  className="object-cover"
                />
              </div>
            </div>
          </AnimatedSection>
        </div>
      </section>

      <section className="section-y bg-ivory">
        <div className="luxury-container">
          <StatsSection />
        </div>
      </section>

      <section className="section-y bg-soft-black text-warm-white">
        <div className="luxury-container grid gap-12 lg:grid-cols-[0.85fr_1.15fr]">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Design Philosophy"
              title="Premium spaces should feel effortless, not over-designed."
              copy="We pair architecture-level clarity with the softness of interior styling, so homes and commercial spaces feel impressive, livable, and deeply resolved."
              inverse
            />
          </AnimatedSection>
          <AnimatedSection delay={0.1}>
            <div className="grid gap-4 sm:grid-cols-2">
              {standards.map((standard) => (
                <div
                  key={standard}
                  className="rounded-[28px] border border-warm-white/12 bg-warm-white/8 p-6"
                >
                  <CheckCircle2
                    className="mb-5 h-6 w-6 text-champagne"
                    aria-hidden="true"
                  />
                  <p className="text-base font-semibold leading-7 text-warm-white">
                    {standard}
                  </p>
                </div>
              ))}
            </div>
          </AnimatedSection>
        </div>
      </section>

      <section className="section-y bg-stone/55">
        <div className="luxury-container grid gap-12 lg:grid-cols-[1fr_1fr]">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Founder & Team"
              title="A boutique team with architecture discipline and interior sensitivity."
              copy="The Aureva Studio team includes designers, visualization specialists, site coordinators, and execution partners who work from one shared design intent."
            />
          </AnimatedSection>
          <AnimatedSection delay={0.1}>
            <TrustBadges />
          </AnimatedSection>
        </div>
      </section>

      <CTASection title="Let us shape your next space with clarity, warmth, and premium detail." />
    </>
  );
}