import { Metadata } from "next";
import Image from "next/image";

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 centerFrameItems = [
    {
      header: 200,
      text: "Users",
      description: `Lacking the time, dedicated staff, and
          expertise to constantly monitor the market
          and prepare high-quality bids.`,
    },
    {
      header: 520,
      text: "Contracts",
      description: `Navigating complex requirements and
processes designed for large corporations
with dedicated tender departments.`,
    },
    {
      header: 1500,
      text: "Tenders",
      description: `Did you know 68% of SMEs in Sweden
rarely or never win public tenders? It's time
to change that.`,
    },
  ];

  return (
    <main className="mt-8 flex flex-col justify-center items-center gap-14">
      <section
        className="flex"
        aria-labelledby="hero-heading">
        <div className="flex flex-col">
          <h1
            className="gradient-text md:!text-left md:!text-8xl md:mb-10"
            id="hero-heading">
            AI-Powered
          </h1>
          <Image
            className="block md:hidden"
            src={"/images/mobile.png"}
            alt="Opp lens platform interface on mobile device"
            width={520}
            height={280}
            priority
          />
          <div className="w-full flex flex-col gap-6 text-xl">
            <h2 className="text-(--primary) font-bold text-5xl md:!mb-10">
              Tender Management
            </h2>
            <h3 className="font-bold">Win more tenders, automatically!</h3>
            <p className="text-(--gray-primary)">
              Our platform finds tenders tailored to your business, automates
              document handling, and sends real-time alerts. Win more
              opportunities with less effort and zero manual search.
            </p>
          </div>
        </div>
        <Image
          className="hidden md:block"
          src={"/images/mobile.png"}
          alt="Opp lens platform interface on desktop"
          width={550}
          height={480}
          priority
        />
      </section>
      <section
        className="flex flex-col gap-4 text-center md:flex-row"
        aria-labelledby="statistics-heading">
        <h2
          id="statistics-heading"
          className="sr-only">
          Platform Statistics
        </h2>
        {centerFrameItems.map((item, index) => (
          <CenterFrame
            key={index}
            header={item.header}
            text={item.text}
            description={item.description}
          />
        ))}
      </section>
    </main>
  );
}

function CenterFrame({
  header,
  text,
  description,
}: {
  header: number;
  text: string;
  description: string;
}) {
  return (
    <article className="flex flex-col justify-center items-center gap-4">
      <p
        className="gradient-text"
        aria-label={`${header} ${text}`}>
        <strong>{header}</strong>
      </p>
      <h3 className="text-2xl font-semibold">{text}</h3>
      <p className="text-(--gray-primary)">{description}</p>
    </article>
  );
}