// landing-premium-core.jsx — RobinRun for Restaurants
// Premium B2B landing: shared atoms + nav + hero.

// ── Tokens ──────────────────────────────────────────────────────────────────
const LP_INK = '#1C1009';
const LP_INK_2 = '#3A2418';
const LP_AMBER = '#F97316';
const LP_AMBER_DEEP = '#C2410C';
const LP_AMBER_TINT = '#FFE4CC';
const LP_AMBER_SOFT = '#FFF1E4';
const LP_CREAM = '#FFFBF5';
const LP_PAPER = '#F3E4C8';
const LP_MUTED = '#5C4A3F';
const LP_DIM = '#7B6A5F';
const LP_SUBTLE = '#A89B91';
const LP_BORDER = 'rgba(28,16,9,0.08)';
const LP_BORDER_STRONG = 'rgba(28,16,9,0.14)';
const LP_FOREST = '#16A34A';
const LP_BERRY = '#DB2777';

const LP_FN = '"Nunito", system-ui, sans-serif';
const LP_FB = '"DM Sans", system-ui, sans-serif';
const LP_FM = '"JetBrains Mono", ui-monospace, monospace';

// ── Reveal-on-scroll primitive ──────────────────────────────────────────────
// Uses IntersectionObserver; once revealed, stays revealed.
function useReveal(threshold = 0.15) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        io.disconnect();
      }
    }, { threshold, rootMargin: '0px 0px -40px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, visible];
}

function Reveal({ delay = 0, y = 24, style, children, tag: Tag = 'div', ...rest }) {
  const [ref, visible] = useReveal();
  return (
    <Tag ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : `translateY(${y}px)`,
      transition: `opacity .9s cubic-bezier(.2,.7,.3,1) ${delay}ms, transform .9s cubic-bezier(.2,.7,.3,1) ${delay}ms`,
      ...style,
    }} {...rest}>
      {children}
    </Tag>
  );
}

// ── Count-up number ─────────────────────────────────────────────────────────
function CountUp({ to, prefix = '', suffix = '', duration = 1600, decimals = 0 }) {
  const [ref, visible] = useReveal(0.4);
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!visible) return;
    let raf, start;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
      setN(eased * to);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [visible, to, duration]);
  return (
    <span ref={ref}>{prefix}{n.toLocaleString(undefined, {
      minimumFractionDigits: decimals, maximumFractionDigits: decimals,
    })}{suffix}</span>
  );
}

// ── Tiny icon set (minimal stroke) ──────────────────────────────────────────
function LPIcon({ name, size = 18, stroke = 'currentColor', sw = 1.6 }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'arrow-right': return <svg {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'check':       return <svg {...p}><path d="M5 12l4.5 4.5L19 7"/></svg>;
    case 'sparkle':     return <svg {...p}><path d="M12 3l1.7 5.3L19 10l-5.3 1.7L12 17l-1.7-5.3L5 10l5.3-1.7zM19 4l.6 1.4L21 6l-1.4.6L19 8l-.6-1.4L17 6l1.4-.6z"/></svg>;
    case 'wand':        return <svg {...p}><path d="M3 21l11-11M14 6l4 4M16 4l1 1M19 7l1 1M5 13l1 1M8 16l1 1"/></svg>;
    case 'chart':       return <svg {...p}><path d="M3 20V10M9 20V4M15 20v-9M21 20V13M2 20h20"/></svg>;
    case 'clock':       return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'heart':       return <svg {...p}><path d="M12 21s-7-4.5-9-9.5C2 6 6 3 9 5c1.5 1 3 3 3 3s1.5-2 3-3c3-2 7 1 6 6.5-2 5-9 9.5-9 9.5z"/></svg>;
    case 'shop':        return <svg {...p}><path d="M3 9h18l-1 11a2 2 0 01-2 2H6a2 2 0 01-2-2zM7 9V6a5 5 0 0110 0v3"/></svg>;
    case 'phone':       return <svg {...p}><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg>;
    case 'megaphone':   return <svg {...p}><path d="M3 11v2a1 1 0 001 1h2l4 4V6L6 10H4a1 1 0 00-1 1z"/><path d="M14 8a4 4 0 010 8M19 5a8 8 0 010 14"/></svg>;
    case 'qr':          return <svg {...p}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h3M14 17v4M17 17v4M21 14v3M21 21h-1"/></svg>;
    case 'globe':       return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>;
    case 'shield':      return <svg {...p}><path d="M12 3l8 3v6c0 5-4 9-8 9s-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'bolt':        return <svg {...p}><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>;
    case 'gear':        return <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M19 12c0-.6-.1-1.2-.2-1.7l2.1-1.6-2-3.4-2.5 1c-.8-.7-1.8-1.2-2.8-1.5L13 2h-4l-.6 2.7c-1 .3-2 .8-2.8 1.5l-2.5-1-2 3.4 2.1 1.6c-.1.6-.2 1.2-.2 1.8s.1 1.2.2 1.7l-2.1 1.6 2 3.4 2.5-1c.8.7 1.8 1.2 2.8 1.5L9 22h4l.6-2.7c1-.3 2-.8 2.8-1.5l2.5 1 2-3.4-2.1-1.6c.1-.5.2-1.1.2-1.7z"/></svg>;
    case 'bell':        return <svg {...p}><path d="M12 3a6 6 0 016 6c0 5 2 6 2 6H4s2-1 2-6a6 6 0 016-6z"/><path d="M10 21a2 2 0 004 0"/></svg>;
    case 'menu':        return <svg {...p}><path d="M4 6h16M4 12h16M4 18h10"/></svg>;
    case 'play':        return <svg {...p}><path d="M7 4l13 8-13 8z" fill="currentColor"/></svg>;
    case 'star':        return <svg {...p}><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.5 2.9 1-6.1-4.3-4.3 6-.9z" fill="currentColor"/></svg>;
    default: return null;
  }
}

