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, e.g.
// icon-step-2 is 180x168) — 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-step-1.png",
    width: 165,
    height: 177,
    title: "1. Aufschreiben",
    desc: "Notiere deine Aufgaben und alles, was dir im Kopf herumgeht.",
  },
  {
    icon: "/icon-step-2.png",
    width: 180,
    height: 168,
    title: "2. Priorisieren",
    desc: "Wähle deine 3 wichtigsten Aufgaben für heute aus und schreibe sie auf.",
  },
  {
    icon: "/icon-step-3.png",
    width: 180,
    height: 177,
    title: "3. Umsetzen",
    desc: "Konzentriere dich auf das Wesentliche und hake ab, was wirklich zählt.",
  },
];

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 einfach funktioniert es
        </p>
        <p className="text-body text-text-muted">
          Ein paar Minuten am Morgen – mehr Klarheit den ganzen Tag.
        </p>
      </Reveal>

      {/* Arrows always visible (see Divider lesson — hiding them below a
          breakpoint isn't the fix), just rotated 90° to point down while
          stacked below sm:. lg:px-[16.25rem] mirrors Figma's Desktop-only
          px-[260px] inset — that value doesn't get its own fluid token
          since it's a pure aesthetic narrowing, not something that breaks
          if it's just absent below lg:. RevealGroup/RevealItem stagger the
          3 steps in on scroll, same pattern as Tools.tsx's card grid —
          arrows aren't part of the stagger (purely decorative connectors,
          not content), they just sit in the DOM between items. */}
      <RevealGroup className="flex flex-col sm:flex-row gap-8 items-center sm:items-start w-full lg:px-[16.25rem]">
        {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">
              {/* Explicit per-icon width/height (real pixel dimensions, not
                  a guessed/uniform size) — matters since one of the three
                  source PNGs isn't square (icon-step-2 is 180x168); passing
                  the real intrinsic size is what avoids next/image's
                  "width or height modified, but not the other" warning that
                  a wrong/guessed size would trigger against the `h-16
                  w-auto` sizing below. group-hover scale is a small "step
                  acknowledges you" touch — the whole text column is the
                  hover target, not just the icon, so it's easy to trigger
                  without precise pointing. */}
              <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.625rem] (26px) centers the arrow on the h-16
              // (64px) icon above it — (64 - arrow's own 16px height) / 2
              // — same margin-based centering technique as Challenge's
              // step connector, not just the same icon asset. Bigger below
              // sm: (w-8 h-8, was w-6 h-6) per explicit feedback.
              <div className="flex items-center justify-center shrink-0 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>
  );
}
