import React from "react";

export default function Home() {
    return (
        <main className="mx-auto mb-20 mt-20 flex w-11/12 max-w-4xl flex-col gap-12 md:w-2/3">
            <section className="flex flex-col items-center gap-8 text-center font-cormorantGaramond">
                <img
                    src="/cayden-portrait.png"
                    alt="Portrait of Cayden"
                    className="h-40 w-40 rounded-full object-cover shadow-lg"
                />

                <header className="flex flex-col gap-4">
                    <h1 className="text-5xl font-light leading-tight md:text-6xl">
                        Howdy, I&apos;m Cayden.
                    </h1>

                    <p className="font-poppins text-2xl font-light leading-tight">
                        JavaScript · TypeScript · Python · Go · React, NextJS
                    </p>
                </header>
            </section>

            <section className="flex flex-col gap-6 text-lg leading-8 font-cormorantGaramond">
                <p>
                    Nice to meet you! I am a Web Developer who specializes in architecting robust, user-centric
                    applications, transforming complex logic into seamless digital experiences.
                </p>

                <p>
                    My work is driven by a commitment to meeting complex demands in specialized medical markets. With a
                    strong focus on ergonomics, UI/UX optimization, and precision within fast-paced clinical
                    environments, I engineer comprehensive EHR solutions—ranging from portable medical cart workstations
                    to pioneering tracking and fleet management systems.
                </p>

                <p>
                    Beyond the clinical sector, my architectural experience extends to high-concurrency community
                    platforms. I have developed complex state management systems, robust user infrastructure, and
                    comprehensive governance controls. These applications have successfully scaled to support thousands
                    of daily active users, functioning as mission-critical tools for large digital communities.
                </p>

                <p>
                    Whether developing a new feature, refining an existing product, or adapting to rapid architectural
                    shifts, I am dedicated to creating software that is accessible, modern, and highly functional.
                </p>
            </section>

            <section className="mt-10 rounded-2xl bg-nord-2 p-8 font-cormorantGaramond text-white shadow-md">
                <h2 className="mb-6 text-2xl font-semibold tracking-wide border-b border-white/20 pb-3">
                    Core Competencies
                </h2>

                <ul className="grid gap-4 md:grid-cols-2 text-lg">
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        Next.js & React Ecosystems
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        TypeScript & Tailwind CSS
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        EHR & Fleet Management
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        High-Concurrency Systems
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        Infrastructure & Automation
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        Human-Centric Design & Thinking
                    </li>
                </ul>
            </section>
        </main>
    );
}