// Quick routes — four large tappable tiles directly under the hero so visitors
// reach the right service in one click. Gentle 3D tilt on hover (pointer only,
// disabled for reduced motion).
const { useRef: useRefQn, useCallback: useCallbackQn } = React;

// Deliberately mixed treatments (white / navy / white / gold) and a slight
// desktop stagger so the row reads as a hand-set composition, not a template.
const QUICK_ROUTES = [
  { icon: 'fileText', title: 'Make or update a Will', sub: 'Online or at your home, in plain English.', href: 'wills.html', page: true },
  { icon: 'heartHandshake', title: 'Lasting Power of Attorney', sub: 'Our most requested service, at home or online.', href: 'lasting-power-of-attorney.html', chip: 'Most popular', navy: true, page: true },
  { icon: 'shieldCheck', title: 'Protect your home with Trusts', sub: 'Family, property and lifetime trusts.', href: 'trusts.html', page: true },
  { icon: 'sparkles', title: 'Not sure where to start?', sub: 'Three questions, a clear answer, under a minute.', href: '#service-finder', gold: true },
];

function useTilt(max = 4) {
  const ref = useRefQn(null);
  const reduced = usePrefersReducedMotion();
  const onMove = useCallbackQn((e) => {
    if (reduced) return;
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `perspective(700px) rotateX(${(-py * max).toFixed(2)}deg) rotateY(${(px * max).toFixed(2)}deg) translateY(-3px)`;
  }, [reduced, max]);
  const onLeave = useCallbackQn(() => {
    const el = ref.current;
    if (el) el.style.transform = 'perspective(700px) rotateX(0deg) rotateY(0deg) translateY(0)';
  }, []);
  return { ref, onMouseMove: onMove, onMouseLeave: onLeave };
}

function QuickTile({ r, delay, stagger }) {
  const tilt = useTilt(4);
  return (
    <Reveal delay={delay} className={'h-full ' + (stagger ? 'lg:mt-7' : '')}>
      <a
        ref={tilt.ref}
        onMouseMove={tilt.onMouseMove}
        onMouseLeave={tilt.onMouseLeave}
        href={r.href}
        onClick={(e) => {
          if (r.page) return; // navigate normally to the service subpage
          if (r.cat && window.__openService) { e.preventDefault(); window.__openService(r.cat); }
          else smoothTo(e, r.href);
        }}
        {...(r.navy ? { 'data-dark': 'true' } : {})}
        className="group relative flex h-full flex-col rounded-2xl p-6"
        style={{
          background: r.navy
            ? 'linear-gradient(150deg, #1A3066, #2C4A8F)'
            : r.gold
              ? 'linear-gradient(150deg, #FFF6DF, #FFE9B3)'
              : '#fff',
          boxShadow: r.navy ? '0 28px 64px -34px rgba(26,48,102,0.7)' : '0 22px 56px -34px rgba(26,48,102,0.45)',
          border: r.navy ? 'none' : r.gold ? '1.5px solid rgba(240,184,60,0.55)' : '1px solid rgba(26,48,102,0.07)',
          transition: 'transform 320ms ' + EASE + ', box-shadow 320ms ' + EASE,
          willChange: 'transform',
        }}
      >
        {r.chip ? (
          <span className="absolute right-4 top-4 rounded-full px-2.5 py-1 font-sans font-semibold uppercase" style={{ fontSize: 10, letterSpacing: '0.1em', background: '#FFCC57', color: '#1A3066' }}>
            {r.chip}
          </span>
        ) : null}
        <span className="ico-hover inline-flex h-12 w-12 items-center justify-center rounded-full" style={{
          background: r.navy ? 'rgba(255,204,87,0.16)' : r.gold ? '#fff' : '#EAF1FA',
          color: r.navy ? '#FFCC57' : r.gold ? '#C9912A' : '#4A6FA4',
        }}>
          <Icon name={r.icon} size={24} strokeWidth={1.8} />
        </span>
        <span className={'mt-4 font-display font-normal ' + (r.navy ? 'text-white' : 'text-navy')} style={{ fontSize: 19, lineHeight: 1.25, letterSpacing: '-0.01em' }}>{r.title}</span>
        <span className={'mt-1.5 flex-1 font-sans ' + (r.navy ? '' : 'text-stone')} style={{ fontSize: 13.5, lineHeight: 1.5, color: r.navy ? 'rgba(255,255,255,0.8)' : undefined }}>{r.sub}</span>
        <span className="mt-4 inline-flex items-center gap-1.5 font-sans font-semibold" style={{ fontSize: 13.5, color: r.navy ? '#FFCC57' : r.gold ? '#C9912A' : '#4A6FA4' }}>
          <span className="fp-underline">{r.gold ? 'Try the finder' : 'See how we help'}</span>
          <span style={{ display: 'inline-flex', transition: 'transform 280ms ' + EASE }} className="group-hover:translate-x-1">
            <Icon name="arrowRight" size={15} strokeWidth={2.2} />
          </span>
        </span>
      </a>
    </Reveal>
  );
}

function QuickRoutes() {
  return (
    <section id="quick-help" className="relative overflow-hidden bg-paper" style={{ paddingTop: 'clamp(36px,5vw,56px)', paddingBottom: 'clamp(40px,6vw,64px)' }}>
      <Grain opacity={0.03} />
      <div className="relative mx-auto max-w-[1180px] px-5 sm:px-7">
        <Reveal as="h2" className="text-center font-display font-normal text-navy" style={{ fontSize: 'clamp(22px,3vw,28px)', letterSpacing: '-0.01em' }}>
          What brings you here today?
        </Reveal>
        <div className="mt-7 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {QUICK_ROUTES.map((r, i) => <QuickTile key={r.title} r={r} delay={i * 80} stagger={i % 2 === 1} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { QuickRoutes });