import { motion } from 'framer-motion';

const records = [
  {
    title: 'World Records for Web Hosting (1997-2002)',
    description:
      'Our team started the Internet hosting and data center business in Europe. We hosted some of the largest websites in the world including UEFA, NASA, World Cup.',
  },
  {
    title: 'The FIRST Backup Data Duplication system in the world (2005)',
    description:
      'Our advancements in this field brought up to 100x benefit compared to the status quo running in data centers at the time.',
  },
  {
    title: 'One of the FIRST Cloud Systems (2008)',
    description:
      'We were one of the pioneers of cloud computing in general. Terms like Virtual Private Data Center were invented by us.',
  },
  {
    title: 'The FIRST multi-site consistent database (2010)',
    description:
      'We invented a method to store data in a database over multiple sites in such a way data could never be lost, corrupted, or order of updates changed.',
  },
  {
    title: 'The FIRST unbreakable and distributed storage system (2012)',
    description:
      'Not only incorruptible, our system also boasts 10x energy efficiency compared to alternative solutions, marking a significant technological leap.',
  },
  {
    title: 'Probably the FIRST proof of block stake blockchain (2017)',
    description:
      'This blockchain was sustainable and scalable and allowed people to transact their stake as well as their digital currency in the same transaction, which still to date is novel.',
  },
];

export const TrackRecord = () => {
  return (
    <section className="py-16 text-slate-100 lg:py-24">
      <div className="mx-auto max-w-3xl text-center">
        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
          Our Track Record
        </h2>
        <p className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
          Our team has been at the forefront of datacenter and cloud innovation for decades,
          building systems that were faster, safer, and more scalable than anything before.
        </p>
      </div>
      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {records.map((record, index) => (
          <motion.div
            key={record.title}
            initial={{ opacity: 0, y: 24 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.25 }}
            transition={{ duration: 0.5, delay: index * 0.05 }}
            className="flex h-full flex-col rounded-3xl border border-white/10 bg-black p-8 shadow-none backdrop-blur"
          >
            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-500/15 font-semibold text-brand-200">
              {index + 1}
            </div>
            <h3 className="mt-6 text-lg font-semibold text-white">{record.title}</h3>
            <p className="mt-3 text-sm leading-6 text-slate-300">{record.description}</p>
          </motion.div>
        ))}
      </div>
    </section>
  );
};