// Services — 6 cards, responsive 1/2/3 cols, hover lift + icon tint, nudging arrow link.
const SERVICES_DATA = [
  { icon: 'monitor', tone: 'blue', title: 'Online Wills', body: 'Expert one-to-one advice over a video call. Ideal for busy schedules or anyone further afield.', href: 'https://futuraplanning.co.uk/services/make-a-will-online/' },
  { icon: 'home', tone: 'coral', title: 'Home Visit Wills', body: 'We come to you. A relaxed, face-to-face conversation in the comfort of your own home.', href: 'https://futuraplanning.co.uk/services/make-a-will-at-home/' },
  { icon: 'shieldCheck', tone: 'gold', title: 'Family & Property Trusts', body: 'Protect your home and assets and add flexibility, so loved ones inherit exactly as you intend.', href: 'https://futuraplanning.co.uk/services/family-property-trusts/' },
  { icon: 'heartHandshake', tone: 'blue', title: 'Lasting Power of Attorney', body: 'Give people you trust the legal power to act for you if you ever cannot. We handle the paperwork.', href: 'https://futuraplanning.co.uk/services/lasting-power-of-attorney-lpa/' },
  { icon: 'landmark', tone: 'coral', title: 'Lifetime Trusts', body: 'A flexible way to protect your home for future generations and avoid the delays of probate.', href: 'https://futuraplanning.co.uk/services/lifetime-trusts/' },
  { icon: 'lock', tone: 'gold', title: 'Will Storage & Updates', body: 'Secure storage and easy updates, so your Will is always safe, current and exactly where it should be.', href: 'https://futuraplanning.co.uk/services/will-storage-and-updates/' },
];

const TONES = {
  blue: { bg: '#EAF1FA', bgHover: '#D8E6F8', fg: '#4A6FA4' },
  coral: { bg: 'rgba(244,104,95,0.13)', bgHover: 'rgba(244,104,95,0.22)', fg: '#E0564D' },
  gold: { bg: 'rgba(255,204,87,0.22)', bgHover: 'rgba(255,204,87,0.36)', fg: '#C9912A' },
};

function ServiceCard({ s, delay }) {
  const reduced = usePrefersReducedMotion();
  const t = TONES[s.tone];
  return (
    <Reveal delay={delay}>
      <a
        href={s.href}
        target="_blank"
        rel="noopener noreferrer"
        className="group flex h-full flex-col rounded-2xl bg-white p-7"
        style={{ boxShadow: '0 22px 56px -34px rgba(26,48,102,0.45)', transition: 'transform 320ms ' + EASE + ', box-shadow 320ms ' + EASE }}
        onMouseEnter={(e) => {
          if (!reduced) { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 32px 70px -34px rgba(26,48,102,0.5)'; }
          const b = e.currentTarget.querySelector('[data-badge]'); if (b) b.style.background = t.bgHover;
          const a = e.currentTarget.querySelector('[data-arrow]'); if (a && !reduced) a.style.transform = 'translateX(4px)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 22px 56px -34px rgba(26,48,102,0.45)';
          const b = e.currentTarget.querySelector('[data-badge]'); if (b) b.style.background = t.bg;
          const a = e.currentTarget.querySelector('[data-arrow]'); if (a) a.style.transform = 'translateX(0)';
        }}
      >
        <span data-badge className="inline-flex h-14 w-14 items-center justify-center rounded-full" style={{ background: t.bg, color: t.fg, transition: 'background-color 320ms ' + EASE }}>
          <Icon name={s.icon} size={26} strokeWidth={1.7} />
        </span>
        <h3 className="mt-5 font-display font-normal text-navy" style={{ fontSize: 20, letterSpacing: '-0.01em' }}>{s.title}</h3>
        <p className="mt-2 flex-1 font-sans text-ink" style={{ fontSize: 14, lineHeight: 1.6 }}>{s.body}</p>
        <span className="mt-5 inline-flex items-center gap-1.5 font-sans font-semibold text-gold-deep" style={{ fontSize: 14 }}>
          Learn more
          <span data-arrow style={{ display: 'inline-flex', transition: 'transform 280ms ' + EASE }}>
            <Icon name="arrowRight" size={16} strokeWidth={2.2} />
          </span>
        </span>
      </a>
    </Reveal>
  );
}

function Services() {
  return (
    <section id="services" className="relative overflow-hidden bg-blue-light" style={{ paddingTop: 'clamp(72px,10vw,116px)', paddingBottom: 'clamp(72px,10vw,116px)' }}>
      <Grain opacity={0.04} />
      <Blob color="#FFCC57" size={340} opacity={0.16} blur={10} speed={30} rotate={6} style={{ top: '-90px', right: '-80px' }} />
      <Blob color="#F4685F" size={280} opacity={0.12} blur={10} speed={-24} rotate={-5} style={{ bottom: '60px', left: '-110px' }} />

      <div className="relative mx-auto max-w-[1180px] px-5 sm:px-7">
        <Reveal className="max-w-[640px]">
          <p className="font-sans font-semibold uppercase text-gold-deep" style={{ fontSize: 13, letterSpacing: '0.18em' }}>Our services</p>
          <h2 className="mt-3 font-display font-normal text-navy" style={{ fontSize: 'clamp(32px,4.5vw,48px)', lineHeight: 1.12, letterSpacing: '-0.01em' }}>
            More than Wills: full estate planning
          </h2>
          <p className="mt-4 font-sans text-stone" style={{ fontSize: 17, lineHeight: 1.6, maxWidth: '56ch' }}>
            From a simple Will to trusts and Lasting Power of Attorney, we help you put the right protections in place for the people and things you care about.
          </p>
        </Reveal>

        <div className="mt-11 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {SERVICES_DATA.map((s, i) => <ServiceCard key={s.title} s={s} delay={(i % 3) * 90} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });