import * as React from "react";
import { Button } from "@/src/components/Button";
import { AbstractCircuit } from "@/src/components/Effects";
import type { Content } from "@/src/content/types";
import { BitHeadline } from "./BitHeadline";

export const HeroStatement: React.FC<{ hero: Content["hero"] }> = ({
  hero,
}) => (
  <section className="relative overflow-hidden bg-white">
    <div className="absolute inset-0 opacity-70">
      <AbstractCircuit />
    </div>

    <div className="relative z-10 mx-auto flex min-h-[calc(100dvh-5rem)] w-full max-w-[1400px] flex-col justify-center px-5 py-16 md:px-12 md:py-24">
      <BitHeadline
        lines={hero.headline}
        className="font-sans text-[12.5vw] font-black leading-[0.88] tracking-tighter md:text-[11.5vw] xl:text-[10.5rem]"
      />

      <div className="mt-10 grid grid-cols-1 gap-10 md:mt-14 md:grid-cols-12 md:items-end md:gap-12">
        <p className="m-0 max-w-2xl font-sans text-xl leading-snug text-slate-500 md:col-span-7 md:text-3xl">
          {hero.lead} <span className="text-slate-900">{hero.leadStrong}</span>
        </p>

        <div className="flex flex-col gap-4 md:col-span-5 md:items-end">
          <div
            id="hero-cta"
            className="flex w-full flex-col gap-4 sm:flex-row md:w-auto"
          >
            <Button href="#contact" size="large" className="w-full sm:w-auto">
              {hero.primaryCta}
            </Button>
            <Button
              href="#hello"
              variant="outline"
              size="large"
              className="w-full sm:w-auto"
            >
              {hero.secondaryCta}
            </Button>
          </div>
        </div>
      </div>

      <ul className="m-0 mt-14 flex list-none flex-wrap gap-x-8 gap-y-3 border-t border-slate-200 p-0 pt-6 md:mt-20">
        {hero.trust.map((item) => (
          <li
            key={item}
            className="font-mono text-[10px] uppercase tracking-[0.2em] text-slate-500 md:text-[11px]"
          >
            {item}
          </li>
        ))}
        <li className="font-mono text-[10px] uppercase tracking-[0.2em] text-slate-500 md:text-[11px]">
          {hero.builtAndRunning}{" "}
          <a
            href="https://klz-cables.com"
            target="_blank"
            rel="noopener noreferrer"
            className="text-slate-900 underline-offset-4 hover:underline"
          >
            klz-cables.com
          </a>
          {" · "}
          <a
            href="https://e-tib.com"
            target="_blank"
            rel="noopener noreferrer"
            className="text-slate-900 underline-offset-4 hover:underline"
          >
            e-tib.com
          </a>
        </li>
      </ul>
    </div>
  </section>
);