import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import React from "react";

export default function Accueil(): JSX.Element {
  // Navigation items
  const navItems = [
    { label: "Works", hasDot: true },
    { label: "Shop", hasDot: false },
    { label: "Partenaires", hasDot: false },
  ];

  // Contact bar items
  const contactItems = [
    { label: "Paris : 9:30 PM", hasDot: false },
    { label: "Contact", hasDot: true },
  ];

  return (
    <div className="bg-white flex flex-row justify-center w-full">
      <div className="bg-white w-full relative">
        {/* Hero Section */}
        <section className="relative w-full h-[1080px] bg-[#2454f6]">
          <div className="absolute w-full h-full top-0 left-0 bg-white opacity-60">
            <div className="h-full bg-[#2454f6]" />
          </div>

          <div className="absolute w-[937px] h-[463px] top-[279px] left-1/2 -translate-x-1/2">
            <div className="relative h-[463px]">
              <img
                className="absolute w-[895px] h-[395px] top-[68px] left-0"
                alt="Studio Foni Logo Background"
                src=""
              />

              <img
                className="absolute w-[332px] h-[280px] top-0 left-[605px]"
                alt="Studio Foni Logo"
                src=""
              />
            </div>
          </div>

          {/* Navigation Bar */}
          <Card className="inline-flex items-center gap-20 px-10 py-6 fixed bottom-24 left-1/2 -translate-x-1/2 bg-black rounded-[61px] border-none">
            <CardContent className="flex items-center gap-20 p-0">
              {navItems.map((item, index) => (
                <div
                  key={index}
                  className="inline-flex items-center gap-2 relative flex-[0_0_auto]"
                >
                  {item.hasDot && (
                    <div className="bg-white relative w-1 h-1 rounded-sm" />
                  )}
                  <Button
                    variant="link"
                    className="text-white p-0 h-auto font-medium font-['Manrope-Medium',Helvetica] text-base"
                  >
                    {item.label}
                  </Button>
                </div>
              ))}
            </CardContent>
          </Card>

          {/* Contact Bar */}
          <Card className="inline-flex flex-col items-start gap-2.5 px-10 py-6 fixed top-10 right-10 bg-white rounded-[36px] border-none">
            <CardContent className="flex items-center gap-20 p-0">
              {contactItems.map((item, index) => (
                <div
                  key={index}
                  className="inline-flex items-center gap-2 relative flex-[0_0_auto]"
                >
                  {item.hasDot && (
                    <div className="bg-black relative w-1 h-1 rounded-sm" />
                  )}
                  <Button
                    variant="link"
                    className="text-black p-0 h-auto font-medium font-['Manrope-Medium',Helvetica] text-base"
                  >
                    {item.label}
                  </Button>
                </div>
              ))}
            </CardContent>
          </Card>
        </section>

        {/* Studio Foni Section */}
        <section className="relative w-full h-[1465px] mt-[695px]">
          <div className="absolute w-full h-[1080px] top-[385px] left-0 bg-[#e4e4e4]" />

          <div className="absolute w-[1569px] top-[565px] left-10 font-['LEMON_MILK-Medium',Helvetica] font-medium text-[#2354f6] text-[200px] tracking-[0] leading-[normal]">
            Studio Foni
          </div>

          <div className="absolute w-[1569px] top-[420px] left-10 font-['LEMON_MILK-Light',Helvetica] font-light text-[#2354f6] text-3xl tracking-[0] leading-[normal]">
            //ouvrez vos yeux
          </div>

          <div className="absolute w-[381px] top-[505px] left-[574px] font-['LEMON_MILK-Light',Helvetica] font-light text-[#2354f6] text-3xl text-right tracking-[0] leading-[normal]">
            tendez vos oreilles//
          </div>

          <img
            className="absolute w-[955px] h-[984px] top-0 right-0"
            alt="Logo bleu sans contour"
            src=""
          />

          <Separator className="absolute w-[532px] h-[3px] top-[525px] left-10 bg-[#2454f6]" />
          <Separator className="absolute w-[589px] h-[3px] top-[440px] left-[366px] bg-[#2454f6]" />
        </section>
      </div>
    </div>
  );
}