import { CheckIcon } from '@heroicons/react/20/solid'
import TopicCard from '../components/topic_card'

const includedFeatures = [
  'Private forum access',
  'Member resources',
  'Entry to annual conference',
  'Official member t-shirt',
]

export default function Example() {

    const cards = [
      ["Learn cybersecurity", "Learning cybersecurity is like becoming a guardian of the digital realm.\nIt's about mastering the art of protecting information, systems, and networks from cyber threats.\nFrom understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.", "/learn/cybersec" ],
      ["Learn geography", "It's cool ig", "/learn/geography"],
      ["Learn C++", "Don't.", "/learn/cpp"],
      ["Learn C", "Do.", "/learn/c"]
    ];
  return (
    
    <div className="sm:py-32">
        <div
          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
          aria-hidden="true"
        >
          <div
            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
            style={{
              clipPath:
                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
            }}
          />
        </div>
      <div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', paddingTop:'40px'}}><img className="flex" src="/logo-no-background.png" height="auto" width="40%" style={{ alignSelf: 'center'}}></img></div>
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        { cards.map((elem) => {
          return (<TopicCard title={elem[0]} link={elem[2]}>{elem[1]}</TopicCard>)
        })} 
        {/*
        <TopicCard title = "Learn cybersecurity">
          Learning cybersecurity is like becoming a guardian of the digital realm. 
          It's about mastering the art of protecting information, systems, and networks from cyber threats. 
          From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.
        </TopicCard>
        <TopicCard title = "Learn geography">
          Learning cybersecurity is like becoming a guardian of the digital realm. 
          It's about mastering the art of protecting information, systems, and networks from cyber threats. 
          From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.
        </TopicCard>
        <TopicCard title = "Learn C++">
          Learning cybersecurity is like becoming a guardian of the digital realm. 
          It's about mastering the art of protecting information, systems, and networks from cyber threats. 
          From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.
        </TopicCard>
  */}
      </div>
      <div
          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
          aria-hidden="true"
        >
          <div
            className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
            style={{
              clipPath:
                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
            }}
          />
        </div>
    </div>
  )
}