import { motion } from 'framer-motion';

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

export const AboutHero = () => {
  return (
    <section className="relative isolate bg-black px-6 pb-16 pt-0 sm:px-10 sm:pb-20 sm:pt-2 lg:px-16 lg:pb-24 lg:pt-4">
      <div className="mx-auto w-full max-w-7xl">
        <div className="grid gap-8 sm:gap-10 lg:grid-cols-[minmax(360px,420px)_minmax(0,1fr)] lg:items-stretch lg:gap-12 xl:grid-cols-[minmax(400px,500px)_minmax(0,1fr)]">
          <div className="relative h-full">
            <div className="group relative overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#06091d] via-[#0e1540] to-[#1c1448] text-white shadow-[0_35px_90px_-45px_rgba(15,23,42,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(99,102,241,0.55)]">
              <img
                src="/images/hometech2.jpg"
                alt=""
              className="absolute inset-0 h-full w-full object-cover opacity-40 mix-blend-screen transition-transform duration-700 group-hover:scale-105"
            />
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent mix-blend-overlay transition-opacity duration-500 group-hover:opacity-90" />
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(79,70,229,0.4),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
            <div className="absolute top-[-25%] right-[-5%] h-[420px] w-[420px] rounded-full bg-[#6366f1]/30 blur-3xl transition-transform duration-700 group-hover:scale-110" />
            <motion.div
              initial={{ opacity: 0, y: 32 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, ease: 'easeOut' }}
              className="relative z-10 px-6 py-20 sm:px-12 lg:px-16 lg:py-24"
            >
              <span className="inline-flex items-center gap-3 text-[0.68rem] uppercase tracking-[0.42em] text-white/70">
                <span className="h-px w-10 bg-white/40" />
                About GeoMind
                <span className="h-px w-10 bg-white/40" />
              </span>
              <h1 className="mt-8 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl lg:leading-[1.1]">
                We Know a Thing or Two About Datacenters
              </h1>
              <p className="mt-6 max-w-3xl text-base text-white/80 sm:text-lg">
                For decades, we've built the technologies that power the internet, from record-breaking
                web hosting to unbreakable cloud systems. Now, we're redefining what datacenters stand
                for: secure, sovereign, and profitable infrastructure designed for people, the planet. Here’s the short list of milestones that still guide our build.
              </p>
            </motion.div>
          </div>
          </div>

          <div className="grid h-full grid-cols-1 gap-3 sm:grid-cols-2 lg:auto-rows-[minmax(120px,_1fr)] lg:grid-cols-6">
            {records.map((record, index) => (
              <motion.article
                key={record.title}
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.05 }}
                className={`group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-5 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/60 hover:bg-white/[0.08] hover:shadow-[0_32px_80px_-50px_rgba(56,189,248,0.55)] ${record.layout}`}
              >
                <h3 className="text-lg font-semibold leading-snug text-white">{record.title}</h3>
                <p className="mt-3 text-sm leading-6 text-slate-200">{record.description}</p>
                {record.showStream && (
                  <div className="pointer-events-none absolute inset-x-5 bottom-5 h-3 overflow-hidden rounded-full border border-white/10 bg-white/[0.06]">
                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.45),transparent_72%)] opacity-70" />
                    <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(56,189,248,0)_0%,rgba(99,102,241,0.75)_50%,rgba(56,189,248,0)_100%)] opacity-90 [background-size:200%_100%] animate-data-stream" />
                    <div
                      className="absolute inset-0 bg-[linear-gradient(90deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.55)_12%,rgba(255,255,255,0)_40%)] mix-blend-screen opacity-70 [background-size:220%_100%] animate-data-stream"
                      style={{ animationDelay: '1.4s' }}
                    />
                  </div>
                )}
                <div className="absolute -right-12 -top-12 h-24 w-24 rounded-full bg-brand-500/10 blur-3xl transition-transform duration-500 group-hover:scale-110" />
              </motion.article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};