// =============================================================================
// REGUELIN RE — Páginas principais
// Home, Sobre, Serviços, Conteúdos, Conteúdo individual, Contato
// =============================================================================

const { useState: useS_M, useEffect: useE_M, useMemo: useMe_M } = React;

// =========================================================================
// HOME
// =========================================================================
function HomePage() {
  // Featured: ordenado por featuredOrder
  const featured = useMe_M(() => {
    return PROPERTIES.filter(p => p.isFeatured).sort((a,b) => (a.featuredOrder ?? 99) - (b.featuredOrder ?? 99));
  }, []);

  return (
    <main id="main-content">
      {/* HERO */}
      <section className="hero pattern-diag">
        <div className="container">
          <div className="hero__grid">
            <div>
              <Reveal>
                <div className="hero__eyebrow">
                  <span className="dot" />
                  <span className="eyebrow-fossil">Reguelin RE · Curitiba / PR</span>
                </div>
              </Reveal>
              <Reveal delay={80}>
                <h1 className="hero__title">
                  Negociações imobiliárias com <em>análise</em>, segurança e previsibilidade.
                </h1>
              </Reveal>
              <Reveal delay={160}>
                <p className="hero__sub">
                  Assessoria boutique para quem entende que cada decisão patrimonial merece a profundidade técnica de um conselheiro — e a curadoria silenciosa de quem conhece o terreno.
                </p>
              </Reveal>
              <Reveal delay={240}>
                <div className="hero__cta-row">
                  <a className="btn btn--primary" href={whatsappURL('Olá, gostaria de iniciar uma conversa preliminar com a equipe da Reguelin RE.')} target="_blank" rel="noopener">
                    Iniciar uma conversa <Icon name="arrow" size={14} color="currentColor" />
                  </a>
                  <Link to="/sobre" className="btn btn--ghost">Conhecer o método</Link>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* PORTFÓLIO EM DESTAQUE */}
      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Portfólio em destaque</div>
              <h2 className="h2 section-head__title">Imóveis em curadoria atual.</h2>
            </div>
            <p className="section-head__lead">
              Uma seleção breve dos imóveis hoje sob condução da casa. Cada um traz seu dossiê de diligência arquivado.
            </p>
          </div>
          <div className="featured-grid">
            {featured.map((p, i) => (
              <Reveal key={p.id} delay={i * 80}>
                <PropertyCard
                  property={p}
                  variant="lg"
                  index={p.featuredOrder}
                />
              </Reveal>
            ))}
          </div>
          {/* IMPORTANTE: nenhum CTA "ver todos" / link para /imoveis aqui — decisão de produto */}
        </div>
      </section>

      {/* PILARES */}
      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>O método</div>
              <h2 className="h2 section-head__title">Três pilares que atravessam cada negociação.</h2>
            </div>
            <p className="section-head__lead">
              Análise, curadoria, condução. A ordem importa — e o cliente percebe pela ausência de surpresas.
            </p>
          </div>
          <div className="pilares">
            <Reveal className="pilar" delay={0}>
              <div className="pilar__num">01 · ANÁLISE</div>
              <h3 className="pilar__title">Diligência documental e jurídica</h3>
              <p className="pilar__body">
                Antes de qualquer recomendação, validamos a integridade documental, a regularidade jurídica e o histórico estrutural do imóvel. Você toma decisão sobre patrimônio com a informação completa em mãos.
              </p>
            </Reveal>
            <Reveal className="pilar" delay={120}>
              <div className="pilar__num">02 · CURADORIA</div>
              <h3 className="pilar__title">Curadoria reservada</h3>
              <p className="pilar__body">
                Selecionamos imóveis pelo critério — não pelo volume. Cada apresentação chega ao cliente já filtrada pela aderência ao perfil, ao horizonte de uso e à viabilidade patrimonial.
              </p>
            </Reveal>
            <Reveal className="pilar" delay={240}>
              <div className="pilar__num">03 · CONDUÇÃO</div>
              <h3 className="pilar__title">Condução do início ao registro</h3>
              <p className="pilar__body">
                Acompanhamos cada etapa da negociação com a discrição e a precisão que o patrimônio exige — da primeira visita à entrega da chave, com o dossiê completo arquivado.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* SOBRE TEASER */}
      <section className="about-teaser">
        <div className="pattern-diag">
          <div className="container">
            <div className="about-teaser__grid">
              <Reveal>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 24 }}>Sobre a casa</div>
                  <h2 className="h2">Uma casa de assessoria — não uma plataforma.</h2>
                  <p style={{ marginTop: 24 }}>
                    A Reguelin RE nasceu da observação de quantas decisões imobiliárias eram tomadas com informação incompleta. Construímos um método para que cada negociação seja tão sólida quanto o patrimônio que ela movimenta.
                  </p>
                  <div style={{ marginTop: 32 }}>
                    <Link to="/sobre" className="btn btn--ghost">Conhecer o método <Icon name="arrow" size={14} /></Link>
                  </div>
                </div>
              </Reveal>
              <Reveal delay={140}>
                <div className="about-teaser__visual" aria-hidden="true">
                  <div className="about-teaser__visual-label">Estúdio · Curitiba / PR</div>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="final-cta">
        <div className="container">
          <div className="final-cta__grid">
            <Reveal>
              <h2 className="final-cta__title">
                Estamos disponíveis para uma conversa preliminar — sem compromisso, com toda a discrição que o tema exige.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <div className="final-cta__ctas">
                <a className="btn btn--primary" href={whatsappURL('Olá, gostaria de uma conversa preliminar.')} target="_blank" rel="noopener">
                  Conversar pelo WhatsApp <Icon name="whatsapp" size={14} />
                </a>
                <Link to="/contato" className="btn btn--ghost">Enviar uma mensagem</Link>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

