"use client";

import FadeIn from "@/components/animations/FadeIn";
import SectionHeading from "@/components/SectionHeading";

export type MilestoneItem = { year: string; title: string; description: string };

export default function OurHistory({
  milestones,
  heading,
  subtitle,
}: {
  milestones?: MilestoneItem[];
  heading?: string;
  subtitle?: string;
}) {
  if (!milestones || milestones.length === 0) return null;

  return (
    <section className="petro-section overflow-hidden">
      <div className="petro-container">
          <SectionHeading
            title={heading ?? "Our History"}
            subtitle={subtitle ?? "Over two decades of growth, innovation, and global expansion in integrated energy services."}
          />

        {/* Timeline */}
        <div className="relative mt-4">
          {/* Vertical spine — hidden on mobile, visible from lg */}
          <div className="hidden lg:block absolute left-1/2 -translate-x-px top-0 bottom-0 w-[2px] bg-gradient-to-b from-accent via-accent/40 to-transparent" />

          <div className="flex flex-col gap-0">
            {milestones.map((item, i) => {
              const isLeft = i % 2 === 0; // even → card on the left, odd → card on the right

              return (
                <div key={i} className="relative flex items-center lg:min-h-[140px]">
                  {/* ── DESKTOP LAYOUT ── */}

                  {/* Left slot */}
                  <div className="hidden lg:flex w-1/2 justify-end pr-12">
                    {isLeft ? (
                      <FadeIn direction="right" x={40} delay={i * 0.08} className="w-full max-w-md">
                        <MilestoneCard item={item} align="right" />
                      </FadeIn>
                    ) : (
                      /* Spacer so the right card doesn't collapse */
                      <div className="w-full max-w-md" />
                    )}
                  </div>

                  {/* Centre year badge */}
                  <div className="hidden lg:flex absolute left-1/2 -translate-x-1/2 z-10 flex-col items-center">
                    <div className="w-16 h-16 rounded-full bg-accent text-accent-foreground flex items-center justify-center font-bold text-sm tracking-wide shadow-lg border-4 border-background">
                      {item.year}
                    </div>
                  </div>

                  {/* Right slot */}
                  <div className="hidden lg:flex w-1/2 justify-start pl-12">
                    {!isLeft ? (
                      <FadeIn direction="left" x={40} delay={i * 0.08} className="w-full max-w-md">
                        <MilestoneCard item={item} align="left" />
                      </FadeIn>
                    ) : (
                      <div className="w-full max-w-md" />
                    )}
                  </div>

                  {/* ── MOBILE LAYOUT ── */}
                  <div className="flex lg:hidden w-full items-start gap-4 py-4">
                    {/* Mobile spine + badge */}
                    <div className="flex flex-col items-center shrink-0 pt-1">
                      <div className="w-12 h-12 rounded-full bg-accent text-accent-foreground flex items-center justify-center font-bold text-xs tracking-wide shadow-md border-2 border-background">
                        {item.year}
                      </div>
                      {i < milestones.length - 1 && (
                        <div className="w-[2px] flex-1 mt-2 bg-accent/30 min-h-[40px]" />
                      )}
                    </div>

                    {/* Mobile card */}
                    <FadeIn direction="left" x={20} delay={i * 0.06} className="flex-1 pb-4">
                      <MilestoneCard item={item} align="left" />
                    </FadeIn>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function MilestoneCard({
  item,
  align,
}: {
  item: MilestoneItem;
  align: "left" | "right";
}) {
  return (
    <div
      className={`petro-card p-6 border-l-4 border-accent group hover:-translate-y-1 transition-transform duration-300 ${
        align === "right" ? "text-right" : "text-left"
      }`}
    >
      <span className="inline-block text-xs font-bold uppercase tracking-[0.25em] text-accent mb-2">
        {item.year}
      </span>
      <h3 className="text-base font-bold text-foreground mb-2 leading-snug">{item.title}</h3>
      <p className="text-sm text-muted-foreground leading-relaxed">{item.description}</p>
    </div>
  );
}