// ── Klempnerei Walter — icons, logo, motion helpers ───────────────────────
// Lucide-style stroke icons (24×24, no fill). Inline SVG only — no libraries.

const stroke = {
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: 1.6,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
};

// Water droplet — the brand mark
function Droplet({ size = 28, className = '' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" className={className} aria-hidden="true">
      <path
        d="M12 2.5c0 0 6.5 6.8 6.5 11.2A6.5 6.5 0 0 1 12 20.5 6.5 6.5 0 0 1 5.5 13.7C5.5 9.3 12 2.5 12 2.5Z"
        fill="currentColor"
      />
      <path d="M9.2 14.4a2.9 2.9 0 0 0 2.4 2.3" fill="none" stroke="#ffffff" strokeWidth="1.4" strokeLinecap="round" opacity="0.85" />
    </svg>
  );
}

// Notfall-Reparatur — alert / emergency
function IconAlert({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...stroke} aria-hidden="true">
      <path d="M10.3 3.8 2.6 17.2A1.8 1.8 0 0 0 4.2 20h15.6a1.8 1.8 0 0 0 1.6-2.8L13.7 3.8a1.9 1.9 0 0 0-3.4 0Z" />
      <path d="M12 9.5v3.5" />
      <path d="M12 16.4h.01" />
    </svg>
  );
}

// Sanitärinstallation — faucet / tap
function IconFaucet({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...stroke} aria-hidden="true">
      <path d="M4 11h6V8a3 3 0 0 1 3-3h2a2 2 0 0 1 2 2v1" />
      <path d="M19 8h2" />
      <path d="M7 11v3a3 3 0 0 0 3 3" />
      <path d="M13 17v3" />
      <path d="M10.5 20h5" />
      <path d="M3 11h8" />
    </svg>
  );
}

// Heizungsservice — flame
function IconFlame({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...stroke} aria-hidden="true">
      <path d="M12 3c.6 2.4 2.3 3.8 3.6 5.4A6.6 6.6 0 0 1 17.5 13 5.5 5.5 0 0 1 6.5 13c0-1.7.8-3 1.8-4.2" />
      <path d="M12 20a2.7 2.7 0 0 0 2.7-2.7c0-1.6-1.6-2.3-2.7-3.8-1.1 1.5-2.7 2.2-2.7 3.8A2.7 2.7 0 0 0 12 20Z" />
    </svg>
  );
}

// Rohrreinigung — pipe / plumbing
function IconPipe({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...stroke} aria-hidden="true">
      <path d="M5 9V6.5A1.5 1.5 0 0 1 6.5 5H9" />
      <path d="M9 5v6h6" />
      <path d="M15 11V8.5A1.5 1.5 0 0 1 16.5 7H19" />
      <path d="M9 11v6.5A1.5 1.5 0 0 0 10.5 19H13" />
      <path d="M2.5 9h5" />
      <path d="M16.5 19h5" />
    </svg>
  );
}

// small inline glyphs
function PhoneGlyph({ size = 16, className = '' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...stroke} className={className} aria-hidden="true">
      <path d="M6.5 3.5h2.6l1.3 3.3-1.6 1.2a11 11 0 0 0 4.9 4.9l1.2-1.6 3.3 1.3v2.6a1.6 1.6 0 0 1-1.7 1.6A14 14 0 0 1 4.9 5.2 1.6 1.6 0 0 1 6.5 3.5Z" />
    </svg>
  );
}

function PinGlyph({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...stroke} aria-hidden="true">
      <path d="M12 21s6.5-5.4 6.5-10.2A6.5 6.5 0 0 0 5.5 10.8C5.5 15.6 12 21 12 21Z" />
      <circle cx="12" cy="10.5" r="2.3" />
    </svg>
  );
}

function ClockGlyph({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...stroke} aria-hidden="true">
      <circle cx="12" cy="12" r="8.5" />
      <path d="M12 7.5V12l3 1.8" />
    </svg>
  );
}

