const { Button, Eyebrow, Fio, Logo, Input } = window.UniqueEnseadaDesignSystem_49c462;

/* ----------------------------------------------------------------
   Registro: contenção premium. A página comunica o ambiente e o
   endereço; a presença da curadoria é assinatura, não anúncio.
   Conteúdo visível por padrão; a animação é só enhancement
   (nunca condiciona a visibilidade do conteúdo).
----------------------------------------------------------------- */
function PageStyles() {
  return (
    <style>{`
      .reveal { opacity: 1; transform: none; }
      @media (prefers-reduced-motion: no-preference) {
        .js-anim .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
        .js-anim .reveal.in { opacity: 1; transform: none; }
      }
      .u-sec { padding: clamp(76px, 12vw, 168px) var(--space-6); }
      .u-narrow { max-width: 760px; margin: 0 auto; }
      .u-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; max-width: 1140px; margin: 0 auto; }
      .u-hero-h { font-size: clamp(31px, 4.6vw, 54px); letter-spacing: .06em; line-height: 1.12; }
      .u-stickybar { display: none; }
      @media (max-width: 820px) {
        .u-split { grid-template-columns: 1fr; gap: var(--space-7); }
        .u-split.flip > .u-media { order: -1; }
        .u-media { min-height: 300px !important; }
        .u-hide-mobile { display: none !important; }
        .u-stickybar {
          display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
          align-items: center; justify-content: space-between; gap: 14px;
          padding: 13px 18px calc(13px + env(safe-area-inset-bottom));
          background: rgba(43,38,34,0.92); backdrop-filter: blur(10px);
          border-top: 1px solid rgba(251,248,244,0.12);
        }
      }
    `}</style>
  );
}

function Reveal({ as = 'div', className = '', children, ...rest }) {
  const Tag = as;
  return <Tag className={('reveal ' + className).trim()} {...rest}>{children}</Tag>;
}

function useRevealAll() {
  React.useEffect(() => {
    document.documentElement.classList.add('js-anim');
    const els = Array.from(document.querySelectorAll('.reveal'));
    if (!('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' });
    els.forEach((e) => io.observe(e));
    const safety = setTimeout(() => els.forEach((e) => e.classList.add('in')), 1600);
    return () => { io.disconnect(); clearTimeout(safety); };
  }, []);
}

function scrollToForm() {
  const el = document.getElementById('convite');
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 12, behavior: 'smooth' });
}

/* ---------------------------------------------------------------- */
function Header() {
  return (
    <header style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10,
      display: 'flex', justifyContent: 'center', padding: 'var(--space-6) 0',
    }}>
      <Logo variant="offwhite" width={110} assetsBase="../../assets" />
    </header>
  );
}

