import type { ReactNode } from "react";
import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";

// No circle badge, thicker uniform-weight black stroke, no fill — matching
// the site's established illustrative icon language (public/icon-trust-*.png,
// public/icon-step-*.png): bold outline glyphs standing on their own, not
// boxed into a badge shape. Replaces the earlier thin-stroke circled
// version, which didn't match anything else on the site.
function IconBadge({ children }: { children: ReactNode }) {
  return (
    <svg width="64" height="64" viewBox="0 0 32 32" fill="none" stroke="#231f20" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className="h-16 w-auto shrink-0">
      {children}
    </svg>
  );
}

function IconMetal() {
  // Pen/nib glyph — stands in for the metal body itself.
  return (
    <IconBadge>
      <path d="M10 22l2.5-0.8L23 10.7l-2.7-2.7L9.8 19.5 9 22z" />
      <path d="M19 9l3 3" />
    </IconBadge>
  );
}

function IconSparkle() {
  // Engraving/laser mark — four-point sparkle, same glyph as before, just
  // heavier stroke and unboxed to match the rest of the set.
  return (
    <IconBadge>
      <path d="M16 7v5M16 20v5M7 16h5M20 16h5M10.5 10.5l3 3M18.5 18.5l3 3M21.5 10.5l-3 3M13.5 18.5l-3 3" />
    </IconBadge>
  );
}

function IconCompact() {
  // Four corner brackets pointing inward — standard "minimize/fits
  // anywhere" glyph, reads as compact more directly than a shield ever did.
  return (
    <IconBadge>
      <path d="M11 8H8v3M21 8h3v3M11 24H8v-3M21 24h3v-3" />
    </IconBadge>
  );
}

function IconEveryday() {
  // Sun — everyday/daily use.
  return (
    <IconBadge>
      <circle cx="16" cy="16" r="6" />
      <path d="M16 4v3M16 25v3M4 16h3M25 16h3M7.5 7.5l2 2M22.5 22.5l2 2M24.5 7.5l-2 2M9.5 22.5l-2 2" />
    </IconBadge>
  );
}

// "Was kann er?" section's full four-item breakdown (build, engraving,
// size, use case). Same card shape as todo-cards/components/HowItWorks.tsx
// — icon on top, centered, RevealGroup/RevealItem stagger, identical
// title/description typography — reused for visual consistency with the
// rest of the site rather than a one-off layout. 4 cards instead of
// HowItWorks' 3 numbered steps, no connecting arrows (independent facts,
// not a sequence).
const items = [
  { icon: IconMetal, title: "Metallgehäuse", desc: "Robust, wertig und angenehm in der Hand." },
  { icon: IconSparkle, title: "Lasergravur", desc: "„Der Eine.“ auf der einen Seite. „einfach produktiv.“ auf der anderen." },
  { icon: IconCompact, title: "Kompakt", desc: "Passt ans Notizbuch, auf den Schreibtisch oder in die Tasche." },
  { icon: IconEveryday, title: "Für jeden Tag", desc: "Für Notizen, Gedanken, Listen und alles, was du lieber aufschreibst, bevor du es wieder vergisst." },
];

export function Focus() {
  return (
    <section className="w-full bg-bg-base py-12 md:py-16 px-[var(--layout-padding-x)]">
      <Reveal className="flex flex-col gap-2 items-center text-center mb-10">
        <p
          className="font-semibold text-h-emphasis text-text-primary"
          style={{ fontFamily: "var(--font-lora)" }}
        >
          Was kann er?
        </p>
        <p className="text-body text-text-muted max-w-[42rem] w-full text-left md:text-center">
          Schreiben. Und das ziemlich gut. Metallgehäuse, angenehmes Gewicht und eine klassische Kugelschreibermine — kein besonderes Produktivitäts-Gadget, sondern einfach ein guter Stift, den du gern zur Hand nimmst.
        </p>
      </Reveal>

      <RevealGroup className="flex flex-col sm:flex-row gap-8 items-start sm:items-start w-full max-w-[75rem] mx-auto">
        {items.map(({ icon: Icon, title, desc }) => (
          <RevealItem key={title} className="group flex flex-col gap-4 items-center text-center flex-1 max-w-xs sm:max-w-none mx-auto">
            <Icon />
            <p className="font-semibold text-body text-text-primary">{title}</p>
            <p className="text-body-sm text-text-primary w-full text-left md:text-center">{desc}</p>
          </RevealItem>
        ))}
      </RevealGroup>
    </section>
  );
}
