// Landing — Carolina Caribé Mentorias
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D4A574",
  "density": "comfortable",
  "showPainNumbers": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#D4A574", // warm gold (default)
  "#C8765A", // burnt copper
  "#9CB089", // sage
  "#7C9CB5", // muted steel blue
];

// ============ NAV ============
function Nav({ onCTA }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 20);
    f(); window.addEventListener("scroll", f); return () => window.removeEventListener("scroll", f);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">
        <div className="brand">
          <div className="brand-mark">C</div>
          <div className="brand-name">Carolina <em>Caribé</em></div>
        </div>
        <div className="nav-links">
          <a href="#programas">Programas</a>
          <a href="#metodo">Método</a>
          <a href="#carolina">Carolina</a>
          <a href="#resultados">Resultados</a>
        </div>
        <button className="nav-cta" onClick={onCTA}>Aplicar agora</button>
      </div>
    </nav>
  );
}

// ============ HERO ============
function Hero({ onCTA }) {
  return (
    <section className="hero">
      <img className="hero-photo" src="assets/carolina-hero.jpg" width="1600" height="900" alt="Carolina Caribé" fetchpriority="high" decoding="async" />
      <div className="hero-glow" />
      <div className="container hero-inner">
        <div className="hero-eyebrow">
          <span className="dot">✦</span>
          <span><strong>Vagas limitadas</strong></span>
        </div>
        <h1>
          Quem começa sem método aprende caro.<br />
          Quem escala sem método, <em>paga mais caro ainda.</em>
        </h1>
        <p className="hero-sub">
          Mentoria para incorporadores em qualquer estágio que querem tomar as decisões certas,
          com método e acompanhamento real.
        </p>
        <div className="hero-ctas">
          <button className="btn-primary" onClick={onCTA}>
            Preencher formulário <span>→</span>
          </button>
          <a href="#metodo" className="btn-ghost">Ver o método</a>
        </div>
        <div className="hero-meta">
          <div className="hero-meta-item">
            <strong>350+</strong>
            <span>INCORPORADORES MENTORADOS</span>
          </div>
          <div className="hero-meta-item">
            <strong>R$ 25 bi+</strong>
            <span>VGV NO MERCADO BR</span>
          </div>
          <div className="hero-meta-item">
            <strong>18 anos</strong>
            <span>NO MERCADO IMOBILIÁRIO</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ PAIN POINTS ============
const PAINS = [
  "Tem terreno mas não sabe se a viabilidade fecha.",
  "Faz obra ou projeto mas a margem não reflete o esforço.",
  "Quer entrar na incorporação mas não sabe por onde começar sem errar.",
  "Já incorpora, mas cada projeto começa do zero, sem processo, sem padrão.",
  "Tem capital ou acesso a terreno e quer transformar isso em empreendimento.",
  "Quer escalar, mas produto, time e venda não estão encaixados."
];

function PainPoints() {
  return (
    <section className="s container" id="diagnostico">
      <div className="s-head">
        <div className="s-eyebrow">01 · Diagnóstico</div>
        <h2 className="s-title">Você está em <em>um desses pontos?</em></h2>
        <p className="s-sub">
          Marca onde você está hoje. A maioria dos incorporadores trava em pelo menos um destes seis lugares.
        </p>
      </div>
      <div className="pain-grid">
        {PAINS.map((t, i) => (
          <div key={i} className="pain-card">
            <div className="pain-num">{String(i + 1).padStart(2, "0")} / 06</div>
            <p className="pain-body">{t}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ AUDIENCE ============
const AUD = [
  {
    glyph: "E",
    who: "Engenheiro / Construtor",
    body: "Você entende de obra. O que falta é o fluxo completo: <strong>terreno → produto → viabilidade → venda.</strong>"
  },
  {
    glyph: "I",
    who: "Empresário / Investidor",
    body: "Você sabe fazer negócio. O que falta é dominar o <strong>processo específico do desenvolvimento imobiliário.</strong>"
  },
  {
    glyph: "A",
    who: "Arquiteto",
    body: "Você entende de produto. O que falta é <strong>transformar projeto em negócio</strong> com conta fechada e estratégia de venda."
  },
  {
    glyph: "I",
    who: "Incorporador",
    body: "Você já fez. O que falta é parar de improvisar: <strong>clareza, método, margem e escala de lançamentos.</strong>"
  }
];

function Audience() {
  return (
    <section className="s container" id="para-quem">
      <div className="s-head">
        <div className="s-eyebrow">02 · Para quem é</div>
        <h2 className="s-title">Para quem desenvolve ou <em>quer desenvolver</em> produtos imobiliários.</h2>
        <p className="s-sub">
          Método aplicado ao projeto real. Não é intermediação. Não é teoria.
        </p>
      </div>
      <div className="aud-grid">
        {AUD.map((a, i) => (
          <div key={i} className="aud-card">
            <div className="who">
              <div className="who-icon">{a.glyph}</div>
              <span>{a.who}</span>
            </div>
            <p dangerouslySetInnerHTML={{ __html: a.body }} />
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ NOT FOR YOU ============
function NotForYou() {
  return (
    <section className="s container">
      <div className="nfy">
        <h3>Não é <em style={{fontStyle:"italic", color:"var(--accent)"}}>para você</em> se</h3>
        <ul>
          <li>
            <span className="x">✕</span>
            <span>Você atua como <strong style={{color:"var(--text)"}}>corretor</strong> e quer vender mais imóveis. O foco aqui é desenvolvimento do produto imobiliário, não a venda ou intermediação de terrenos.</span>
          </li>
          <li>
            <span className="x">✕</span>
            <span>Você busca conteúdo só <strong style={{color:"var(--text)"}}>para assistir</strong>, sem aplicar a um empreendimento real.</span>
          </li>
        </ul>
      </div>
    </section>
  );
}

// ============ MENTORIAS ============
const MENTORIAS = [
  {
    stage: "Estágio 01",
    name: "Next Developers",
    italic: "Developers",
    desc: "Para quem decidiu que vai se tornar incorporador, não sabe como desenvolver um produto, captar investidores e não quer aprender pagando caro pelo erro.",
    tag: "INÍCIO · DA DECISÃO AO PRIMEIRO LANÇAMENTO"
  },
  {
    stage: "Estágio 02",
    name: "Bootcamp Incorporadores",
    italic: "Incorporadores",
    desc: "Para quem já começou na incorporação, tem terreno ou oportunidade na mesa, precisa de um passo a passo completo e saber se a conta fecha antes de comprometer capital.",
    tag: "EXECUÇÃO · DO TERRENO AO LANÇAMENTO"
  },
  {
    stage: "Estágio 03",
    name: "Acelera On Demand",
    italic: "On Demand",
    desc: "Para quem já é incorporador e desenvolvedor imobiliário, quer crescer com margem de lucro, com estratégia de múltiplos negócios e previsibilidade de lançamento e vendas.",
    tag: "ESCALA · MARGEM, PREVISIBILIDADE, MÚLTIPLOS NEGÓCIOS"
  }
];

function Mentorias({ active, setActive }) {
  return (
    <section className="s container" id="programas">
      <div className="s-head">
        <div className="s-eyebrow">03 · Programas</div>
        <h2 className="s-title">Três mentorias. Um método. <em>A melhor solução</em> aplicada ao seu momento.</h2>
        <p className="s-sub">A avaliação de perfil define qual faz sentido para o seu estágio.</p>
      </div>
      <div className="mentorias-wrap">
        {MENTORIAS.map((m, i) => (
          <div
            key={i}
            className={"mentoria" + (active === i ? " active" : "")}
            onMouseEnter={() => setActive(i)}
          >
            <div className="mentoria-stage">
              <span className="pill">{m.stage}</span>
            </div>
            <h3>
              {m.name.replace(m.italic, "")}
              <em>{m.italic}</em>
            </h3>
            <p>{m.desc}</p>
            <div className="mentoria-tag">{m.tag}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ MÉTODO ============
const METODO_STEPS = [
  "Inteligência de mercado",
  "Estudo de massa",
  "Viabilidade econômica",
  "Definição de produto",
  "Captação de investidores",
  "Cronograma de lançamento",
  "Marketing e vendas"
];

function Metodo() {
  return (
    <section className="s container" id="metodo">
      <div className="s-head">
        <div className="s-eyebrow">04 · Metodologia</div>
        <h2 className="s-title">O método: <em>Fluxo do Desenvolvimento Imobiliário®</em></h2>
        <p className="s-sub">
          Da primeira decisão ao lançamento. Cada etapa com critério. Cada decisão com método.
        </p>
      </div>
      <div className="metodo-wrap">
        <div className="metodo-note">
          <span>Não é curso</span>
          <span>Não é aula</span>
          <span>Não é conteúdo para assistir</span>
        </div>
        <div className="metodo-flow">
          {METODO_STEPS.map((s, i) => (
            <div key={i} className="metodo-step">
              <div className="ms-num">ETAPA {String(i + 1).padStart(2, "0")}</div>
              <div className="ms-label">{s}</div>
            </div>
          ))}
        </div>
        <div className="metodo-conclusion">
          <div>Cada etapa com critério.</div>
          <div>Cada decisão com método. Sem achismo.</div>
        </div>
      </div>
    </section>
  );
}

// ============ CAROLINA BIO ============
function Bio() {
  return (
    <section className="s container" id="carolina">
      <div className="s-head">
        <div className="s-eyebrow">05 · Quem conduz</div>
      </div>
      <div className="bio">
        <div className="bio-portrait">
          <div className="caption">
            <div className="name">Carolina Caribé</div>
            <div className="role">Arquiteta · Mentora · Incorporadora</div>
          </div>
        </div>
        <div className="bio-body">
          <h2>
            Maior especialista e referência em <em>desenvolvimento imobiliário</em> no Brasil.
          </h2>
          <p>
            Arquiteta e urbanista formada pela <strong>UnB</strong>, construiu sua carreira em grandes empresas
            do setor, como <strong>Camargo Corrêa</strong> e <strong>Cyrela Brazil Realty</strong>. MBA em gestão
            de negócios imobiliários pela <strong>FGV</strong> e mestrado em Real Estate and Construction
            Management pelo <strong>KTH Royal Institute of Technology</strong> (Suécia) e pela
            <strong> Bauhaus-Universität Weimar</strong> (Alemanha).
          </p>
          <p>
            Fundadora da <strong>Incorporação na Prática®</strong>, criadora do movimento <em>"O Mercado
            Imobiliário é para Todos! E Ele Pode Ser para Você!"</em> e da metodologia <strong>Fluxo do
            Desenvolvimento Imobiliário®</strong>, que ensina a desenvolver um Produto Imobiliário Viável,
            que se vende pelo maior preço, na maior velocidade e com o maior lucro possível.
          </p>
          <p>
            Sócia da <strong>Mentoring League Society</strong>, ao lado de Flávio Augusto, Caio Carneiro e
            Joel Jota, onde está no top 30 de maiores clubes da liga. Fundadora e coordenadora do
            <strong> MBA em Incorporação e Desenvolvimento Imobiliário</strong>, pela IP University em parceria
            com Eduzz e Unifast.
          </p>
          <p style={{color: "var(--text)"}}>
            Nas mentorias, ela não atua como professora. Atua como <strong>conselheira do seu negócio</strong>:
            analisa viabilidade econômica, produto, marketing e lançamento com base nos seus empreendimentos reais.
          </p>
          <div className="bio-stats">
            <div className="bio-stat"><strong>350+</strong><span>Incorporadores</span></div>
            <div className="bio-stat"><strong>R$ 25bi+</strong><span>Em VGV</span></div>
            <div className="bio-stat"><strong>18 anos</strong><span>De mercado</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ STEPS ============
const STEPS = [
  { time: "2 MIN", title: "Preencha o formulário", body: "Informe seus dados e os dados do empreendimento ou empresa. As perguntas já mapeiam qual mentoria faz sentido para o seu estágio." },
  { time: "ANÁLISE", title: "Avaliação de perfil e aprovação", body: "Nossa equipe analisa seu perfil. Não aprovamos todos. Isso garante que o grupo seja formado por quem vai executar." },
  { time: "CONTÍNUA", title: "Mentoria com Carolina Caribé", body: "Encontros onde o seu projeto vai para a mesa e será analisado, corrigido e direcionado ao vivo." }
];

function Steps({ onCTA }) {
  return (
    <section className="s container">
      <div className="s-head">
        <div className="s-eyebrow">06 · Próximos passos</div>
        <h2 className="s-title">Como entrar: <em>três passos.</em></h2>
      </div>
      <div className="steps-grid">
        {STEPS.map((s, i) => (
          <div key={i} className="step">
            <span className="step-time">{s.time}</span>
            <div className="step-num">{String(i + 1).padStart(2, "0")}</div>
            <h4>{s.title}</h4>
            <p>{s.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ TESTIMONIALS ============
// PLAYLIST: https://www.youtube.com/playlist?list=PLEqx6cx-VFdkFD6F_G1b25ov5yqFvWtvo
// Substitua os videoId abaixo pelos IDs reais (11 caracteres do final do URL do YouTube).
// O thumbnail é puxado automaticamente de img.youtube.com — basta o videoId correto.
const TESTI = [
  { videoId: "kriVa5J6uMQ", name: "José Marques", role: "Incorporador", quote: "A Carolina entrega o que ninguém entrega: o caminho completo, sem atalhos." },
  { videoId: "FqZGATCKKYw", name: "Mentorado do Bootcamp", role: "Bootcamp Incorporadores", quote: "Tinha 12 anos de construtora. Sabia tudo de obra e nada de incorporação. No Bootcamp fechei minha primeira viabilidade e saí com o plano de lançamento montado. VGV de R$ 18M." },
  { videoId: "VXDFDXFOYTs", name: "Mentorado Acelera", role: "Acelera On Demand", quote: "Estava negociando um terreno há meses sem saber se valia. A Carol analisou o EVE ao vivo, apontou o erro no mix, e o VGV saiu R$ 4M maior do que eu tinha projetado." },
  { videoId: "oRwa_PRrc94", name: "Mentorado Next", role: "Next Developers", quote: "Sou engenheiro, sempre trabalhei CLT. No Next entendi o fluxo completo, do terreno ao lançamento. Pela primeira vez tive critério para dizer sim ou não a uma oportunidade." },
  { videoId: "G6w34287-LU", name: "Arquiteta mentorada", role: "Incorporadora", quote: "Eu projetava bem, mas não sabia transformar projeto em negócio. Hoje tenho conta fechada antes de assinar qualquer terreno." },
  { videoId: "5ENS248RNMg", name: "Investidor mentorado", role: "Acelera On Demand", quote: "Eu sabia investir, não desenvolver. A mentoria foi a peça que faltava para estruturar meus próprios empreendimentos." },
  { videoId: "2iAKZVKSqMg", name: "Construtor mentorado", role: "Bootcamp Incorporadores", quote: "Saí da execução para o desenvolvimento. Primeiro projeto próprio lançado seis meses depois do Bootcamp." },
  { videoId: "UhkFu87RDxk", name: "Empresária mentorada", role: "Next Developers", quote: "Não vinha do setor. A clareza do método me deu segurança para entrar com pé direito." },
];

function Testimonials() {
  const [idx, setIdx] = useState(0);
  const [playing, setPlaying] = useState(null);
  const [titles, setTitles] = useState({});
  const [inView, setInView] = useState(false);
  const sectionRef = useRef(null);
  const total = TESTI.length;

  // Defer oEmbed fetches until section enters viewport (or near it)
  useEffect(() => {
    const el = sectionRef.current;
    if (!el || inView) return;
    const io = new IntersectionObserver((entries) => {
      if (entries.some(e => e.isIntersecting)) {
        setInView(true);
        io.disconnect();
      }
    }, { rootMargin: "400px" });
    io.observe(el);
    return () => io.disconnect();
  }, [inView]);

  // Fetch real YouTube titles via oEmbed (only when in view)
  useEffect(() => {
    if (!inView) return;
    let cancelled = false;
    Promise.all(TESTI.map(async (t) => {
      try {
        const r = await fetch(`https://www.youtube.com/oembed?url=https://youtu.be/${t.videoId}&format=json`);
        if (!r.ok) return [t.videoId, null];
        const j = await r.json();
        return [t.videoId, j.title];
      } catch (e) {
        return [t.videoId, null];
      }
    })).then((pairs) => {
      if (cancelled) return;
      const map = {};
      pairs.forEach(([id, title]) => { if (title) map[id] = title; });
      setTitles(map);
    });
    return () => { cancelled = true; };
  }, [inView]);

  const cleanTitle = (s) => {
    if (!s) return s;
    // Remove "depoimento" prefix variations (case-insensitive), bracketed forms, and "com legenda" suffix
    return s
      .replace(/\[\s*depoimento[s]?\s*\]/gi, "")
      .replace(/\(\s*depoimento[s]?\s*\)/gi, "")
      .replace(/^\s*depoimento[s]?\s*(do|da|de|dos|das)?\s*[\-–—:|·•]?\s*/i, "")
      .replace(/\s*[\-–—:|·•]?\s*depoimento[s]?\s*$/i, "")
      .replace(/\s*[\-–—:|·•(\[]?\s*com\s+legenda[s]?\s*[\)\]]?\s*$/i, "")
      .replace(/^\s*[\-–—:|·•]\s*/, "")
      .replace(/\s*[\-–—:|·•]\s*$/, "")
      .trim();
  };

  const current = TESTI[idx];
  const prev = TESTI[(idx - 1 + total) % total];
  const next = TESTI[(idx + 1) % total];

  const go = (dir) => setIdx((i) => (i + dir + total) % total);
  const thumb = (v) => `https://img.youtube.com/vi/${v}/maxresdefault.jpg`;
  const playlistUrl = "https://www.youtube.com/playlist?list=PLEqx6cx-VFdkFD6F_G1b25ov5yqFvWtvo";
  const displayTitle = cleanTitle(titles[current.videoId]) || current.name;

  return (
    <section className="s container" id="resultados" ref={sectionRef}>
      <div className="s-head" style={{maxWidth: 820}}>
        <div className="s-eyebrow">07 · Resultados</div>
        <h2 className="s-title">De quem <em>aplicou o método.</em></h2>
        <p className="s-sub">Depoimentos de incorporadores e desenvolvedores que passaram pelas mentorias.</p>
      </div>

      <div className="testi-stage">
        <div className="testi-stack">
          <div
            className="testi-thumb testi-thumb-prev"
            style={{backgroundImage: `url('${thumb(prev.videoId)}')`}}
            onClick={() => go(-1)}
            role="button"
            aria-label="Depoimento anterior"
            tabIndex={0}
          />
          <div
            className="testi-thumb testi-thumb-next"
            style={{backgroundImage: `url('${thumb(next.videoId)}')`}}
            onClick={() => go(1)}
            role="button"
            aria-label="Próximo depoimento"
            tabIndex={0}
          />
          <div
            key={`main-${idx}`}
            className="testi-thumb testi-thumb-main"
            style={{backgroundImage: `url('${thumb(current.videoId)}')`}}
            onClick={() => setPlaying(current.videoId)}
            role="button"
            tabIndex={0}
            aria-label={`Reproduzir depoimento: ${displayTitle}`}
          >
            <button className="testi-play" aria-label="Reproduzir depoimento">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg>
            </button>
          </div>
        </div>

        <div className="testi-content">
          <div className="testi-content-inner" key={`content-${idx}`}>
            <h3 className="testi-name">{displayTitle}</h3>
            <div className="testi-role">{current.role}</div>
            <blockquote className="testi-quote">"{current.quote}"</blockquote>
            <button className="testi-cta" onClick={() => setPlaying(current.videoId)}>
              Assistir depoimento <span aria-hidden="true">→</span>
            </button>
          </div>
          <div className="testi-nav">
            <button className="testi-arrow" onClick={() => go(-1)} aria-label="Anterior">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
            <button className="testi-arrow" onClick={() => go(1)} aria-label="Próximo">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg>
            </button>
            <div className="testi-counter">
              <span className="cur">{String(idx + 1).padStart(2, "0")}</span>
              <span className="sep">/</span>
              <span className="tot">{String(total).padStart(2, "0")}</span>
            </div>
            <a className="testi-playlist" href={playlistUrl} target="_blank" rel="noopener noreferrer">Ver playlist completa ↗</a>
          </div>
        </div>
      </div>

      {playing && (
        <div className="video-back" onClick={() => setPlaying(null)}>
          <div className="video-frame" onClick={(e) => e.stopPropagation()}>
            <button className="video-close" onClick={() => setPlaying(null)} aria-label="Fechar">✕</button>
            <iframe
              src={`https://www.youtube.com/embed/${playing}?autoplay=1&list=PLEqx6cx-VFdkFD6F_G1b25ov5yqFvWtvo`}
              title="Depoimento"
              frameBorder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            />
          </div>
        </div>
      )}
    </section>
  );
}

// ============ FINAL CTA ============
function FinalCTA({ onCTA }) {
  return (
    <section className="s container">
      <div className="final-cta">
        <div className="final-cta-inner">
          <h2>Qual é o <em>seu próximo empreendimento?</em></h2>
          <p>
            Preencha o formulário. Nossa equipe identifica qual mentoria faz sentido para o seu momento e entra em contato.
          </p>
          <div className="hero-ctas">
            <button className="btn-primary" onClick={onCTA}>Aplicar para avaliação de perfil <span>→</span></button>
            <a href="#metodo" className="btn-ghost">Ver o método</a>
          </div>
          <div className="final-cta-notes">
            <span>Vagas limitadas por mentoria</span>
            <span>Aprovação mediante avaliação de perfil</span>
            <span>Duração do formulário: 2 minutos</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-inner">
          <div className="foot-col">
            <div className="brand" style={{marginBottom: 12}}>
              <div className="brand-mark">C</div>
              <div className="brand-name">Carolina <em>Caribé</em></div>
            </div>
            <p className="foot-tag">
              Mentorias em desenvolvimento imobiliário. Método aplicado ao empreendimento real,
              da primeira decisão ao lançamento.
            </p>
          </div>
          <div className="foot-col">
            <h5>Programas</h5>
            <a href="#programas">Next Developers</a>
            <a href="#programas">Bootcamp Incorporadores</a>
            <a href="#programas">Acelera On Demand</a>
          </div>
          <div className="foot-col">
            <h5>Método</h5>
            <a href="#metodo">Fluxo do desenvolvimento</a>
            <a href="#carolina">Carolina Caribé</a>
            <a href="#resultados">Resultados</a>
          </div>
          <div className="foot-col">
            <h5>Contato</h5>
            <a href="https://viewer.incorporacaonapratica.com/aplicacaomentoria" target="_blank" rel="noopener noreferrer">Avaliação de perfil</a>
            <a href="#">Imprensa</a>
            <a href="#">LinkedIn</a>
            <a href="#">Instagram</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 INCORPORAÇÃO NA PRÁTICA®</span>
          <span>FLUXO DO DESENVOLVIMENTO IMOBILIÁRIO®</span>
        </div>
      </div>
    </footer>
  );
}

// ============ APPLICATION MODAL ============
function ApplyModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({ stage: "", name: "", email: "", phone: "", project: "" });
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    if (open) { setStep(0); setSubmitted(false); }
  }, [open]);

  const stages = [
    "Quero entrar na incorporação",
    "Tenho terreno ou oportunidade",
    "Já incorporo, quero escalar",
    "Tenho capital para alocar"
  ];

  const canNext = () => {
    if (step === 0) return data.stage !== "";
    if (step === 1) return data.name && data.email;
    if (step === 2) return data.project !== "";
    return true;
  };

  return (
    <div className={"modal-back" + (open ? " open" : "")} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>✕</button>
        {!submitted && (
          <>
            <h3>Avaliação de perfil · Aplicação</h3>
            <p className="modal-sub">Duração: 2 minutos. Suas respostas mapeiam qual mentoria faz sentido para o seu estágio.</p>
            <div className="modal-step-dots">
              {[0,1,2].map((i) => <div key={i} className={i <= step ? "active" : ""} />)}
            </div>

            {step === 0 && (
              <div className="field">
                <label>Onde você está hoje?</label>
                <div className="field-options">
                  {stages.map((s) => (
                    <button
                      key={s}
                      className={data.stage === s ? "selected" : ""}
                      onClick={() => setData({...data, stage: s})}
                    >{s}</button>
                  ))}
                </div>
              </div>
            )}

            {step === 1 && (
              <>
                <div className="field">
                  <label>Nome completo</label>
                  <input value={data.name} onChange={(e) => setData({...data, name: e.target.value})} placeholder="Ex.: João Silva" />
                </div>
                <div className="field">
                  <label>E-mail profissional</label>
                  <input type="email" value={data.email} onChange={(e) => setData({...data, email: e.target.value})} placeholder="voce@empresa.com" />
                </div>
                <div className="field">
                  <label>WhatsApp</label>
                  <input value={data.phone} onChange={(e) => setData({...data, phone: e.target.value})} placeholder="(11) 9 9999-9999" />
                </div>
              </>
            )}

            {step === 2 && (
              <div className="field">
                <label>Tem empreendimento em mente?</label>
                <textarea
                  rows="5"
                  value={data.project}
                  onChange={(e) => setData({...data, project: e.target.value})}
                  placeholder="Conte rapidamente sobre o terreno, cidade, perfil do produto ou estágio do negócio…"
                />
              </div>
            )}

            <div className="modal-actions">
              <button className="btn-ghost" onClick={() => step === 0 ? onClose() : setStep(step - 1)}>
                {step === 0 ? "Cancelar" : "← Voltar"}
              </button>
              <button
                className="btn-primary"
                disabled={!canNext()}
                style={!canNext() ? {opacity: 0.4, cursor: "not-allowed"} : {}}
                onClick={() => {
                  if (!canNext()) return;
                  if (step < 2) setStep(step + 1);
                  else setSubmitted(true);
                }}
              >
                {step < 2 ? "Continuar →" : "Enviar para avaliação de perfil →"}
              </button>
            </div>
          </>
        )}

        {submitted && (
          <div className="modal-success">
            <div className="check">✓</div>
            <h3>Aplicação enviada</h3>
            <p className="modal-sub" style={{marginTop: 8}}>
              Nossa equipe analisa em até 72h e entra em contato pelo WhatsApp informado.
            </p>
            <button className="btn-primary" onClick={onClose} style={{marginTop: 12}}>Fechar</button>
          </div>
        )}
      </div>
    </div>
  );
}

// ============ APP ============
function App() {
  const [tweaks, setTweak] = (window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]))(TWEAK_DEFAULTS);
  const [modalOpen, setModalOpen] = useState(false);
  const [activeMentoria, setActiveMentoria] = useState(1);

  // Apply accent
  useEffect(() => {
    const accent = tweaks.accent || "#D4A574";
    document.documentElement.style.setProperty("--accent", accent);
    // recompute soft/glow from hex
    const hex = accent.replace("#", "");
    const r = parseInt(hex.slice(0,2), 16);
    const g = parseInt(hex.slice(2,4), 16);
    const b = parseInt(hex.slice(4,6), 16);
    document.documentElement.style.setProperty("--accent-soft", `rgba(${r}, ${g}, ${b}, 0.12)`);
    document.documentElement.style.setProperty("--accent-glow", `rgba(${r}, ${g}, ${b}, 0.18)`);
  }, [tweaks.accent]);

  useEffect(() => {
    if (tweaks.density === "compact") {
      document.documentElement.style.setProperty("--pad-section", "80px");
    } else {
      document.documentElement.style.setProperty("--pad-section", "120px");
    }
  }, [tweaks.density]);

  const openModal = () => window.open("https://viewer.incorporacaonapratica.com/aplicacaomentoria", "_blank", "noopener,noreferrer");

  return (
    <>
      <Nav onCTA={openModal} />
      <Hero onCTA={openModal} />
      <PainPoints />
      <Audience />
      <NotForYou />
      <Mentorias active={activeMentoria} setActive={setActiveMentoria} />
      <Metodo />
      <Bio />
      <Steps onCTA={openModal} />
      <Testimonials />
      <FinalCTA onCTA={openModal} />
      <Footer />
      <ApplyModal open={modalOpen} onClose={() => setModalOpen(false)} />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Marca" />
          <window.TweakColor
            label="Cor de acento"
            value={tweaks.accent}
            options={ACCENT_OPTIONS}
            onChange={(v) => setTweak("accent", v)}
          />
          <window.TweakSection label="Layout" />
          <window.TweakRadio
            label="Densidade"
            value={tweaks.density}
            options={[
              { value: "comfortable", label: "Espaçada" },
              { value: "compact", label: "Compacta" }
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </window.TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);