"use client";

import { useEffect, useMemo, useState, startTransition } from "react";
import { business, type Locale } from "@/config/business";
import { createWhatsAppMessage, getDictionary, getDirection } from "@/lib/i18n";
import AboutSection from "./AboutSection";
import ContactSection from "./ContactSection";
import CollectionsSection from "./CollectionsSection";
import Footer from "./Footer";
import GlassesModelSection from "./GlassesModelSection";
import HeroSection from "./HeroSection";
import LiquidGlass from "./LiquidGlass";
import Navbar from "./Navbar";
import ServicesSection from "./ServicesSection";
import TrustSection from "./TrustSection";
import WhyChooseSection from "./WhyChooseSection";

export default function SiteShell() {
  const [locale, setLocale] = useState<Locale>("fr");
  const t = useMemo(() => getDictionary(locale), [locale]);
  const dir = getDirection(locale);
  const whatsappUrl = createWhatsAppMessage(locale);

  useEffect(() => {
    document.documentElement.lang = locale;
    document.documentElement.dir = dir;
    document.body.dir = dir;
    document.title = t.meta.title;
    document.querySelector('meta[name="description"]')?.setAttribute("content", t.meta.description);
  }, [dir, locale, t.meta.description, t.meta.title]);

  function changeLocale(nextLocale: Locale) {
    startTransition(() => setLocale(nextLocale));
  }

  return (
    <div className="overflow-hidden">
      <LiquidGlass />
      <Navbar locale={locale} onLocaleChange={changeLocale} t={t} whatsappUrl={whatsappUrl} />
      <main>
        <HeroSection t={t} whatsappUrl={whatsappUrl} />
        <GlassesModelSection t={t} />
        <AboutSection t={t} />
        <ServicesSection t={t} />
        <CollectionsSection t={t} />
        <WhyChooseSection t={t} />
        <TrustSection t={t} />
        <ContactSection t={t} whatsappUrl={whatsappUrl} />
      </main>
      <Footer t={t} locale={locale} onLocaleChange={changeLocale} />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Optician",
            name: business.name,
            address: business.address,
            telephone: business.phone,
            url: business.mapUrl,
            areaServed: "Temara, Morocco"
          })
        }}
      />
    </div>
  );
}