import profilePhoto from "@/public/edev.jpg";
import { DrawLine } from "./animations/DrawLine";
import { LazyRevealImage } from "./animations/LazyRevealImage";
import { textLink } from "./button-styles";
import "./conversion.css";
import HoverPrefetchLink from "./HoverPrefetchLink";
import { Reveal } from "./Reveal";
import { Section } from "./Section";

/**
 * Os três pontos da seção, cada um com a prova que o sustenta. A ideia de que quem conversa com você é quem desenvolve
 * aparece só no primeiro cartão: antes ela se repetia em cinco textos ("Sem intermediários", "Uma pessoa cuida",
 * "Quem responde pelo projeto", "Você acompanha as decisões" e "Você fala com quem desenvolve", que segue só no hero).
 */
const STORY_DATA = [
  {
    label: "Quem desenvolve",
    title: "Quem conversa com você escreve o código",
    content:
      "A mesma pessoa entende o problema, decide a estrutura e desenvolve o sistema, do começo ao fim.",
    proof:
      "Na Apolo Energia, desde 2022, desenvolvo aplicações web e mobile, APIs e integrações com dispositivos IoT para as rotinas internas.",
  },
  {
    label: "Sem começar do zero",
    title: "Aproveito o que você já tem",
    content:
      "Antes de mexer em um sistema que já está em uso, vejo o que existe e combino com você o que vem primeiro. Nem todo problema exige começar de novo.",
    proof:
      "Na revisão, você recebe o que dá para aproveitar e o que é melhor refazer, com o motivo de cada parte.",
    link: { href: "/ia", label: "Ver como funciona a revisão" },
  },
  {
    label: "Depois da entrega",
    title: "Do código ao sistema no ar",
    content:
      "Colocar no ar, corrigir falhas, documentar e manter o sistema entram no planejamento desde o começo, junto com as funcionalidades.",
    proof:
      "Já entregue para SEV Moda Íntima, Lavação 047, SC Plus Aquicultura e AS Serviços.",
  },
];

/** Atraso (s) de cada cartão: entram em escada, como na vitrine de serviços. */
const cardDelay = (index: number) => 0.08 * (index + 1);

export default function About() {
  return (
    <Section
      id="about"
      eyebrow="Quem conduz o projeto"
      title="Evandro Fonseca Junior"
      description="Engenheiro da computação e desenvolvedor de software, com projetos entregues para empresas."
      disableChildrenAnimation
      aside={
        <div className="mt-sp-4 ds-metric whitespace-nowrap" data-reel="left">
          <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-slash" />
          Garuva, SC · Atendimento remoto
        </div>
      }
    >
      {/* items-start: o cartão do retrato tem a altura do próprio conteúdo, e não a das três colunas de texto; no desktop ele acompanha a rolagem */}
      <div className="ds-grid-2 items-start">
        <div className="flex flex-col gap-sp-6">
          {STORY_DATA.map((step, index) => (
            <Reveal
              key={step.title}
              y={20}
              duration={0.8}
              delay={cardDelay(index)}
              className="flex flex-1 flex-col"
            >
              <article className="ds-card cv-press cv-lift flex-1">
                <div className="ds-kicker">{step.label}</div>
                <DrawLine delay={0.03} />
                <h3 className="ds-card-title">{step.title}</h3>
                <p className="ds-copy" data-reel="right">
                  {step.content}
                </p>
                <p className="mt-sp-4 border-t border-[var(--border)] pt-sp-3 font-display text-[15px] leading-6 text-[var(--ink)]">
                  <span className="font-semibold">Na prática: </span>
                  {step.proof}
                </p>
                {step.link && (
                  <HoverPrefetchLink
                    href={step.link.href}
                    className={`${textLink} self-start text-[var(--ink-80)]`}
                  >
                    {step.link.label}
                  </HoverPrefetchLink>
                )}
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal
          y={20}
          duration={0.8}
          delay={cardDelay(STORY_DATA.length)}
          className="lg:sticky lg:top-28"
        >
          <article className="ds-card cv-press cv-lift">
            <figure>
              <LazyRevealImage
                src={profilePhoto}
                alt="Retrato de Evandro Fonseca Junior"
                className="aspect-[4/3] w-full overflow-hidden rounded-[6px] border border-[var(--border)]"
                imageClassName="object-cover object-[50%_25%]"
                sizes="(min-width: 1024px) 50vw, 100vw"
              />
              <figcaption className="mt-sp-3 font-display text-[15px] leading-6 text-[var(--ink-80)]">
                Evandro Fonseca Junior · Engenheiro da computação · Garuva, SC
              </figcaption>
            </figure>
            <div className="ds-kicker mt-sp-6">Do que eu cuido</div>
            <h3 className="ds-card-title !mt-sp-2">
              Tela, dados e equipamentos
            </h3>
            <DrawLine delay={0.05} />
            <p className="ds-copy" data-reel="top">
              Cuido da tela que sua equipe usa, dos dados por trás dela e,
              quando o negócio tem máquinas ou sensores, da ligação deles com o
              sistema. Ver tudo junto ajuda a decidir o que construir, o que
              conectar e o que dá para aproveitar.
            </p>
            <HoverPrefetchLink
              href="/curriculo"
              className={`${textLink} mt-sp-4 text-[var(--ink-80)]`}
            >
              Ver trajetória completa
            </HoverPrefetchLink>
          </article>
        </Reveal>
      </div>
    </Section>
  );
}