// Why choose us + intro video. Video left, copy + benefit rows right (stack on mobile).
const WHY_BENEFITS = [
  { title: 'Plain English, never jargon', sub: 'We explain every option clearly, in words that make sense.' },
  { title: 'In person or online, your choice', sub: 'Home visits across Somerset, or a video call anywhere.' },
  { title: 'Fully qualified and insured (Society of Will Writers)', sub: 'Held to recognised professional standards.' },
  { title: 'Local to Somerset, trusted by families', sub: 'Based near Weston-super-Mare, serving the South West.' },
];

function WhyChoose() {
  const mag = useMagnetic(3);
  return (
    <section id="why" 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: '-80px', left: '-90px' }} />
      <Blob color="#FFCC57" size={240} opacity={0.15} blur={9} speed={-20} rotate={-5} style={{ bottom: '40px', right: '-70px' }} />

      <div className="relative mx-auto grid max-w-[1180px] grid-cols-1 items-center gap-10 px-5 sm:px-7 lg:grid-cols-2 lg:gap-16">
        {/* Video */}
        <Reveal>
          <div className="relative overflow-hidden rounded-2xl" style={{ boxShadow: '0 34px 80px -36px rgba(26,48,102,0.5)', aspectRatio: '16 / 9', background: 'linear-gradient(155deg,#EAF1FA,#1A3066)' }}>
            <iframe
              src="https://www.youtube.com/embed/7yninXGL94g"
              title="Futura Planning in 20 seconds"
              loading="lazy"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
            ></iframe>
          </div>
        </Reveal>

        {/* Copy */}
        <Reveal delay={100}>
          <p className="font-sans font-semibold uppercase text-gold-deep" style={{ fontSize: 13, letterSpacing: '0.18em' }}>Why Futura</p>
          <h2 className="mt-3 font-display font-normal text-navy" style={{ fontSize: 'clamp(30px,4vw,44px)', lineHeight: 1.12, letterSpacing: '-0.01em' }}>
            Friendly experts who make it easy
          </h2>
          <p className="mt-4 font-sans text-ink" style={{ fontSize: 16, lineHeight: 1.65, maxWidth: '52ch' }}>
            We take the time to understand your situation and explain everything in plain English, so you always feel in control. No pressure, just clear advice from people who do this every day.
          </p>

          <div className="mt-7 flex flex-col gap-4">
            {WHY_BENEFITS.map((b) => (
              <div key={b.title} className="flex items-start gap-3.5">
                <span className="mt-0.5 inline-flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full" style={{ background: 'linear-gradient(140deg,#FFCC57,#F0B83C)', color: '#1A3066', boxShadow: '0 6px 14px -6px rgba(240,184,60,0.8)' }}>
                  <Icon name="check" size={15} strokeWidth={3} />
                </span>
                <span>
                  <span className="block font-sans font-medium text-navy" style={{ fontSize: 15, lineHeight: 1.35 }}>{b.title}</span>
                  <span className="block font-sans text-stone" style={{ fontSize: 13.5, lineHeight: 1.45, marginTop: 2 }}>{b.sub}</span>
                </span>
              </div>
            ))}
          </div>

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

Object.assign(window, { WhyChoose });