import Image from "next/image";
import { Reveal } from "../../components/Reveal";

const benefits = [
  { title: "Praktische Impulse", desc: "Konkrete Ideen, die du sofort umsetzen kannst." },
  { title: "Neue Perspektiven", desc: "Gedankenanstöße, die dir helfen, klarer zu sehen." },
  { title: "Bewährte Methoden", desc: "Einfache Strategien für mehr Fokus und Struktur." },
  { title: "Motivation & Erinnerung", desc: "Ein freundlicher Schub in die richtige Richtung." },
];

// Inline, brand-orange stroke — same fix/reasoning as
// WeeklyImpulsesHero.tsx's own IconCheck (icon-check.svg's fill can't be
// recolored from outside the SVG when loaded via <img src>/next/image).
function IconCheck() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
      <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function WeeklyBenefits() {
  return (
    <section className="w-full bg-bg-base flex flex-col lg:flex-row gap-10 lg:gap-16 items-center py-12 md:py-16 px-[var(--layout-padding-x)]">
      <Reveal className="group relative w-full lg:w-[42%] lg:shrink-0 aspect-[580/328] rounded-md overflow-hidden">
        <Image
          src="/weekly-photo.png"
          alt="Notizbuch mit wöchentlichem Impuls"
          fill
          sizes="(min-width: 1024px) 42vw, 100vw"
          className="object-cover transition-transform duration-500 group-hover:scale-105"
        />
      </Reveal>

      <Reveal delay={0.1} className="flex flex-col gap-6 items-start flex-1 min-w-0 w-full">
        <p
          className="font-semibold text-h-emphasis text-text-primary w-full"
          style={{ fontFamily: "var(--font-lora)" }}
        >
          Das bekommst du jede Woche
        </p>
        <ul className="flex flex-col gap-4 items-start w-full">
          {benefits.map((b) => (
            <li key={b.title} className="flex gap-[0.625rem] items-start w-full">
              <IconCheck />
              <div className="flex flex-col gap-0.5 items-start flex-1 min-w-0">
                <p className="font-semibold text-body text-text-primary">{b.title}</p>
                <p className="text-body-sm text-text-muted">{b.desc}</p>
              </div>
            </li>
          ))}
        </ul>
      </Reveal>
    </section>
  );
}
