// Without a Will — calm, serious risk grid on navy.
const RISKS = [
  { icon: 'userX', label: 'Unmarried partner gets nothing' },
  { icon: 'pound', label: 'Unnecessary inheritance tax' },
  { icon: 'scale', label: 'A court decides who raises children' },
  { icon: 'clock', label: 'Long delays in administration' },
  { icon: 'users', label: 'Family disputes and conflict' },
  { icon: 'heartCrack', label: 'Children from a first marriage disinherited' },
];

function Risks() {
  return (
    <section id="why-it-matters" className="relative overflow-hidden" style={{ background: 'linear-gradient(165deg,#1A3066,#22386F)', paddingTop: 'clamp(72px,10vw,116px)', paddingBottom: 'clamp(72px,10vw,116px)' }}>
      <Grain opacity={0.07} />
      <Blob color="#F4685F" size={360} opacity={0.16} blur={12} speed={30} rotate={6} style={{ top: '-110px', left: '-90px' }} />
      <Blob color="#FFCC57" size={280} opacity={0.12} blur={11} speed={-22} rotate={-5} style={{ bottom: '-80px', right: '-70px' }} />

      <div className="relative mx-auto max-w-[1040px] px-5 text-center sm:px-7">
        <Reveal as="h2" className="mx-auto font-display font-normal text-paper" style={{ fontSize: 'clamp(30px,4.5vw,46px)', lineHeight: 1.12, letterSpacing: '-0.01em', maxWidth: '20ch' }}>
          If you pass away without a Will...
        </Reveal>
        <Reveal delay={90} as="p" className="mx-auto mt-4 font-sans" style={{ fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.85)', maxWidth: '60ch' }}>
          Many people assume everything simply passes to the right person. Too often it does not. Without a valid Will, the law decides, and the results can be costly and painful.
        </Reveal>

        <Reveal delay={150} className="mt-11 grid grid-cols-2 gap-4 sm:gap-5 lg:grid-cols-3">
          {RISKS.map((r) => (
            <div key={r.label} className="flex flex-col items-center gap-3 rounded-2xl px-4 py-7 text-center" style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)' }}>
              <span className="inline-flex h-12 w-12 items-center justify-center rounded-full" style={{ background: 'rgba(244,104,95,0.16)', color: '#F4685F' }}>
                <Icon name={r.icon} size={24} strokeWidth={1.8} />
              </span>
              <span className="font-sans font-medium text-paper" style={{ fontSize: 15, lineHeight: 1.4, textWrap: 'balance' }}>{r.label}</span>
            </div>
          ))}
        </Reveal>

        <Reveal delay={220} className="mt-11 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 16px 34px -14px rgba(240,184,60,0.9)', transition: 'background-color 250ms ' + EASE }}
          >
            Protect your family, start today
          </a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Risks });