// Coverage — answers the one question that matters ("do you come to me?") with
// two plain modes beside the map. The full town-by-town list belongs on a
// dedicated coverage subpage, not the home page.
const COVERAGE_MODES = [
  {
    icon: 'home',
    title: 'In person, at your home',
    body: 'We drive to you across Somerset, Bristol and Bath, taking in Weston-super-Mare, Clevedon, Cheddar, Nailsea, Burnham-on-Sea and the villages in between. Tea optional but encouraged.',
  },
  {
    icon: 'monitor',
    title: 'Online, via Teams',
    body: 'Anywhere in England and Wales, from your own sofa. The same advice and the same person, over a video call.',
  },
];

function Coverage() {
  return (
    <section id="coverage" className="relative overflow-hidden bg-blue-light" style={{ paddingTop: 'clamp(56px,8vw,92px)', paddingBottom: 'clamp(56px,8vw,92px)' }}>
      <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' }}>
            We come to you, <em style={{ fontStyle: 'italic', color: '#4A6FA4' }}>wherever you are</em>
          </h2>
          <p className="mt-4 font-sans text-ink" style={{ fontSize: 16, lineHeight: 1.65, maxWidth: '54ch' }}>
            Based in Churchill, near Weston-super-Mare. Two ways to meet, both starting with a friendly chat.
          </p>

          <div className="mt-7 flex flex-col gap-6">
            {COVERAGE_MODES.map((m) => (
              <div key={m.title} className="flex items-start gap-4">
                <span className="mt-0.5 inline-flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full text-blue" style={{ background: '#fff', boxShadow: '0 10px 24px -14px rgba(26,48,102,0.5)' }}>
                  <Icon name={m.icon} size={22} strokeWidth={1.8} />
                </span>
                <span>
                  <span className="block font-display font-normal text-navy" style={{ fontSize: 19, letterSpacing: '-0.01em' }}>{m.title}</span>
                  <span className="mt-1 block font-sans text-ink" style={{ fontSize: 14.5, lineHeight: 1.6, maxWidth: '46ch' }}>{m.body}</span>
                </span>
              </div>
            ))}
          </div>

          <p className="mt-7 font-sans text-stone" style={{ fontSize: 14, lineHeight: 1.5 }}>
            Not sure if we cover your area? <a href="areas-we-cover.html" className="font-semibold text-navy underline-offset-2 hover:underline">See the full list of areas we cover</a>, or call <a href={PHONE_TEL} className="font-semibold text-navy underline-offset-2 hover:underline">01934 442030</a> and ask. If we cannot help, we will say so.
          </p>
        </Reveal>

        {/* Map */}
        <Reveal delay={100}>
          <div className="overflow-hidden rounded-2xl bg-white" 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: 340, border: 0 }}
            ></iframe>
            <div className="flex flex-col items-start justify-between gap-3 px-5 py-4 sm:flex-row sm:items-center">
              <span className="flex items-center gap-3">
                <span className="inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-blue" style={{ background: '#EAF1FA' }}>
                  <Icon name="mapPin" size={18} strokeWidth={1.8} />
                </span>
                <span className="font-sans text-ink" style={{ fontSize: 13.5, lineHeight: 1.45 }}>
                  {ADDRESS}
                </span>
              </span>
              <a
                href={MAPS_DIRECTIONS}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex flex-shrink-0 items-center gap-2 rounded-full bg-gold px-5 py-2.5 font-sans font-semibold text-navy hover:bg-gold-deep"
                style={{ fontSize: 14, boxShadow: '0 10px 22px -10px rgba(240,184,60,0.8)', transition: 'background-color 250ms ' + EASE }}
              >
                <Icon name="mapPin" size={16} strokeWidth={2} />
                Get directions
              </a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Coverage });