import clsx from 'clsx'

const records = [
  {
    period: '1997–2002',
    title: 'World Records for Web Hosting',
    description:
      'Kept UEFA, NASA, and World Cup traffic online with continent-scale uptime.',
    showStream: true,
  },
  {
    period: '2005',
    title: 'The First Backup Data Duplication System in the World',
    description:
      'Cut enterprise backup footprints by up to 100× before dedupe was mainstream.',
    showStream: false,
  },
  {
    period: '2008',
    title: 'One of the First Cloud Systems',
    description:
      'Shipped the first Virtual Private Data Center and proved elastic compute trust.',
    showStream: false,
  },
  {
    period: '2010',
    title: 'The First Multi-Site Consistent Database',
    description:
      'Delivered failover that preserved every transaction across sovereign sites.',
    showStream: true,
  },
  {
    period: '2012',
    title: 'The First Unbreakable and Distributed Storage System',
    description:
      'Built tamper-proof storage that used 10× less energy and never went dark.',
    showStream: false,
  },
  {
    period: '2017',
    title: 'Probably the First Proof of Block Stake Blockchain',
    description:
      'Merged staking and settlement in one move, years before the market caught up.',
    showStream: false,
  },
]

export function AboutRecords() {
  return (
    <section className="relative overflow-hidden bg-black py-16 sm:py-20">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-white/5"
      />
      <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-4xl">
          <p className="subtitle text-white">WORLD RECORDS</p>
          <h2 className="mt-2 h2-default text-white">
            Milestones That Pushed the Internet Forward
          </h2>
          <p className="mt-4 max-w-3xl text-sm text-gray-300 sm:text-base">
            Across decades of building resilient digital infrastructure, our team set new technical benchmarks that still define
            how mission-critical systems operate today.
          </p>
        </div>
        <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">
          {records.map((record) => (
            <article
              key={record.title}
              className={clsx(
                'group relative flex flex-col gap-3 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.05] p-6 transition-colors duration-300 hover:border-white/25 hover:bg-white/[0.09]',
              )}
            >
              {record.showStream && (
                <span
                  className="pointer-events-none absolute inset-y-4 left-0 w-px bg-gradient-to-b from-transparent via-white/60 to-transparent"
                  aria-hidden="true"
                />
              )}
              <div className="text-xs font-semibold uppercase tracking-[0.25em] text-gray-400">
                {record.period}
              </div>
              <h3 className="text-xl font-semibold tracking-tight text-white">
                {record.title}
              </h3>
              <p className="text-sm text-gray-300 sm:text-base">
                {record.description}
              </p>
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}
