// Experience — reverse-chronological history with oversized serif indices.
// TODO(Mikky): replace these placeholder entries with your real history.

const EXPERIENCE = [
  {
    role: "Creative Technologist",
    company: "Freelance",
    dates: "2023 — Now",
    bullets: [
      "Built and shipped websites and apps for small businesses and creators.",
      "Designed products end-to-end — research, mockups, and the final build.",
      "Produced social content and music releases alongside client work.",
    ],
  },
  {
    role: "Product Designer & Developer",
    company: "Studio — add your company",
    dates: "2021 — 2023",
    bullets: [
      "Redesigned core product flows, making them simpler for everyday users.",
      "Turned designs into working code, cutting handoff time between teams.",
    ],
  },
  {
    role: "Social Media Manager",
    company: "Brand — add your company",
    dates: "2019 — 2021",
    bullets: [
      "Planned and created content calendars across Instagram and TikTok.",
      "Grew the audience with consistent, watchable short-form video.",
    ],
  },
];

function Experience() {
  const { TiltCard, Reveal, GlowSpot } = window;
  return (
    <section id="experience" className="relative overflow-hidden px-8 md:px-16 lg:px-20 py-24">
      <GlowSpot className="top-24 -right-56" size={650} opacity={0.06} />

      <Reveal>
        <p className="text-sm font-body text-white/80 mb-6">{"// Experience"}</p>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-7xl leading-[0.9] tracking-[-3px]">
          Where I've
          <br />
          worked
        </h2>
      </Reveal>

      <div className="flex flex-col gap-6 mt-16">
        {EXPERIENCE.map((job, i) => (
          <Reveal key={job.role + job.dates} delay={i * 0.1}>
            {/* Wide cards get a small tilt so the effect stays subtle. */}
            <TiltCard max={3} className="liquid-glass rounded-[1.25rem] p-6 md:p-8">
              <div className="flex flex-col md:flex-row md:items-start gap-4 md:gap-8">
                <div className="font-heading italic text-white/25 text-5xl md:text-6xl leading-none w-20 shrink-0 select-none">
                  0{i + 1}
                </div>
                <div className="flex-1">
                  <h3 className="font-heading italic text-white text-3xl md:text-4xl tracking-[-1px] leading-none">
                    {job.role}
                  </h3>
                  <div className="mt-2 text-sm text-white/80 font-body font-medium">
                    {job.company}
                  </div>
                  <ul className="mt-4 flex flex-col gap-2">
                    {job.bullets.map((b, j) => (
                      <li
                        key={j}
                        className="text-sm text-white/90 font-body font-light leading-snug pl-4 relative"
                      >
                        <span className="absolute left-0 top-[0.55em] w-1.5 h-1.5 rounded-full bg-white/60"></span>
                        {b}
                      </li>
                    ))}
                  </ul>
                </div>
                <span className="liquid-glass rounded-full px-3.5 py-1 text-xs text-white/90 font-body whitespace-nowrap self-start">
                  {job.dates}
                </span>
              </div>
            </TiltCard>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.Experience = Experience;