import { Metadata } from "next";
import Image from "next/image";
import ApexChart from "./_components/ApexChart";
export const metadata: Metadata = {
  title: "Opp lens - AI-Powered Tender Management for SMEs | Win More Tenders",
  description:
    "Automated tender management platform for SMEs. Find tailored tenders, automate document handling, and get real-time alerts. Win more opportunities with less effort.",
  keywords:
    "tender management, AI tender search, SME tenders, public procurement, automated bidding, tender alerts",
  authors: [{ name: "PBL Partners AB" }],
  openGraph: {
    title: "Opp lens - AI-Powered Tender Management",
    description: "Win more tenders automatically with our AI-powered platform",
    type: "website",
    locale: "en_US",
    siteName: "Opp lens",
  },
  icons: {
    icon: "/fav-icon.svg",
  },
};

export default function Home() {
  const centerFrames = [
    {
      src: "/magnifier.svg",
      title: "1. Discover with AI",
      alt: "Magnifier",
      description:
        "Our intelligent platform scours thousands of sources to find the perfect, most relevant tender opportunities for your specific business and expertise",
    },
    {
      src: "/clipboard.svg",
      title: "2. Prepare with Experts",
      alt: "Clipboard",
      description:
        "Gain access to expert support and powerful tools to craft compelling, competitive, and high-quality bids that stand out from the competition.",
    },
    {
      src: "/thumbs-up.svg",
      title: "3. Win with a Partner",
      alt: "thumbs-up",
      description:
        "We operate on a partnership model. We only succeed when you win. This aligns our goals and makes us a true partner in your growth.",
    },
  ];
  return (
    <>
      <section className="block md:flex justify-around items-center">
        <div className="flex gap-4 w-full md:w-1/2 font-bold text-4xl text-center flex-col bg-gray-800/10 p-10 rounded-[40px] h-fit mb-16">
          <h2>
            <span>$</span>
            <span>12,345,678</span>
          </h2>
          <h2 className="capitalize">total tender amount you missed today</h2>
          <ApexChart />
        </div>
        <div className="mr-8 -z-20 relative flex justify-center h-[750px]">
          <Image
            src={"/dynamic-island.svg"}
            alt="dynamic island"
            width={75}
            height={22}
            className="absolute top-4 left-1/2 -translate-x-1/2"
          />
          <Image
            className="-z-10 border-8 border-black rounded-4xl overflow-hidden h-full w-full"
            src="/mobile.gif"
            width={300}
            height={920}
            loading="lazy"
            alt="phone"
          />
        </div>
      </section>
      <section className="text-left flex flex-col gap-6 bg-gradient-to-b from-[#011132] to-[#012B80] text-white rounded-[56px] relative p-6 md:p-14 -mt-16 z-20 md:ml-28">
        <hgroup>
          <h1 className="capitalize font-extrabold text-5xl ">
            democratizing the world of tenders
          </h1>
          <p className="text-xs">
            Opplens is your dedicated AI-powered partner, leveling the playing
            field so you can win the public and private contracts you deserve.
            Compete on your true strengths.
          </p>
        </hgroup>
        <div className="flex justify-end">
          <button className="bg-(--primary) rounded-4xl py-4 px-6">
            Get early access
          </button>
        </div>
      </section>
      <article className="mt-40">
        <hgroup>
          <h4 className="capitalize font-bold text-2xl md:text-4xl">
            your in-house tender department, powered by
            <span className="uppercase">ai</span>
          </h4>
          <small className="text-gray-600 mt-3">
            Opplens is the end-to-end solution that gives you the power to
            compete and win.
          </small>
        </hgroup>
      </article>
      <section className="flex flex-col gap-4 md:flex-row">
        {centerFrames.map((frame, index) => (
          <article
            key={frame.description}
            className="bg-[#F7FAFF] border border-(--primary)/30 rounded-3xl my-4 py-10 px-6 flex flex-col gap-5">
            <Image
              src={frame.src}
              alt={frame.alt}
              width={36}
              height={36}
            />
            <h3 className="text-2xl font-bold">{frame.title}</h3>
            <p className="text-gray-600">{frame.description}</p>
          </article>
        ))}
      </section>
      <section className="mt-36 bg-[#F7FAFF] px-4 py-6 rounded-4xl flex flex-col gap-9 md:p-16">
        <div className="flex flex-col gap-4">
          <h2 className=" font-bold text-4xl">
            Tired of Complex Tenders & Lost Opportunities?
          </h2>
          <p className="font-normal text-sm">
            The procurement market is tough for SMEs. We get it. You're facing
            an uphill battle.
          </p>
        </div>
        <ul className="flex flex-col gap-4 md:flex-row md:justify-between">
          <li className="flex flex-col gap-4 md:w-80">
            <div className="p-4">
              <Image
                src={"/clock.svg"}
                alt="clock icon"
                width={36}
                height={36}
              />
            </div>
            <h2 className="font-bold">Resource Drain</h2>
            <p>
              Lacking the time, dedicated staff, and expertise to constantly
              monitor the market and prepare high-quality bids.
            </p>
          </li>
          <li className="flex flex-col gap-4 md:w-80">
            <div className="p-4">
              <Image
                src={"/clipboard.svg"}
                alt="clipboard icon"
                width={36}
                height={36}
              />
            </div>
            <h2 className="font-bold">Overwhelming Complexity</h2>
            <p>
              Navigating complex requirements and processes designed for large
              corporations with dedicated tender departments.
            </p>
          </li>
          <li className="flex flex-col gap-4 md:w-80">
            <div className="p-4">
              <Image
                src={"/arrow-up.svg"}
                alt="arrow-up icon"
                width={36}
                height={36}
              />
            </div>
            <h2 className="font-bold">Low Win Rates</h2>
            <p>
              Did you know 68% of SMEs in Sweden rarely or never win public
              tenders? It's time to change that.
            </p>
          </li>
        </ul>
      </section>
      <section className="flex flex-col mt-36 gap-10 md:w-3/4 m-auto">
        <div>
          <h2 className="font-bold text-4xl">The Opplens Advantage</h2>
        </div>
        <section className="flex flex-col gap-10 md:flex-row">
          <div className="flex flex-col gap-7 md:flex-row bg-[#FFF7EB] p-10 rounded-3xl md:pb-20">
            <Image
              src={"people.svg"}
              width={48}
              height={48}
              alt="people icon"
            />
            <div className="flex flex-col gap-4">
              <h2 className="font-bold text-xl">A True Partnership Model</h2>
              <p>
                Lower your risk with our performance-based options. Our success
                is directly tied to yours, making us a dedicated partner
                invested in your growth, not just a software provider.
              </p>
            </div>
          </div>
          <div className="flex flex-col gap-7 md:flex-row bg-[#E5EFFF] p-10 rounded-3xl md:pb-20">
            <Image
              src={"shield-tick.svg"}
              width={48}
              height={48}
              alt="shield icon"
            />
            <div className="flex flex-col gap-4">
              <h2 className="font-bold text-xl">Unmatched Data Security</h2>
              <p>
                Your business data is critical. Our unique on premise AI engine
                ensures your information remains 100% private and secure, unlike
                cloud based services. Fully GDPR compliant by design.
              </p>
            </div>
          </div>
        </section>
      </section>
    </>
  );
}

function CenterFrame({
  src,
  title,
  description,
  alt,
}: {
  src: string;
  title: string;
  description: string;
  alt: string;
}) {
  return (
    <div className="bg-[#F7FAFF] border border-(--primary)/30 rounded-3xl my-4 py-10 px-6">
      <Image
        src={src}
        alt={alt}
        width={36}
        height={36}
      />
      <h3 className="text-2xl font-bold">{title}</h3>
      <p className="text-gray-600">{description}</p>
    </div>
  );
}