// Shared components: Logo, Navbar (glassmorphism), Footer, FloatingWhatsApp

// ─── Logo ──────────────────────────────────────────────────────────────────
// Uses the real logo PNG (moon + Espaço Luna lettering in one mark).
// `variant` picks the color treatment so it reads on any palette.
// Logo file is 800×500 (1.6:1 horizontal) — pass size as the rendered HEIGHT.
function Logo({ size = 44, variant = "gold" }) {
  const src = `logo-${variant}.png`;
  return (
    <img
      src={src}
      alt="Espaço Luna"
      style={{ ...{
          height: size,

          display: 'block', width: "100px"
        }, width: "100px", height: "59px" }} />);

}

// ─── Navbar (glassmorphism, sticky) ───────────────────────────────────────
function Navbar({ logoVariant = "gold" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
  { href: '#estrutura', label: 'Estrutura' },
  { href: '#galeria', label: 'Galeria' },
  { href: '#para-quem', label: 'Para quem' },
  { href: '#como-funciona', label: 'Como funciona' },
  { href: '#depoimentos', label: 'Depoimentos' },
  { href: '#contato', label: 'Contato' }];


  return (
    <header style={{
      position: 'fixed',
      top: 0, left: 0, right: 0,
      zIndex: 50,
      transition: 'all .4s cubic-bezier(.2,.7,.3,1)',
      padding: scrolled ? '12px 0' : '20px 0'
    }}>
      <div className="container" style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 24,
        padding: '14px 28px',
        marginInline: 'auto',
        maxWidth: scrolled ? 1180 : 1280,
        background: scrolled ? 'rgba(14, 19, 34, 0.55)' : 'rgba(14, 19, 34, 0.18)',
        backdropFilter: 'blur(20px) saturate(150%)',
        WebkitBackdropFilter: 'blur(20px) saturate(150%)',
        border: '1px solid rgba(244, 237, 224, 0.1)',
        borderRadius: 999,
        transition: 'all .4s cubic-bezier(.2,.7,.3,1)',
        boxShadow: scrolled ?
        '0 12px 40px rgba(0,0,0,.4), 0 1px 0 rgba(244,237,224,.06) inset' :
        '0 2px 20px rgba(0,0,0,.15), 0 1px 0 rgba(244,237,224,.04) inset'
      }}>
        <a href="#hero" style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center' }}>
          <Logo size={44} variant={logoVariant} />
        </a>

        <nav style={{
          display: 'flex',
          alignItems: 'center',
          gap: 28
        }} className="nav-desktop">
          {links.map((l) =>
          <a key={l.href} href={l.href} style={{
            fontSize: 12.5,
            fontWeight: 400,
            letterSpacing: '0.04em',
            color: 'var(--ink)',
            opacity: 0.78,
            transition: 'opacity .2s, color .2s',
            position: 'relative'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.opacity = 1;e.currentTarget.style.color = 'var(--gold)';}}
          onMouseLeave={(e) => {e.currentTarget.style.opacity = 0.78;e.currentTarget.style.color = 'var(--ink)';}}>
            {l.label}</a>
          )}
        </nav>

        <a href="#contato" className="btn btn-primary nav-cta" style={{ padding: '12px 22px', fontSize: 12 }}>
          Solicitar proposta
        </a>

        <button
          aria-label="Menu"
          onClick={() => setOpen((o) => !o)}
          className="nav-mobile-toggle"
          style={{
            display: 'none',
            background: 'transparent',
            border: 0,
            color: 'var(--ink)',
            padding: 8,
            cursor: 'pointer'
          }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            {open ?
            <><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></> :

            <><line x1="3" y1="8" x2="21" y2="8" /><line x1="3" y1="16" x2="21" y2="16" /></>
            }
          </svg>
        </button>
      </div>

      {/* mobile drawer */}
      {open &&
      <div className="nav-mobile-drawer" style={{
        marginTop: 8,
        marginInline: 'var(--pad-x)',
        padding: '20px 24px',
        background: 'rgba(14, 19, 34, 0.92)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        border: '1px solid rgba(244, 237, 224, 0.1)',
        borderRadius: 20,
        display: 'flex',
        flexDirection: 'column',
        gap: 16
      }}>
          {links.map((l) =>
        <a key={l.href} href={l.href} onClick={() => setOpen(false)} style={{
          fontSize: 15,
          letterSpacing: '0.02em',
          color: 'var(--ink)',
          opacity: 0.85,
          padding: '6px 0',
          borderBottom: '1px solid rgba(244,237,224,.06)'
        }}>{l.label}</a>
        )}
          <a href="#contato" onClick={() => setOpen(false)} className="btn btn-primary" style={{ marginTop: 8, justifyContent: 'center' }}>
            Solicitar proposta
          </a>
        </div>
      }

      <style>{`
        @media (max-width: 920px) {
          .nav-desktop { display: none !important; }
          .nav-cta { display: none !important; }
          .nav-mobile-toggle { display: flex !important; align-items: center; justify-content: center; }
        }
      `}</style>
    </header>);

}

