"use client";

import { motion, type Variants, useReducedMotion } from "framer-motion";
import profilePhoto from "@/public/edev.jpeg";
import { Section } from "./Section";
import { DrawLine } from "./animations/DrawLine";
import { LazyRevealImage } from "./animations/LazyRevealImage";

const STORY_DATA = [
  {
    id: "HARDWARE_BRIDGE",
    title: "Do físico ao digital",
    content:
      "Construo a ponte entre hardware e software. Projeto sistemas capazes de orquestrar dispositivos físicos, protocolos de baixo nível e interfaces web modernas com baixa latência e alta resiliência.",
  },
  {
    id: "RUNTIME_EXEC",
    title: "Entrega sob restrições",
    content:
      "Atuo com naturalidade em cenários críticos envolvendo integrações de hardware, APIs complexas e infraestrutura legada, sempre priorizando a estabilidade e a legibilidade técnica.",
  },
];

const VALUES_DATA = [
  {
    title: "Pragmatismo arquitetural",
    description:
      "Decisões guiadas por contexto real e operabilidade. A melhor tecnologia é aquela que resolve o problema sem adicionar complexidade inútil ao sistema.",
  },
  {
    title: "Fundação & Integração",
    description:
      "Domínio de protocolos de rede e arquiteturas distribuídas para conectar desde microcontroladores até sistemas robustos na nuvem.",
  },
  {
    title: "Ownership ponta a ponta",
    description:
      "Responsabilidade que atravessa camadas: do pulso elétrico no hardware até a renderização do último componente na tela do usuário.",
  },
  {
    title: "Security & Safety",
    description:
      "Segurança e resiliência tratadas como base. Sistemas desenhados para falhar graciosamente e proteger dados do dispositivo à nuvem.",
  },
];

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="WHOAMI.sys"
      title="Engenharia orientada por clareza, nao por ruido"
      description="Transformo complexidade tecnica em sistemas estaveis, operaveis e alinhados ao negocio."
      disableChildrenAnimation
      aside={
        <div className="mt-sp-4 ds-metric">
          <span className="inline-block h-1.5 w-1.5 rounded-full bg-slash" />
          Garuva, SC | Remote worldwide
        </div>
      }
    >
      <motion.div
        className="ds-grid-2"
        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.id}
              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.id}</div>
              <DrawLine delay={0.03} />
              <h3 className="ds-card-title">{step.title}</h3>
              <p className="ds-copy">{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="Retrato de Evandro"
            className="mb-sp-6 h-[220px] w-full overflow-hidden rounded-[6px] border border-[var(--border)]"
            imageClassName="object-cover"
          />
          <div className="ds-kicker">System Signature</div>
          <DrawLine delay={0.05} />
          <h3 className="ds-card-title">Base tecnica e postura de entrega</h3>
          <p className="ds-copy">
            Evandro Fonseca Junior. Engenheiro de Software Full-Stack com foco
            na convergência entre hardware e aplicações web modernas.
            Especialista em TypeScript, Node.js, ecossistema React e automação
            de dispositivos físicos.
          </p>
          <div className="ds-grid-2 mt-sp-6">
            {VALUES_DATA.map((value) => (
              <div
                key={value.title}
                className="border-t border-[var(--border)] pt-sp-4"
              >
                <div className="text-[11px] font-medium uppercase tracking-[0.08em]">
                  {value.title}
                </div>
                <p className="ds-copy !mt-sp-2">{value.description}</p>
              </div>
            ))}
          </div>
        </motion.article>
      </motion.div>
    </Section>
  );
}