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

function Word({ children }: { children: string }) {
  return (
    <p
      className="font-bold leading-normal text-text-primary text-[length:var(--divider-word-size)] whitespace-nowrap"
      style={{ fontFamily: "var(--font-caveat)" }}
    >
      {children}
    </p>
  );
}

function Arrow() {
  return (
    <div className="flex items-center justify-center shrink-0">
      <div className="-scale-y-100 rotate-180">
        <div className="relative" style={{ height: "var(--divider-arrow-h)", width: "var(--divider-arrow-w)" }}>
          <Image alt="" src="/icon-separator.svg" fill sizes="48px" />
        </div>
      </div>
    </div>
  );
}

export function Divider() {
  return (
    <Reveal
      delay={0.3}
      className="flex items-center justify-center flex-wrap gap-x-3 sm:gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center"
    >

      {/* Word + its trailing icon are grouped into one shrink-0 flex unit
          so flex-wrap only ever breaks BETWEEN pairs, never leaving an
          arrow stranded alone on its own line — the arrows are always
          visible now (previously hidden below md: entirely to sidestep
          that exact problem), this fixes the root cause instead.
          gap-3/sm:gap-8 (not a flat gap-8): below 640px the words and
          icons already shrink via --divider-word-size/--divider-arrow-*
          (see globals.css), tightening the gaps too is what gets the
          whole phrase close to fitting on one row instead of each pair
          wrapping to its own line. */}
      <div className="flex items-center gap-3 sm:gap-8 shrink-0">
        <Word>Klarheit</Word>
        <Arrow />
      </div>

      <div className="flex items-center gap-3 sm:gap-8 shrink-0">
        <Word>Fokus</Word>
        <Arrow />
      </div>

      <div className="flex items-center gap-3 sm:gap-8 shrink-0">
        <Word>Leichtigkeit</Word>

        {/* Sparkle icon — sizes now fluid (--divider-sparkle-*) to match
            the text-h2 words next to it, previously hard rem values that
            stayed visually static while the words scaled. */}
        <div
          className="flex items-center justify-center"
          style={{ height: "var(--divider-sparkle-h)", width: "var(--divider-sparkle-w)" }}
        >
          <div style={{ rotate: "4.6deg" }}>
            <div
              className="relative"
              style={{ height: "var(--divider-sparkle-inner-h)", width: "var(--divider-sparkle-inner-w)" }}
            >
              <Image alt="" src="/icon-separator-right.svg" fill sizes="48px" />
            </div>
          </div>
        </div>
      </div>

    </Reveal>
  );
}
