import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";

import Image from "next/image";

export default function Home() {
  const serviceCarousel = [
    {
      id: 0,
      content: (
        <>
          <section className="space-y-6">
            <div>
              <Image
                src={"/images/campaign-strategy.png"}
                width={614}
                height={418}
                alt="campaign-strategy"
              />
            </div>
            <div className="space-y-4">
              <p className="px-6 py-2 text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
                01
              </p>
              <h2 className="text-4xl text-white font-lato">
                Campaign Strategy
              </h2>
              <p className="text-lg font-lato text-white/60">
                Comprehensive planning from research to execution, crafted to
                win hearts and minds.
              </p>
            </div>
          </section>
        </>
      ),
    },
    {
      id: 1,
      content: (
        <>
          <section className="space-y-6">
            <div>
              <Image
                src={"/images/media-production.png"}
                width={614}
                height={418}
                alt="media-production"
              />
            </div>
            <div className="space-y-4">
              <p className="px-6 py-2 text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
                02
              </p>
              <h2 className="text-4xl text-white font-lato">
                Media Production
              </h2>
              <p className="text-lg font-lato text-white/60">
                Cinematic storytelling through video, photography, and
                multimedia content that captivates.
              </p>
            </div>
          </section>
        </>
      ),
    },
    {
      id: 2,
      content: (
        <>
          <section className="space-y-6">
            <div>
              <Image
                src={"/images/research.png"}
                width={614}
                height={418}
                alt="research"
              />
            </div>
            <div className="space-y-4">
              <p className="px-6 py-2 text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
                03
              </p>
              <h2 className="text-4xl text-white font-lato">
                Research & Analytics
              </h2>
              <p className="text-lg font-lato text-white/60">
                Data-driven insights that inform every decision and optimize
                every outcome
              </p>
            </div>
          </section>
        </>
      ),
    },
  ];

  return (
    <main className="bg-radial-[at_50%_50%] from-[#1a0a0e]  to-[#0D0F11] pt-20">
      <section className="min-h-screen space-y-8 flex flex-col items-center">
        <section className="flex flex-col space-y-4">
          <div className="flex gap-4 justify-between items-center">
            <hr className="text-[#7B2E45]/50 w-1/2" />
            <div className="flex gap-2">
              <div className="bg-[#7B2E45] h-3 w-3 rotate-45"></div>
              <div className="border-[#7B2E45] border h-3 w-3 rotate-45"></div>
            </div>
            <hr className="text-[#7B2E45]/50 w-1/2" />
          </div>
          <div>
            <h1
              className="
    font-inter text-[80px] leading-20 font-black tracking-tight
    bg-[linear-gradient(123.54deg,#FFFFFF_0%,#D8DFE4_38.8%,#7B2E45_71.52%,#9B3E55_102.17%)]
    bg-clip-text text-transparent
  "
            >
              Da Next
            </h1>
            <h1
              className="
    font-inter text-[80px] font-black tracking-tight
    bg-[linear-gradient(123.54deg,#7B2E45_7.16%,#9B3E55_53.58%,#D8DFE4_100%)]
    bg-clip-text text-transparent pb-2 leading-20
  "
            >
              Agency
            </h1>
          </div>
        </section>
        <section className="flex flex-col items-center h-fit space-y-6">
          <div className="flex flex-col lg:md:flex-row lg:md:gap-2">
            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
              Shaping Narratives.
            </h3>
            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
              Building Leaders.
            </h3>
            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
              Winning Campaigns.
            </h3>
          </div>
          <div className="flex items-center gap-2 ">
            <div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
            <hr className="text-[#7B2E45]/50 w-32" />
          </div>
        </section>
        <section className="">
          <div className="relative inline-block">
            <button
              className="
      relative px-8 py-3 rounded-xl
      bg-linear-to-b from-[#7B2E45] to-[#9B3E55]
      hover:from-[#913651] hover:to-[#b34762]
    "
            >
              {/* diamonds */}
              {/* <span className="absolute -top-2 -left-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
            <span className="absolute -top-2 -right-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span> */}

              <span className="text-white font-medium font-lato text-xl">
                Start Your Campaign —
              </span>
            </button>

            {/* corner borders OUTSIDE the clipped button */}
            <span className="absolute -left-4 -top-4 w-6 h-6 border-t border-l border-[#7B2E45]" />
            <span className="absolute -right-4 -top-4 w-6 h-6 border-t border-r border-[#7B2E45]" />
            <span className="absolute -left-4 -bottom-4 w-6 h-6 border-b border-l border-[#7B2E45]" />
            <span className="absolute -right-4 -bottom-4 w-6 h-6 border-b border-r border-[#7B2E45]" />
          </div>
        </section>
        <section className="flex flex-col lg:md:flex-row gap-10">
          <section className="flex items-center gap-4">
            <div className="flex gap-1 px-2">
              <div className="w-3 h-16 bg-[#7B2E45]"></div>
              <div className="w-3 h-12 bg-[#7B2E45]/50"></div>
              <div className="w-3 h-8 bg-[#7B2E45]/30"></div>
            </div>
            <div className="flex flex-col ">
              <h4 className="text-3xl text-[#7B2E45] font-lato">500+</h4>
              <h5 className="text-xl font-lato font-light text-white/50">
                CAMPAIGNS
              </h5>
            </div>
          </section>
          <section className="flex items-center gap-4">
            <div className="flex gap-1 px-2">
              <div className="w-3 h-16 bg-[#7B2E45]"></div>
              <div className="w-3 h-12 bg-[#7B2E45]/50"></div>
              <div className="w-3 h-8 bg-[#7B2E45]/30"></div>
            </div>
            <div className="flex flex-col ">
              <h4 className="text-3xl text-[#7B2E45] font-lato">98%+</h4>
              <h5 className="text-xl font-lato font-light text-white/50">
                SUCCESS RATE
              </h5>
            </div>
          </section>
          <section className="flex items-center gap-4">
            <div className="flex gap-1 px-2">
              <div className="w-3 h-16 bg-[#7B2E45]"></div>
              <div className="w-3 h-12 bg-[#7B2E45]/50"></div>
              <div className="w-3 h-8 bg-[#7B2E45]/30"></div>
            </div>
            <div className="flex flex-col ">
              <h4 className="text-3xl text-[#7B2E45] font-lato">15+</h4>
              <h5 className="text-xl font-lato font-light text-white/50">
                YEARS
              </h5>
            </div>
          </section>
        </section>
      </section>
      <section className="px-10 space-y-8">
        <div className="aspect-square overflow-hidden">
          <Image
            src={"/images/about.jpg"}
            width={542}
            height={500}
            alt="about"
            className="object-cover object-center w-full h-full"
          />
        </div>
        <section className="space-y-4">
          <h2 className="font-lato text-xl text-[#7B2E45]">WHO WE ARE</h2>
          <h2 className="font-lato text-6xl text-white">
            Architects <br /> of{" "}
            <span className="text-[#7B2E45]">Influence</span>
          </h2>
          <p className="font-lato text-white text-xl">
            Da Next Agency is a premier public relations and strategic
            communications firm based in Bangladesh. We specialize in crafting
            compelling narratives, managing reputations, and driving impactful
            campaigns for leaders, organizations, and brands.
          </p>
          <p className="font-lato text-white text-xl">
            From political campaigns to corporate reputation management, we
            offer a full spectrum of services designed to elevate your public
            image and achieve your strategic objectives.
          </p>
          <span className="font-lato text-xl text-[#7B2E45]">
            We don't just tell stories. We create movements
          </span>
        </section>
      </section>
      <section className="min-h-screen px-5 flex flex-col items-center justify-center space-y-6">
        <div className="aspect-square overflow-hidden w-.20 h-20">
          <Image
            src={"/icons/quotation.png"}
            width={384}
            height={384}
            alt="quotation-mark"
          />
        </div>
        <p className="font-lato text-2xl text-white text-center">
          To nurture narratives and shape public perception,{" "}
          <span className="text-[#7B2E45]">
            creating a lasting positive image
          </span>{" "}
          in the community
        </p>
        <hr className="text-[#7B2E45]/50 w-1/2" />
        <h4 className="font-lato text-lg font-normal text-white/60 tracking-wider">
          OUR MISSION
        </h4>
      </section>
      <section className="min-h-screen px-10 space-y-4 ">
        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
          WHAT WE DO
        </h2>
        <h2 className="font-lato text-6xl text-white">
          Services That{" "}
          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
            Transform
          </span>
        </h2>
        <h5 className="font-lato text-white/50 text-lg">
          Strategic excellence across every dimension of modern PR
        </h5>
        <section className="flex flex-col items-start space-y-7">
          <Carousel className="w-full h-fit ">
            <CarouselContent>
              {serviceCarousel.map(({ id, content }) => (
                <CarouselItem key={id}>{content}</CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <div className="flex gap-4 w-5/6">
            <div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1" />
            <div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1" />
            <div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1" />
            <div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1" />
            <div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1" />
          </div>
        </section>
      </section>
      <section className="min-h-screen px-10 space-y-4">
        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
          OUR APPROACH
        </h2>
        <h2 className="font-lato text-6xl text-white">
          Strategic{" "}
          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
            Content
          </span>
        </h2>
        <section className="space-y-8">
          <div className="bg-black p-8 space-y-2">
            <h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
              PROTECT YOUR REPUTATION
            </h2>
            <h2 className="font-lato text-2xl text-white">Crisis Management</h2>
            <ul className="font-lato text-white/60 list-disc pl-4 space-y-3">
              <li>24/7 Response Team</li>
              <li>Media Relations</li>
              <li>Damage Control</li>
              <li>Recovery Strategy</li>
            </ul>
          </div>
          <div className="bg-black p-8 space-y-2">
            <h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
              DEFINE YOUR IDENTITY
            </h2>
            <h2 className="font-lato text-2xl text-white">Brand Positioning</h2>
            <ul className="font-lato text-white/60 list-disc pl-4 space-y-3">
              <li>Market Research</li>
              <li>Competitive Analysis</li>
              <li>Messaging Framework</li>
              <li>Brand Guidelines</li>
            </ul>
          </div>
          <div className="bg-black p-8 space-y-2">
            <h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
              ENGAGE YOUR AUDIENCE
            </h2>
            <h2 className="font-lato text-2xl text-white">Digital Campaigns</h2>
            <ul className="font-lato text-white/60 list-disc pl-4 space-y-3">
              <li>Social Media Strategy</li>
              <li>Content Calendar</li>
              <li>Influencer Partnerships</li>
              <li>Performance Analystics</li>
            </ul>
          </div>
        </section>
      </section>
      <section className="min-h-screen px-10 flex flex-col items-center justify-center space-y-8">
        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center">
          MEDIA PRODUCTION
        </h2>
        <h2 className="font-lato text-6xl text-white text-center">
          Visual{" "}
          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
            Storytelling{" "}
          </span>
          That Moves
        </h2>
        <p className="font-lato text-2xl text-white/80 text-center">
          From campaign ads to documentary-style content, we produce visual
          narratives that captivate audiences and drive results.
        </p>
      </section>
      <section className="min-h-screen px-10 space-y-8">
        <div className="aspect-square overflow-hidden">
          <Image
            src={"/images/data-driven-insights.jpg"}
            width={542}
            height={500}
            alt="about"
            className="object-cover object-center w-full h-full"
          />
        </div>
        <section className="space-y-6">
          <h2 className="font-lato text-xl text-[#7B2E45]">
            INTELLIGENCE DRIVEN
          </h2>
          <h2 className="font-lato text-6xl text-white">
            Data-Driven <span className="text-[#7B2E45]">Insights</span>
          </h2>
          <p className="font-lato font-normal text-white text-xl ">
            We leverage advanced research methodologies and analytics to inform
            strategy, measure impact, and optimize campaigns in real-time.
          </p>
          <div className="space-y-4">
            <div className="p-5 rounded-2xl w-full space-y-3 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
              <h2 className="font-lato text-[#7B2E45] text-4xl">10K+</h2>
              <p className="font-lato text-white/70 text-lg">
                Survey Responses
              </p>
            </div>
            <div className="p-5 rounded-2xl w-full space-y-3 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
              <h2 className="font-lato text-[#7B2E45] text-4xl">95%</h2>
              <p className="font-lato text-white/70 text-lg">Data Accuracy</p>
            </div>
          </div>
        </section>
      </section>
      <section className="min-h-screen px-10 py-20 space-y-4">
        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
          PROVEN RESULTS
        </h2>
        <h2 className="font-lato text-6xl text-white">
          Success{" "}
          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
            Stories
          </span>
        </h2>
        <section className="space-y-8">
          <div className="bg-black p-8 space-y-4">
            <div className="space-y-2">
              <h2 className="font-lato text-2xl text-white">
                Honorable MP Rahman
              </h2>
              <h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
                Parliamentary Candidate
              </h2>
              <h2 className="font-lato text-md text-[#D8DFE499] tracking-wide">
                Won by 45% margin
              </h2>
            </div>
            <div className="border-l-2 border-[#7B2E454D] pl-4">
              <p className="font-lato text-lg text-[#D8DFE4E5]">
                "Da Next Agency transformed my campaign narrative and connected
                me authentically with voters."
              </p>
            </div>
            <div className="space-y-4">
              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
                <h2 className="font-lato text-[#7B2E45] text-2xl">+180%</h2>
                <p className="font-lato text-white/70 text-md">Engagement</p>
              </div>
              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
                <h2 className="font-lato text-[#7B2E45] text-2xl">2.5M</h2>
                <p className="font-lato text-white/70 text-md">Reach</p>
              </div>
            </div>
          </div>
          <div className="bg-black p-8 space-y-4">
            <div className="space-y-2">
              <h2 className="font-lato text-2xl text-white">
                TechCorp Bangladesh
              </h2>
              <h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
                Technology Company
              </h2>
              <h2 className="font-lato text-md text-[#D8DFE499] tracking-wide">
                Brand recognition +300%
              </h2>
            </div>
            <div className="border-l-2 border-[#7B2E454D] pl-4">
              <p className="font-lato text-lg text-[#D8DFE4E5]">
                "Their strategic approach to PR helped us become a household
                name in just six months."
              </p>
            </div>
            <div className="space-y-4">
              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
                <h2 className="font-lato text-[#7B2E45] text-2xl">+220%</h2>
                <p className="font-lato text-white/70 text-md">Engagement</p>
              </div>
              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
                <h2 className="font-lato text-[#7B2E45] text-2xl">5.M</h2>
                <p className="font-lato text-white/70 text-md">Reach</p>
              </div>
            </div>
          </div>
          <div className="bg-black p-8 space-y-4">
            <div className="space-y-2">
              <h2 className="font-lato text-2xl text-white">
                Green Future Initiative
              </h2>
              <h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
                Environmental NGO
              </h2>
              <h2 className="font-lato text-md text-[#D8DFE499] tracking-wide">
                Policy change achieved
              </h2>
            </div>
            <div className="border-l-2 border-[#7B2E454D] pl-4">
              <p className="font-lato text-lg text-[#D8DFE4E5]">
                "The campaign they crafted mobilized thousands and influenced
                national environmental policy."
              </p>
            </div>
            <div className="space-y-4">
              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
                <h2 className="font-lato text-[#7B2E45] text-2xl">+350%</h2>
                <p className="font-lato text-white/70 text-md">Engagement</p>
              </div>
              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
                <h2 className="font-lato text-[#7B2E45] text-2xl">8.1M</h2>
                <p className="font-lato text-white/70 text-md">Reach</p>
              </div>
            </div>
          </div>
        </section>
      </section>
      <section className="py-20 min-h-screen px-10 space-y-4">
        <h2 className="font-lato text-xl text-[#7B2E45] tracking-wider">
          IMPACT METRICS
        </h2>
        <h2 className="font-lato text-6xl text-white">
          Measurable{" "}
          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
            Results
          </span>
        </h2>
        <section className="space-y-8">
          <div className="px-10 py-14 bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl  shadow-xl flex flex-col items-center space-y-5">
            <h2 className="font-lato text-7xl text-[#7B2E45]">85%</h2>

            <h5 className="font-lato text-[#D8DFE4] text-lg">
              Public Engagement
            </h5>

            <div className="w-full bg-[#7B2E45]/10 rounded-full overflow-hidden">
              <div className="w-5/6 bg-[#7B2E45] py-2 rounded-full"></div>
            </div>
          </div>
          <div className="px-10 py-14 bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl  shadow-xl flex flex-col items-center space-y-5">
            <h2 className="font-lato text-7xl text-[#7B2E45]">70%</h2>

            <h5 className="font-lato text-[#D8DFE4] text-lg">
              Positive Sentiment
            </h5>

            <div className="w-full bg-[#7B2E45]/10 rounded-full overflow-hidden">
              <div className="w-5/6 bg-[#7B2E45] py-2 rounded-full"></div>
            </div>
          </div>
          <div className="px-10 py-14 bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl  shadow-xl flex flex-col items-center space-y-5">
            <h2 className="font-lato text-7xl text-[#7B2E45]">90%</h2>

            <h5 className="font-lato text-[#D8DFE4] text-lg">Media Reach</h5>

            <div className="w-full bg-[#7B2E45]/10 rounded-full overflow-hidden">
              <div className="w-5/6 bg-[#7B2E45] py-2 rounded-full"></div>
            </div>
          </div>
          <div className="px-10 py-14 bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl  shadow-xl flex flex-col items-center space-y-5">
            <h2 className="font-lato text-7xl text-[#7B2E45]">60%</h2>

            <h5 className="font-lato text-[#D8DFE4] text-lg">Brand Recall</h5>

            <div className="w-full bg-[#7B2E45]/10 rounded-full overflow-hidden">
              <div className="w-5/6 bg-[#7B2E45] py-2 rounded-full"></div>
            </div>
          </div>
        </section>
      </section>
    </main>
  );
}