import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { CheckCircle2 } from "lucide-react";
import { AnimatedSection } from "@/components/ui/AnimatedSection";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { HeroSection } from "@/components/sections/HeroSection";
import { TrustBadges } from "@/components/sections/TrustBadges";
import { ServiceCard } from "@/components/sections/ServiceCard";
import { ProjectCard } from "@/components/sections/ProjectCard";
import { BeforeAfterSection } from "@/components/sections/BeforeAfterSection";
import { ProcessTimeline } from "@/components/sections/ProcessTimeline";
import { TestimonialCard } from "@/components/sections/TestimonialCard";
import { FAQAccordion } from "@/components/sections/FAQAccordion";
import { CTASection } from "@/components/sections/CTASection";
import { PortfolioMarquee } from "@/components/sections/PortfolioMarquee";
import { images, projects, services, testimonials } from "@/data/content";

export const metadata: Metadata = {
  title: "Luxury Interiors & Architecture",
  description:
    "Aureva Studio creates luxury home interiors, villa interiors, office interiors, architecture planning, and turnkey interior execution.",
};

const chooseUs = [
  "3D visualization before execution starts",
  "Dedicated design consultant and project manager",
  "Premium material selection with budget clarity",
  "Turnkey execution with quality checks and handover support",
];

export default function Home() {
  return (
    <>
      <HeroSection />

      <section className="section-y marble-surface">
        <div className="luxury-container grid items-center gap-12 lg:grid-cols-[0.9fr_1.1fr]">
          <AnimatedSection>
            <p className="mb-4 text-sm font-semibold uppercase text-bronze">
              Aureva Studio
            </p>
            <h2 className="font-serif text-4xl font-semibold leading-[1.06] text-balance text-charcoal md:text-6xl">
              Designing spaces that feel timeless, personal, and beautifully
              managed.
            </h2>
            <p className="mt-6 text-base leading-8 text-muted md:text-lg">
              We blend architecture studio discipline with boutique interior
              sensibility. From concept to completion, our team plans the space,
              details the materials, coordinates execution, and keeps every
              decision aligned with your lifestyle.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <Link
                href="/about"
                className="inline-flex min-h-12 items-center justify-center rounded-full border border-charcoal/12 bg-warm-white px-5 py-3 text-sm font-semibold text-charcoal transition hover:border-champagne"
              >
                Meet the Studio
              </Link>
              <Link
                href="/contact"
                className="inline-flex min-h-12 items-center justify-center rounded-full bg-charcoal px-5 py-3 text-sm font-semibold text-warm-white transition hover:bg-soft-black"
              >
                Start My Project
              </Link>
            </div>
          </AnimatedSection>

          <AnimatedSection delay={0.1}>
            <div className="relative overflow-hidden rounded-[38px] border border-charcoal/10 bg-warm-white p-3 shadow-[0_26px_80px_rgba(24,21,17,0.14)]">
              <div className="relative aspect-[1.05] overflow-hidden rounded-[30px]">
                <Image
                  src={images.living}
                  alt="Premium interior lounge with warm furniture and architectural details"
                  fill
                  sizes="(min-width: 1024px) 48vw, 100vw"
                  className="object-cover"
                />
              </div>
            </div>
          </AnimatedSection>
        </div>

        <div className="luxury-container mt-12">
          <TrustBadges />
        </div>
      </section>

      <section className="section-y bg-ivory">
        <div className="luxury-container">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Services"
              title="Interior design, architecture planning, and turnkey execution under one refined process."
              copy="Choose focused support for a single room or end-to-end management for homes, villas, offices, retail, hospitality, and renovations."
            />
          </AnimatedSection>
          <div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            {services.slice(0, 6).map((service, index) => (
              <ServiceCard key={service.title} service={service} index={index} />
            ))}
          </div>
          <div className="mt-10 text-center">
            <Link
              href="/services"
              className="inline-flex min-h-12 items-center justify-center rounded-full border border-charcoal/12 bg-warm-white px-5 py-3 text-sm font-semibold text-charcoal transition hover:border-champagne"
            >
              Explore All Services
            </Link>
          </div>
        </div>
      </section>

      <section className="section-y bg-soft-black text-warm-white">
        <div className="luxury-container">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Featured Projects"
              title="Portfolio stories shaped for homes, villas, offices, and commercial spaces."
              copy="Every project is planned for mood, function, budget discipline, and the kind of first impression that lasts."
              inverse
            />
          </AnimatedSection>
          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {projects.slice(0, 3).map((project) => (
              <ProjectCard key={project.slug} project={project} />
            ))}
          </div>
        </div>
        <div className="mt-16">
          <PortfolioMarquee />
        </div>
      </section>

      <section className="section-y marble-surface">
        <div className="luxury-container">
          <BeforeAfterSection />
        </div>
      </section>

      <section className="section-y bg-ivory">
        <div className="luxury-container grid gap-12 lg:grid-cols-[0.82fr_1.18fr]">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Why Choose Us"
              title="A premium experience from first call to final handover."
              copy="Aureva Studio is built for clients who want beauty, clarity, and execution accountability without juggling multiple disconnected vendors."
            />
            <ul className="mt-8 space-y-4">
              {chooseUs.map((item) => (
                <li
                  key={item}
                  className="flex gap-3 rounded-2xl border border-charcoal/10 bg-warm-white/72 p-4 text-sm font-semibold text-charcoal shadow-[0_12px_35px_rgba(24,21,17,0.06)]"
                >
                  <CheckCircle2
                    className="mt-0.5 h-5 w-5 shrink-0 text-bronze"
                    aria-hidden="true"
                  />
                  {item}
                </li>
              ))}
            </ul>
          </AnimatedSection>
          <AnimatedSection delay={0.1}>
            <ProcessTimeline />
          </AnimatedSection>
        </div>
      </section>

      <section className="section-y bg-stone/55">
        <div className="luxury-container">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Client Words"
              title="Trusted by homeowners, founders, and property owners who value thoughtful execution."
              align="center"
            />
          </AnimatedSection>
          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {testimonials.map((testimonial) => (
              <TestimonialCard key={testimonial.author} {...testimonial} />
            ))}
          </div>
        </div>
      </section>

      <section className="section-y bg-ivory">
        <div className="luxury-container grid gap-12 lg:grid-cols-[0.82fr_1.18fr]">
          <AnimatedSection>
            <SectionHeader
              eyebrow="FAQ"
              title="Clear answers before your first consultation."
              copy="Understand how our interior design consultation, 3D visualization, budget planning, renovation support, and turnkey execution work."
            />
            <Link
              href="/faq"
              className="mt-7 inline-flex min-h-12 items-center justify-center rounded-full bg-charcoal px-5 py-3 text-sm font-semibold text-warm-white transition hover:bg-soft-black"
            >
              View All Questions
            </Link>
          </AnimatedSection>
          <AnimatedSection delay={0.1}>
            <FAQAccordion limit={5} />
          </AnimatedSection>
        </div>
      </section>

      <CTASection />
    </>
  );
}