import Image from "next/image"
import Traction from "@/images/tractions/tractions.jpg"
import logoForbes from "@/images/logos/forbes.svg"
import logoTechcrunch from "@/images/logos/techcrunch.svg"
import logoWired from "@/images/logos/wired.svg"
import logoCnn from "@/images/logos/cnn.svg"
import logoBbc from "@/images/logos/bbc.svg"
import logoCbs from "@/images/logos/cbs.svg"
import logoFastCompany from "@/images/logos/fast-company.svg"
import logoHuffpost from "@/images/logos/huffpost.svg"
import clsx from "clsx"

const stats = [
  { id: 1, name: 'Raised in sponsorship.', value: '7M+' },
  { id: 2, name: 'Views from educational partners.', value: '3B+' },
  { id: 3, name: 'Users deployed.', value: '300K' },
  { id: 4, name: 'Revenues paid to NGOs', value: '$70M' },
]

export default function Tractions() {
  return (
    <div className="relative bg-white py-12">
      <div className="mx-auto grid max-w-7xl lg:grid-cols-2">
        {/* LEFT IMAGE + LOGO */}
        <div className="flex flex-col items-center lg:items-start gap-8 px-6 pb-12 lg:px-8">
          <div className="w-full ring-1 ring-black/15 rounded-3xl overflow-hidden max-lg:rounded-t-4xl lg:rounded-tl-4xl">
            <Image
              alt=""
              src={Traction}
              className="aspect-[3/2] object-cover w-full h-auto"
            />
          </div>
          <div className="w-full pr-6 lg:pr-12">
            <ul
              role="list"
              className="mt-6 flex flex-wrap justify-center gap-x-10 gap-y-8 lg:justify-start"
            >
              {[
                ['Forbes', logoForbes],
                ['TechCrunch', logoTechcrunch],
                ['Wired', logoWired],
                ['CNN', logoCnn, 'hidden xl:block'],
                ['BBC', logoBbc],
                ['CBS', logoCbs],
                ['Fast Company', logoFastCompany],
                ['HuffPost', logoHuffpost, 'hidden xl:block'],
              ].map(([name, logo, className]) => (
                <li key={name} className={clsx('flex', className)}>
                  <Image src={logo} alt={name} className="h-8 w-auto" unoptimized />
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* RIGHT TEXT BLOCK */}
        <div className="px-6 lg:px-8">
          <div className="mx-auto max-w-2xl lg:mr-0 lg:max-w-lg">
            <h2 className="text-base/8 font-semibold text-gray-900">Our track record</h2>
            <p className="mt-2 text-3xl font-medium tracking-tight text-gray-900 sm:text-4xl">
              Trusted by Changemakers worldwide
            </p>
            <p className="mt-6 lg:text-lg text-base text-gray-600">
                Engage OS powers the digital headquarters for over 300,000 users across 50+ countries. From grassroots NGOs to global movements, our platform is built to scale impact, not just numbers.
            </p>
            <dl className="mt-16 grid max-w-xl grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 xl:mt-16">
              {stats.map((stat) => (
                <div key={stat.id} className="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
                  <dt className="text-sm/6 text-gray-600">{stat.name}</dt>
                  <dd className="order-first text-3xl font-semibold tracking-tight text-gray-900">{stat.value}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    </div>
  )
}