// Coverage — areas served + a soft-framed Google Maps embed.
const COVERAGE_AREAS = ['Weston-super-Mare', 'Churchill', 'Winscombe', 'Cheddar', 'Bristol', 'Bath', 'Clevedon', 'Nailsea', 'Burnham-on-Sea', 'Online (England & Wales)'];

function Coverage() {
  return (
    <section id="coverage" className="relative overflow-hidden bg-blue-light" style={{ paddingTop: 'clamp(72px,10vw,116px)', paddingBottom: 'clamp(72px,10vw,116px)' }}>
      <Grain opacity={0.04} />
      <Blob color="#F4685F" size={320} opacity={0.12} blur={11} speed={28} rotate={6} style={{ top: '-80px', left: '-90px' }} />
      <Blob color="#FFCC57" size={260} opacity={0.16} blur={10} speed={-20} rotate={-5} style={{ bottom: '40px', right: '-80px' }} />

      <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-14">
        {/* Text */}
        <Reveal>
          <p className="font-sans font-semibold uppercase text-gold-deep" style={{ fontSize: 13, letterSpacing: '0.18em' }}>Where we work</p>
          <h2 className="mt-3 font-display font-normal text-navy" style={{ fontSize: 'clamp(30px,4vw,44px)', lineHeight: 1.14, letterSpacing: '-0.01em' }}>
            Based in North Somerset, serving the South West and beyond
          </h2>
          <p className="mt-4 font-sans text-ink" style={{ fontSize: 16, lineHeight: 1.65, maxWidth: '54ch' }}>
            Based in Churchill near Weston-super-Mare, we visit clients across Somerset, Bristol and Bath, and work with clients anywhere in England and Wales online via Teams.
          </p>
          <div className="mt-7 flex flex-wrap gap-2.5">
            {COVERAGE_AREAS.map((a) => (
              <span key={a} className="rounded-full bg-white px-4 py-2 font-sans font-medium text-navy" style={{ fontSize: 13, border: '1px solid rgba(26,48,102,0.14)' }}>{a}</span>
            ))}
          </div>
        </Reveal>

        {/* Map */}
        <Reveal delay={100}>
          <p className="font-sans font-semibold uppercase text-gold-deep" style={{ fontSize: 12, letterSpacing: '0.16em' }}>6 Tollhouse Road, Churchill, Winscombe, BS25 5AN</p>
          <div className="mt-3 overflow-hidden rounded-2xl" style={{ border: '1px solid rgba(26,48,102,0.14)', boxShadow: '0 28px 64px -38px rgba(26,48,102,0.45)' }}>
            <iframe
              title="Map showing Futura Planning in Churchill, Winscombe"
              src="https://www.google.com/maps?q=6+Tollhouse+Road,+Churchill,+Winscombe,+BS25+5AN&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              style={{ display: 'block', width: '100%', height: 360, border: 0 }}
            ></iframe>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Coverage });