// Geez landing — shared bits (icons, mark, etc.)
const { useState, useEffect, useRef, useMemo } = React;

// — Inline SVG mark, used everywhere we want the brand circle+! glyph.
function Mark({ size = 24, reversed = false, rotate = true, style }) {
  const bg = reversed ? '#FFD600' : '#1A1A1A';
  const fg = reversed ? '#1A1A1A' : '#FFD600';
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'inline-block', ...(rotate ? {} : {}), ...style }}>
      <circle cx="50" cy="50" r="50" fill={bg} />
      <g transform="rotate(15 50 50)">
        <rect x="44" y="20" width="12" height="42" rx="3" fill={fg} />
        <circle cx="50" cy="72" r="6.5" fill={fg} />
      </g>
    </svg>
  );
}

// — Lucide-flavored stroke icons. 2px round, brand-aligned.
function Icon({ name, size = 18, color = 'currentColor', strokeWidth = 1.8 }) {
  const paths = {
    pin: <><path d="M12 22s-7-7.2-7-13a7 7 0 0 1 14 0c0 5.8-7 13-7 13z" /><circle cx="12" cy="9" r="2.6" /></>,
    car: <><path d="M5 17h14M6 17v-4l2-5h8l2 5v4M7.5 13.5h9" /><circle cx="8" cy="17.5" r="1.6" /><circle cx="16" cy="17.5" r="1.6" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    bolt: <><path d="M13 3 4 14h7l-1 7 9-11h-7l1-7z" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>,
    star: <><path d="M12 3.5 14.5 9l6 .8-4.4 4.1 1.1 6-5.2-2.9-5.2 2.9 1.1-6L3.5 9.8 9.5 9z" /></>,
    wallet: <><rect x="3" y="6" width="18" height="13" rx="2.5" /><path d="M16 13h3" /><path d="M3 9h14a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H3" /></>,
    shield: <><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z" /><path d="m9 12 2 2 4-4" /></>,
    chevR: <><path d="m9 6 6 6-6 6" /></>,
    chevD: <><path d="m6 9 6 6 6-6" /></>,
    arrowR: <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    check: <><path d="M5 12.5 10 17 19 7" /></>,
    apple: <><path d="M16.5 12.5c0-2.7 2.2-4 2.3-4-1.3-1.8-3.2-2.1-3.9-2.1-1.7-.2-3.3 1-4.1 1-.9 0-2.2-1-3.6-.9-1.8 0-3.5 1.1-4.5 2.7-1.9 3.3-.5 8.2 1.4 10.9.9 1.3 2 2.8 3.4 2.8 1.4 0 1.9-.9 3.6-.9s2.1.9 3.6.9c1.5 0 2.4-1.3 3.3-2.7.7-1 1.1-2 1.4-3-.1 0-2.9-1.1-2.9-4.7zM14 5.2c.8-.9 1.3-2.2 1.1-3.4-1.1.1-2.4.8-3.2 1.7-.7.8-1.4 2.1-1.2 3.3 1.2.1 2.5-.6 3.3-1.6z" fill={color} stroke="none" /></>,
    google: <><polygon points="6,2 19,11 6,20" fill={color} stroke="none" /></>,
    sparkle: <><path d="M12 3v6M12 15v6M3 12h6M15 12h6" /></>,
    map: <><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2z" /><path d="M9 4v14M15 6v14" /></>,
    house: <><path d="M3 11 12 4l9 7" /><path d="M5 10v10h14V10" /><path d="M9 20v-6h6v6" /></>,
    listing: <><rect x="3" y="4" width="18" height="16" rx="3" /><path d="M7 9h10M7 13h6M7 17h8" /></>,
    timer: <><path d="M10 2h4M12 4v3" /><circle cx="12" cy="14" r="8" /><path d="M12 10v4l3 2" /></>,
    nav: <><path d="m3 11 18-8-8 18-2-8z" /></>,
    menu: <><path d="M4 7h16M4 12h16M4 17h16" /></>,
    user: <><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-7 8-7s8 3 8 7" /></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'inline-block', flexShrink: 0 }}>
      {paths[name]}
    </svg>
  );
}

function Stars({ size = 14 }) {
  return (
    <span className="stars">
      {[0,1,2,3,4].map(i => (
        <Icon key={i} name="star" size={size} color="#1A1A1A" strokeWidth={2}/>
      ))}
    </span>
  );
}

// Scroll-reveal hook — IO-driven, with a safety fallback so the
// content is never permanently hidden if IO is blocked / late.
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    let done = false;
    const reveal = () => { if (!done) { done = true; el.classList.add('visible'); } };

    // If already in viewport on mount, reveal immediately on next frame.
    requestAnimationFrame(() => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      if (r.top < vh * 0.9 && r.bottom > 0) reveal();
    });

    let io;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver(([e]) => {
        if (e.isIntersecting) { reveal(); io.disconnect(); }
      }, { threshold: 0.12 });
      io.observe(el);
    }

    // Safety net: never leave content hidden longer than ~500ms.
    const t = setTimeout(reveal, 500);

    return () => { clearTimeout(t); if (io) io.disconnect(); };
  }, []);
  return ref;
}

Object.assign(window, { Mark, Icon, Stars, useReveal });