// Process — three numbered step cards, hover lift, gold number circle + line icon.
const PROCESS_STEPS = [
  { n: 1, icon: 'messageCircle', title: 'Talk with us', body: 'We ask about your situation and wishes, face to face or online, at a time that suits you. No jargon, no pressure.' },
  { n: 2, icon: 'fileText', title: 'We draft your Will', body: 'Our qualified professional drafts your Will in plain English, with all the legal detail properly handled.' },
  { n: 3, icon: 'penLine', title: 'Sign and store', body: 'Sign with two witnesses, and we can securely store your Will so it is never lost or damaged.' },
];

function ProcessCard({ step, delay }) {
  const reduced = usePrefersReducedMotion();
  return (
    <Reveal delay={delay}>
      <div
        className="flex h-full flex-col rounded-2xl bg-white p-7"
        style={{ boxShadow: '0 24px 60px -34px rgba(26,48,102,0.45)', transition: 'transform 300ms ' + EASE + ', box-shadow 300ms ' + EASE }}
        onMouseEnter={(e) => { if (reduced) return; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 34px 70px -34px rgba(26,48,102,0.5)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 24px 60px -34px rgba(26,48,102,0.45)'; }}
      >
        <div className="flex items-center gap-4">
          <span className="inline-flex h-12 w-12 items-center justify-center rounded-full font-display text-[20px] text-navy" style={{ background: 'linear-gradient(140deg,#FFCC57,#F0B83C)', boxShadow: '0 10px 20px -10px rgba(240,184,60,0.8)' }}>
            {step.n}
          </span>
          <span className="inline-flex h-11 w-11 items-center justify-center rounded-xl text-blue" style={{ background: '#EAF1FA' }}>
            <Icon name={step.icon} size={22} strokeWidth={1.8} />
          </span>
        </div>
        <h3 className="mt-5 font-display font-normal text-navy" style={{ fontSize: 20, letterSpacing: '-0.01em' }}>{step.title}</h3>
        <p className="mt-2 font-sans text-ink" style={{ fontSize: 15, lineHeight: 1.6 }}>{step.body}</p>
      </div>
    </Reveal>
  );
}

function Process() {
  return (
    <section id="process" className="relative overflow-hidden bg-paper" style={{ paddingTop: 'clamp(72px,10vw,116px)', paddingBottom: 'clamp(72px,10vw,116px)' }}>
      <Grain opacity={0.035} />
      <Blob color="#EAF1FA" size={360} opacity={0.8} blur={8} speed={24} rotate={5} style={{ top: '-100px', right: '-90px' }} />
      <Blob color="#FFCC57" size={240} opacity={0.16} blur={9} speed={-20} rotate={-5} style={{ bottom: '40px', left: '-80px' }} />

      <div className="relative mx-auto max-w-[1100px] px-5 sm:px-7">
        <Reveal className="text-center">
          <p className="font-sans font-semibold uppercase text-gold-deep" style={{ fontSize: 13, letterSpacing: '0.18em' }}>How it works</p>
          <h2 className="mx-auto mt-3 font-display font-normal text-navy" style={{ fontSize: 'clamp(30px,4.2vw,46px)', lineHeight: 1.12, letterSpacing: '-0.01em', maxWidth: '20ch' }}>
            Friendly, straightforward Will writing
          </h2>
        </Reveal>

        <div className="mt-12 grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-6">
          {PROCESS_STEPS.map((s, i) => (
            <ProcessCard key={s.n} step={s} delay={i * 110} />
          ))}
        </div>

        <Reveal delay={160} className="mt-12 flex justify-center">
          <a
            href="#contact"
            onClick={(e) => smoothTo(e, '#contact')}
            className="inline-flex items-center justify-center rounded-full bg-gold px-8 py-4 font-sans font-semibold text-[17px] text-navy hover:bg-gold-deep"
            style={{ boxShadow: '0 14px 30px -12px rgba(240,184,60,0.85)', transition: 'background-color 250ms ' + EASE }}
          >
            Start with a free chat
          </a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Process });