"use client";

import Image from "next/image";
import { type CSSProperties, Fragment } from "react";
import { trackEmailClick, trackSocialClick } from "@/lib/analytics";
import { CONTACT_EMAIL, LINKEDIN_URL } from "@/lib/site-navigation";
import { HOME_SUBJECT } from "@/lib/whatsapp";
import { textLinkDark } from "./button-styles";
import ClientStrip, { type ClientLink } from "./ClientStrip";
import HeroField from "./cinematic/HeroField";
import { CONTACT_FORM_HASH } from "./contact-subject";
import { HERO_CTA_ID } from "./FloatingWhatsApp";
import HeroWork from "./HeroWork";
import HoverPrefetchLink from "./HoverPrefetchLink";
import { HERO_CAPTIONS } from "./hero-captions";
import WhatsAppLink from "./WhatsAppLink";
import { WhatsAppMark } from "./WhatsAppMark";

const SOCIAL_LINKS = [
  {
    href: LINKEDIN_URL,
    label: "LinkedIn",
    onClick: () => trackSocialClick({ network: "linkedin" }),
  },
  {
    href: `mailto:${CONTACT_EMAIL}`,
    label: "Email",
    onClick: () => trackEmailClick({ placement: "hero" }),
  },
];

/**
 * Números reais, calculados em app/page.tsx (nada digitado à mão): os anos vêm de public/portfolio-data.json
 * e aparecem na mesma linha de "Já entregue para" (ClientStrip).
 */
export type HeroStats = {
  years?: number;
};

/** O destaque em limão fica num trecho curto: "sob medida" (palavras 3 e 4). */
const ACCENT = new Set([3, 4]);

type TitleWord = { word: string; key: string; index: number };

/**
 * Título em palavras para a entrada em cascata; o texto segue inteiro para leitores de tela e buscadores. As palavras
 * do destaque seguidas viram um trecho só: elas nunca se separam numa quebra de linha, e o bloco do marcador as cobre
 * de uma vez.
 */
const TITLE =
  "Sites e sistemas sob medida para o jeito que a sua empresa trabalha."
    .split(" ")
    .reduce<{ key: string; accent: boolean; words: TitleWord[] }[]>(
      (runs, word, index) => {
        const accent = ACCENT.has(index);
        // a mesma palavra se repete ("e"), então a posição entra na chave
        const entry = { word, key: `${word}-${index}`, index };
        const last = runs.at(-1);
        if (accent && last?.accent) last.words.push(entry);
        else runs.push({ key: entry.key, accent, words: [entry] });
        return runs;
      },
      [],
    );

function TitleWords({
  words,
  accent,
}: {
  words: TitleWord[];
  accent: boolean;
}) {
  return words.map(({ word, key, index }, position) => (
    <Fragment key={key}>
      {position > 0 && " "}
      <span
        className={`hero-word${accent ? " text-[var(--slash)]" : ""}`}
        style={{ "--i": index } as CSSProperties}
      >
        {word}
      </span>
    </Fragment>
  ));
}

