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

const bullets = [
  "Set mit 50 hochwertigen ToDo-Karten",
  "Viel Platz für Gedanken, Aufgaben und Notizen",
  "Passt in jede Tasche – überall einsetzbar",
  "Nachhaltig produziert in Deutschland",
  "Inklusive Mini-Anleitung mit Tipps für den Start",
];

// Inline, brand-orange stroke — same fix/reasoning as TodoKartenHero.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 Focus() {
  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="/focus-todo-karten.png"
          alt="Notizbuch mit ToDo-Karten in natürlichem Licht"
          fill
          sizes="(min-width: 1024px) 42vw, 100vw"
          className="object-cover transition-transform duration-500 group-hover:scale-105"
        />
      </Reveal>
      <Reveal className="flex flex-col gap-6 items-start flex-1 min-w-0 w-full" delay={0.1}>
        <p
          className="font-semibold text-h-emphasis text-text-primary"
          style={{ fontFamily: "var(--font-lora)" }}
        >
          Für mehr Fokus im Alltag
        </p>
        <p className="text-body text-text-body">
          ToDo-Karten helfen dir, den Überblick zu behalten, Entscheidungen zu vereinfachen und deinen Tag bewusst zu gestalten.
        </p>
        <ul className="flex flex-col gap-3 items-start w-full">
          {bullets.map((b) => (
            <li key={b} className="flex gap-[0.625rem] items-start w-full">
              <IconCheck />
              <span className="flex-1 font-semibold text-body text-text-primary">{b}</span>
            </li>
          ))}
        </ul>
      </Reveal>
    </section>
  );
}
