const areaStyles = {
  section: {
    background: 'linear-gradient(180deg, #F4F6F9 0%, #ECEFF4 100%)',
    position: 'relative', overflow: 'hidden',
  },
  grid: {
    display: 'grid', gridTemplateColumns: '1fr', gap: 40, alignItems: 'center',
  },
  left: {},
  title: { fontSize: 'clamp(26px, 5.5vw, 44px)', marginBottom: 16 },
  text: { fontSize: 'clamp(15px, 2.4vw, 17px)', color: 'var(--silver-700)', lineHeight: 1.6, marginBottom: 24 },
  list: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 },
  listItem: { display: 'flex', alignItems: 'center', gap: 10, color: 'var(--navy-800)', fontWeight: 500 },
  mapCard: {
    background: 'white', borderRadius: 22, padding: 8,
    boxShadow: 'var(--shadow-lg)',
    border: '1px solid var(--silver-100)',
    position: 'relative',
    aspectRatio: '4 / 3',
    overflow: 'hidden',
  },
  mapFrame: {
    width: '100%', height: '100%', border: 0, borderRadius: 16,
    display: 'block', background: 'var(--bg-2)',
  },
  mapLabel: {
    position: 'absolute', left: 18, right: 18, bottom: 18,
    background: 'rgba(255,255,255,.94)',
    backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
    padding: '12px 14px', borderRadius: 14,
    display: 'flex', alignItems: 'center', gap: 10,
    boxShadow: 'var(--shadow)',
    border: '1px solid rgba(195,202,212,.7)',
  },
  mapLabelTitle: {
    fontFamily: 'Archivo', fontWeight: 800, color: 'var(--navy-800)',
    fontSize: 14, lineHeight: 1.2,
  },
  mapLabelSub: {
    color: 'var(--silver-700)', fontSize: 12.5, lineHeight: 1.35,
  },
  mapLink: {
    position: 'absolute', top: 18, right: 18,
    display: 'inline-flex', alignItems: 'center', gap: 8,
    background: 'var(--navy-800)', color: 'white',
    padding: '9px 12px', borderRadius: 10,
    fontSize: 13, fontWeight: 700,
    boxShadow: 'var(--shadow-sm)',
  },
};

const neighborhoods = ['Centro', 'Araçatiba', 'Itaipuaçu', 'São José do Imbassaí', 'Barra de Maricá', 'Ponta Negra', 'Inoã', 'Flamengo', 'Manu Manuela', 'Jardim Atlântico'];
const mapEmbedUrl = 'https://www.openstreetmap.org/export/embed.html?bbox=-42.8552803%2C-22.9207133%2C-42.8152803%2C-22.8807133&layer=mapnik&marker=-22.9007133%2C-42.8352803';
const mapExternalUrl = 'https://www.openstreetmap.org/?mlat=-22.9007133&mlon=-42.8352803#map=16/-22.9007133/-42.8352803';

function Area() {
  return (
    <section style={areaStyles.section} id="area">
      <div className="container">
        <div className="area-grid" style={areaStyles.grid}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>
              <span className="dot"></span>
              Onde atendemos
            </div>
            <h2 style={areaStyles.title}>
              Atendimento em domicílio em <span style={{ color: 'var(--navy-700)' }}>Maricá-RJ</span>
            </h2>
            <p style={areaStyles.text}>
              A PiterTech atende em toda Maricá com assistência técnica de computador e notebook para casa, comércio e escritório. Vamos até você para manutenção, formatação, upgrade, limpeza, vírus e rede Wi-Fi.
            </p>
            <div style={areaStyles.list}>
              {neighborhoods.slice(0, 5).map(n => (
                <div key={n} style={areaStyles.listItem}>
                  <IconMapPin size={18} color="#1E3A6F"/>
                  <span>{n}</span>
                </div>
              ))}
              <div style={{ ...areaStyles.listItem, color: 'var(--silver-500)', fontStyle: 'italic' }}>
                <IconCheck size={18} color="#1FA971"/>
                <span>e toda Maricá</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href={waLink()} target="_blank" rel="noopener" className="area-cta" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                background: 'var(--whatsapp)', color: 'white',
                padding: '14px 22px', borderRadius: 12, fontWeight: 700, fontSize: 15,
                boxShadow: '0 8px 20px rgba(37,211,102,.35)',
              }}>
                <IconWhatsApp size={18} color="white"/>
                Confirmar atendimento na minha área
              </a>
              <a href={`tel:+${WHATSAPP_NUMBER}`} style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                background: 'white', color: 'var(--navy-800)',
                padding: '14px 22px', borderRadius: 12, fontWeight: 700, fontSize: 15,
                border: '2px solid var(--silver-100)',
              }}>
                <IconPhone size={18} color="#14264A"/>
                {WHATSAPP_DISPLAY}
              </a>
            </div>
          </div>

          <div style={areaStyles.mapCard} className="area-map">
            <iframe
              title="Mapa da base de atendimento PiterTech em Maricá-RJ"
              src={mapEmbedUrl}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              style={areaStyles.mapFrame}
            ></iframe>
            <a href={mapExternalUrl} target="_blank" rel="noopener" style={areaStyles.mapLink}>
              Ver no mapa
              <IconArrowRight size={14} color="white"/>
            </a>
            <div style={areaStyles.mapLabel}>
              <IconMapPin size={20} color="#1E3A6F"/>
              <div>
                <div style={areaStyles.mapLabelTitle}>Estrada Henfil, 125 — Itapeba</div>
                <div style={areaStyles.mapLabelSub}>Maricá-RJ • Base de atendimento em domicílio.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .area-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(37,211,102,.45); }
        .area-map iframe { filter: saturate(.92) contrast(.96); }
        .area-map a:hover { background: var(--navy-700) !important; }
        @media (min-width: 900px) { .area-grid { grid-template-columns: 1fr 1fr !important; gap: 64px !important; } }
        @media (max-width: 520px) {
          .area-map { aspect-ratio: 1 / 1.05 !important; }
          .area-map a { top: 14px !important; right: 14px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Area });