export default function Hero({
  stats,
  clients,
}: {
  stats?: HeroStats;
  clients?: ClientLink[];
}) {
  return (
    <section
      id="home"
      className="hero relative w-full bg-[var(--ink)] font-display text-[#f4f2ed]"
    >
      <div className="hero-stage">
        <div className="hero-glow" aria-hidden="true" />
        <div className="hero-scrim" aria-hidden="true" />
        {/* a cena 3D fica acima do véu (o mesmo brilho do pôster) e abaixo das legendas e do texto */}
        <HeroField />
        {/* Legendas do mergulho: aparecem enquanto a câmera atravessa cada camada (só no hero fixo, telas grandes). */}
        <ol className="hero-captions">
          {HERO_CAPTIONS.map(({ title, text, from, to }, index) => (
            <li
              key={title}
              style={
                { "--i": index, "--from": from, "--to": to } as CSSProperties
              }
            >
              <span className="hero-caption-title">{title}</span>
              {text}
            </li>
          ))}
        </ol>

        {/* Os espaços verticais acompanham a altura da tela (svh): subtítulo, botões e faixa de clientes precisam caber no palco fixo. */}
        <div className="hero-content relative mx-auto flex w-full max-w-[max(1400px,var(--shell))] flex-1 flex-col justify-center px-sp-6 pt-[calc(var(--site-header-height)+clamp(8px,2.5svh,32px))] pb-[clamp(16px,3svh,32px)]">
          {/* Space Grotesk (a fonte do título, já carregada), e não a Geist Mono: assim nada de fonte nova é baixado antes do LCP. */}
          {/* Abaixo de 1024 px o rótulo divide a linha com a peça: fica só a profissão, e o nome volta na tela larga. */}
          <p className="hero-in hero-kicker mb-sp-4 flex items-center gap-sp-3 font-display text-[13px] leading-[1.5] tracking-[0.02em] text-[rgba(244,242,237,.72)]">
            <span
              aria-hidden="true"
              className="h-2 w-2 shrink-0 bg-[var(--slash)]"
            />
            <span>
              <span className="max-lg:hidden">Evandro Fonseca Junior · </span>
              Engenharia de software
            </span>
          </p>
          {/* Sem opacity:0: as palavras pintam no primeiro quadro (LCP); a entrada anima só posição e foco. */}
          {/* No desktop o texto fica na coluna da esquerda (--hero-col, em globals.css); a peça (.hero-piece) vem logo à direita. */}
          <h1 className="hero-title hero-col max-w-[16em] text-[clamp(34px,min(8.4vw,5.2svh+14px),84px)] font-semibold leading-[1.02] tracking-[-0.045em]">
            {TITLE.map(({ key, accent, words }) => (
              <Fragment key={key}>
                {accent ? (
                  // o marcador (::after) vive no trecho e não em cada palavra: um bloco contínuo sobre "sob medida"
                  <span
                    className="hero-mark whitespace-nowrap"
                    style={{ "--i": words[0].index } as CSSProperties}
                  >
                    <TitleWords words={words} accent />
                  </span>
                ) : (
                  <TitleWords words={words} accent={false} />
                )}{" "}
              </Fragment>
            ))}
          </h1>
          <p className="hero-in hero-col mt-sp-4 max-w-[34em] text-[clamp(16px,0.95rem+0.4vw,22px)] leading-[1.55] text-[rgba(244,242,237,.8)] [--d:.4s]">
            Do site institucional ao sistema que a sua equipe usa todo dia. Você
            fala com quem desenvolve.
          </p>

          <div className="hero-in hero-col hero-actions mt-sp-5 flex flex-col gap-sp-3 [--d:.48s] sm:flex-row sm:flex-wrap sm:items-center">
            {/* O formulário, como o botão do cabeçalho; quem prefere o WhatsApp tem o link logo depois dos botões. */}
            <HoverPrefetchLink
              href={`/${CONTACT_FORM_HASH}`}
              className="cv-fill group inline-flex min-h-12 items-center justify-center gap-sp-3 bg-[var(--slash)] px-sp-4 py-sp-3 text-center text-[15px] font-semibold leading-6 text-[var(--ink)] no-underline sm:px-sp-6 sm:text-[16px]"
            >
              Falar sobre meu projeto
              <svg
                aria-hidden="true"
                viewBox="0 0 16 16"
                className="h-4 w-4 transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M2 8h11M9 3.5 13.5 8 9 12.5" />
              </svg>
            </HoverPrefetchLink>
            <HoverPrefetchLink
              href="/cases"
              className="cv-outline-dark inline-flex min-h-12 items-center justify-center border border-white/25 bg-transparent px-sp-5 py-sp-3 text-center text-[15px] font-medium leading-6 text-[#f4f2ed] no-underline sm:text-[16px]"
            >
              Ver projetos entregues
            </HoverPrefetchLink>
            {/* Abre o WhatsApp com o assunto da home; enquanto está à vista, o botão flutuante (que observa este id) some. */}
            <WhatsAppLink
              id={HERO_CTA_ID}
              service={HOME_SUBJECT}
              placement="hero"
              className={`${textLinkDark} gap-sp-2 self-start sm:self-auto`}
            >
              <WhatsAppMark className="h-4 w-4 shrink-0" />
              Chamar no WhatsApp
            </WhatsAppLink>
          </div>
          {/* O primeiro passo, dito antes de a pessoa clicar: tira a dúvida de "e depois, o que acontece?". */}
          <p className="hero-in hero-col mt-sp-3 font-display text-[15px] leading-6 text-[rgba(244,242,237,.64)] [--d:.54s]">
            Começa com uma conversa para entender o seu caso. A proposta vem por
            escrito.
          </p>

          <ClientStrip
            clients={clients}
            years={stats?.years}
            className="hero-in hero-col mt-sp-3 [--d:.6s]"
          />

          <HeroWork />

          {/* A marca em blocos: pôster renderizado no Blender, decorativo. Carrega junto com a página (eager, sem prioridade
              alta). O título segue como o maior elemento medido (LCP) no celular e em tela larga: a imagem entra com
              fade a partir de opacidade zero e some por `visibility` quando a cena assume (globals.css). */}
          <div className="hero-piece hero-in [--d:.3s]" aria-hidden="true">
            <Image
              src="/3d/hero-poster.webp"
              alt=""
              width={1200}
              height={1200}
              sizes="(min-width: 1024px) min(56vw, 816px), 30vw"
              loading="eager"
              className="block h-auto w-full"
            />
          </div>
        </div>

        <div className="hero-foot relative mx-auto flex w-full max-w-[max(1400px,var(--shell))] flex-wrap items-end justify-between gap-sp-5 px-sp-6 pb-sp-5">
          <div className="flex flex-wrap items-end gap-x-sp-8 gap-y-sp-4 border-t border-white/10 pt-sp-4">
            {/* no celular, serviços e redes ficam no menu e no rodapé: assim o hero cabe numa tela e pode ficar fixo; no
                computador ficam numa linha só, para o palco fixo caber em 1024x768 */}
            <div className="flex-wrap items-center gap-x-sp-8 max-lg:hidden lg:flex">
              <ul className="flex flex-wrap gap-x-sp-5 gap-y-sp-2 text-[14px] leading-[1.5] text-[rgba(244,242,237,.8)]">
                {["Sites", "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="flex flex-wrap items-center 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
                    }
                    onClick={link.onClick}
                    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>
                ))}
                <span className="text-[13px] text-[rgba(244,242,237,.55)]">
                  Santa Catarina · Atendimento remoto
                </span>
              </div>
            </div>
          </div>
          <p
            aria-hidden="true"
            className="hero-cue hidden items-center gap-sp-3 font-display text-[13px] tracking-[0.02em] text-[rgba(244,242,237,.55)] xl:flex"
          >
            Role para mergulhar
            <span className="hero-cue-line" />
          </p>
        </div>
      </div>
    </section>
  );
}