// 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.' },
];

// Click-to-play facade: the video presents as a branded poster with a gold play
// button; the YouTube player (no-cookie domain, no related videos) only loads
// after the visitor chooses to play. Faster page load, calmer look.
const { useState: useStateWy } = React;

function VideoFacade({ videoId, title }) {
  const [playing, setPlaying] = useStateWy(false);
  const [thumbFailed, setThumbFailed] = useStateWy(false);

  if (playing) {
    return (
      <iframe
        src={'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1&rel=0&modestbranding=1'}
        title={title}
        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>
    );
  }

  return (
    <button
      type="button"
      onClick={() => setPlaying(true)}
      aria-label={'Play video: ' + title}
      className="group absolute inset-0 block w-full cursor-pointer"
      style={{ border: 0, padding: 0, background: 'transparent' }}
    >
      {/* Poster: YouTube thumbnail with brand-gradient fallback */}
      {thumbFailed ? (
        <span aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(155deg, #2C4A8F, #1A3066)' }} />
      ) : (
        <img
          src={'https://i.ytimg.com/vi/' + videoId + '/hqdefault.jpg'}
          alt=""
          loading="lazy"
          referrerPolicy="no-referrer"
          onError={() => setThumbFailed(true)}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
        />
      )}
      {/* Navy scrim so the poster sits inside the brand world */}
      <span aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(170deg, rgba(26,48,102,0.5), rgba(26,48,102,0.72))' }} />

      <span className="relative flex h-full w-full flex-col items-center justify-center gap-3">
        <span
          className="inline-flex h-[72px] w-[72px] items-center justify-center rounded-full"
          style={{
            background: 'linear-gradient(140deg,#FFCC57,#F0B83C)',
            color: '#1A3066',
            boxShadow: '0 18px 40px -12px rgba(240,184,60,0.8)',
            transition: 'transform 280ms ' + EASE,
          }}
        >
          {/* Play triangle */}
          <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ marginLeft: 3 }}>
            <path d="M8 5.14v13.72c0 .8.87 1.3 1.56.88l11-6.86a1.03 1.03 0 0 0 0-1.76l-11-6.86A1.03 1.03 0 0 0 8 5.14z" />
          </svg>
        </span>
        <span className="font-sans font-semibold text-white" style={{ fontSize: 15, textShadow: '0 1px 10px rgba(15,26,60,0.5)' }}>
          {title}
        </span>
      </span>
    </button>
  );
}

function WhyChoose() {
  const mag = useMagnetic(3);
  return (
    <section id="why" className="relative overflow-hidden bg-cream" style={{ paddingTop: 'clamp(56px,8vw,92px)', paddingBottom: 'clamp(56px,8vw,92px)' }}>
      <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)' }}>
            <VideoFacade videoId="7yninXGL94g" title="Watch: Futura Planning in 20 seconds" />
          </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 });