import Image from 'next/image'
import siteConfig from '@/lib/site-config'

const portraitSrc = siteConfig.hero?.image?.src ?? '/images/chris-arter-pen.png'
const portraitAlt = siteConfig.hero?.image?.alt ?? 'Portrait of Chris Arter'

export function Hero() {
  return (
    <section className="border-hair-2 overflow-hidden border-b py-14 md:py-20">
      <div className="max-w-shell mx-auto grid items-center gap-10 px-5 md:grid-cols-[220px_1fr] md:gap-14 md:px-10">
        <div className="max-w-[260px]">
          <div className="aspect-square w-full">
            <Image
              src={portraitSrc}
              alt={portraitAlt}
              width={260}
              height={260}
              className="block h-full w-full object-contain"
            />
          </div>
        </div>
        <div>
          <h1 className="text-ink mb-7 font-serif text-[clamp(52px,7vw,88px)] leading-[0.95] font-normal tracking-[-0.03em]">
            Artisan, <br />
            Tinkerer, <br />
            <em className="text-ink-2 italic">Builder</em>.
          </h1>
          <p className="text-ink-2 m-0 max-w-[54ch] text-[17px] leading-relaxed text-pretty">
            Hey there, I&apos;m <strong>Chris Arter</strong>, a software engineer in Raleigh, North
            Carolina. I write about software, life, and the best sports car ever made: the Mazda
            Miata.
          </p>
          <dl className="border-hair mt-8 grid grid-cols-2 gap-6 border-t pt-5 font-mono md:grid-cols-4">
            <div>
              <dt className="text-ink-3 mb-1.5 text-[10px] tracking-widest uppercase">Based</dt>
              <dd className="text-ink m-0 text-[12.5px] tracking-wide">Raleigh, NC</dd>
            </div>
            <div>
              <dt className="text-ink-3 mb-1.5 text-[10px] tracking-widest uppercase">
                Writing since
              </dt>
              <dd className="text-ink m-0 text-[12.5px] tracking-wide">2014</dd>
            </div>
            <div>
              <dt className="text-ink-3 mb-1.5 text-[10px] tracking-widest uppercase">Stack</dt>
              <dd className="text-ink m-0 text-[12.5px] tracking-wide">
                Laravel · Typescript · Docker
              </dd>
            </div>
            <div>
              <dt className="text-ink-3 mb-1.5 text-[10px] tracking-widest uppercase">Status</dt>
              <dd className="text-ink m-0 text-[12.5px] tracking-wide">Open to say hello</dd>
            </div>
          </dl>
        </div>
      </div>
    </section>
  )
}