function CheckGlyph({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...stroke} aria-hidden="true">
      <path d="M20 6.5 9.5 17 4 11.5" />
    </svg>
  );
}

function ArrowDown({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...stroke} aria-hidden="true">
      <path d="M12 5v14" />
      <path d="m6 13 6 6 6-6" />
    </svg>
  );
}

function Logo({ light = false }) {
  const word = light ? '#ffffff' : '#1A1A1A';
  const sub = light ? 'rgba(255,255,255,0.6)' : '#64748B';
  return (
    <a href="#hero" className="flex items-center gap-[11px] group" aria-label="Klempnerei Walter — Startseite">
      <span className="text-accent transition-transform duration-300 group-hover:-translate-y-0.5">
        <Droplet size={30} />
      </span>
      <span className="flex flex-col leading-none">
        <span
          className="font-display font-bold uppercase leading-[0.9]"
          style={{ color: word, fontSize: '24px', letterSpacing: '0.01em' }}
        >
          Walter
        </span>
        <span
          className="font-mono uppercase"
          style={{ color: sub, fontSize: '9.5px', letterSpacing: '0.26em', marginTop: '2px' }}
        >
          Klempnerei
        </span>
      </span>
    </a>
  );
}

// ── Motion: reveal-on-scroll wrapper ──────────────────────────────────────
// Content above the fold renders visible from the first paint (never starts at
// opacity:0) so it can't get stuck in a backgrounded/throttled tab and always
// shows in captures/exports. Below-the-fold content reveals on scroll.
function Reveal({ children, delay = 0, as = 'div', className = '', ...rest }) {
  const ref = React.useRef(null);
  // 'visible' (rest) | 'hidden' | 'revealing' | 'settled'
  const [state, setState] = React.useState('visible');

  React.useLayoutEffect(() => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    // Only hide (and later animate) elements that start below the fold.
    if (r.top >= (window.innerHeight || 800) * 0.9) {
      setState('hidden');
    }
  }, []);

  React.useEffect(() => {
    if (state !== 'hidden') return;
    const el = ref.current;
    if (!el) return;
    let settleTimer = null;
    const reveal = () => {
      setState('revealing');
      settleTimer = setTimeout(() => setState('settled'), delay + 700);
    };
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { reveal(); io.unobserve(e.target); } }),
      { threshold: 0.15, rootMargin: '0px 0px -8% 0px' }
    );
    io.observe(el);
    const fallback = setTimeout(reveal, 1600); // never leave content stuck hidden
    return () => { io.disconnect(); clearTimeout(fallback); clearTimeout(settleTimer); };
  }, [state]);

  const trans = `opacity 540ms cubic-bezier(0.22,1,0.36,1) ${delay}ms, transform 540ms cubic-bezier(0.22,1,0.36,1) ${delay}ms`;
  const style =
    state === 'hidden'
      ? { opacity: 0, transform: 'translateY(24px)', transition: trans }
      : state === 'revealing'
      ? { opacity: 1, transform: 'translateY(0)', transition: trans }
      : {}; // 'visible' | 'settled' → no inline opacity/transform at all

  const Tag = as;
  return (
    <Tag ref={ref} className={className} style={style} {...rest}>
      {children}
    </Tag>
  );
}

function Eyebrow({ children, className = '', tone = 'accent' }) {
  const color = tone === 'light' ? 'rgba(255,255,255,0.72)' : tone === 'muted' ? '#64748B' : '#0D9488';
  return (
    <span
      className={`font-mono uppercase block ${className}`}
      style={{ fontSize: '11px', letterSpacing: '0.18em', color }}
    >
      {children}
    </span>
  );
}

Object.assign(window, {
  Droplet, IconAlert, IconFaucet, IconFlame, IconPipe,
  PhoneGlyph, PinGlyph, ClockGlyph, CheckGlyph, ArrowDown,
  Logo, Reveal, Eyebrow,
});