// Bottom sections — location, reviews, FAQ, contact, footer

const { useState: useState3 } = React;

// ---------- Location ----------
function Location() {
  const n = window.NEIGHBORHOOD;
  React.useEffect(() => {
    if (!window.L) return;
    const el = document.getElementById('osm-map');
    if (!el || el._leaflet_id) return;
    // Coordenadas da Rua Fragata, 357 — Praia Grande, Ubatuba/SP
    const lat = -23.465649597230257;
    const lng = -45.06667836084154;
    const map = window.L.map(el, { zoomControl: true, scrollWheelZoom: false }).setView([lat, lng], 16);
    window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap',
      maxZoom: 19,
    }).addTo(map);
    const icon = window.L.divIcon({
      className: 'custom-pin',
      html: '<div class="pin-dot"></div><div class="pin-pulse"></div>',
      iconSize: [22, 22],
      iconAnchor: [11, 11],
    });
    window.L.marker([lat, lng], { icon }).addTo(map)
      .bindPopup('<strong>Edifício Arraia</strong><br>Rua Fragata, 357');
  }, []);
  return (
    <section className="location" id="localizacao" data-screen-label="04 Location">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Onde você vai ficar</span>
          <h2>Praia Grande, <em>o melhor de Ubatuba</em></h2>
          <p>{n.description}</p>
        </div>

        <div className="location-grid">
          <div className="map-frame">
            <div id="osm-map" className="osm-map"/>
            <div className="map-overlay">
              <Icon name="pin" size={20}/>
              <div>
                <strong>Edifício Arraia</strong>
                <span>Rua Fragata, 357 · Praia Grande · Ubatuba/SP</span>
              </div>
            </div>
            <a className="map-link" href="https://www.google.com/maps/search/?api=1&query=-23.465649597230257,-45.06667836084154" target="_blank" rel="noopener">Abrir no Google Maps →</a>
          </div>

          <div className="location-side">
            <h3>Praias da região</h3>
            <ul className="beach-list">
              {n.beaches.map((b, i) => (
                <li key={i}>
                  <Icon name="beach" size={20}/>
                  <div>
                    <strong>{b.name}</strong>
                    <span>{b.detail}</span>
                  </div>
                </li>
              ))}
            </ul>

            <h3 style={{marginTop: 32}}>Por perto</h3>
            <div className="highlight-grid">
              {n.highlights.map((h, i) => (
                <div className="hl-card" key={i}>
                  <Icon name={h.icon} size={20}/>
                  <strong>{h.title}</strong>
                  <span>{h.detail}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Reviews ----------
function Reviews() {
  const r = window.RATING_BREAKDOWN;
  return (
    <section className="reviews" id="avaliacoes" data-screen-label="05 Reviews">
      <div className="container">
        <div className="reviews-head">
          <div>
            <div className="big-rating">
              <Icon name="star" size={28}/>
              <strong>{r.overall}</strong>
              <span>· {r.total} avaliações</span>
            </div>
            <span className="favorite-badge">Favorito dos hóspedes</span>
            <p>Os dois apartamentos são <strong>Guest Favorite</strong> no Airbnb — entre os preferidos baseado em avaliações, comentários e confiabilidade.</p>
          </div>
          <div className="rating-scores">
            {r.scores.map((s, i) => (
              <div className="rs-row" key={i}>
                <span>{s.label}</span>
                <div className="rs-bar"><div className="rs-fill" style={{ width: (s.value / 5 * 100) + '%' }}/></div>
                <strong>{s.value.toFixed(1)}</strong>
              </div>
            ))}
          </div>
        </div>

        <div className="review-grid">
          {window.REVIEWS.map((rv, i) => (
            <article className="review-card" key={i}>
              <header>
                <div className="rv-avatar">{rv.name.charAt(0)}</div>
                <div>
                  <strong>{rv.name}</strong>
                  <span>{rv.date}</span>
                </div>
                <div className="rv-stars">
                  {[1,2,3,4,5].map(n => <Icon key={n} name="star" size={12}/>)}
                </div>
              </header>
              <p>{rv.text}</p>
              <footer>{rv.stay}</footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const [open, setOpen] = useState3(0);
  return (
    <section className="faq" id="faq" data-screen-label="06 FAQ">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Perguntas frequentes</span>
          <h2>Tudo que você <em>precisa saber</em></h2>
        </div>
        <div className="faq-list">
          {window.FAQS.map((f, i) => (
            <div className={'faq-item ' + (open === i ? 'open' : '')} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <Icon name={open === i ? 'minus' : 'plus'} size={20}/>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Contact ----------
function Contact() {
  const h = window.HOST;
  const wppMsg = encodeURIComponent('Olá! Vi os apartamentos no site UbatubaPG e queria consultar disponibilidade.');
  return (
    <section className="contact" id="contato" data-screen-label="07 Contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-text">
            <span className="eyebrow">Reserve agora</span>
            <h2>Consulte <em>disponibilidade</em></h2>
            <p>Mande uma mensagem com as datas e número de pessoas. Respondo em poucas horas, todos os dias.</p>

            <div className="host-card">
              <div className="host-avatar">EC</div>
              <div>
                <strong>{h.name} <span className="superhost-pill">Superhost</span></strong>
                <span>{h.yearsHosting} anos recebendo · {h.totalReviews} avaliações · {h.avgRating}★</span>
                <p>{h.bio}</p>
              </div>
            </div>
          </div>

          <div className="contact-cta">
            <a className="cta-tile cta-whatsapp" href={`https://wa.me/${h.whatsapp}?text=${wppMsg}`} target="_blank" rel="noopener">
              <Icon name="whatsapp" size={36}/>
              <strong>WhatsApp</strong>
              <span>{h.whatsappLabel}</span>
              <span className="cta-tag">Resposta rápida</span>
            </a>
            <a className="cta-tile" href={`tel:+${h.phone}`}>
              <Icon name="phone" size={32}/>
              <strong>Telefone</strong>
              <span>{h.phoneLabel}</span>
            </a>
            <a className="cta-tile" href={window.PHOTOS.apt21.airbnbUrl} target="_blank" rel="noopener">
              <span className="airbnb-mark">airbnb</span>
              <strong>APT 21 no Airbnb</strong>
              <span>4.9 · 42 avaliações</span>
            </a>
            <a className="cta-tile" href={window.PHOTOS.apt26.airbnbUrl} target="_blank" rel="noopener">
              <span className="airbnb-mark">airbnb</span>
              <strong>APT 26 no Airbnb</strong>
              <span>4.79 · 47 avaliações</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <strong className="footer-brand">UbatubaPG</strong>
            <p>Dois apartamentos para temporada na Praia Grande de Ubatuba. Recebendo famílias há 9 anos.</p>
          </div>
          <div>
            <strong>Apartamentos</strong>
            <a href={window.PHOTOS.apt21.airbnbUrl} target="_blank" rel="noopener">APT 21 no Airbnb</a>
            <a href={window.PHOTOS.apt26.airbnbUrl} target="_blank" rel="noopener">APT 26 no Airbnb</a>
          </div>
          <div>
            <strong>Contato</strong>
            <a href={`https://wa.me/${window.HOST.whatsapp}`} target="_blank" rel="noopener">WhatsApp</a>
            <a href={`tel:+${window.HOST.phone}`}>{window.HOST.phoneLabel}</a>
          </div>
          <div>
            <strong>Localização</strong>
            <span>Praia Grande</span>
            <span>Ubatuba — SP</span>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 UbatubaPG · Edifício Arraia</span>
          <span>Reservas pelo WhatsApp ou Airbnb</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Floating WhatsApp button ----------
function FloatingWhatsapp() {
  const wppMsg = encodeURIComponent('Olá! Vi o site UbatubaPG e queria consultar disponibilidade.');
  return (
    <a className="float-wpp" href={`https://wa.me/${window.HOST.whatsapp}?text=${wppMsg}`} target="_blank" rel="noopener" aria-label="WhatsApp">
      <Icon name="whatsapp" size={28}/>
      <span>Reserve no WhatsApp</span>
    </a>
  );
}

window.Location = Location;
window.Reviews = Reviews;
window.FAQ = FAQ;
window.Contact = Contact;
window.Footer = Footer;
window.FloatingWhatsapp = FloatingWhatsapp;