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

// Hand-drawn inline SVGs, brand-orange stroke — same convention as
// /lebensuhr's own icon set (IconEnvelope etc.), used here instead of a
// photo since there's no product to shoot for a free monthly ritual.
function IconHand() {
  return (
    <svg width="55" height="48" viewBox="0 0 60 52" fill="none">
      <rect x="38" y="12" width="6" height="18" rx="3" stroke="#f6a701" strokeWidth="2" />
      <rect x="30" y="6" width="6" height="24" rx="3" stroke="#f6a701" strokeWidth="2" />
      <rect x="22" y="10" width="6" height="20" rx="3" stroke="#f6a701" strokeWidth="2" />
      <rect x="14" y="16" width="6" height="14" rx="3" stroke="#f6a701" strokeWidth="2" />
      <rect x="12" y="28" width="34" height="18" rx="9" stroke="#f6a701" strokeWidth="2" />
      <rect x="2" y="30" width="14" height="8" rx="4" stroke="#f6a701" strokeWidth="2" transform="rotate(-25 9 34)" />
    </svg>
  );
}

function IconEye() {
  return (
    <svg width="52" height="34" viewBox="0 0 52 34" fill="none">
      <path
        d="M2 17S12 2 26 2s24 15 24 15-10 15-24 15S2 17 2 17Z"
        stroke="#f6a701"
        strokeWidth="2"
        strokeLinejoin="round"
      />
      <circle cx="26" cy="17" r="7" stroke="#f6a701" strokeWidth="2" />
    </svg>
  );
}

function IconShare() {
  return (
    <svg width="44" height="48" viewBox="0 0 44 48" fill="none">
      <circle cx="8" cy="24" r="6" stroke="#f6a701" strokeWidth="2" />
      <circle cx="36" cy="8" r="6" stroke="#f6a701" strokeWidth="2" />
      <circle cx="36" cy="40" r="6" stroke="#f6a701" strokeWidth="2" />
      <path d="M13.5 21 30.5 11M13.5 27l17 10" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

const punkte = [
  {
    icon: <IconHand />,
    title: "Nimm dir, was passt",
    desc: "Eine Einladung, drei oder alle sieben – es gibt kein Richtig oder Falsch dabei.",
  },
  {
    icon: <IconEye />,
    title: "Nichts zum Abhaken",
    desc: "Die Sieben ist kein Programm. Es reicht, die Dinge bewusst wahrzunehmen.",
  },
  {
    icon: <IconShare />,
    title: "Teilen, wenn du magst",
    desc: "Manche erzählen anderen von ihren Sieben – nicht um sich zu messen, sondern um sich zu erinnern.",
  },
];

export function SoFunktionierts() {
  return (
    <section className="w-full bg-bg-base flex flex-col gap-12 items-center py-14 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 läuft es ab
        </p>
        <p className="text-body text-text-muted">Jeden Monat neu. Ohne Verpflichtung.</p>
      </Reveal>

      <RevealGroup className="flex flex-col sm:flex-row gap-8 items-center sm:items-start w-full lg:px-[10rem]">
        {punkte.map((punkt, i) => (
          <Fragment key={punkt.title}>
            <RevealItem className="group flex flex-col gap-4 items-center text-center flex-1 max-w-xs sm:max-w-none">
              <div className="flex items-center justify-center h-14 transition-transform duration-300 group-hover:scale-110">
                {punkt.icon}
              </div>
              <p className="font-semibold text-body text-text-primary">{punkt.title}</p>
              <p className="text-body-sm text-text-primary text-center">{punkt.desc}</p>
            </RevealItem>
            {i < punkte.length - 1 && (
              <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>
  );
}