// ─── Floating WhatsApp ────────────────────────────────────────────────────
function FloatingWhatsApp({ phone }) {
  const cleanPhone = phone.replace(/\D/g, '');
  return (
    <a
      href={`https://wa.me/${cleanPhone}?text=${encodeURIComponent('Olá! Tenho interesse em conhecer o Espaço Luna.')}`}
      target="_blank"
      rel="noopener noreferrer"
      className="float-wa"
      aria-label="Conversar no WhatsApp">
      
      <svg viewBox="0 0 32 32" fill="white">
        <path d="M16.005 3.2c-7.06 0-12.8 5.74-12.8 12.8 0 2.255.587 4.456 1.708 6.4L3.2 28.8l6.563-1.708c1.881 1.027 3.998 1.567 6.158 1.567h.005c7.06 0 12.8-5.74 12.8-12.8 0-3.42-1.332-6.633-3.749-9.05A12.713 12.713 0 0 0 16.005 3.2zm0 23.467h-.004a10.62 10.62 0 0 1-5.412-1.483l-.388-.23-4.025 1.055 1.075-3.92-.253-.4a10.6 10.6 0 0 1-1.625-5.69c0-5.864 4.77-10.633 10.637-10.633 2.84 0 5.508 1.108 7.515 3.119a10.564 10.564 0 0 1 3.115 7.519c-.002 5.865-4.772 10.663-10.635 10.663zm5.836-7.97c-.32-.16-1.893-.934-2.186-1.041-.293-.107-.506-.16-.72.16-.213.32-.826 1.041-1.013 1.255-.187.213-.373.24-.693.08-.32-.16-1.351-.498-2.573-1.588-.951-.848-1.594-1.895-1.781-2.215-.187-.32-.02-.493.141-.652.144-.144.32-.373.48-.56.16-.187.213-.32.32-.533.107-.213.053-.4-.027-.56-.08-.16-.72-1.733-.986-2.373-.26-.624-.524-.54-.72-.55-.187-.008-.4-.01-.613-.01-.213 0-.56.08-.853.4-.293.32-1.12 1.094-1.12 2.666 0 1.572 1.146 3.092 1.306 3.305.16.213 2.253 3.441 5.46 4.825.763.33 1.358.526 1.823.673.766.243 1.463.209 2.013.127.614-.092 1.893-.774 2.16-1.521.267-.747.267-1.388.187-1.521-.08-.133-.293-.213-.613-.373z" />
      </svg>
    </a>);

}

// ─── Footer ───────────────────────────────────────────────────────────────
function Footer({ whatsapp, instagram, logoVariant = "gold" }) {
  const cleanPhone = whatsapp.replace(/\D/g, '');
  return (
    <footer style={{
      borderTop: '1px solid var(--line)',
      paddingTop: 'clamp(60px, 8vw, 100px)',
      paddingBottom: 40,
      background: 'var(--bg)'
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 48,
          marginBottom: 72
        }}>
          <div>
            <Logo size={64} variant={logoVariant} />
            <p style={{ marginTop: 20, color: 'var(--muted)', fontSize: 14, maxWidth: '32ch' }}>
              Um espaço para experiências que transformam, na serra gaúcha.
            </p>
          </div>

          <div>
            <h4 className="eyebrow" style={{ marginBottom: 16 }}>Navegar</h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li><a href="#estrutura" style={{ color: 'var(--muted)', fontSize: 14 }}>Estrutura</a></li>
              <li><a href="#para-quem" style={{ color: 'var(--muted)', fontSize: 14 }}>Para quem é</a></li>
              <li><a href="#como-funciona" style={{ color: 'var(--muted)', fontSize: 14 }}>Como funciona</a></li>
              <li><a href="#faq" style={{ color: 'var(--muted)', fontSize: 14 }}>Perguntas frequentes</a></li>
            </ul>
          </div>

          <div>
            <h4 className="eyebrow" style={{ marginBottom: 16 }}>Contato</h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li><a href={`https://wa.me/${cleanPhone}`} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--muted)', fontSize: 14 }}>WhatsApp · {whatsapp}</a></li>
              <li><a href={instagram} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--muted)', fontSize: 14 }}>Instagram · @espacolunars</a></li>
              <li style={{ color: 'var(--muted)', fontSize: 14 }}>R. Angelino Tomazzi, 1234<br />Gramado · RS · 95670-000</li>
            </ul>
          </div>

          <div>
            <h4 className="eyebrow" style={{ marginBottom: 16 }}>Reserve</h4>
            <p style={{ color: 'var(--muted)', fontSize: 14, marginBottom: 16 }}>
              Consulte datas disponíveis para o seu retiro.
            </p>
            <a href="#contato" className="btn btn-ghost" style={{ padding: '10px 18px', fontSize: 11 }}>
              Solicitar proposta
            </a>
          </div>
        </div>

        <div style={{
          borderTop: '1px solid var(--line)',
          paddingTop: 28,
          display: 'flex',
          flexWrap: 'wrap',
          justifyContent: 'space-between',
          gap: 16,
          color: 'var(--muted)',
          fontSize: 12,
          letterSpacing: '0.02em'
        }}>
          <div>© {new Date().getFullYear()} Espaço Luna — Todos os direitos reservados</div>
          <div className="serif italic" style={{ color: 'var(--gold)', fontSize: 14 }}>Da serra, para o que precisa florescer.</div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Logo, Navbar, FloatingWhatsApp, Footer });