1fcb2abe-ba37-4eb4-8d7c-9e02a971e64b/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import { Award, Star, Users, MessageCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Preise", id: "pricing" },
        { name: "Academy", id: "academy" },
        { name: "Über uns", id: "about" },
        { name: "Kontakt", id: "contact" },
      ]}
      brandName="Casablanca Cosmetics"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{ variant: "glowing-orb" }}
      logoText="CASABLANCA COSMETICS"
      description="Cinematische Ästhetik in Gelsenkirchen. Wir veredeln Ihre natürliche Schönheit mit flüssigem Gold & High-End Präzision."
      buttons={[
        { text: "Termin Buchen", href: "https://wa.me/4917661853287" },
        { text: "Preisliste", href: "#pricing" },
      ]}
      imageSrc="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=1200&auto=format&fit=crop"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="blur-reveal"
      textboxLayout="split-description"
      title="Exklusive Beauty Services"
      description="Liquid Gold Standard für Ihre Hautpflege & Permanent Make-Up."
      useInvertedBackground={false}
      plans={[
        {
          id: "pm", badge: "Signature", name: "Permanent Make-Up", price: "ab 170€", buttons: [{ text: "Buchen", href: "https://wa.me/4917661853287" }],
          features: ["Microblading", "Powderbrows", "Kombibrows", "Lippen Pigmentierung", "Lidstrich"]
        },
        {
          id: "skin", badge: "Gold Tier", name: "Skin Clinic", price: "ab 60€", buttons: [{ text: "Buchen", href: "https://wa.me/4917661853287" }],
          features: ["Hydrafacial", "Microneedling RF", "BioRePeel", "Tiefenreinigung"]
        },
        {
          id: "laser", badge: "Pro", name: "Laser Studio", price: "ab 50€", buttons: [{ text: "Buchen", href: "https://wa.me/4917661853287" }],
          features: ["Ganzkörper", "Beine & Rücken", "Gesicht", "Präzisions-Laser"]
        }
      ]}
    />
  </div>

  <div id="academy" data-section="academy">
      <FeatureCardTwentyOne
      title="Casablanca Pro Academy"
      description="Lernen Sie die Kunst der High-End Ästhetik. Zertifizierte Masterclasses für Microblading, Lash-Art & PMU direkt in Gelsenkirchen."
      accordionItems={[
        { id: "a1", title: "PMU Masterclass", content: "Von den Grundlagen bis zur High-End Pigmentierung." },
        { id: "a2", title: "Laser Zertifizierung", content: "Sichere Anwendung modernster Laser-Technologien." },
        { id: "a3", title: "Business-Setup", content: "Wie Sie ein profitables Beauty-Atelier aufbauen." }
      ]}
      imageSrc="https://images.unsplash.com/photo-1560066984-138dadb4c035?q=80&w=800&auto=format&fit=crop"
      mediaPosition="right"
      mediaAnimation="blur-reveal"
      useInvertedBackground={false}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      title="Vertrauen in Qualität"
      metrics={[
        { icon: Star, label: "Google Reviews", value: "5.0 ★" },
        { icon: Users, label: "Zufriedene Kunden", value: "500+" },
        { icon: Award, label: "Zertifikate", value: "Expert" }
      ]}
      metricsAnimation="slide-up"
      useInvertedBackground={false}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      title="Ihre Beratung"
      description="Bismarckstraße 57, Gelsenkirchen. Kontaktieren Sie uns direkt für Ihr exklusives Treatment oder via WhatsApp."
      inputs={[
        { name: "name", type: "text", placeholder: "Ihr Name", required: true },
        { name: "email", type: "email", placeholder: "Ihre E-Mail", required: true }
      ]}
      textarea={{ name: "message", placeholder: "Ihr Anliegen", rows: 4 }}
      buttonText="Anfrage absenden"
      imageSrc="https://images.unsplash.com/photo-1612287230202-1ff6d8536bdf?q=80&w=800&auto=format&fit=crop"
      useInvertedBackground={false}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        { title: "Navigation", items: [{ label: "Preise", href: "#pricing" }, { label: "Academy", href: "#academy" }, { label: "Kontakt", href: "#contact" }] },
        { title: "Kontakt & Standort", items: [{ label: "Bismarckstraße 57, Gelsenkirchen" }, { label: "Tel: 0176 61853287" }, { label: "WhatsApp Support", href: "https://wa.me/4917661853287" }] }
      ]}
      bottomLeftText="© 2025 Casablanca Cosmetics"
      bottomRightText="Datenschutz | Impressum | USt-IdNr. DE345678912"
    />
  </div>

  <a 
    href="https://wa.me/4917661853287"
    target="_blank"
    rel="noopener noreferrer"
    className="fixed bottom-8 right-8 z-50 bg-[#25D366] text-white p-4 rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-transform"
  >
    <MessageCircle size={28} />
  </a>

  <div className="fixed bottom-0 left-0 w-full bg-white/90 backdrop-blur-md p-4 border-t border-gray-200 z-40 md:hidden flex justify-between items-center px-6">
    <span className="font-bold">Sofort-Termin sichern?</span>
    <a href="https://wa.me/4917661853287" className="bg-[#25D366] text-white px-4 py-2 rounded-full text-sm font-semibold">WhatsApp</a>
  </div>

      </ReactLenis>
    </ThemeProvider>
  );
}