// ═══════════════════════════════════════════════════════════════════
// src/sections/Local.jsx
// Clinic location — address, hours, phone, and illustrated map SVG.
// Contact data sourced from CONTACT constant in data.jsx.
// ═══════════════════════════════════════════════════════════════════

function Local() {
  return (
    <section id="local" className="section section-tint">
      <div className="container">

        <div className="section-head reveal">
          <div className="eyebrow">Onde estamos</div>
          <h2 className="display">
            Bem no coração<br/>de <em>Pinheiros.</em>
          </h2>
        </div>

        <div className="local-grid">

          {/* ── Info column ── */}
          <div className="local-info reveal">
            <div className="local-row">
              <div className="ico"><Icon.pin width="20" height="20"/></div>
              <div>
                <h4>Endereço</h4>
                <p style={{ whiteSpace: "pre-line" }}>{CONTACT.address}</p>
              </div>
            </div>
            <div className="local-row">
              <div className="ico"><Icon.clock width="20" height="20"/></div>
              <div>
                <h4>Horários</h4>
                <p style={{ whiteSpace: "pre-line" }}>{CONTACT.hours}</p>
              </div>
            </div>
            <div className="local-row">
              <div className="ico"><Icon.phone width="20" height="20"/></div>
              <div>
                <h4>Contato</h4>
                <p>
                  {CONTACT.phone} · WhatsApp {CONTACT.whatsapp}<br/>
                  {CONTACT.email}
                </p>
              </div>
            </div>
            <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
              <a href={CONTACT.waLink} className="btn btn-primary"
                 target="_blank" rel="noopener noreferrer">
                <Icon.whatsapp className="wa-icon"/> Falar agora
              </a>
              <a href="#" className="btn btn-ghost">
                Ver rota no mapa <Icon.arrow className="arrow"/>
              </a>
            </div>
          </div>

          {/* ── Illustrated map ── */}
          <div className="map reveal d1">
            <svg viewBox="0 0 600 500" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
              <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(45,106,79,.12)" strokeWidth="1"/>
                </pattern>
              </defs>
              <rect width="600" height="500" fill="url(#grid)"/>
              {/* Streets */}
              <path d="M0 120 Q200 100 400 140 T600 160" fill="none" stroke="rgba(45,106,79,.25)" strokeWidth="14" strokeLinecap="round"/>
              <path d="M0 280 Q200 320 600 260"          fill="none" stroke="rgba(45,106,79,.18)" strokeWidth="10" strokeLinecap="round"/>
              <path d="M150 0 Q140 250 200 500"          fill="none" stroke="rgba(45,106,79,.22)" strokeWidth="12" strokeLinecap="round"/>
              <path d="M380 0 Q420 250 360 500"          fill="none" stroke="rgba(45,106,79,.18)" strokeWidth="9"  strokeLinecap="round"/>
              {/* City blocks */}
              <rect x="40"  y="170" width="80"  height="80" fill="rgba(184,149,106,.15)" rx="4"/>
              <rect x="230" y="200" width="100" height="60" fill="rgba(184,149,106,.12)" rx="4"/>
              <rect x="420" y="320" width="120" height="80" fill="rgba(184,149,106,.18)" rx="4"/>
              <rect x="60"  y="370" width="70"  height="90" fill="rgba(184,149,106,.12)" rx="4"/>
            </svg>

            <div className="pin">
              <div className="pulse"/>
              <div className="dot"/>
            </div>

            <div className="toast">
              <div>
                <h4>OdontoPro · Pinheiros</h4>
                <p>2 min do metrô · estacionamento gratuito</p>
              </div>
              <a href="#" className="btn btn-ghost"
                 style={{ height: "38px", fontSize: "13px", padding: "0 14px" }}>
                Abrir maps
              </a>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}
