"use client";

import { motion } from "motion/react";
import Link from "next/link";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
import HeroSystem from "./cinematic/HeroSystem";

const SOCIAL_LINKS = [
  {
    href: "https://github.com/evandrodevbr",
    label: "GitHub",
  },
  {
    href: "https://www.linkedin.com/in/evandro-fonseca-junior-0969aa1b0/",
    label: "LinkedIn",
  },
  {
    href: "mailto:evandrofonsecajunior@gmail.com",
    label: "Email",
  },
];

export default function Hero() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <section
      id="home"
      className="w-full bg-[var(--ink)] font-display text-[#f4f2ed]"
    >
      <motion.div
        initial={shouldReduceMotion ? false : { opacity: 0, y: 8 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          duration: shouldReduceMotion ? 0 : 0.45,
          ease: "easeOut",
        }}
        className="mx-auto grid w-full max-w-[max(1400px,var(--shell))] grid-cols-1 items-center gap-sp-8 px-sp-6 pt-[calc(var(--site-header-height)+32px)] pb-sp-10 lg:grid-cols-[minmax(0,53fr)_minmax(0,47fr)] lg:gap-sp-8 lg:px-sp-12 lg:pb-sp-16"
      >
        <div className="min-w-0">
          <p className="mb-sp-5 text-[14px] leading-[1.5] text-[rgba(244,242,237,.72)]">
            Evandro Fonseca Junior · Engenharia de software
          </p>
          <h1 className="max-w-[700px] text-balance text-[34px] font-semibold leading-[1.05] tracking-[-0.045em] sm:text-[48px] xl:text-[60px]">
            Sistemas sob medida para operações que não cabem em soluções
            prontas.
          </h1>
          <p className="mt-sp-5 max-w-[600px] text-[16px] leading-[1.55] text-[rgba(244,242,237,.8)] lg:text-[18px]">
            Projeto e desenvolvo sistemas web, aplicativos e integrações, do
            entendimento do negócio à arquitetura e à entrega em produção.
          </p>

          <div className="mt-sp-6 flex flex-col gap-sp-3 sm:flex-row sm:flex-wrap sm:items-center">
            <Link
              href="/#contact"
              className="inline-flex min-h-12 items-center justify-center bg-[var(--slash)] px-sp-4 py-sp-3 text-center text-[15px] font-semibold leading-6 text-[var(--ink)] no-underline transition-colors hover:bg-[#d9ff40] motion-reduce:transition-none sm:px-sp-6 sm:text-[16px]"
            >
              Conversar sobre meu projeto
            </Link>
            <Link
              href="/cases"
              className="inline-flex min-h-12 items-center justify-center border border-white/12 px-sp-5 py-sp-3 text-center text-[15px] font-medium leading-6 text-[#f4f2ed] no-underline transition-colors hover:border-white/40 motion-reduce:transition-none sm:text-[16px]"
            >
              Ver projetos entregues
            </Link>
          </div>
          <p className="mt-sp-3 text-[13px] leading-[1.5] text-[rgba(244,242,237,.64)]">
            Santa Catarina · Atendimento remoto
          </p>
        </div>
        <div className="min-w-0 lg:col-start-2 lg:row-start-1 lg:row-span-2">
          <HeroSystem />
        </div>
        <div className="min-w-0 lg:col-start-1 lg:row-start-2">
          <ul className="flex flex-wrap gap-x-sp-5 gap-y-sp-2 text-[14px] leading-[1.5] text-[rgba(244,242,237,.8)]">
            {["Sistemas web", "Aplicativos", "Integrações"].map((service) => (
              <li key={service} className="flex items-center gap-sp-2">
                <span
                  aria-hidden="true"
                  className="h-1 w-1 bg-[var(--slash)]"
                />
                {service}
              </li>
            ))}
          </ul>
          <div className="mt-sp-2 flex flex-wrap gap-x-sp-5">
            {SOCIAL_LINKS.map((link) => (
              <a
                key={link.label}
                href={link.href}
                target={link.href.startsWith("http") ? "_blank" : undefined}
                rel={
                  link.href.startsWith("http")
                    ? "noopener noreferrer"
                    : undefined
                }
                className="inline-flex min-h-11 items-center text-[13px] text-[rgba(244,242,237,.64)] no-underline underline-offset-4 hover:text-[#f4f2ed] hover:underline"
              >
                {link.label}
              </a>
            ))}
          </div>
        </div>
      </motion.div>
    </section>
  );
}