src/components/portfolio/sections/CredentialsSection.tsx

const certs = [
  "Microsoft Certified: Azure Security Engineer Associate",
  "Microsoft Azure Administrator - AZ-104",
  "Microsoft Certified: Azure Fundamentals",
  "Cybersecurity Foundation - Palo Alto Networks",
  "IT Academy: Network Virtualization Concepts - VMware",
  "AWS Academy Graduate - AWS Academy Cloud Foundations",
  "Cloud Rider - 2020 - EduSkills Foundation",
  "Data Science Foundation using R - 360DigiTMG",
  "Machine Learning with Python - Cognitive Class",
  "Database Management System - NPTEL",
  "Introduction to Programming in C - NPTEL",
];

const honors = [
  "MSBA academic performance - 3.8 GPA at UNT",
  "CyberSecurity Club, Business Analytics Club, and AIS member at UNT",
  "Research work published at BIGS 2025 and SWDSI 2026",
];

const leadership = [
  "Vice President - College Photography Club",
  "Indian Film Festival - 2018 (Qualified) & 2019",
  "Multiple project seminars on Malicious URL Detection",
  "Hackathon - Bennett University Internship Program",
];

const campusExperience = [
  {
    role: "Instructional Assistant",
    period: "Jan 2026 - May 2026",
    details: "Supports course tasks, keeps class activities organized, helps students.",
  },
  {
    role: "Library Student Assistant (Stacks)",
    period: "Oct 2025 - Jan 2026",
    details: "Managed shelving, records accuracy and daily workflow.",
  },
  {
    role: "Clark Bakery Student Assistant",
    period: "Nov 2024 - Oct 2025",
    details: "Operations, customer service, inventory and food-safety standards.",
  },
];

export function CredentialsSection() {
  return (
    <section id="credentials" className="py-24 bg-card/40 border-y border-border">
      <div className="mx-auto max-w-6xl px-6">
        <p className="font-display text-accent text-2xl tracking-widest">CERTIFICATIONS & ACTIVITIES</p>
        <h2 className="mt-2 font-display text-5xl text-navy">Credentials</h2>

        <div className="mt-12 rounded-2xl border border-border bg-card p-6">
          <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
            <div>
              <h3 className="font-display text-xl text-navy">Certifications</h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Cloud, cybersecurity, programming, and analytics credentials.
              </p>
            </div>
            <span className="w-fit rounded-full bg-accent/10 px-3 py-1 text-xs font-semibold text-accent">
              11 credentials
            </span>
          </div>
          <ul className="mt-5 grid gap-3 text-base text-foreground/85 sm:grid-cols-2 lg:grid-cols-3 tracking-wide">
            {certs.map((c) => (
              <li key={c} className="flex gap-2 rounded-xl border border-border/70 bg-background/60 px-3 py-2">
                <span className="text-accent">&gt;</span>
                <span>{c}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="mt-6 grid gap-6 lg:grid-cols-3">
          <div className="rounded-2xl border border-border bg-card p-6">
            <h3 className="font-display text-xl text-navy">Honors & Research</h3>
            <ul className="mt-4 space-y-3 text-base text-foreground/85 tracking-wide leading-relaxed">
              {honors.map((h) => (
                <li key={h} className="flex gap-2">
                  <span className="text-accent">&gt;</span>
                  <span>{h}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="rounded-2xl border border-border bg-card p-6 lg:col-span-2">
            <h3 className="font-display text-xl text-navy">Leadership & Activities</h3>
            <ul className="mt-4 grid gap-3 text-sm text-foreground/85 sm:grid-cols-2">
              {leadership.map((l) => (
                <li key={l} className="flex gap-2 rounded-xl border border-border/70 bg-background/60 px-3 py-2">
                  <span className="text-accent">&gt;</span>
                  <span>{l}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mt-6 rounded-2xl border border-border bg-card p-6">
          <h3 className="font-display text-2xl text-navy">Campus Experience - UNT</h3>
          <div className="mt-4 grid gap-5 text-base md:grid-cols-3">
            {campusExperience.map((job) => (
              <div key={job.role}>
                <p className="font-semibold text-lg text-navy">{job.role}</p>
                <p className="text-sm text-muted-foreground">{job.period}</p>
                <p className="mt-1 text-base text-foreground/80">{job.details}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}