export default function YaadBoiizProductionWebsite() {

  const films = [

    {

      title: "Behind Closed Doors",

      type: "Award-Winning Feature Film",

      description:

        "A dramatic Jamaican feature positioned as a flagship Yaad Boiiz title with growing international festival recognition.",

      highlights: ["Best International Feature Film", "Best Film Editing", "Festival award winner"],

    },

    {

      title: "Jamaican Mafia",

      type: "Crime Drama Feature",

      description:

        "A gritty, marketable crime title that reinforces the company's ability to create compelling genre-driven Caribbean stories.",

      highlights: ["Bold poster identity", "Strong trailer value", "Commercial audience appeal"],

    },

    {

      title: "My Business TV Show",

      type: "Television Program",

      description:

        "Business and entrepreneurship programming developed to inform audiences and create opportunities for brand partnerships.",

      highlights: ["Broadcast-ready concept", "Sponsor-friendly format", "Brand integration potential"],

    },

  ];

  const awards = [

    "Blue Moon International Film Festival",

    "Poombukar Independent Film Festival",

    "Accolade Global Film Competition",

    "International Independent Film Awards",

    "International Black & Diversity Film Festival",

    "Switzerland Film Fest & Screenplay Competition",

  ];

  const team = [

    {

      name: "Orville Matherson",

      role: "Founder / Producer",

      bio: "Producer and creative force behind Yaad Boiiz Productions, focused on developing Caribbean stories with international reach.",

    },

    {

      name: "Elvis Griffiths",

      role: "Co-Founder / Director",

      bio: "Director, producer and videographer with extensive broadcast and production experience across Jamaica and the United States.",

    },

    {

      name: "Mark Anthony Deacon",

      role: "Director",

      bio: "Director associated with Behind Closed Doors, contributing to the film's visual identity and dramatic execution.",

    },

    {

      name: "Everton Gentles",

      role: "Cinematographer / Visual Effects",

      bio: "Creative visual professional with a background in graphics, cinematography and independent film production.",

    },

  ];

  return (

    <div className="min-h-screen bg-black text-white">

      <div className="fixed inset-0 -z-10 bg-[radial-gradient(circle_at_top_left,_rgba(242,92,42,0.18),_transparent_28%),radial-gradient(circle_at_80%_20%,_rgba(196,44,108,0.18),_transparent_22%),linear-gradient(180deg,_#070707_0%,_#000000_40%,_#080808_100%)]" />

      <header className="sticky top-0 z-50 border-b border-white/10 bg-black/70 backdrop-blur-xl">

        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8">

          <div className="flex items-center gap-3">

            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-500 to-pink-600 text-lg font-black shadow-lg shadow-pink-950/40">

              YB

            </div>

            <div>

              <div className="text-sm font-black tracking-[0.28em] text-white">YAAD BOIIZ</div>

              <div className="text-[11px] uppercase tracking-[0.24em] text-white/55">Productions Limited</div>

            </div>

          </div>

          <nav className="hidden items-center gap-7 text-sm text-white/75 md:flex">

            <a href="#about" className="transition hover:text-white">About</a>

            <a href="#slate" className="transition hover:text-white">Film Slate</a>

            <a href="#awards" className="transition hover:text-white">Awards</a>

            <a href="#team" className="transition hover:text-white">Team</a>

            <a href="#contact" className="transition hover:text-white">Contact</a>

          </nav>

          <a href="#contact" className="rounded-full border border-white/15 bg-white px-4 py-2 text-sm font-semibold text-black transition hover:scale-[1.02]">

            Distribution Inquiry

          </a>

        </div>

      </header>

      <main>

        <section className="relative overflow-hidden">

          <div className="mx-auto grid max-w-7xl gap-12 px-6 py-20 lg:grid-cols-[1.15fr_0.85fr] lg:px-8 lg:py-28">

            <div className="max-w-3xl">

              <div className="inline-flex items-center rounded-full border border-orange-500/30 bg-orange-500/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.28em] text-orange-300">

                Hollywood studio concept selected

              </div>

              <h1 className="mt-6 text-5xl font-black leading-none tracking-tight sm:text-6xl lg:text-7xl">

                Caribbean stories with <span className="bg-gradient-to-r from-orange-500 to-pink-600 bg-clip-text text-transparent">international studio presence.</span>

              </h1>

              <p className="mt-6 max-w-2xl text-lg leading-8 text-white/72 sm:text-xl">

                Yaad Boiiz Productions Limited is presented here as a prestige film studio brand: cinematic, confident,

                award-backed and built to appeal to distributors, sponsors, investors and global audiences.

              </p>

              <div className="mt-8 flex flex-wrap gap-4">

                <a href="#slate" className="rounded-full bg-gradient-to-r from-orange-500 to-pink-600 px-6 py-3 text-sm font-bold uppercase tracking-[0.2em] text-white shadow-lg shadow-pink-950/40 transition hover:scale-[1.02]">

                  View Film Slate

                </a>

                <a href="#awards" className="rounded-full border border-white/15 px-6 py-3 text-sm font-bold uppercase tracking-[0.2em] text-white/90 transition hover:border-white/30 hover:bg-white/5">

                  Awards & Festivals

                </a>

              </div>

              <div className="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4">

                {[

                  { value: "2012", label: "Founded" },

                  { value: "Feature Films", label: "Core Format" },

                  { value: "International", label: "Festival Reach" },

                  { value: "Prestige", label: "Brand Direction" },

                ].map((stat) => (

                  <div key={stat.label} className="rounded-3xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm">

                    <div className="text-2xl font-black">{stat.value}</div>

                    <div className="mt-1 text-xs uppercase tracking-[0.18em] text-white/50">{stat.label}</div>

                  </div>

                ))}

              </div>

            </div>

            <div className="relative">

              <div className="rounded-[2rem] border border-white/10 bg-white/5 p-4 shadow-2xl shadow-pink-950/25 backdrop-blur-sm">

                <div className="aspect-[4/5] rounded-[1.5rem] border border-white/10 bg-[linear-gradient(160deg,_rgba(242,92,42,0.18),_rgba(196,44,108,0.18),_rgba(255,255,255,0.03))] p-6">

                  <div className="flex h-full flex-col justify-between rounded-[1.2rem] border border-white/10 bg-black/40 p-6">

                    <div>

                      <div className="text-xs uppercase tracking-[0.3em] text-white/45">Studio spotlight</div>

                      <div className="mt-3 text-3xl font-black leading-tight">Behind Closed Doors</div>

                      <div className="mt-2 text-sm uppercase tracking-[0.2em] text-orange-300">Flagship prestige title</div>

                    </div>

                    <div className="space-y-4">

                      <div className="rounded-3xl border border-white/10 bg-white/5 p-4">

                        <div className="text-xs uppercase tracking-[0.25em] text-white/45">Positioning</div>

                        <div className="mt-2 text-sm leading-7 text-white/72">

                          Presented as an international-facing feature supported by awards, poster art, trailer visibility and strong cinematic branding.

                        </div>

                      </div>

                      <div className="grid grid-cols-2 gap-3 text-sm text-white/72">

                        <div className="rounded-2xl border border-white/10 bg-white/5 p-4">Poster-led design</div>

                        <div className="rounded-2xl border border-white/10 bg-white/5 p-4">Festival laurels</div>

                        <div className="rounded-2xl border border-white/10 bg-white/5 p-4">Distributor-ready tone</div>

                        <div className="rounded-2xl border border-white/10 bg-white/5 p-4">Prestige typography</div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

              <div className="absolute -bottom-6 -left-6 hidden rounded-3xl border border-white/10 bg-black/70 p-4 shadow-xl backdrop-blur md:block">

                <div className="text-xs uppercase tracking-[0.2em] text-white/45">Selected direction</div>

                <div className="mt-1 max-w-[14rem] text-sm text-white/75">

                  Best suited for sponsors, investors, distribution deals and high-level brand presentation.

                </div>

              </div>

            </div>

          </div>

        </section>

        <section id="about" className="mx-auto max-w-7xl px-6 py-16 lg:px-8 lg:py-20">

          <div className="grid gap-10 lg:grid-cols-[0.9fr_1.1fr]">

            <div>

              <div className="text-sm font-semibold uppercase tracking-[0.3em] text-orange-300">About the studio</div>

              <h2 className="mt-4 text-3xl font-black sm:text-4xl">Built in Jamaica. Positioned for the world.</h2>

            </div>

            <div className="space-y-6 text-white/75">

              <p>

                Founded in 2012, Yaad Boiiz Productions has evolved into a next-generation multimedia production company with

                strengths in feature films, television programming, commercial content and post-production support.

              </p>

              <p>

                This Hollywood-style presentation emphasizes the company's strongest premium signals: dramatic storytelling,

                visually bold titles, awards recognition and the confidence of a brand ready for global market conversations.

              </p>

            </div>

          </div>

          <div className="mt-10 grid gap-6 lg:grid-cols-3">

            <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6">

              <div className="text-sm font-semibold uppercase tracking-[0.25em] text-orange-300">Mission</div>

              <p className="mt-4 text-white/75">

                To create cinematic work that stands the test of time while elevating Caribbean voices through film, television and commercial storytelling.

              </p>

            </div>

            <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6">

              <div className="text-sm font-semibold uppercase tracking-[0.25em] text-pink-300">Positioning</div>

              <p className="mt-4 text-white/75">

                A prestige-led studio identity designed to communicate confidence, quality and international ambition.

              </p>

            </div>

            <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6">

              <div className="text-sm font-semibold uppercase tracking-[0.25em] text-white/70">Strength</div>

              <p className="mt-4 text-white/75">

                Film-first presentation supported by recognizable poster art, festival wins, talent bios and market-facing professionalism.

              </p>

            </div>

          </div>

        </section>

        <section id="slate" className="mx-auto max-w-7xl px-6 py-16 lg:px-8 lg:py-20">

          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">

            <div>

              <div className="text-sm font-semibold uppercase tracking-[0.3em] text-orange-300">Film slate</div>

              <h2 className="mt-4 text-3xl font-black sm:text-4xl">Flagship titles presented like a premium studio catalog.</h2>

            </div>

            <p className="max-w-2xl text-white/65">

              The Hollywood version is designed around strong project cards, poster-led storytelling and clear credibility markers.

            </p>

          </div>

          <div className="mt-10 grid gap-6 xl:grid-cols-3">

            {films.map((film, index) => (

              <div key={film.title} className="overflow-hidden rounded-[2rem] border border-white/10 bg-white/5">

                <div className="aspect-[16/11] bg-[linear-gradient(140deg,_rgba(242,92,42,0.24),_rgba(196,44,108,0.16),_rgba(255,255,255,0.03))] p-5">

                  <div className="flex h-full flex-col justify-between rounded-[1.4rem] border border-white/10 bg-black/35 p-5">

                    <div className="flex items-center justify-between">

                      <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.2em] text-white/60">

                        {film.type}

                      </span>

                      <span className="text-sm text-white/45">0{index + 1}</span>

                    </div>

                    <div>

                      <div className="text-xs uppercase tracking-[0.25em] text-white/45">Featured title</div>

                      <div className="mt-2 text-2xl font-black leading-tight">{film.title}</div>

                    </div>

                  </div>

                </div>

                <div className="p-6">

                  <p className="text-sm leading-7 text-white/72">{film.description}</p>

                  <div className="mt-5 flex flex-wrap gap-2">

                    {film.highlights.map((item) => (

                      <span key={item} className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.15em] text-white/65">

                        {item}

                      </span>

                    ))}

                  </div>

                  <button className="mt-5 rounded-full border border-white/10 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/30 hover:bg-white/5">

                    View Project

                  </button>

                </div>

              </div>

            ))}

          </div>

        </section>

        <section id="awards" className="mx-auto max-w-7xl px-6 py-16 lg:px-8 lg:py-20">

          <div className="grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">

            <div className="rounded-[2rem] border border-white/10 bg-white/5 p-8">

              <div className="text-sm font-semibold uppercase tracking-[0.3em] text-orange-300">Awards & festivals</div>

              <h2 className="mt-4 text-3xl font-black sm:text-4xl">Recognition that strengthens the studio narrative.</h2>

              <p className="mt-5 max-w-2xl text-white/72">

                In this version, awards are treated as prestige markers. They support the premium identity of the company and

                give confidence to buyers, sponsors, festival programmers and strategic partners.

              </p>

              <div className="mt-8 grid gap-3 sm:grid-cols-2">

                {awards.map((award) => (

                  <div key={award} className="rounded-2xl border border-white/10 bg-black/20 p-4 text-sm text-white/75">

                    {award}

                  </div>

                ))}

              </div>

            </div>

            <div className="rounded-[2rem] border border-white/10 bg-[linear-gradient(135deg,_rgba(242,92,42,0.14),_rgba(196,44,108,0.12),_rgba(255,255,255,0.03))] p-8">

              <div className="text-sm font-semibold uppercase tracking-[0.3em] text-pink-300">Studio use case</div>

              <h3 className="mt-4 text-2xl font-black">Why this version works</h3>

              <div className="mt-6 space-y-4 text-white/75">

                <div className="rounded-2xl border border-white/10 bg-black/20 p-4">Stronger for investor introductions and sponsorship meetings.</div>

                <div className="rounded-2xl border border-white/10 bg-black/20 p-4">Feels closer to a real independent studio than a general business website.</div>

                <div className="rounded-2xl border border-white/10 bg-black/20 p-4">Creates a premium environment for film posters, trailers and festival laurels.</div>

                <div className="rounded-2xl border border-white/10 bg-black/20 p-4">Can easily expand into press kits, distribution pages and title-specific microsites.</div>

              </div>

            </div>

          </div>

        </section>

        <section id="team" className="mx-auto max-w-7xl px-6 py-16 lg:px-8 lg:py-20">

          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">

            <div>

              <div className="text-sm font-semibold uppercase tracking-[0.3em] text-orange-300">Leadership</div>

              <h2 className="mt-4 text-3xl font-black sm:text-4xl">Creative leadership behind the brand.</h2>

            </div>

            <p className="max-w-2xl text-white/65">

              The final production version can use your real headshots, bios and film-specific roles.

            </p>

          </div>

          <div className="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-4">

            {team.map((person) => (

              <div key={person.name} className="rounded-[2rem] border border-white/10 bg-white/5 p-6">

                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-500 to-pink-600 text-xl font-black shadow-lg shadow-pink-950/20">

                  {person.name

                    .split(" ")

                    .map((part) => part[0])

                    .slice(0, 2)

                    .join("")}

                </div>

                <h3 className="mt-5 text-xl font-bold">{person.name}</h3>

                <div className="mt-1 text-sm uppercase tracking-[0.2em] text-orange-300">{person.role}</div>

                <p className="mt-4 text-sm leading-7 text-white/72">{person.bio}</p>

              </div>

            ))}

          </div>

        </section>

        <section className="mx-auto max-w-7xl px-6 py-16 lg:px-8 lg:py-20">

          <div className="rounded-[2.2rem] border border-white/10 bg-[linear-gradient(135deg,_rgba(242,92,42,0.14),_rgba(196,44,108,0.14),_rgba(255,255,255,0.03))] p-8 sm:p-10 lg:p-12">

            <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">

              <div>

                <div className="text-sm font-semibold uppercase tracking-[0.3em] text-white/70">Final recommendation</div>

                <h2 className="mt-4 text-3xl font-black sm:text-4xl">This is the right direction for Yaad Boiiz.</h2>

                <p className="mt-5 max-w-2xl text-white/75">

                  The Hollywood concept gives the brand more gravitas. It makes the company feel established, cinematic and

                  internationally relevant while still leaving room for trailers, television projects, commercials and future releases.

                </p>

              </div>

              <div className="grid gap-4 sm:grid-cols-2">

                {[

                  "Premium film studio look",

                  "Poster and trailer ready",

                  "Awards-forward without clutter",

                  "Strong for distribution outreach",

                ].map((point) => (

                  <div key={point} className="rounded-3xl border border-white/10 bg-black/25 p-5 text-sm font-medium text-white/85">

                    {point}

                  </div>

                ))}

              </div>

            </div>

          </div>

        </section>

        <section id="contact" className="mx-auto max-w-7xl px-6 py-16 lg:px-8 lg:py-20">

          <div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">

            <div className="rounded-[2rem] border border-white/10 bg-white/5 p-8">

              <div className="text-sm font-semibold uppercase tracking-[0.3em] text-orange-300">Contact</div>

              <h2 className="mt-4 text-3xl font-black">Start the conversation.</h2>

              <div className="mt-8 space-y-5 text-white/75">

                <div>

                  <div className="text-xs uppercase tracking-[0.2em] text-white/45">Company</div>

                  <div className="mt-1 text-base font-medium text-white">Yaad Boiiz Productions Limited</div>

                </div>

                <div>

                  <div className="text-xs uppercase tracking-[0.2em] text-white/45">Email</div>

                  <div className="mt-1 text-base font-medium text-white">yaadboiizfilms@gmail.com</div>

                </div>

                <div>

                  <div className="text-xs uppercase tracking-[0.2em] text-white/45">Phone</div>

                  <div className="mt-1 text-base font-medium text-white">(876) 908-3456</div>

                </div>

                <div>

                  <div className="text-xs uppercase tracking-[0.2em] text-white/45">Location</div>

                  <div className="mt-1 text-base font-medium text-white">Kingston, Jamaica</div>

                </div>

              </div>

            </div>

            <div className="rounded-[2rem] border border-white/10 bg-white/5 p-8">

              <div className="grid gap-4 sm:grid-cols-2">

                <div>

                  <label className="text-xs uppercase tracking-[0.2em] text-white/45">Name</label>

                  <input className="mt-2 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none placeholder:text-white/25" placeholder="Your name" />

                </div>

                <div>

                  <label className="text-xs uppercase tracking-[0.2em] text-white/45">Email</label>

                  <input className="mt-2 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none placeholder:text-white/25" placeholder="your@email.com" />

                </div>

              </div>

              <div className="mt-4 grid gap-4 sm:grid-cols-2">

                <div>

                  <label className="text-xs uppercase tracking-[0.2em] text-white/45">Inquiry type</label>

                  <select className="mt-2 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none">

                    <option>Distribution</option>

                    <option>Sponsorship</option>

                    <option>Production Services</option>

                    <option>Media / Press</option>

                    <option>General</option>

                  </select>

                </div>

                <div>

                  <label className="text-xs uppercase tracking-[0.2em] text-white/45">Project / title</label>

                  <select className="mt-2 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none">

                    <option>Behind Closed Doors</option>

                    <option>Jamaican Mafia</option>

                    <option>My Business TV Show</option>

                    <option>General Company Inquiry</option>

                  </select>

                </div>

              </div>

              <div className="mt-4">

                <label className="text-xs uppercase tracking-[0.2em] text-white/45">Message</label>

                <textarea className="mt-2 min-h-[160px] w-full rounded-[1.5rem] border border-white/10 bg-black/30 px-4 py-3 text-white outline-none placeholder:text-white/25" placeholder="Tell us about your interest, partnership idea or distribution opportunity..." />

              </div>

              <button className="mt-5 rounded-full bg-gradient-to-r from-orange-500 to-pink-600 px-6 py-3 text-sm font-bold uppercase tracking-[0.2em] text-white shadow-lg shadow-pink-950/40 transition hover:scale-[1.02]">

                Send Inquiry

              </button>

            </div>

          </div>

        </section>

      </main>

      <footer className="border-t border-white/10 bg-black/50">

        <div className="mx-auto flex max-w-7xl flex-col gap-6 px-6 py-8 text-sm text-white/55 lg:flex-row lg:items-center lg:justify-between lg:px-8">

          <div>

            <div className="font-semibold uppercase tracking-[0.25em] text-white/75">Yaad Boiiz Productions Limited</div>

            <div className="mt-2">Hollywood-style studio presentation selected for the final direction.</div>

          </div>

          <div className="flex flex-wrap gap-4">

            <a href="#about" className="transition hover:text-white">About</a>

            <a href="#slate" className="transition hover:text-white">Film Slate</a>

            <a href="#awards" className="transition hover:text-white">Awards</a>

            <a href="#team" className="transition hover:text-white">Team</a>

            <a href="#contact" className="transition hover:text-white">Contact</a>

          </div>

        </div>

      </footer>

    </div>

  );

}