function Hero() {
  return (
    <section style={{ position: 'relative', minHeight: '94vh', display: 'flex' }}>
      <img src="../../assets/renders/render-piscina.jpg" alt="Casas do Unique Enseada na Enseada de Búzios"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(24,20,17,0.82), rgba(24,20,17,0.22) 50%, rgba(24,20,17,0.36)), linear-gradient(to right, rgba(24,20,17,0.5), transparent 60%)' }}></div>
      <div className="u-sec" style={{
        position: 'relative', marginTop: 'auto', width: '100%',
        maxWidth: 1140, marginLeft: 'auto', marginRight: 'auto',
        paddingBottom: 'clamp(60px, 9vw, 116px)', paddingTop: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'flex-start', color: 'var(--off)',
      }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow color="rgba(251,248,244,0.82)">Enseada de Búzios · RN</Eyebrow>
          <h1 className="u-display u-hero-h" style={{ color: 'var(--off)', margin: '22px 0 0', fontWeight: 300, textWrap: 'balance' }}>
            Cinco casas na melhor faixa da Enseada de Búzios
          </h1>
          <p style={{ maxWidth: '40ch', fontSize: 'var(--text-lg)', lineHeight: 1.55, margin: '20px 0 0', opacity: 0.92 }}>
            A meia hora de Natal, num mar de águas calmas.
          </p>
          <div style={{ marginTop: 34 }}>
            <Button variant="primary" size="lg" onClick={scrollToForm}>Conhecer as cinco</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Passagem() {
  return (
    <section className="u-sec" style={{ background: 'var(--areia-clara)' }}>
      <Reveal className="u-narrow" style={{ textAlign: 'center' }}>
        <p style={{
          fontFamily: 'var(--font-editorial)', fontStyle: 'italic',
          fontSize: 'clamp(27px, 3.6vw, 44px)', lineHeight: 1.32, color: 'var(--salvia-escura)',
          margin: 0, maxWidth: '24ch', marginLeft: 'auto', marginRight: 'auto', textWrap: 'balance',
        }}>
          O mar já calmo, a luz ainda baixa, o café esfriando devagar porque ninguém tem pressa.
        </p>
        <Fio style={{ margin: '40px auto 34px' }} />
        <p style={{ fontSize: 'var(--text-lg)', lineHeight: 1.65, color: 'var(--text-body)', maxWidth: '52ch', margin: '0 auto' }}>
          Os fins de semana na Enseada começam sem alarme e terminam sem pressa de ir embora.
          É o que se mora numa casa a meia hora de Natal, de frente para um mar que fica raso e quieto o dia inteiro.
        </p>
      </Reveal>
    </section>
  );
}

function Lugar() {
  return (
    <section className="u-sec" style={{ background: 'var(--off)' }}>
      <div className="u-split">
        <Reveal>
          <Eyebrow>O endereço</Eyebrow>
          <h2 className="u-display" style={{ fontSize: 'clamp(27px, 3.4vw, 42px)', fontWeight: 300, letterSpacing: '.05em', margin: '18px 0 0', lineHeight: 1.14, textWrap: 'balance' }}>
            Litoral sul, a meia hora de Natal
          </h2>
          <Fio style={{ margin: '26px 0' }} />
          <p style={{ maxWidth: '44ch', fontSize: 'var(--text-lg)', lineHeight: 1.65, color: 'var(--text-body)', margin: 0 }}>
            Uma das enseadas mais preservadas do Rio Grande do Norte. Águas calmas, dia inteiro de
            sol, e o verde nativo emoldurando cada casa. Perto o bastante para ir e voltar num
            fim de semana, longe o bastante para o tempo passar diferente.
          </p>
        </Reveal>
        <Reveal className="u-media" style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', minHeight: 380, boxShadow: 'var(--shadow-card)' }}>
          <img src="../../assets/photos/mapa-1.jpg" alt="Mapa da localização na Enseada de Búzios"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', minHeight: 380 }} />
        </Reveal>
      </div>
    </section>
  );
}

function Cinco() {
  return (
    <section className="u-sec" style={{ background: 'var(--areia-suave)' }}>
      <Reveal className="u-narrow" style={{ textAlign: 'center' }}>
        <h2 className="u-display" style={{ fontSize: 'clamp(34px, 5vw, 60px)', fontWeight: 200, letterSpacing: '.08em', margin: 0, lineHeight: 1.05 }}>
          São cinco
        </h2>
        <p style={{ fontSize: 'var(--text-lg)', lineHeight: 1.65, color: 'var(--text-body)', maxWidth: '50ch', margin: '24px auto 0' }}>
          Cinco casas em condomínio fechado, na melhor faixa da praia. As plantas, as tipologias
          e os valores ficam para a conversa, no ritmo de quem está escolhendo com calma.
        </p>
      </Reveal>
    </section>
  );
}

function Michelle() {
  return (
    <section className="u-sec" style={{ background: 'var(--salvia)' }}>
      <Reveal className="u-narrow" style={{ textAlign: 'center', color: 'var(--off)' }}>
        <p style={{
          fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(22px, 2.6vw, 30px)',
          letterSpacing: '.14em', textTransform: 'uppercase', margin: 0, color: 'var(--off)',
        }}>
          Michelle Lordão
        </p>
        <Fio color="rgba(251,248,244,0.4)" style={{ margin: '28px auto' }} />
        <p style={{
          fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 'clamp(24px, 3vw, 34px)',
          lineHeight: 1.4, maxWidth: '26ch', margin: '0 auto', color: 'var(--off)', opacity: 0.96, textWrap: 'balance',
        }}>
          Conhece a Enseada de Búzios e o alto padrão de Natal de perto. É com ela que a conversa começa.
        </p>
      </Reveal>
    </section>
  );
}

function ConviteForm() {
  const [sent, setSent] = React.useState(false);
  const [nome, setNome] = React.useState('');
  const [zap, setZap] = React.useState('');
  const valid = nome.trim().length > 1 && zap.replace(/\D/g, '').length >= 10;

  if (sent) {
    return (
      <div style={{ textAlign: 'center', padding: 'var(--space-7) var(--space-4)' }}>
        <img src="../../assets/sol-unique.png" alt="" style={{ width: 50, margin: '0 auto 18px', display: 'block' }} />
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, textTransform: 'uppercase', letterSpacing: 'var(--tracking-display)', fontSize: 'var(--text-xl)', color: 'var(--salvia-escura)' }}>
          Recebido, {nome.trim().split(' ')[0] || 'obrigado'}
        </div>
        <p style={{ color: 'var(--text-body)', fontSize: 'var(--text-base)', lineHeight: 1.55, marginTop: 12, maxWidth: '32ch', marginLeft: 'auto', marginRight: 'auto' }}>
          Em breve começamos a conversa pelo seu WhatsApp, no seu tempo.
        </p>
      </div>
    );
  }
  return (
    <form
      style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}
      onSubmit={(e) => { e.preventDefault(); if (valid) setSent(true); }}
    >
      <Input label="Nome" placeholder="Como podemos te chamar?" value={nome} onChange={(e) => setNome(e.target.value)} required />
      <Input label="WhatsApp" type="tel" placeholder="(84) 9 0000-0000" value={zap} onChange={(e) => setZap(e.target.value)} required />
      <Button type="submit" variant="primary" size="lg" disabled={!valid} style={{ width: '100%' }}>Combinar uma conversa</Button>
      <p style={{ margin: 0, textAlign: 'center', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', lineHeight: 1.5 }}>
        Sem fila e sem disparo automático. Uma conversa por vez.
      </p>
    </form>
  );
}

function Convite() {
  return (
    <section id="convite" className="u-sec" style={{ background: 'var(--areia-clara)' }}>
      <Reveal style={{ maxWidth: 460, margin: '0 auto', textAlign: 'center' }}>
        <h2 className="u-display" style={{ fontSize: 'clamp(26px, 3.4vw, 40px)', fontWeight: 300, letterSpacing: '.05em', margin: '0 0 12px', lineHeight: 1.16, textWrap: 'balance' }}>
          Para conhecer as cinco
        </h2>
        <p style={{ color: 'var(--text-body)', fontSize: 'var(--text-base)', lineHeight: 1.55, margin: '0 0 28px' }}>
          Deixe seu nome. A conversa começa quando for bom para você.
        </p>
        <div style={{ background: 'var(--off)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md)', padding: 'var(--space-6)', textAlign: 'left', boxShadow: 'var(--shadow-card)' }}>
          <ConviteForm />
        </div>
      </Reveal>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ padding: 'var(--space-10) var(--space-6) calc(var(--space-10) + 64px)', textAlign: 'center', background: 'var(--off)' }}>
      <Logo variant="areia" width={100} assetsBase="../../assets" style={{ margin: '0 auto' }} />
      <p style={{ color: 'var(--text-muted)', fontSize: 'var(--text-xs)', marginTop: 18 }}>
        Unique Enseada · Búzios, RN · Construtora Consteb.
      </p>
    </footer>
  );
}

function StickyBar() {
  return (
    <div className="u-stickybar">
      <span style={{ color: 'var(--off)', fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase' }}>
        Unique Enseada
      </span>
      <Button variant="primary" size="md" onClick={scrollToForm}>Conhecer as cinco</Button>
    </div>
  );
}

function App() {
  useRevealAll();
  return (
    <div>
      <PageStyles />
      <Header />
      <Hero />
      <Passagem />
      <Lugar />
      <Cinco />
      <Michelle />
      <Convite />
      <Footer />
      <StickyBar />
    </div>
  );
}

Object.assign(window, { CapturaApp: App });
