import { Section } from "./Section";

const STORY_DATA = [
  {
    id: "KERNEL_INIT",
    title: "Engenharia de fundamentos",
    content:
      "Projeto sistemas com foco em previsibilidade, manutenção e crescimento real. Escala entra na arquitetura desde o início.",
  },
  {
    id: "RUNTIME_EXEC",
    title: "Entrega sob restrições",
    content:
      "Atuo bem em cenários com legado, prazos apertados e decisões de produto em movimento, sem sacrificar legibilidade técnica.",
  },
];

const VALUES_DATA = [
  {
    title: "Pragmatismo arquitetural",
    description:
      "Decisões guiadas por ROI, operabilidade e clareza para o time que mantém o sistema depois.",
  },
  {
    title: "Fundação técnica",
    description:
      "Fundamentos fortes em dados, protocolos e modelagem para evitar soluções frágeis e modismos vazios.",
  },
  {
    title: "Ownership real",
    description:
      "Responsabilidade sobre entrega, comunicação e qualidade final, não só sobre o trecho de código escrito.",
  },
  {
    title: "Security by design",
    description:
      "Integridade, proteção de dados e conformidade tratadas como parte do produto, não como remendo.",
  },
];

export default function About() {
  return (
    <Section
      id="about"
      eyebrow="WHOAMI.sys"
      title="Engenharia orientada por clareza, não por ruído"
      description="Transformo complexidade técnica em sistemas estáveis, operáveis e alinhados ao negócio."
      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>
      }
    >
      <div className="ds-grid-2">
        <div className="ds-grid-2">
          {STORY_DATA.map((step) => (
            <article key={step.id} className="ds-card">
              <div className="ds-kicker">{step.id}</div>
              <h3 className="ds-card-title">{step.title}</h3>
              <p className="ds-copy">{step.content}</p>
            </article>
          ))}
        </div>

        <div className="ds-card">
          <div className="ds-kicker">System Signature</div>
          <h3 className="ds-card-title">Base técnica e postura de entrega</h3>
          <p className="ds-copy">
            Evandro Fonseca Junior. Engenheiro Full-Stack com foco em Next.js,
            React, Node.js, Tauri, integrações e arquitetura pragmática.
          </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>
        </div>
      </div>
    </Section>
  );
}