"use client";

import { motion, type Variants } from "motion/react";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
import profilePhoto from "@/public/edev.jpg";
import { DrawLine } from "./animations/DrawLine";
import { LazyRevealImage } from "./animations/LazyRevealImage";
import { Section } from "./Section";

const STORY_DATA = [
  {
    label: "Hardware + software",
    title: "Do sinal físico ao produto digital",
    content:
      "Construo a ponte entre dispositivos, protocolos de baixo nível, backend e interface para que o sistema inteiro pareça uma única experiência coerente.",
  },
  {
    label: "Decisões técnicas",
    title: "Entrega clara mesmo sob restrição",
    content:
      "Avalio o que já existe, identifico dependências e combino prioridades antes de alterar sistemas em uso. Nem todo problema exige começar novamente.",
  },
  {
    label: "Operação",
    title: "Do código ao sistema no ar",
    content:
      "Publicação, diagnóstico de falhas, documentação e manutenção entram no planejamento, junto com as funcionalidades.",
  },
];

const PROFILE_POINTS = [
  {
    title: "Arquitetura pragmática",
    description:
      "Escolhas guiadas por contexto, operabilidade e impacto real no produto.",
  },
  {
    title: "Integração profunda",
    description:
      "Capacidade de atravessar camada física, serviços e interface sem perder consistência.",
  },
  {
    title: "Responsabilidade técnica",
    description:
      "Contato direto com quem define a arquitetura e desenvolve o sistema.",
  },
];

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

  const staggerContainer: Variants = {
    hidden: {},
    visible: {
      transition: {
        delayChildren: 0.08,
        staggerChildren: 0.08,
      },
    },
  };

  const cardVariants: Variants = {
    hidden: shouldReduceMotion
      ? { opacity: 0 }
      : { opacity: 0, y: 20, clipPath: "inset(100% 0 0 0)" },
    visible: {
      opacity: 1,
      y: 0,
      clipPath: "inset(0% 0 0 0)",
      transition: shouldReduceMotion
        ? { duration: 0.25 }
        : {
            duration: 0.8,
            ease: [0.16, 1, 0.3, 1],
          },
    },
  };

  const cardHover = shouldReduceMotion
    ? undefined
    : {
        y: -4,
        boxShadow: "0 18px 40px rgba(10,10,10,0.16)",
      };

  return (
    <Section
      id="about"
      eyebrow="Quem conduz o projeto"
      title="Evandro Fonseca Junior. Engenharia com contato direto."
      description="Sou engenheiro da computação e desenvolvedor de software. Você conversa comigo sobre o negócio e acompanha as decisões técnicas ao longo da entrega."
      disableChildrenAnimation
      aside={
        <div className="mt-sp-4 ds-metric" data-reel="left">
          <span className="inline-block h-1.5 w-1.5 rounded-full bg-slash" />
          Base em Garuva, SC | Atendimento remoto
        </div>
      }
    >
      <motion.div
        className="ds-grid-2 items-start"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.2 }}
        variants={staggerContainer}
      >
        <motion.div
          className="flex flex-col gap-sp-6"
          variants={staggerContainer}
        >
          {STORY_DATA.map((step) => (
            <motion.article
              key={step.title}
              className="ds-card"
              variants={cardVariants}
              whileHover={cardHover}
              whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
              transition={{ type: "spring", stiffness: 180, damping: 18 }}
            >
              <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>
            </motion.article>
          ))}
        </motion.div>

        <motion.article
          className="ds-card h-full"
          variants={cardVariants}
          whileHover={cardHover}
          whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
          transition={{ type: "spring", stiffness: 180, damping: 18 }}
        >
          <LazyRevealImage
            src={profilePhoto}
            alt="Evandro Fonseca Junior, engenheiro da computação e desenvolvedor de software em Garuva, SC"
            className="mb-sp-6 aspect-square w-full overflow-hidden rounded-[6px] border border-[var(--border)]"
            imageClassName="object-contain"
          />
          <div className="ds-kicker">Da arquitetura à implementação</div>
          <DrawLine delay={0.05} />
          <h3 className="ds-card-title">Uma visão do sistema inteiro</h3>
          <p className="ds-copy" data-reel="top">
            Meu trabalho conecta interface, serviços, dados e, quando
            necessário, equipamentos. Entender essas partes em conjunto ajuda a
            definir o que construir, o que integrar e o que pode ser
            aproveitado.
          </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-[12px] font-medium tracking-[0.02em]">
                  {point.title}
                </div>
                <p className="ds-copy !mt-sp-2">{point.description}</p>
              </div>
            ))}
          </div>
        </motion.article>
      </motion.div>
    </Section>
  );
}