import { Fragment } from "react";
import Image from "next/image";
import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
import { StepArrow } from "../../components/StepArrow";

// Each icon's own real pixel dimensions (not uniformly square) — needed so
// the `h-16 w-auto` sizing below infers the correct aspect ratio instead of
// stretching/squashing to a guessed one.
const steps = [
  {
    icon: "/icon-weekly-step-1.png",
    width: 177,
    height: 177,
    title: "1. Anmelden",
    desc: "Trage dich mit deiner E-Mail-Adresse ein und bestätige kurz.",
  },
  {
    icon: "/icon-weekly-step-2.png",
    width: 225,
    height: 177,
    title: "2. E-Mail erhalten",
    desc: "Jeden Mittwoch bekommst du deinen neuen Impuls direkt in dein Postfach.",
  },
  {
    icon: "/icon-weekly-step-3.png",
    width: 198,
    height: 198,
    title: "3. Lesen & umsetzen",
    desc: "Lies in wenigen Minuten und setze die Tipps direkt in deinem Alltag um.",
  },
  {
    icon: "/icon-weekly-step-4.png",
    width: 180,
    height: 177,
    title: "4. Dranbleiben",
    desc: "Kleine Schritte, jede Woche – für mehr Klarheit, Fokus und Leichtigkeit.",
  },
];

export function HowItWorks() {
  return (
    <section className="w-full bg-bg-base flex flex-col gap-12 items-center py-12 sm:py-16 px-[var(--layout-padding-x)]">
      <Reveal className="flex flex-col gap-2 items-center text-center">
        <p
          className="font-semibold text-h-emphasis text-text-primary"
          style={{ fontFamily: "var(--font-lora)" }}
        >
          So funktioniert&apos;s
        </p>
        <p className="text-body text-text-muted">
          Wöchentliche Inspiration. Kein Aufwand für dich.
        </p>
      </Reveal>

      {/* Same pattern as /todo-cards's HowItWorks: arrows always visible
          (rotated to point down while stacked below sm:), RevealGroup/
          RevealItem stagger the steps in. lg:px-[10rem] mirrors Figma's
          Desktop-only px-[160px] inset (no fluid token — pure aesthetic
          narrowing, fine to just drop below lg:). */}
      <RevealGroup className="flex flex-col sm:flex-row gap-8 items-center sm:items-start w-full lg:px-[10rem]">
        {steps.map((step, i) => (
          <Fragment key={step.title}>
            <RevealItem className="group flex flex-col gap-4 items-center text-center flex-1 max-w-xs sm:max-w-none">
              <Image
                src={step.icon}
                alt=""
                width={step.width}
                height={step.height}
                className="h-16 w-auto object-contain transition-transform duration-300 group-hover:scale-110"
              />
              <p className="font-semibold text-body text-text-primary">{step.title}</p>
              <p className="text-body-sm text-text-primary text-center">{step.desc}</p>
            </RevealItem>
            {i < steps.length - 1 && (
              // sm:mt-[1.5rem] centers the arrow on the h-16 icon above it,
              // same technique as todo-cards'/Challenge's own step
              // connector. Below sm: pulled up with a negative margin so it
              // sits nearer the icon row above it instead of dead-center in
              // the whole gap between steps (fixed 2026-07-24, consistency
              // with Challenge's icon-at-top layout). Bigger below sm:
              // (w-8 h-8, was w-6 h-6) per explicit feedback.
              <div className="flex items-center justify-center shrink-0 -mt-2 sm:mt-[1.5rem]">
                <StepArrow className="w-8 h-8 rotate-90 sm:w-10 sm:h-4 sm:rotate-0" />
              </div>
            )}
          </Fragment>
        ))}
      </RevealGroup>
    </section>
  );
}