// =========================================================================
// SOBRE
// =========================================================================
function SobrePage() {
  return (
    <main id="main-content">
      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Sobre a casa · Metodologia</div>
          </Reveal>
          <Reveal delay={80}>
            <p className="long-lead">
              A Reguelin RE é uma casa de assessoria imobiliária dedicada a clientes que reconhecem na propriedade um capítulo de patrimônio — não uma transação.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <Reveal>
            <div className="about-cols">
              <div className="about-cols__label">§ 01 — História</div>
              <div className="about-cols__body">
                <p>
                  Nossa prática nasceu da percepção de que muitas negociações imobiliárias geravam insegurança e prejuízos por falta de análise adequada e atendimento personalizado. Evoluímos para um modelo estruturado, baseado em validação técnica e condução segura — com foco na proteção das partes envolvidas e na perenidade da decisão.
                </p>
              </div>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <div className="about-cols">
              <div className="about-cols__label">§ 02 — Método</div>
              <div className="about-cols__body">
                <p>
                  O diferencial da casa é o que chamamos de <strong style={{ color: 'var(--color-navy)', fontWeight: 500 }}>diligência prévia integral</strong>: antes de apresentar qualquer imóvel à conversa, validamos documentação cartorial, regularidade fiscal, histórico estrutural e aderência mercadológica. Cada imóvel sob nossa condução tem seu dossiê arquivado e disponível ao cliente.
                </p>
                <p>
                  Esse processo não é uma checklist — é a forma como entendemos o ofício. O cliente assina a escritura com a tranquilidade de quem viu o quadro completo.
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Valores institucionais */}
      <section>
        <div className="container">
          <Reveal>
            <div className="section-head">
              <div>
                <div className="eyebrow" style={{ marginBottom: 16 }}>Valores institucionais</div>
                <h2 className="h2 section-head__title">Cinco compromissos que estruturam o ofício.</h2>
              </div>
            </div>
          </Reveal>
          <div className="values-grid">
            {[
              { name: 'Segurança', body: 'Confiabilidade na condução do negócio em todas as etapas.' },
              { name: 'Transparência', body: 'Máxima clareza, demonstrando ao cliente todas as etapas até a finalização.' },
              { name: 'Rigor técnico', body: 'Conhecimento e expertise para garantir uma contratação segura.' },
              { name: 'Responsabilidade', body: 'Atendimento personalizado e exclusivo; tranquilizar o cliente quanto às responsabilidades.' },
              { name: 'Confiança', body: 'Seriedade em todas as etapas para que o cliente não tenha dúvidas sobre o que está contratando.' },
            ].map((v, i) => (
              <Reveal key={v.name} className="value" delay={i*60}>
                <div className="value__num">{String(i+1).padStart(2,'0')}</div>
                <div className="value__name">{v.name}</div>
                <div className="value__body">{v.body}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Marca como pessoa — citação editorial */}
      <section>
        <div className="container container-narrow" style={{ borderTop: '1px solid var(--color-line)', paddingTop: 'var(--s-6)' }}>
          <Reveal>
            <blockquote style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic',
              fontSize: 'clamp(24px, 2.8vw, 36px)', lineHeight: 1.32,
              color: 'var(--color-navy)', margin: 0, maxWidth: '34ch',
              borderLeft: '1px solid var(--color-champagne)', paddingLeft: 'var(--s-6)',
            }}>
              "A Reguelin RE providencia a inteligência técnica necessária para que suas decisões imobiliárias sejam tão sólidas quanto o seu patrimônio."
            </blockquote>
          </Reveal>
        </div>
      </section>

      {/* CTA final */}
      <section className="final-cta">
        <div className="container">
          <div className="final-cta__grid">
            <Reveal>
              <h2 className="final-cta__title">
                Para conversar sobre uma decisão patrimonial específica, iniciamos um diálogo discreto.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <div className="final-cta__ctas">
                <a className="btn btn--primary" href={whatsappURL('Olá, gostaria de conversar sobre uma decisão patrimonial.')} target="_blank" rel="noopener">
                  Conversar pelo WhatsApp <Icon name="whatsapp" size={14} />
                </a>
                <Link to="/contato" className="btn btn--ghost">Enviar uma mensagem</Link>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

// =========================================================================
// SERVIÇOS
// =========================================================================
function ServicosPage() {
  return (
    <main id="main-content">
      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Serviços</div>
          </Reveal>
          <Reveal delay={80}>
            <p className="long-lead" style={{ maxWidth: '38ch' }}>
              Três frentes de atuação, todas atravessadas pelo mesmo método: validação prévia, curadoria silenciosa, condução do início ao registro.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <div className="services-list">
            {SERVICES.sort((a,b)=>a.order-b.order).map((s, i) => (
              <Reveal key={s.id} className="service-row" delay={i*100}>
                <div className="service-row__num">{String(i+1).padStart(2,'0')} / 03</div>
                <div>
                  <h3 className="service-row__title">{s.title}</h3>
                  <div className="service-row__tagline">"{s.tagline}"</div>
                </div>
                <div className="service-row__desc">{s.description}</div>
                <div className="service-row__for">
                  <strong>Para quem é</strong>
                  {s.forWhom}
                  <div style={{ marginTop: 16 }}>
                    <a
                      className="btn--link"
                      href={whatsappURL(`Olá, gostaria de conversar sobre o serviço "${s.title}".`)}
                      target="_blank" rel="noopener"
                    >
                      Conversar sobre este serviço
                    </a>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="final-cta">
        <div className="container">
          <div className="final-cta__grid">
            <Reveal>
              <h2 className="final-cta__title">
                Para entender qual frente faz sentido no seu momento, iniciamos uma conversa preliminar.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <div className="final-cta__ctas">
                <a className="btn btn--primary" href={whatsappURL('Olá, gostaria de entender qual serviço faz sentido no meu momento.')} target="_blank" rel="noopener">
                  Conversar pelo WhatsApp <Icon name="whatsapp" size={14} />
                </a>
                <Link to="/contato" className="btn btn--ghost">Enviar uma mensagem</Link>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

// =========================================================================
// CONTEÚDOS — listagem
// =========================================================================
function ConteudosPage() {
  const sorted = useMe_M(() => [...ARTICLES].sort((a,b) => new Date(b.publishedAt) - new Date(a.publishedAt)), []);
  return (
    <main id="main-content">
      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Conteúdos · Editorial</div>
          </Reveal>
          <Reveal delay={80}>
            <p className="long-lead" style={{ maxWidth: '36ch' }}>
              Reflexões de ofício sobre diligência, curadoria e o ritmo necessário às decisões patrimoniais.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <div className="articles-list">
            {sorted.map((a, i) => (
              <Reveal key={a.id} as="div" delay={i*80}>
                <Link to={`/conteudos/${a.slug}`} className="article-row">
                  <div className="article-row__date">{fmtDateShort(a.publishedAt)}</div>
                  <div>
                    <h3 className="article-row__title">{a.title}</h3>
                    <p className="article-row__sub">{a.subtitle}</p>
                  </div>
                  <div className="article-row__meta">
                    {a.readingTimeMinutes} min · {a.tags[0]}
                  </div>
                </Link>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// =========================================================================
// CONTEÚDO INDIVIDUAL
// =========================================================================
function ArticlePage({ slug }) {
  const article = ARTICLES.find(a => a.slug === slug);
  if (!article) return <NotFoundPage what="Artigo" />;

  // Minimal markdown -> JSX: only ## headings, > blockquote, paragraphs
  const blocks = useMe_M(() => {
    const lines = article.body.split('\n');
    const out = [];
    let para = [];
    const flush = () => { if (para.length) { out.push({ kind: 'p', text: para.join(' ') }); para = []; } };
    for (const ln of lines) {
      if (ln.trim() === '') { flush(); continue; }
      if (ln.startsWith('## ')) { flush(); out.push({ kind: 'h2', text: ln.slice(3).trim() }); continue; }
      if (ln.startsWith('> ')) { flush(); out.push({ kind: 'q', text: ln.slice(2).trim() }); continue; }
      para.push(ln.trim());
    }
    flush();
    return out;
  }, [article.body]);

  return (
    <main id="main-content">
      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <Reveal>
            <div style={{ marginBottom: 'var(--s-6)' }}>
              <Link to="/conteudos" className="mono-meta" style={{ textDecoration: 'none', borderBottom: '1px solid var(--color-line)', paddingBottom: 4 }}>
                ← Editorial · Conteúdos
              </Link>
            </div>
          </Reveal>
          <div className="container-prose" style={{ padding: 0 }}>
            <article className="prose">
              <Reveal><h1>{article.title}</h1></Reveal>
              <Reveal delay={80}><p className="article-sub">{article.subtitle}</p></Reveal>
              <Reveal delay={160}>
                <div className="article-meta">
                  <span>{fmtDate(article.publishedAt)}</span>
                  <span>{article.readingTimeMinutes} min de leitura</span>
                  <span>{article.tags.join(' · ')}</span>
                </div>
              </Reveal>
              {blocks.map((b, i) => {
                if (b.kind === 'h2') return <h2 key={i}>{b.text}</h2>;
                if (b.kind === 'q') return <blockquote key={i}>{b.text}</blockquote>;
                return <p key={i}>{b.text}</p>;
              })}
            </article>
          </div>
        </div>
      </section>

      <section className="final-cta">
        <div className="container">
          <div className="final-cta__grid">
            <Reveal>
              <h2 className="final-cta__title">Para continuar a conversa sobre o que leu, estamos disponíveis.</h2>
            </Reveal>
            <Reveal delay={120}>
              <div className="final-cta__ctas">
                <Link to="/sobre" className="btn btn--ghost">Conhecer o método</Link>
                <Link to="/contato" className="btn btn--primary">Enviar uma mensagem <Icon name="arrow" size={14} /></Link>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

// =========================================================================
// CONTATO
// =========================================================================
function ContatoPage() {
  const [form, setForm] = useS_M({ name: '', email: '', phone: '', message: '' });
  const [errors, setErrors] = useS_M({});
  const [sent, setSent] = useS_M(false);

  const validate = () => {
    const e = {};
    if (form.name.trim().length < 2) e.name = 'Compartilhe seu nome completo para a equipe poder responder.';
    if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = 'Confira o endereço de e-mail.';
    if (form.message.trim().length < 10) e.message = 'Conte um pouco mais do contexto — bastam algumas linhas.';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const onSubmit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    // Mock: in real Next.js, this would POST via lib/api.ts → /api/leads
    setSent(true);
    setForm({ name: '', email: '', phone: '', message: '' });
  };

  return (
    <main id="main-content">
      <section style={{ paddingTop: 'var(--s-7)' }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Contato</div>
          </Reveal>
          <Reveal delay={80}>
            <p className="long-lead" style={{ maxWidth: '36ch' }}>
              Estamos disponíveis para conversas preliminares, sem compromisso e com toda a discrição que cada caso exige.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 'var(--s-6)' }}>
        <div className="container">
          <div className="contato-grid">
            <Reveal>
              <form className="form" onSubmit={onSubmit} noValidate>
                <p style={{ color: 'var(--color-fossil)', fontSize: 15, maxWidth: '52ch', marginBottom: 12 }}>
                  Compartilhe um pouco de contexto e nossa equipe responde em breve.
                </p>
                <div className="field">
                  <label htmlFor="f-name">Nome</label>
                  <input id="f-name" type="text" value={form.name}
                    aria-describedby={errors.name ? 'err-name' : undefined}
                    aria-invalid={!!errors.name}
                    onChange={(e)=>setForm({...form, name: e.target.value})} />
                  {errors.name && <div className="err" id="err-name">{errors.name}</div>}
                </div>
                <div className="field">
                  <label htmlFor="f-email">E-mail</label>
                  <input id="f-email" type="email" value={form.email}
                    aria-describedby={errors.email ? 'err-email' : undefined}
                    aria-invalid={!!errors.email}
                    onChange={(e)=>setForm({...form, email: e.target.value})} />
                  {errors.email && <div className="err" id="err-email">{errors.email}</div>}
                </div>
                <div className="field">
                  <label htmlFor="f-phone">Telefone <span className="opt">(opcional)</span></label>
                  <input id="f-phone" type="tel" value={form.phone}
                    onChange={(e)=>setForm({...form, phone: e.target.value})} />
                </div>
                <div className="field">
                  <label htmlFor="f-msg">Como podemos ajudar?</label>
                  <textarea id="f-msg" value={form.message}
                    placeholder="Compartilhe um pouco do contexto — um imóvel específico, uma decisão em andamento, ou apenas uma conversa inicial."
                    aria-describedby={errors.message ? 'err-msg' : undefined}
                    aria-invalid={!!errors.message}
                    onChange={(e)=>setForm({...form, message: e.target.value})} />
                  {errors.message && <div className="err" id="err-msg">{errors.message}</div>}
                </div>
                <div>
                  <button type="submit" className="btn btn--primary">
                    Enviar mensagem <Icon name="arrow" size={14} />
                  </button>
                </div>
                {sent && (
                  <div className="toast" role="status" aria-live="polite">
                    <strong style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 18, marginBottom: 4 }}>Mensagem recebida.</strong>
                    Nossa equipe técnica retornará em breve com uma posição inicial.
                  </div>
                )}
              </form>
            </Reveal>

            <Reveal delay={120}>
              <aside className="contato-side" aria-label="Canais diretos">
                <div className="contato-channel">
                  <div className="contato-channel__label">WhatsApp</div>
                  <a
                    href={whatsappURL('Olá, gostaria de iniciar uma conversa.')}
                    target="_blank" rel="noopener"
                    className="contato-channel__value"
                    style={{ textDecoration: 'none' }}
                  >
                    Conversar pelo WhatsApp →
                  </a>
                </div>
                <div className="contato-channel">
                  <div className="contato-channel__label">Localização</div>
                  <div className="contato-channel__value" style={{ fontSize: 17 }}>Curitiba / PR</div>
                </div>
                <div className="contato-channel">
                  <div className="contato-channel__label">CRECI</div>
                  <div className="contato-channel__value" style={{ fontSize: 17 }}><span className="mono-meta">Creci-PR F57061</span></div>
                </div>
                <div className="contato-channel">
                  <div className="contato-channel__label">Editorial</div>
                  <Link to="/conteudos" className="contato-channel__value" style={{ textDecoration: 'none', fontSize: 17 }}>
                    Conteúdos da casa →
                  </Link>
                </div>
              </aside>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

// 404 simple
function NotFoundPage({ what = 'Página' }) {
  return (
    <main id="main-content">
      <section style={{ paddingTop: 'var(--s-9)', paddingBottom: 'var(--s-9)' }}>
        <div className="container container-narrow">
          <div className="eyebrow" style={{ marginBottom: 24 }}>404 · Não localizado</div>
          <h1 className="h1" style={{ marginBottom: 24 }}>{what} fora do arquivo.</h1>
          <p className="lead" style={{ marginBottom: 32 }}>
            O endereço solicitado não foi encontrado em nosso editorial. Talvez tenha sido movido ou ainda esteja em formação.
          </p>
          <Link to="/" className="btn btn--ghost">Voltar para a Home <Icon name="arrow" size={14} /></Link>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, SobrePage, ServicosPage, ConteudosPage, ArticlePage, ContatoPage, NotFoundPage });
