"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 = [
  {
    label: "Hardware + software",
    title: "Do sinal fisico ao produto digital",
    content:
      "Construo a ponte entre dispositivos, protocolos de baixo nivel, backend e interface para que o sistema inteiro pareca uma unica experiencia coerente.",
  },
  {
    label: "Execution",
    title: "Entrega clara mesmo sob restricao",
    content:
      "Trabalho bem em contextos com legado, integracoes complexas e pouca margem para erro, priorizando estabilidade, leitura tecnica e evolucao sustentavel.",
  },
];

const PROFILE_POINTS = [
  {
    title: "Arquitetura pragmatica",
    description:
      "Escolhas guiadas por contexto, operabilidade e impacto real no produto.",
  },
  {
    title: "Integracao profunda",
    description:
      "Capacidade de atravessar camada fisica, servicos e interface sem perder consistencia.",
  },
  {
    title: "Ownership ponta a ponta",
    description:
      "Responsabilidade que cobre discovery, implementacao, qualidade e operacao.",
  },
];

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="Operating context"
      title="Engenharia de software, arquitetura e integracoes complexas"
      description="Atuo na intersecao entre arquitetura de software, integracoes de sistemas, hardware + software e entrega full-stack para produtos que precisam funcionar com confiabilidade."
      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.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">{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">Technical profile</div>
          <DrawLine delay={0.05} />
          <h3 className="ds-card-title">Base tecnica e postura de entrega</h3>
          <p className="ds-copy">
            Sou engenheiro de software full-stack com foco em integrar camadas
            que normalmente ficam separadas: hardware, servicos, operacao e
            interface. Meu trabalho e dar forma clara ao que costuma nascer
            fragmentado.
          </p>
          <div className="mt-sp-6 space-y-sp-4">
            {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>
  );
}