// ── Hero flight — drawn route + parallax flock ──────────────────────────────
function FlyingBird({ dim = false }) {
  const ref = React.useRef(null);
  const [d, setD] = React.useState({ w: 0, h: 0 });
  const [par, setPar] = React.useState({ x: 0, y: 0 });

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const measure = () => setD({ w: el.offsetWidth, h: el.offsetHeight });
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  // cursor parallax — depth planes drift at different rates
  React.useEffect(() => {
    if (window.matchMedia('(hover: none)').matches) return;
    const onMove = (e) => {
      setPar({
        x: (e.clientX / window.innerWidth - 0.5) * 2,
        y: (e.clientY / window.innerHeight - 0.5) * 2,
      });
    };
    window.addEventListener('mousemove', onMove, { passive: true });
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  const [wide, setWide] = React.useState(false);
  React.useEffect(() => {
    const mq = window.matchMedia('(min-width: 1025px)');
    const sync = () => setWide(mq.matches);
    sync();
    mq.addEventListener('change', sync);
    return () => mq.removeEventListener('change', sync);
  }, []);

  const { w, h } = d;
  const ready = w > 320 && wide;

  // two long routes across the hero's right side
  const routes = ready ? [
    {
      d: `M ${w * 0.58} ${h * 0.88} C ${w * 0.70} ${h * 0.76}, ${w * 0.72} ${h * 0.44}, ${w * 0.86} ${h * 0.34} S ${w * 1.04} ${h * 0.32}, ${w * 1.10} ${h * 0.16}`,
      dur: 19, delay: -1, size: 74, depth: 2,
    },
    {
      d: `M ${w * 1.08} ${h * 0.66} C ${w * 0.92} ${h * 0.60}, ${w * 0.88} ${h * 0.26}, ${w * 0.72} ${h * 0.20} S ${w * 0.62} ${h * 0.20}, ${w * 0.58} ${h * 0.08}`,
      dur: 26, delay: -12, size: 40, depth: 1,
    },
  ] : [];

  // ambient birds that fade in and out between passes
  const ambient = [
    { top: '18%', left: '86%', size: 26, depth: 0, dur: 24, delay: -4,  path: 'b' },
    { top: '52%', left: '58%', size: 22, depth: 0, dur: 29, delay: -16, path: 'a' },
    { top: '72%', left: '80%', size: 34, depth: 1, dur: 22, delay: -9,  path: 'c' },
  ];

  const plane = [
    { blur: 2.4, o: dim ? 0.22 : 0.08,  rate: 5 },
    { blur: 1.0, o: dim ? 0.28 : 0.105, rate: 11 },
    { blur: 0,   o: dim ? 0.34 : 0.135, rate: 20 },
  ];

  return (
    <div ref={ref} aria-hidden style={{
      position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none', overflow: 'hidden',
    }}>
      {/* soft bloom anchoring the composition */}
      <div style={{
        position: 'absolute', top: '4%', left: '50%', width: '56%', height: '88%',
        background: `radial-gradient(58% 54% at 56% 42%, ${LP_AMBER}${dim ? '26' : '14'} 0%, transparent 72%)`,
        filter: 'blur(8px)',
        transform: `translate3d(${par.x * -8}px, ${par.y * -8}px, 0)`,
        transition: 'transform .9s cubic-bezier(.2,.7,.3,1)',
      }}/>

      {/* drawn routes + the birds travelling them */}
      {routes.map((r, i) => {
        const p = plane[r.depth];
        return (
          <div key={i} style={{
            position: 'absolute', inset: 0,
            transform: `translate3d(${par.x * -p.rate}px, ${par.y * -p.rate}px, 0)`,
            transition: 'transform .7s cubic-bezier(.2,.7,.3,1)',
          }}>
            <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{
              position: 'absolute', inset: 0, overflow: 'visible',
              opacity: dim ? 0.3 : 0.26,
            }}>
              <path
                d={r.d} pathLength={100} fill="none"
                stroke={LP_AMBER} strokeWidth={i === 0 ? 1.6 : 1.1}
                strokeLinecap="round" strokeDasharray="26 100"
                style={{
                  animation: `lp-route-draw ${r.dur}s cubic-bezier(.42,.06,.5,.96) infinite`,
                  animationDelay: `${r.delay}s`,
                }}
              />
            </svg>
            <div style={{
              position: 'absolute', top: 0, left: 0,
              offsetPath: `path("${r.d}")`,
              offsetRotate: 'auto 0deg',
              filter: p.blur ? `blur(${p.blur}px)` : 'none',
              animation: `lp-route-fly ${r.dur}s cubic-bezier(.42,.06,.5,.96) infinite`,
              animationDelay: `${r.delay}s`,
              willChange: 'offset-distance, opacity',
            }}>
              <div style={{ opacity: p.o, animation: `lp-bird-bob ${2.6 + i * 0.6}s ease-in-out infinite` }}>
                <RobinRunMark size={r.size}/>
              </div>
            </div>
          </div>
        );
      })}

      {/* ambient flock */}
      {ambient.map((b, i) => {
        const p = plane[b.depth];
        return (
          <div key={`a${i}`} style={{
            position: 'absolute', top: b.top, left: b.left,
            opacity: p.o * 0.85,
            filter: p.blur ? `blur(${p.blur}px)` : 'none',
            transform: `translate3d(${par.x * -p.rate}px, ${par.y * -p.rate}px, 0)`,
            transition: 'transform .8s cubic-bezier(.2,.7,.3,1)',
          }}>
            <div style={{
              animation: `lp-bird-arc-${b.path} ${b.dur}s cubic-bezier(.4,.1,.5,1) infinite`,
              animationDelay: `${b.delay}s`,
            }}>
              <div style={{ animation: `lp-bird-bob ${3 + i * 0.5}s ease-in-out infinite` }}>
                <RobinRunMark size={b.size}/>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}
function LPLockup({ size = 26, dark = false }) {
  const ink = dark ? LP_CREAM : LP_INK;
  return (
    <a href="#" style={{
      textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10,
      color: ink, transition: 'color .25s ease',
    }}>
      <RobinRunMark size={size * 1.45}/>
      <span style={{
        fontFamily: LP_FN, fontWeight: 800, fontSize: size,
        letterSpacing: '-0.02em', lineHeight: 1,
        transition: 'color .25s ease',
      }}>
        Robin<span style={{ color: LP_AMBER }}>Run</span>
      </span>
    </a>
  );
}

// ── Premium pill button ─────────────────────────────────────────────────────
function CTAPrimary({ children, size = 'md', as = 'a', href = 'https://app.robinrun.com/auth/signup', dark = false }) {
  const sizes = {
    sm: { padY: 10, padX: 18, fs: 14 },
    md: { padY: 14, padX: 22, fs: 15 },
    lg: { padY: 18, padX: 28, fs: 17 },
  };
  const s = sizes[size];
  const [hover, setHover] = React.useState(false);
  const Tag = as;
  return (
    <Tag href={href}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: `${s.padY}px ${s.padX}px`,
        background: hover ? LP_AMBER_DEEP : LP_AMBER,
        color: LP_CREAM, borderRadius: 999, border: 0,
        fontFamily: LP_FN, fontWeight: 800, fontSize: s.fs,
        letterSpacing: '-0.005em', cursor: 'pointer',
        textDecoration: 'none',
        boxShadow: hover
          ? `0 12px 32px rgba(249,115,22,0.45), 0 2px 0 rgba(255,255,255,0.18) inset`
          : `0 6px 20px rgba(249,115,22,0.32), 0 2px 0 rgba(255,255,255,0.18) inset`,
        transform: hover ? 'translateY(-1px)' : 'translateY(0)',
        transition: 'all .25s cubic-bezier(.2,.7,.3,1)',
      }}>
      {children}
    </Tag>
  );
}

function CTASecondary({ children, dark = false, href = 'site/demo.html' }) {
  const [hover, setHover] = React.useState(false);
  // quiet outlined glass: barely-there fill, hairline lit border, no heavy shadow
  const fg = dark ? LP_CREAM : LP_INK;
  const bg = dark
    ? (hover ? 'rgba(255,251,245,0.10)' : 'rgba(255,251,245,0.05)')
    : (hover ? 'rgba(28,16,9,0.05)' : 'rgba(28,16,9,0.025)');
  const bd = dark
    ? (hover ? 'rgba(255,251,245,0.34)' : 'rgba(255,251,245,0.22)')
    : (hover ? 'rgba(28,16,9,0.28)' : 'rgba(28,16,9,0.16)');
  const glassShadow = 'none';
  return (
    <a href={href}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative', overflow: 'hidden', isolation: 'isolate',
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '14px 22px',
        background: bg,
        backdropFilter: 'saturate(160%) blur(14px)',
        WebkitBackdropFilter: 'saturate(160%) blur(14px)',
        color: fg, borderRadius: 999, border: `1px solid ${bd}`,
        boxShadow: glassShadow,
        fontFamily: LP_FN, fontWeight: 700, fontSize: 15,
        cursor: 'pointer', textDecoration: 'none',
        transition: 'all .28s cubic-bezier(.2,.7,.3,1)',
      }}>
      <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        {children}
      </span>
    </a>
  );
}

// ── Sticky nav with backdrop blur ───────────────────────────────────────────
function LPNav({ variant = 'cream' }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const overDark = !scrolled && (variant === 'dark' || variant === 'gradient');
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { label: 'See it work', href: '#tour' },
    { label: 'Platform', href: '#platform' },
    { label: 'AI Studio', href: '#ai' },
    { label: 'Loyalty', href: '#loyalty' },
    { label: 'Pricing', href: '#pricing' },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled
        ? 'rgba(255,251,245,0.85)'
        : (overDark ? LP_INK : 'transparent'),
      backdropFilter: scrolled ? 'saturate(180%) blur(18px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(18px)' : 'none',
      borderBottom: scrolled ? `1px solid ${LP_BORDER}` : '1px solid transparent',
      transition: 'all .25s ease',
    }}>
      <div className="lp-container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingTop: scrolled ? 14 : 22, paddingBottom: scrolled ? 14 : 22,
        transition: 'padding .25s ease',
      }}>
        <LPLockup size={22} dark={overDark}/>
        <nav className="lp-nav-links" style={{
          display: 'flex', gap: 36, alignItems: 'center',
        }}>
          {links.map(l => (
            <a key={l.href} href={l.href} style={{
              fontFamily: LP_FB, fontWeight: 500, fontSize: 14.5,
              color: overDark ? 'rgba(255,251,245,0.78)' : LP_INK,
              textDecoration: 'none',
              transition: 'color .15s',
            }}
              onMouseEnter={e => e.currentTarget.style.color = LP_AMBER}
              onMouseLeave={e => e.currentTarget.style.color = overDark ? 'rgba(255,251,245,0.78)' : LP_INK}
            >{l.label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <a className="lp-nav-signin" href="https://app.robinrun.com/auth/login" style={{
            fontFamily: LP_FB, fontWeight: 600, fontSize: 14,
            color: overDark ? LP_CREAM : LP_INK, textDecoration: 'none', padding: '10px 14px',
          }}>Sign in</a>
          <span className="lp-nav-cta">
            <CTAPrimary size="sm" href="https://app.robinrun.com/auth/signup">
              Create your account <LPIcon name="arrow-right" size={14} sw={2}/>
            </CTAPrimary>
          </span>
          <button
            className="lp-nav-toggle"
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
            style={{
              display: 'none', width: 44, height: 44, borderRadius: 12,
              alignItems: 'center', justifyContent: 'center',
              background: menuOpen ? (overDark ? 'rgba(255,251,245,0.12)' : 'rgba(28,16,9,0.05)') : 'transparent',
              border: `1px solid ${overDark ? 'rgba(255,251,245,0.18)' : LP_BORDER}`,
              cursor: 'pointer', padding: 0,
            }}>
            <span style={{ display: 'block', width: 18, height: 12, position: 'relative' }}>
              {[0, 1, 2].map(i => (
                <span key={i} style={{
                  position: 'absolute', left: 0, height: 2, width: '100%', borderRadius: 2,
                  background: overDark ? LP_CREAM : LP_INK,
                  top: menuOpen ? 5 : i * 5,
                  opacity: menuOpen && i === 1 ? 0 : 1,
                  transform: menuOpen ? `rotate(${i === 0 ? 45 : i === 2 ? -45 : 0}deg)` : 'none',
                  transition: 'all .22s cubic-bezier(.2,.7,.3,1)',
                }}/>
              ))}
            </span>
          </button>
        </div>
      </div>
      {/* ── Mobile drawer ── */}
      <div className="lp-nav-drawer" style={{
        display: 'none', overflow: 'hidden',
        maxHeight: menuOpen ? 460 : 0,
        opacity: menuOpen ? 1 : 0,
        borderTop: menuOpen ? `1px solid ${LP_BORDER}` : '1px solid transparent',
        background: 'rgba(255,251,245,0.98)',
        backdropFilter: 'saturate(180%) blur(18px)',
        WebkitBackdropFilter: 'saturate(180%) blur(18px)',
        transition: 'max-height .3s cubic-bezier(.2,.7,.3,1), opacity .25s ease',
      }}>
        <div className="lp-container" style={{ paddingTop: 8, paddingBottom: 20 }}>
          <nav style={{ display: 'flex', flexDirection: 'column' }}>
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)} style={{
                fontFamily: LP_FN, fontWeight: 700, fontSize: 17, color: LP_INK,
                textDecoration: 'none', padding: '15px 0',
                borderBottom: `1px solid ${LP_BORDER}`,
              }}>{l.label}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 20 }}>
            <a href="https://app.robinrun.com/auth/signup" style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              padding: '15px 20px', borderRadius: 13, background: LP_AMBER, color: LP_CREAM,
              fontFamily: LP_FN, fontWeight: 800, fontSize: 15.5, textDecoration: 'none',
            }}>Create your account <LPIcon name="arrow-right" size={14} sw={2.2}/></a>
            <a href="https://app.robinrun.com/auth/login" style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '15px 20px', borderRadius: 13,
              border: `1px solid ${LP_BORDER_STRONG}`, color: LP_INK,
              fontFamily: LP_FN, fontWeight: 700, fontSize: 15, textDecoration: 'none',
            }}>Sign in</a>
          </div>
        </div>
      </div>
    </header>
  );
}

