'use client'

import Image from 'next/image';
import {
  DownloadCardDescription,
  DownloadCardTitle,
  P,
  PageHeader,
} from './Texts'
import { motion } from 'framer-motion';
import appleIcon from '@/images/apple.svg';
import windowsIcon from '@/images/windows.svg';
import androidIcon from '@/images/android.svg';
import linuxIcon from '@/images/linux.svg';

const features = [
  {
    name: 'Download for iOS & MacOS',
    description: 'Download Mycelium App from the Apple Store.',
    href: 'https://apps.apple.com/us/app/mycelium-network/id6504277565',
    icon: appleIcon,
  },
  {
    name: 'Download for Windows',
    description: 'Download the Mycelium App for Windows directly from its Github repository.',
    href: 'https://github.com/threefoldtech/myceliumflut/releases',
    icon: windowsIcon,
  },
  {
    name: 'Download for Android',
    description: 'Download Mycelium from the Google Play Store.',
    href: 'https://play.google.com/store/apps/details?id=tech.threefold.mycelium&pli=1',
    icon: androidIcon,
  },
  {
    name: 'Download for Linux',
    description: 'Download the Mycelium binary for Linux directly from its Github repository.',
    href: 'https://github.com/threefoldtech/mycelium/releases',
    icon: linuxIcon,
  },
];

export default function DownloadHero() {
  return (
    <div className=" py-16 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl lg:mx-0">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <PageHeader>Download Mycelium</PageHeader>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <P color="secondary" className="mt-6 text-lg/8">
              Get Mycelium for Android, Windows, macOS, and iOS to securely
              connect, store, and interact with the decentralized
              network—seamlessly and efficiently. Not sure how it works?{' '}
              <a
                href="https://threefold.info/mycelium_network/docs/"
                className="text-gray-900 hover:text-cyan-500 transition-colors font-semibold underline"
              >
                Read the manual.
              </a>
            </P>
          </motion.div>
        </div>
        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none md:grid-cols-2 lg:grid-cols-4">
            {features.map((feature) => (
              <div
                key={feature.name}
                className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
              >
                <DownloadCardTitle color="primary">
                  <div className="mb-6 flex h-10 w-10 items-center justify-center">
                    <Image src={feature.icon} alt="" className="h-10 w-10" />
                  </div>
                  {feature.name}
                </DownloadCardTitle>
                <DownloadCardDescription
                  as="dd"
                  color="secondary"
                  className="mt-1 flex flex-auto flex-col"
                >
                  <p className="flex-auto">{feature.description}</p>
                  <p className="mt-6">
                    <a
                      href={feature.href}
                      className="text-sm/6 font-semibold text-cyan-500 hover:text-cyan-500"
                    >
                      Download Now <span aria-hidden="true">→</span>
                    </a>
                  </p>
                </DownloadCardDescription>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  );
}
