import Link from 'next/link'

export default function Why() {
  return (
    <div className="relative bg-white dark:bg-transparent py-16 overflow-hidden">
      <div className="text-center">
        <h2 className="text-3xl tracking-tight font-extrabold text-white sm:text-4xl">
          Why this Project
        </h2>
        <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
          What is the motivation and purpose of this project?
        </p>
      </div>
      <div className="mt-20">
        <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
          <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
            <div>
              <div className="mt-6">
                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
                  Situation: controversial and complex
                </h2>
                <p className="mt-4 text-lg text-gray-500">
                  Web3 & crypto has become a massive phenomenon. Big claims are
                  made for its impact extending to the transformation of our
                  economy and society. It is also exceptionally controversial
                  and polarizing with significant disagreement. Finally, it’s
                  not an easy topic to make sense of.
                </p>
                <div className="mt-6">
                  <Link href="/about/">
                    <a
                      className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
                    >
                      Read More
                    </a>
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <div className="mt-12 sm:mt-16 lg:mt-0 lg:relative">
            <div className="mx-auto max-w-md px-4 sm:max-w-xl sm:px-6 lg:m-0 lg:max-w-none lg:px-0">
              <img
                className="p-6 w-full lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none rounded-xl shadow-xl ring-1 ring-black ring-opacity-5"
                src="/img/undraw_nakamoto_-2-iv6_arq2lb.svg"
                alt="Read More"
              />
            </div>
          </div>
        </div>
      </div>
      <div className="mt-24">
        <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
          <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
            <div>
              <div className="mt-6">
                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
                  The Problem: the stakes are high, but we’re struggling
                </h2>
                <p className="mt-4 text-lg text-gray-500">
                  The phenomenon has global implications and touches on multiple
                  complex areas. We require good, collective sensemaking, or
                  else risk polarization. As a “runaway problem”, the investment
                  of attention and money has grown exponentially. Should Web3
                  fail to deliver on its promises, the waste would be massive.
                  In addition, with such fast-growing phenomena, things happen
                  before we can notice, far less prevent them (eg climate
                  change).
                </p>
                <div className="mt-6">
                  <Link href="/about/">
                    <a
                      className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
                    >
                      Read More
                    </a>
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <div className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
            <div className="mx-auto max-w-xl px-4 sm:px-6 sm:max-w-2xl lg:px-0 lg:m-0 lg:relative lg:h-full">
              <img
                className="p-6 w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
                src="/img/undraw_connected_world_wuay_amttde.svg"
                alt="Read More"
              />
            </div>
          </div>
        </div>
      </div>
      <div className="mt-24">
        <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
          <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
            <div>
              <div className="mt-6">
                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
                  We need better sensemaking
                </h2>
                <p className="mt-4 text-lg text-gray-500">
                  We need to make good choices, in a constructive,
                  intersectional and de-polarizing way. Do we advance Web3 or
                  curb it? How should we allocate our resources? Good
                  sensemaking begins by clarifying and agreeing on what
                  questions to ask and the process of answering them.
                </p>
                <div className="mt-6">
                  <Link href="/about">
                    <a
                      className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
                    >
                      Read More
                    </a>
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <div className="mt-12 sm:mt-16 lg:mt-0 lg:relative">
            <div className="mx-auto max-w-md px-4 sm:max-w-xl sm:px-6 lg:m-0 lg:max-w-none lg:px-0">
              <img
                className="p-6 w-full lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none rounded-xl shadow-xl ring-1 ring-black ring-opacity-5"
                src="/img/undraw_team_collaboration_re_ow29_s8gvrf.svg"
                alt="Read More"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}