// ── Hero ────────────────────────────────────────────────────────────────────
function LPHero({ variant = 'cream' }) {
  const isDark = variant === 'dark';
  const isGrad = variant === 'gradient';
  const dim = isDark || isGrad;

  const bg = isDark
    ? LP_INK
    : isGrad
      ? `linear-gradient(180deg, ${LP_INK} 0%, #2a1a12 38%, #6b4a3a 70%, ${LP_CREAM} 100%)`
      : LP_CREAM;

  const headColor = dim ? LP_CREAM : LP_INK;
  const subColor = dim ? 'rgba(255,251,245,0.7)' : LP_MUTED;
  const trustColor = dim ? 'rgba(255,251,245,0.6)' : LP_DIM;
  const pillBg = dim ? 'rgba(255,251,245,0.08)' : LP_CREAM;
  const pillFg = dim ? LP_CREAM : LP_INK;
  const pillBorder = dim ? 'rgba(255,251,245,0.14)' : LP_BORDER;

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      paddingTop: 56, paddingBottom: 120,
      background: bg,
      transition: 'background .4s ease',
    }}>
      {/* Soft amber wash */}
      <div aria-hidden style={{
        position: 'absolute', right: -240, top: 200,
        width: 800, height: 800, borderRadius: '50%',
        background: dim
          ? `radial-gradient(circle, ${LP_AMBER}33 0%, ${LP_AMBER}12 30%, transparent 70%)`
          : `radial-gradient(circle, ${LP_AMBER_TINT} 0%, ${LP_AMBER_SOFT} 40%, transparent 70%)`,
        opacity: dim ? 0.9 : 0.7, zIndex: 0, pointerEvents: 'none',
      }}/>

      {/* Hero birds — fade in and out, subtle */}
      <FlyingBird dim={dim}/>

      <div className="lp-container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="lp-hero-grid">
          {/* Left: copy */}
          <div>
            <Reveal delay={0}>
              <a href="#tour" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '6px 6px 6px 14px', borderRadius: 999,
                background: pillBg, color: pillFg,
                border: `1px solid ${pillBorder}`,
                fontFamily: LP_FB, fontSize: 13, fontWeight: 500,
                textDecoration: 'none', marginBottom: 28,
                backdropFilter: dim ? 'blur(8px)' : 'none',
                WebkitBackdropFilter: dim ? 'blur(8px)' : 'none',
                boxShadow: dim ? 'none' : '0 2px 6px rgba(28,16,9,0.04)',
              }}>
                <span style={{
                  fontFamily: LP_FN, fontWeight: 800, fontSize: 11,
                  color: LP_AMBER_DEEP, textTransform: 'uppercase', letterSpacing: '0.08em',
                }}>New</span>
                <span>Now onboarding restaurants across the GTA</span>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 22, height: 22, borderRadius: 999, background: LP_INK, color: LP_CREAM,
                }}>
                  <LPIcon name="arrow-right" size={11} sw={2.4}/>
                </span>
              </a>
            </Reveal>

            <Reveal delay={80}>
              <h1 style={{
                fontFamily: LP_FN, fontWeight: 900,
                fontSize: 'clamp(48px, 6vw, 84px)',
                lineHeight: 0.96, letterSpacing: '-0.04em',
                margin: 0, color: headColor, textWrap: 'balance',
                transition: 'color .4s ease',
              }}>
                Run a busier<br/>
                kitchen.<br/>
                Keep <span style={{
                  color: LP_AMBER, fontStyle: 'italic',
                  background: dim
                    ? `linear-gradient(180deg, transparent 64%, rgba(249,115,22,0.22) 64%, rgba(249,115,22,0.22) 92%, transparent 92%)`
                    : `linear-gradient(180deg, transparent 64%, ${LP_AMBER_TINT} 64%, ${LP_AMBER_TINT} 92%, transparent 92%)`,
                }}>more</span> of it.
              </h1>
            </Reveal>

            <Reveal delay={160}>
              <p style={{
                marginTop: 26, fontSize: 19, lineHeight: 1.5,
                color: subColor, maxWidth: 520, textWrap: 'pretty',
                fontWeight: 400, transition: 'color .4s ease',
              }}>
                Commission-free pickup and dine-in ordering on a branded page that links right from your site, running on a single live dashboard. Built here in Mississauga, and taking on its first restaurants across the GTA now.
              </p>
            </Reveal>

            <Reveal delay={240}>
              <div style={{
                marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center',
              }}>
                <CTAPrimary size="lg" href="https://app.robinrun.com/auth/signup">
                  Create your account
                  <LPIcon name="arrow-right" size={16} sw={2.2}/>
                </CTAPrimary>
                <CTASecondary dark={dim} href="mailto:hello@robinrun.com?subject=RobinRun%20for%20my%20restaurant">
                  Talk to us
                </CTASecondary>
              </div>
            </Reveal>

            <Reveal delay={320}>
              <div style={{
                marginTop: 28, display: 'flex', gap: 24, alignItems: 'center',
                fontSize: 13, color: trustColor, flexWrap: 'wrap',
                transition: 'color .4s ease',
              }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <LPIcon name="check" size={14} stroke={LP_FOREST} sw={2.4}/> No commission on your orders
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <LPIcon name="check" size={14} stroke={LP_FOREST} sw={2.4}/> We set your menu up for you
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <LPIcon name="check" size={14} stroke={LP_FOREST} sw={2.4}/> No contract
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <LPIcon name="check" size={14} stroke={LP_FOREST} sw={2.4}/> No credit card required
                </span>
              </div>
            </Reveal>
          </div>

          {/* Right: layered product mockup */}
          <Reveal delay={360} y={36}>
            <HeroVisual/>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ── Hero visual: layered floating product panels ────────────────────────────
function HeroVisual() {
  // Subtle parallax on mouse move
  const wrapRef = React.useRef(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      setTilt({ x, y });
    };
    const onLeave = () => setTilt({ x: 0, y: 0 });
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  const tx = tilt.x * 8;
  const ty = tilt.y * 8;

  return (
    <div ref={wrapRef} className="lp-hero-visual" style={{
      position: 'relative', minHeight: 560, perspective: 1400,
    }}>
      {/* Main panel: order queue */}
      <div className="lp-hv-main" style={{
        position: 'absolute', top: 36, right: 0, width: 560, maxWidth: '100%',
        background: LP_CREAM, borderRadius: 18,
        border: `1px solid ${LP_BORDER}`,
        boxShadow: '0 32px 80px rgba(28,16,9,0.18), 0 4px 12px rgba(28,16,9,0.08)',
        overflow: 'hidden',
        transform: `translate(${tx * 0.4}px, ${ty * 0.4}px)`,
        transition: 'transform .35s cubic-bezier(.2,.7,.3,1)',
      }}>
        <MockOrderQueue/>
      </div>

      {/* Floating: revenue card top-left */}
      <div className="lp-hv-float" style={{
        position: 'absolute', top: 0, left: -10, width: 240,
        color: LP_CREAM, borderRadius: 14,
        padding: '18px 20px',
        background: 'rgba(28,16,9,0.62)',
        backdropFilter: 'saturate(200%) blur(22px)',
        WebkitBackdropFilter: 'saturate(200%) blur(22px)',
        border: '1px solid rgba(255,251,245,0.14)',
        boxShadow:
          '0 24px 56px rgba(28,16,9,0.4),' +
          ' inset 0 1px 0 rgba(255,251,245,0.22),' +
          ' inset 0 -1px 0 rgba(28,16,9,0.4)',
        transform: `translate(${tx * 1.0}px, ${ty * 1.0}px)`,
        transition: 'transform .35s cubic-bezier(.2,.7,.3,1)',
        zIndex: 2,
        overflow: 'hidden',
      }}>
        {/* glass highlight sheen */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0, borderRadius: 14,
          background: 'linear-gradient(135deg, rgba(255,251,245,0.14) 0%, rgba(255,251,245,0) 40%, rgba(255,251,245,0) 60%, rgba(255,251,245,0.06) 100%)',
          pointerEvents: 'none',
        }}/>
        <div style={{ position: 'relative' }}>
          <div style={{
            fontFamily: LP_FM, fontSize: 10, color: 'rgba(255,251,245,0.65)',
            letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8,
          }}>Today · revenue</div>
          <div style={{
            fontFamily: LP_FN, fontWeight: 900, fontSize: 34, lineHeight: 1,
            letterSpacing: '-0.02em',
          }}>$4,847</div>
          <div style={{
            marginTop: 8, fontSize: 12, color: '#86EFAC', fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            ↑ 18% vs. yesterday
          </div>
          {/* sparkline */}
          <svg viewBox="0 0 200 40" style={{ width: '100%', height: 40, marginTop: 10 }}>
            <path d="M0 30 L20 28 L40 26 L60 22 L80 24 L100 18 L120 16 L140 14 L160 11 L180 7 L200 4"
                  fill="none" stroke={LP_AMBER} strokeWidth="2" strokeLinecap="round"/>
            <path d="M0 30 L20 28 L40 26 L60 22 L80 24 L100 18 L120 16 L140 14 L160 11 L180 7 L200 4 L200 40 L0 40 Z"
                  fill={LP_AMBER} opacity="0.16"/>
          </svg>
        </div>
      </div>

      {/* Floating: AI suggestion bottom-left */}
      <div className="lp-hv-float" style={{
        position: 'absolute', bottom: 30, left: -20, width: 280,
        background: LP_CREAM, borderRadius: 14,
        border: `1px solid ${LP_BORDER}`,
        padding: '16px 18px',
        boxShadow: '0 24px 48px rgba(28,16,9,0.15)',
        transform: `translate(${tx * 1.2}px, ${ty * 1.2}px)`,
        transition: 'transform .35s cubic-bezier(.2,.7,.3,1)',
        zIndex: 3,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10,
        }}>
          <div style={{
            width: 26, height: 26, borderRadius: 7,
            background: `linear-gradient(135deg, ${LP_AMBER}, ${LP_BERRY})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: LP_CREAM,
          }}>
            <LPIcon name="bell" size={14} sw={2}/>
          </div>
          <span style={{
            fontFamily: LP_FN, fontWeight: 800, fontSize: 13,
            letterSpacing: '-0.01em',
          }}>Order alarm</span>
        </div>
        <div style={{ fontSize: 12.5, color: LP_MUTED, lineHeight: 1.45, marginBottom: 10 }}>
          New pickup order in. Ringing until someone accepts it.
        </div>
        <div style={{
          display: 'flex', gap: 6, alignItems: 'center',
        }}>
          <button style={{
            padding: '6px 12px', border: 0, borderRadius: 7,
            background: LP_INK, color: LP_CREAM,
            fontFamily: LP_FB, fontSize: 11, fontWeight: 600, cursor: 'pointer',
          }}>Accept</button>
          <button style={{
            padding: '6px 10px', border: `1px solid ${LP_BORDER}`,
            borderRadius: 7, background: 'transparent',
            fontFamily: LP_FB, fontSize: 11, fontWeight: 500, color: LP_MUTED, cursor: 'pointer',
          }}>View</button>
        </div>
      </div>

      {/* Floating: loyalty bottom-right */}
      <div className="lp-hv-float" style={{
        position: 'absolute', bottom: -20, right: 40, width: 220,
        background: LP_CREAM, borderRadius: 14,
        border: `1px solid ${LP_BORDER}`,
        padding: '14px 16px',
        boxShadow: '0 24px 48px rgba(28,16,9,0.15)',
        transform: `translate(${tx * 0.8}px, ${ty * 0.8}px)`,
        transition: 'transform .35s cubic-bezier(.2,.7,.3,1)',
        zIndex: 2,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6,
        }}>
          <div style={{
            width: 24, height: 24, borderRadius: '50%',
            background: LP_BERRY,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: LP_CREAM,
          }}>
            <LPIcon name="check" size={12} sw={2.4}/>
          </div>
          <span style={{
            fontFamily: LP_FN, fontWeight: 800, fontSize: 13,
          }}>Commission kept</span>
        </div>
        <div style={{
          fontFamily: LP_FN, fontWeight: 900, fontSize: 22,
          letterSpacing: '-0.02em', color: LP_INK,
        }}>
          $<CountUp to={1240} duration={1800}/>
        </div>
        <div style={{ fontSize: 11, color: LP_DIM, marginTop: 2 }}>sample month, at 0% commission</div>
      </div>
    </div>
  );
}

// MockOrderQueue is defined in landing-mockups.jsx and made global there.
// Same for MockAIStudio, MockLoyaltyCampaign.

Object.assign(window, {
  LP_INK, LP_INK_2, LP_AMBER, LP_AMBER_DEEP, LP_AMBER_TINT, LP_AMBER_SOFT,
  LP_CREAM, LP_PAPER, LP_MUTED, LP_DIM, LP_SUBTLE, LP_BORDER, LP_BORDER_STRONG,
  LP_FOREST, LP_BERRY, LP_FN, LP_FB, LP_FM,
  useReveal, Reveal, CountUp, LPIcon, LPLockup, CTAPrimary, CTASecondary,
  LPNav, LPHero, HeroVisual,
});