src/pages/home.rs

use leptos::*;
use leptos_meta::{Meta, Title};
use leptos_router::A;

use super::projects::data::{aggregated_skills, SHOW_SKILL_COUNT};

/// How many skills to surface on the home page.
const HOME_SKILLS_LIMIT: usize = 20;

#[component]
pub fn Home() -> impl IntoView {
    let skills_view = aggregated_skills()
        .into_iter()
        .take(HOME_SKILLS_LIMIT)
        .map(|(skill, projects)| {
            let count = projects.len();
            let popup_items = projects
                .iter()
                .map(|p| {
                    let name: &'static str = p.name;
                    let tagline: &'static str = p.tagline;
                    let href = format!("/projects/{}", p.slug);
                    view! {
                        <A href=href class="skill-popup-project">
                            <span class="skill-popup-name">{name}</span>
                            <span class="skill-popup-sep">" - "</span>
                            <span class="skill-popup-desc">{tagline}</span>
                        </A>
                    }
                })
                .collect::<Vec<_>>();

            view! {
                <li class="skill-tag-wrapper">
                    {skill}
                    {SHOW_SKILL_COUNT.then(|| view! { <span class="skill-count">"("{count}")"</span> })}
                    <div class="skill-popup">
                        <div class="skill-popup-box">{popup_items}</div>
                    </div>
                </li>
            }
        })
        .collect::<Vec<_>>();

    view! {
        <Title text="Peter Pinto – Software Engineer"/>
        <Meta name="description" content="Senior Software Engineer & Technical Lead building distributed systems, GPU-accelerated tools, and geospatial intelligence platforms. Based in Charlottesville, VA."/>
        <div class="page">
            // ── Hero ─────────────────────────────────────────────
            <section class="hero">
                <div class="hero-inner">
                    <div class="hero-text">
                        <h1>"Hi, I'm " <em>"Peter Pinto"</em>"."</h1>
                        <p class="lead">
                            "Senior Software Engineer & Technical Lead based in Charlottesville, VA.
                            I ship distributed systems, GPU-accelerated tools, and geospatial intelligence platforms —
                            and lead the teams that build them."
                        </p>
                    </div>
                    <img
                        src="/headshot.jpeg"
                        alt="Peter Pinto"
                        class="hero-avatar"
                    />
                </div>
            </section>

            <hr class="divider" />

            // ── About Grid ────────────────────────────────────────
            <section class="about-grid">
                // Card 1 — About Me
                <div class="about-card">
                    <span class="eyebrow">"About me"</span>
                    <h3>"Background"</h3>
                    <p>
                        "BS in Computer Science, New Jersey Institute of Technology (2023).
                        Eagle Scout. I gravitate toward hard problems — systems that need to scale,
                        pipelines that need to be reliable, and tools that need to perform."
                    </p>
                </div>

                // Card 2 — What I Do
                <div class="about-card">
                    <span class="eyebrow">"What I do"</span>
                    <h3>"Focus Areas"</h3>
                    <p>
                        "Distributed systems, DevOps, and parallel computing — with a particular
                        interest in GPGPU and AI/ML. I lead teams, define requirements, and
                        ship software that delivers measurable value."
                    </p>
                </div>

                // Card 3 — Skills
                <div class="about-card">
                    <span class="eyebrow">"Skills"</span>
                    <h3>"Tech & Tools"</h3>
                    <ul class="skills-list">
                        {skills_view}
                    </ul>
                </div>

                // Card 4 — Currently
                <div class="about-card">
                    <span class="eyebrow">"Currently"</span>
                    <h3>"Role"</h3>
                    <p>
                        "Senior Software Engineer & Project Technical Lead at General Atomics Intelligence
                        (June 2023 – Present). I define requirements, coordinate cross-functional teams,
                        and deliver geospatial intelligence tooling used in production — all in Charlottesville, VA."
                    </p>
                </div>
            </section>

            <hr class="divider" />

            // ── Featured Projects ─────────────────────────────────
            <section>
                <span class="eyebrow">"Featured Projects"</span>
                <h2>"Things I've " <em style="font-style:italic; color: var(--accent)">"Built"</em></h2>
                <div class="featured-projects">
                    <div class="project-card">
                        <span class="eyebrow">"Rust · Kubernetes Operator"</span>
                        <h3>"Trading Bot"</h3>
                        <p>
                            "A Kubernetes-native operator that manages the full lifecycle of automated
                            trading bot deployments via Custom Resource Definitions — configuration,
                            scheduling, and declarative risk limits all in one spec."
                        </p>
                        <A href="/projects/trading-bot" class="btn btn-outline">"Details →"</A>
                    </div>
                    <div class="project-card">
                        <span class="eyebrow">"Infrastructure"</span>
                        <h3>"Home Lab"</h3>
                        <p>
                            "A three-node bare-metal Kubernetes cluster on repurposed hardware,
                            running RKE2, Istio, and Longhorn with real workloads — Gitea runner,
                            RabbitMQ, Matrix, InfluxDB, and more."
                        </p>
                        <A href="/projects/home-lab" class="btn btn-outline">"Details →"</A>
                    </div>
                </div>
                <div style="margin-top: 1.5rem;">
                    <A href="/projects" class="btn btn-outline">"See all projects →"</A>
                </div>
            </section>

            <hr class="divider" />

            // ── CTA Row ───────────────────────────────────────────
            <div class="resume-actions">
                <A href="/resume" class="btn btn-primary">"View Resume →"</A>
                <A href="/contact" class="btn btn-outline">"Get in Touch"</A>
            </div>
        </div>
    }
}