// Image with graceful fallback: on error, hide the img and reveal a soft
// blue-light→navy gradient so nothing ever appears broken.
const { useState: useStateHero, useRef: useRefHero } = React;
const useEffectHero = React.useLayoutEffect;

function SmartImage({ src, alt, className = '', style = {}, imgClassName = '', referrerPolicy = 'no-referrer', objectFit = 'cover', loading = 'lazy' }) {
  const [failed, setFailed] = useStateHero(false);
  return (
    <div className={className} style={{ position: 'relative', overflow: 'hidden', ...style }}>
      {failed ? (
        <div aria-label={alt} role="img" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(155deg, #EAF1FA 0%, #4A6FA4 60%, #1A3066 100%)' }}>
          <div aria-hidden="true" style={{ position: 'absolute', top: '14%', left: '12%', width: '46%', height: '46%', borderRadius: '46% 54% 57% 43% / 52% 41% 59% 48%', background: 'rgba(255,255,255,0.18)', filter: 'blur(10px)' }} />
        </div>
      ) : (
        <img
          src={src}
          alt={alt}
          loading={loading}
          referrerPolicy={referrerPolicy}
          onError={() => setFailed(true)}
          className={imgClassName}
          style={{ width: '100%', height: '100%', objectFit, display: 'block' }}
        />
      )}
    </div>
  );
}

// Compact hero callback request removed per request; the full enquiry form lives at #contact.

function Hero() {
  const reduced = usePrefersReducedMotion();
  const staticRender = useStaticRender();

  const words = [
    { t: 'Together,' }, { t: "let's" }, { t: 'create' },
    { t: 'Your', i: true }, { t: 'Will,' },
    { t: 'Your', i: true }, { t: 'Way' },
  ];
  const entr = (delay, name = 'riseIn', dur = 600) =>
    staticRender ? {} : { animation: `${name} ${dur}ms ${EASE} ${delay}ms both` };
  const mag = useMagnetic(3);

  return (
    <section id="top" className="relative overflow-hidden bg-blue-light" style={{ paddingTop: 'clamp(116px,16vh,168px)', paddingBottom: 'clamp(56px,9vh,104px)' }}>
      <Grain opacity={0.04} />
      <Blob color="#F4685F" size={420} opacity={0.16} blur={10} speed={36} rotate={7} style={{ top: '-90px', right: '-120px', borderRadius: '46% 54% 57% 43% / 52% 41% 59% 48%' }} />
      <Blob color="#FFCC57" size={300} opacity={0.22} blur={8} speed={26} rotate={-5} style={{ bottom: '-80px', left: '-90px' }} />
      <Blob color="#FFFFFF" size={360} opacity={0.5} blur={6} speed={18} rotate={4} style={{ top: '36%', left: '40%' }} />

      <div className="relative mx-auto grid max-w-[1280px] grid-cols-1 items-center gap-12 px-5 sm:px-7 md:grid-cols-12 lg:gap-8" style={{ minHeight: 'min(88vh, 760px)' }}>
        {/* Text */}
        <div className="md:col-span-6 lg:pr-6">
          <h1 className="font-display font-normal text-navy" style={{ fontSize: 'clamp(40px,5.5vw,76px)', lineHeight: 1.05, letterSpacing: '-0.01em' }}>
            {words.map((w, i) => (
              <span key={i} style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'top' }}>
                <span
                  className="hero-anim"
                  style={{
                    display: 'inline-block',
                    fontStyle: w.i ? 'italic' : 'normal',
                    color: w.i ? '#4A6FA4' : '#1A3066',
                    ...entr(150 + i * 90),
                  }}
                >
                  {w.t}
                </span>
                {i < words.length - 1 ? '\u00A0' : ''}
              </span>
            ))}
          </h1>

          <p className="hero-anim mt-5 font-sans text-ink" style={{ fontSize: 18, lineHeight: 1.65, maxWidth: '52ch', ...entr(400) }}>
            Specialists in Will writing and estate planning near Weston-super-Mare, North Somerset. We help families across Somerset, Bristol and beyond protect their loved ones, in person or online, with friendly, plain-English advice.
          </p>

          <div className="hero-anim mt-8 flex flex-col gap-3 sm:flex-row sm:items-center" style={entr(600)}>
            <a
              ref={mag.ref}
              onMouseMove={mag.onMouseMove}
              onMouseLeave={mag.onMouseLeave}
              href="#contact"
              onClick={(e) => smoothTo(e, '#contact')}
              className="inline-flex items-center justify-center rounded-full bg-gold px-7 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: 'transform 250ms ' + EASE + ', background-color 250ms ' + EASE }}
            >
              Get my free quote
            </a>
            <a
              href="#process"
              onClick={(e) => smoothTo(e, '#process')}
              className="inline-flex items-center justify-center rounded-full px-7 py-4 font-sans font-semibold text-[17px] text-navy ring-1.5"
              style={{ boxShadow: 'inset 0 0 0 1.5px #1A3066', transition: 'background-color 250ms ' + EASE }}
              onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(26,48,102,0.06)')}
              onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
            >
              How it works
            </a>
          </div>

          <p className="hero-anim mt-5 flex items-center gap-2 font-sans font-medium text-[14px] text-stone" style={entr(720)}>
            <span className="inline-flex h-5 w-5 items-center justify-center rounded-full" style={{ background: '#1A3066', color: '#fff' }}>
              <Icon name="check" size={13} strokeWidth={3} />
            </span>
            Free initial chat. No obligation. Home visits or online.
          </p>
        </div>

        {/* Illustration */}
        <div className="md:col-span-6">
          <div
            className="hero-anim relative mx-auto"
            style={{ maxWidth: 520, ...entr(300, 'popIn', 650) }}
          >
            {/* pale blue circle behind */}
            <div className="absolute" aria-hidden="true" style={{ inset: '-6% -4% 4% -6%', background: 'radial-gradient(circle at 50% 45%, #ffffff 0%, #DCE8F7 70%, #CFE0F5 100%)', borderRadius: '50%' }} />
            <Blob color="#F4685F" size={120} opacity={0.85} blur={0} speed={20} rotate={10} style={{ top: '-18px', left: '-6px', zIndex: 2 }} />
            <Blob color="#FFCC57" size={92} opacity={0.95} blur={0} speed={-16} rotate={-12} style={{ bottom: '6%', right: '-14px', zIndex: 2 }} />
            {/*
              MOCKUP IMAGE: warm older couple at home (verified Unsplash photo).
              Replace with Futura's own commissioned photo or branded illustration
              before launch.
            */}
            <SmartImage
              src="https://media.istockphoto.com/id/1402178579/photo/happy-senior-couple-at-home.jpg?s=612x612&w=0&k=20&c=JlnU4tDSVRqnIQm5PK9Q8xC1olgacEjnssQZpKfIDPM="
              alt="A happy senior couple together at home"
              loading="eager"
              referrerPolicy="no-referrer"
              className="relative"
              style={{ aspectRatio: '1 / 1', borderRadius: '54% 46% 57% 43% / 47% 52% 48% 53%', boxShadow: '0 30px 70px -28px rgba(26,48,102,0.45)', zIndex: 1 }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, SmartImage });