// Site sections — UbatubaPG
// Three theme variants controlled via tweaks: 'mare-calma', 'praia-grande', 'refugio'

const { useState, useEffect, useRef } = React;

// ---------- Header ----------
function Header({ onNavigate, theme }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'apartamentos', label: 'Apartamentos' },
    { id: 'localizacao', label: 'Localização' },
    { id: 'avaliacoes', label: 'Avaliações' },
    { id: 'faq', label: 'FAQ' },
    { id: 'contato', label: 'Contato' },
  ];

  return (
    <header className={'site-header ' + (scrolled ? 'scrolled' : '')}>
      <div className="header-inner">
        <a href="#top" className="brand" onClick={(e) => { e.preventDefault(); onNavigate('top'); }}>
          <span className="brand-mark">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
              <path d="M4 22c2-2 4-2 6 0s4 2 6 0 4-2 6 0 4 2 6 0" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              <circle cx="22" cy="11" r="4" fill="currentColor"/>
              <path d="M4 27c2-2 4-2 6 0s4 2 6 0 4-2 6 0 4 2 6 0" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity=".5"/>
            </svg>
          </span>
          <div className="brand-text">
            <strong>UbatubaPG</strong>
            <span>Praia Grande · Ubatuba</span>
          </div>
        </a>

        <nav className="nav-desktop">
          {links.map(l => (
            <a key={l.id} href={'#' + l.id} onClick={(e) => { e.preventDefault(); onNavigate(l.id); }}>{l.label}</a>
          ))}
        </nav>

        <a className="header-cta" href="#contato" onClick={(e) => { e.preventDefault(); onNavigate('contato'); }}>
          <Icon name="whatsapp" size={18}/>
          <span>Reservar</span>
        </a>

        <button className="nav-toggle" onClick={() => setOpen(!open)} aria-label="Menu">
          <Icon name={open ? 'close' : 'menu'} size={24}/>
        </button>
      </div>

      {open && (
        <div className="nav-mobile">
          {links.map(l => (
            <a key={l.id} href={'#' + l.id} onClick={(e) => { e.preventDefault(); onNavigate(l.id); setOpen(false); }}>{l.label}</a>
          ))}
        </div>
      )}
    </header>
  );
}

// ---------- Hero ----------
function Hero({ onCta }) {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-bg">
        <img
          src="images/hero/praia-grande-deyves-martins.jpg"
          alt="Praia Grande de Ubatuba ao amanhecer"
          loading="eager"
          className="hero-img"
        />
        <div className="hero-overlay"/>
        <div className="hero-credit">
          Foto: Deyves Martins
        </div>
      </div>
      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="dot"/> Praia Grande · Ubatuba · SP
        </div>
        <h1>
          Sua casa de praia<br/>
          <em>a 250m do mar.</em>
        </h1>
        <p className="hero-lede">
          Dois apartamentos completos no Edifício Arraia para sua família curtir
          uma das praias mais bonitas do litoral norte. 8 anos recebendo hóspedes,
          nota 4.9 no Airbnb.
        </p>
        <div className="hero-actions">
          <button className="btn btn-primary" onClick={() => onCta('contato')}>
            <Icon name="whatsapp" size={20}/> Consultar disponibilidade
          </button>
          <button className="btn btn-ghost" onClick={() => onCta('apartamentos')}>
            Ver apartamentos <Icon name="arrow-right" size={18}/>
          </button>
        </div>
        <div className="hero-stats">
          <div><strong>4.9</strong><span>★ Airbnb</span></div>
          <div><strong>89</strong><span>avaliações</span></div>
          <div><strong>9 anos</strong><span>recebendo</span></div>
          <div><strong>250m</strong><span>até a praia</span></div>
        </div>
      </div>
    </section>
  );
}

// ---------- Quick facts strip ----------
function QuickFacts() {
  const facts = [
    { icon: 'beach', label: '250m da praia', sub: '3 min a pé' },
    { icon: 'people', label: 'Até 8 pessoas', sub: 'Por apartamento' },
    { icon: 'parking', label: 'Garagem grátis', sub: '2 vagas inclusas' },
    { icon: 'kitchen', label: 'Cozinha completa', sub: 'Equipada e ampla' },
    { icon: 'star', label: 'Superhost', sub: '9 anos no Airbnb' },
  ];
  return (
    <section className="quick-facts">
      <div className="container">
        <div className="qf-grid">
          {facts.map((f, i) => (
            <div className="qf-item" key={i}>
              <div className="qf-icon"><Icon name={f.icon} size={28}/></div>
              <div>
                <strong>{f.label}</strong>
                <span>{f.sub}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Header = Header;
window.Hero = Hero;
window.QuickFacts = QuickFacts;