import Link from "next/link";
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 { Reveal } from "./Reveal";
import { Section } from "./Section";

const STORY_DATA = [
  {
    label: "Acompanhamento",
    title: "Sem intermediários entre o pedido e o sistema",
    content:
      "Você acompanha as decisões ao longo da entrega e sabe quem responde por cada parte do projeto.",
  },
  {
    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.",
  },
  {
    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.",
  },
];

const PROFILE_POINTS = [
  {
    title: "Solução do tamanho do seu problema",
    description:
      "Escolho o que resolve o seu caso, sem complicar além do necessário.",
  },
  {
    title: "Tudo funcionando junto",
    description:
      "A tela, os dados e os equipamentos são ligados para trabalhar como uma coisa só.",
  },
  {
    title: "Quem responde pelo projeto",
    description:
      "Uma só pessoa decide a estrutura e desenvolve o sistema, do começo ao fim.",
  },
];

/** 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; desde 2022 desenvolvo aplicações web e mobile, APIs e integrações com dispositivos IoT para as rotinas internas da Apolo Energia. Você acompanha as decisões técnicas ao longo da entrega."
      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>
      }
    >
      <div className="ds-grid-2 items-stretch">
        <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>
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal
          y={20}
          duration={0.8}
          delay={cardDelay(STORY_DATA.length)}
          className="h-full"
        >
          <article className="ds-card cv-press cv-lift h-full">
            <div className="flex items-center gap-sp-5">
              <LazyRevealImage
                src={profilePhoto}
                alt="Evandro Fonseca Junior, engenheiro da computação e desenvolvedor de software em Garuva, SC"
                className="aspect-square w-28 shrink-0 overflow-hidden rounded-[6px] border border-[var(--border)] sm:w-32"
                imageClassName="object-cover"
                sizes="128px"
              />
              <div className="min-w-0">
                <div className="ds-kicker">Da ideia ao sistema no ar</div>
                <h3 className="ds-card-title !mt-sp-2">
                  Uma pessoa cuida do sistema inteiro
                </h3>
              </div>
            </div>
            <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>
            <div className="mt-sp-6 space-y-sp-4" data-reel-stagger="bottom">
              {PROFILE_POINTS.map((point) => (
                <div
                  key={point.title}
                  className="border-t border-[var(--border)] pt-sp-4"
                >
                  <div className="text-[15px] font-medium tracking-[0.02em]">
                    {point.title}
                  </div>
                  <p className="ds-copy !mt-sp-2">{point.description}</p>
                </div>
              ))}
            </div>
            <Link
              href="/curriculo"
              className={`${textLink} mt-sp-4 text-[var(--ink-80)]`}
            >
              Ver trajetória completa
            </Link>
          </article>
        </Reveal>
      </div>
    </Section>
  );
}