// components.jsx — Denis Moriama site components
const { useState, useEffect, useRef, useMemo } = React;

// ─────────────────────────────────────────────────────────────────
// NAVIGATION
// ─────────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 80);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={`nav${scrolled ? " scrolled" : ""}`}>
      <a href="#home" className="nav-logo">
        <img className="nav-logo-mark" src="assets/logo-dmoriama.jpg" alt="DMORIAMA" />
        <span className="mark">Denis Moriama</span>
        <span className="sub">Arq. & Construção</span>
      </a>
      <div className="nav-links">
        <a href="#perfil">Perfil</a>
        <a href="#projetos">Projetos</a>
        <a href="#midia">Mídia</a>
        <a href="#artigos">Artigos</a>
        <a href="#contato">Contato</a>
        <a href="Login Denis Moriama.html" style={{color: "var(--gold)"}}>Área do cliente</a>
      </div>
      <a href="#contato" className="nav-cta">
        Solicitar Orçamento
        <span style={{fontSize: 14}}>→</span>
      </a>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section id="home" className="hero">
      <div className="hero-bg" />
      <div className="hero-overlay" />
      <div className="hero-content">
        <div className="hero-grid">
          <div>
            <div className="eyebrow" style={{color: "var(--gold)"}}>
              Projeto<span className="dot"></span>Construção<span className="dot"></span>Gestão Total de Obra
            </div>
            <h1>
              Do papel<br/>
              à realidade,<br/>
              <em>com excelência.</em>
            </h1>
          </div>
          <div className="hero-side">
            <p>
              Especialista em projeto e construção, Denis Moriama entrega muito
              mais do que um projeto: entrega a obra pronta, gerenciada do
              início ao fim, com a qualidade que o seu patrimônio merece.
            </p>
            <a href="#contato" className="btn-primary">
              Solicitar Orçamento
              <span className="arr" />
            </a>
          </div>
        </div>
      </div>
      <div className="hero-bottom">
        <div className="hero-meta">Alphaville · SP · Brasil</div>
        <div className="scroll">
          <span>Role</span>
          <span className="scroll-line" />
        </div>
        <div className="hero-meta" style={{textAlign: "right"}}>Por Denis Moriama · CAU/SP</div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// INTRO + NUMBERS
// ─────────────────────────────────────────────────────────────────
function CountUp({ to, duration = 1800, decimals = 0 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(to * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{val.toFixed(decimals)}</span>;
}

function Intro({ stats }) {
  return (
    <section id="perfil" className="intro">
      <div className="container">
        <div className="intro-grid">
          <div>
            <div className="eyebrow">
              <span className="dot"></span>O Arquiteto-Construtor
            </div>
            <h2 className="display">
              Denis <em>não fica</em><br/>
              só no desenho.
            </h2>
          </div>
          <div>
            <p>
              Está presente na obra todos os dias — de uniforme, dominando cada
              etapa técnica, garantindo que o que foi projetado seja exatamente
              o que será entregue.
            </p>
            <p>
              São projetos e construções em Alphaville e São Paulo que refletem
              o compromisso de transformar o patrimônio do cliente em um espaço
              de excelência real, do primeiro traço à última instalação.
            </p>
          </div>
        </div>

        <div className="numbers">
          <div className="num">
            <div className="v"><span className="plus">+</span><CountUp to={stats.years} /></div>
            <div className="label">Anos de experiência em projeto e construção</div>
          </div>
          <div className="num">
            <div className="v"><span className="plus">+</span><CountUp to={stats.projects} /></div>
            <div className="label">Projetos entregues com gestão total de obra</div>
          </div>
          <div className="num">
            <div className="v"><span className="plus">+</span><CountUp to={stats.sqm} /><span className="unit">m²</span></div>
            <div className="label">Reformados e construídos em SP e Alphaville</div>
          </div>
          <div className="num">
            <div className="v">01</div>
            <div className="label">Arquiteto que domina do traço à estrutura</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// PORTFOLIO
// ─────────────────────────────────────────────────────────────────
const PROJECTS = [
  {
    id: 1,
    name: "Casa Anália Franco",
    cat: "Residencial",
    tags: ["Residencial", "Reforma"],
    loc: "São Paulo · SP",
    img: "assets/projeto-02-fachada-jardim.webp",
    size: "p-tall",
    year: "2024",
    area: "330 m²",
    scope: "Projeto arquitetônico, reforma estrutural e execução completa.",
    desc: "Reforma residencial com integração entre interior e jardim. Madeira queimada, vidro estrutural e iluminação cênica embutida para uma fachada que respira com o jardim.",
  },
  {
    id: 2,
    name: "Loft Vila Madalena",
    cat: "Reforma · Execução",
    tags: ["Residencial", "Reforma", "Execução de Obra"],
    loc: "São Paulo · SP",
    img: "assets/projeto-03-interior-loft.webp",
    size: "p-short",
    year: "2024",
    area: "180 m²",
    scope: "Instalações elétricas, execução técnica e acabamentos.",
    desc: "Loft industrial com divisórias de vidro canelado e estrutura metálica preta. Concreto aparente preservado, mobiliário em tons quentes para suavizar a aspereza do bruto.",
  },
  {
    id: 3,
    name: "Refúgio Alphaville",
    cat: "Residencial",
    tags: ["Residencial"],
    loc: "Alphaville · SP",
    img: "assets/projeto-05-portfolio.webp",
    size: "p-wide",
    year: "2025",
    area: "320 m²",
    scope: "Projeto e construção integral.",
    desc: "Casa térrea entre pinheiros. Cobogós cerâmicos, concreto aparente e madeira branca laqueada formam uma fachada quase silenciosa, que se entrega ao jardim.",
  },
  {
    id: 4,
    name: "Suíte Master",
    cat: "Interiores",
    tags: ["Residencial", "Reforma"],
    loc: "Alphaville · SP",
    img: "assets/projeto-04-quarto-luxo.webp",
    size: "p-side",
    year: "2025",
    area: "85 m²",
    scope: "Reforma de interiores e detalhamento de marcenaria.",
    desc: "Suíte master com piso de concreto polido, esquadrias metálicas pretas e vidro canelado. Mobiliário em linho e madeira maciça para temperatura visual.",
  },
];

const FILTERS = ["Todos", "Residencial", "Comercial", "Reforma", "Execução de Obra"];

function Portfolio({ onOpen }) {
  const [filter, setFilter] = useState("Todos");
  const list = useMemo(() => (
    filter === "Todos" ? PROJECTS : PROJECTS.filter(p => p.tags.includes(filter))
  ), [filter]);

  return (
    <section id="projetos" className="portfolio">
      <div className="container">
        <div className="portfolio-head">
          <div>
            <div className="eyebrow">
              <span className="dot"></span>Nossos projetos
            </div>
            <h2 className="display">
              Do conceito<br/>
              à <em>obra entregue.</em>
            </h2>
          </div>
          <p>
            Cada projeto carrega a presença direta do Denis: do primeiro traço
            até o último acabamento. Veja na prática o que significa ter um
            arquiteto-construtor cuidando do seu espaço.
          </p>
        </div>

        <div className="filters">
          {FILTERS.map(f => (
            <button
              key={f}
              className={`filter${filter === f ? " active" : ""}`}
              onClick={() => setFilter(f)}
            >{f}</button>
          ))}
        </div>

        <div className="proj-grid">
          {list.map((p) => (
            <article key={p.id} className={`proj ${p.size}`} onClick={() => onOpen(p)}>
              <div className="proj-img">
                <img src={p.img} alt={p.name} loading="lazy" />
              </div>
              <div className="proj-meta">
                <h3>{p.name}</h3>
                <div className="info">
                  <span className="cat">{p.cat}</span>
                  <span className="loc">{p.loc} · {p.year}</span>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="portfolio-footer">
          <span className="count">Exibindo {list.length} de {PROJECTS.length} projetos selecionados</span>
          <a href="#" className="btn-ghost" style={{color: "var(--navy)"}}>
            Ver portfólio completo <span>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// ABOUT
// ─────────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="sobre" className="about">
      <div className="about-bg-num">D</div>
      <div className="container">
        <div className="about-grid">
          <div>
            <div className="about-photo about-photo--real">
              <img className="about-photo-img" src="assets/denis-foto-circle.png" alt="Denis Moriama, arquiteto" />
              <div className="about-tag">CAU/SP · 26 anos de obra</div>
            </div>
          </div>
          <div>
            <div className="eyebrow">
              <span className="dot"></span>Arquiteto & Construtor
            </div>
            <h2 className="display">
              Gestão total da sua obra.<br/>
              <em>Do projeto à entrega</em><br/>
              das chaves.
            </h2>
            <p>
              Denis Moriama é arquiteto especializado em projeto e construção,
              com atuação em Alphaville e São Paulo. Com anos de experiência no
              mercado, ele construiu uma reputação baseada em um diferencial
              claro: ele não apenas projeta — ele constrói.
            </p>
            <p>
              Presente no dia a dia da obra, Denis domina cada etapa técnica,
              da estrutura às instalações elétricas e hidráulicas, garantindo
              que o resultado final seja exatamente o que foi planejado. Essa
              presença ativa, combinada com uma gestão rigorosa e transparente,
              é o que gera a confiança dos seus clientes.
            </p>

            <div className="about-skills">
              <div className="sk"><span className="n">01</span><span className="t">Projeto Arquitetônico</span></div>
              <div className="sk"><span className="n">02</span><span className="t">Gestão Total de Obra</span></div>
              <div className="sk"><span className="n">03</span><span className="t">Execução Técnica</span></div>
              <div className="sk"><span className="n">04</span><span className="t">Interiores & Acabamentos</span></div>
            </div>

            <blockquote className="about-quote">
              Consagre ao Senhor tudo o que você faz, e os seus planos serão
              bem-sucedidos.
              <cite>— Provérbios 16:3</cite>
            </blockquote>

            <a href="#contato" className="btn-ghost">
              Conheça Denis Moriama <span>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// TESTIMONIALS
// ─────────────────────────────────────────────────────────────────
const TESTIMONIALS = [
  {
    quote: "Denis entendeu o nosso desejo e a particularidade de cada membro da família antes mesmo de colocar no papel o primeiro traço do projeto.",
    name: "Família R.",
    role: "Residencial · Alphaville",
  },
  {
    quote: "A experiência de trabalhar com Denis foi transformadora. Ele esteve presente em cada etapa da obra — isso fez toda a diferença no resultado final.",
    name: "Marina A.",
    role: "Reforma · Vila Madalena",
  },
  {
    quote: "Profissional impecável. Entregou exatamente o que prometeu, no prazo e com a qualidade que esperávamos para o nosso espaço.",
    name: "Eduardo C.",
    role: "Residencial · Anália Franco",
  },
];

function Testimonials() {
  return (
    <section id="midia" className="testi">
      <div className="container">
        <div className="testi-head">
          <div>
            <div className="eyebrow">
              <span className="dot"></span>O que nossos clientes falam
            </div>
            <h2 className="display">
              Confiança que <em>se constrói</em><br/>
              tijolo por tijolo.
            </h2>
          </div>
          <span style={{
            fontFamily: "var(--mono)",
            fontSize: 11,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--muted)",
          }}>03 de 27 depoimentos</span>
        </div>
        <div className="testi-grid">
          {TESTIMONIALS.map((t, i) => (
            <div className="testi-card" key={i}>
              <div className="quote-mark">“</div>
              <div className="quote">{t.quote}</div>
              <div className="author">
                <strong>{t.name}</strong> · {t.role}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// BLOG / ARTICLES
// ─────────────────────────────────────────────────────────────────
const ARTICLES = [
  { n: "01", cat: "Insights", title: "Arquiteto ou engenheiro: qual contratar para a sua obra?", date: "Mar · 2026" },
  { n: "02", cat: "Técnica", title: "5 erros que acontecem em reformas sem acompanhamento técnico.", date: "Fev · 2026" },
  { n: "03", cat: "Bastidores", title: "Como funciona a gestão total de obra no escritório Denis Moriama.", date: "Jan · 2026" },
];

function Blog() {
  return (
    <section id="artigos" className="blog">
      <div className="container">
        <div className="blog-head">
          <div>
            <div className="eyebrow">
              <span className="dot"></span>Tendências & Técnica
            </div>
            <h2 className="display">
              Arquitetura,<br/>
              construção & <em>gestão de obra.</em>
            </h2>
          </div>
          <p>
            Conteúdo direto sobre o universo do projeto e construção: do que
            acontece na obra ao que você precisa saber antes de contratar um
            arquiteto.
          </p>
        </div>

        <div className="blog-list">
          {ARTICLES.map((a, i) => (
            <a href="#" key={i} className="blog-row">
              <span className="num">{a.n}</span>
              <span className="cat">{a.cat}</span>
              <h3>{a.title}</h3>
              <span className="date">{a.date}</span>
              <span className="arrow">→</span>
            </a>
          ))}
        </div>

        <div style={{marginTop: 40, display: "flex", justifyContent: "flex-end"}}>
          <a href="#" className="btn-ghost" style={{color: "var(--navy)"}}>
            Ler todos os artigos <span>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// FINAL CTA
// ─────────────────────────────────────────────────────────────────
function CTA() {
  return (
    <section id="contato" className="cta">
      <div className="cta-img" />
      <div className="cta-content">
        <div className="eyebrow" style={{color: "var(--gold)"}}>
          <span className="dot"></span>Solicitar Orçamento
        </div>
        <h2 className="display">
          Pronto para transformar o seu espaço<br/>
          com quem entende de <em>obra de verdade?</em>
        </h2>
        <p>
          Denis Moriama cuida do seu projeto e da sua construção do início ao
          fim. Fale agora e receba um orçamento personalizado para a sua obra
          em Alphaville ou São Paulo.
        </p>
        <div className="cta-buttons">
          <a href="#" className="btn-primary">
            Solicitar Orçamento <span className="arr" />
          </a>
          <a href="https://wa.me/5511972214510?text=Ol%C3%A1%20Denis%21%20Vim%20pelo%20seu%20site%20e%20gostaria%20de%20conversar%20sobre%20um%20projeto." target="_blank" rel="noopener" className="btn-ghost" style={{color: "var(--ivory)"}}>
            Falar pelo WhatsApp <span>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// FLOATING WHATSAPP
// ─────────────────────────────────────────────────────────────────
function FloatingWhatsApp() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const on = () => setShow(window.scrollY > 400);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const msg = encodeURIComponent("Olá Denis! Vim pelo seu site e gostaria de conversar sobre um projeto.");
  return (
    <a
      href={`https://wa.me/5511972214510?text=${msg}`}
      target="_blank"
      rel="noopener"
      className={`float-wa${show ? " in" : ""}`}
      aria-label="Falar pelo WhatsApp"
    >
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6 0-.3-.1-1.2-.5-2.3-1.4-.9-.7-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5 0-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.5 0 1.5 1.1 2.9 1.3 3.1.2.2 2.2 3.4 5.3 4.7.7.3 1.3.5 1.8.6.7.2 1.4.2 2 .1.6-.1 1.7-.7 2-1.4.3-.7.3-1.2.2-1.4-.1-.2-.3-.3-.6-.4zM12 22a10 10 0 1 1 5.2-18.5L20 2l-1.5 2.7A10 10 0 0 1 12 22z"/>
      </svg>
      <span className="float-wa-lbl">Falar agora</span>
    </a>
  );
}

// ─────────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <div className="mark">Denis Moriama</div>
            <div className="tag">Arquitetura & Construção</div>
            <p>
              Alphaville · Barueri — SP · Brasil.<br/>
              Projeto, construção e gestão total de obra para o mercado de
              alto padrão. Atuação em todo o estado de São Paulo.
            </p>
          </div>
          <div className="footer-col">
            <h4>Atendimento</h4>
            <ul>
              <li>Seg — Sex · 8h às 18h</li>
              <li>Sáb · Mediante agendamento</li>
              <li style={{paddingTop: 12, color: "var(--gold)"}}>+55 (11) 97221-4510</li>
              <li>Alphaville · SP · Brasil</li>
              <li>contato@denismoriama.arq.br</li>
              <li style={{paddingTop: 12, color: "var(--gold)"}}><a href="Login Denis Moriama.html">Área do Cliente / CRM →</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Navegação</h4>
            <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#perfil">Perfil</a></li>
              <li><a href="#projetos">Projetos</a></li>
              <li><a href="#artigos">Artigos</a></li>
              <li><a href="#contato">Contato</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Redes</h4>
            <ul>
              <li><a href="#">Instagram ↗</a></li>
              <li><a href="#">LinkedIn ↗</a></li>
              <li><a href="#">YouTube ↗</a></li>
              <li><a href="https://wa.me/5511972214510" target="_blank" rel="noopener">WhatsApp ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Denis Moriama Arquitetura e Construção · CNPJ XX.XXX.XXX/0001-XX</span>
          <div className="links">
            <a href="#">Política de Privacidade</a>
            <a href="#">Termos</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────────
// PROJECT MODAL
// ─────────────────────────────────────────────────────────────────
function ProjectModal({ project, onClose }) {
  useEffect(() => {
    const k = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, [onClose]);

  return (
    <div className={`modal-backdrop${project ? " open" : ""}`} onClick={onClose}>
      <div className="modal-wrap">
        {project && (
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-img" style={{backgroundImage: `url(${project.img})`}} />
            <div className="modal-body">
              <div className="eyebrow">
                <span className="dot"></span>Projeto · {project.year}
              </div>
              <h3>
                {project.name.split(" ").slice(0, -1).join(" ")}{" "}
                <em>{project.name.split(" ").slice(-1)[0]}</em>
              </h3>
              <p>{project.desc}</p>
              <dl>
                <dt>Categoria</dt><dd>{project.cat}</dd>
                <dt>Localização</dt><dd>{project.loc}</dd>
                <dt>Área</dt><dd>{project.area}</dd>
                <dt>Escopo</dt><dd>{project.scope}</dd>
              </dl>
            </div>
            <button className="modal-close" onClick={onClose}>✕</button>
          </div>
        )}
      </div>
    </div>
  );
}


// ─────────────────────────────────────────────────────────────────
// AI CONSULTANT — Assistente de Arquitetura
// ─────────────────────────────────────────────────────────────────
const STYLES = [
  {
    id: "moderno", label: "Moderno", icon: "◻",
    colors: [{ hex: "#F5F5F5", name: "Branco neve" }, { hex: "#2C2C2C", name: "Cinza antracite" }, { hex: "#C5A059", name: "Dourado" }, { hex: "#E8E4DF", name: "Off-white" }],
    floor: "Porcelanato claro ou concreto polido",
    desc: "Linhas retas, espaços integrados e materiais contemporâneos."
  },
  {
    id: "classico", label: "Clássico", icon: "⬡",
    colors: [{ hex: "#F4F1EC", name: "Ivory" }, { hex: "#0A1F44", name: "Azul marinho" }, { hex: "#C5A059", name: "Dourado" }, { hex: "#8B5E3C", name: "Madeira" }],
    floor: "Mármore, granito ou madeira nobre",
    desc: "Sofisticação atemporal com detalhes ricos e materiais nobres."
  },
  {
    id: "minimalista", label: "Minimalista", icon: "—",
    colors: [{ hex: "#FFFFFF", name: "Branco puro" }, { hex: "#E0E0E0", name: "Cinza claro" }, { hex: "#1A1A1A", name: "Preto" }, { hex: "#D6C9B6", name: "Areia" }],
    floor: "Concreto polido ou porcelanato retificado",
    desc: "Menos é mais. Espaços limpos, funcionais e sem ruído visual."
  },
  {
    id: "industrial", label: "Industrial", icon: "⬔",
    colors: [{ hex: "#3D3D3D", name: "Cinza escuro" }, { hex: "#7A6E64", name: "Cimento" }, { hex: "#C17F24", name: "Cobre" }, { hex: "#F0EBE3", name: "Off-white quente" }],
    floor: "Cimento queimado ou concreto aparente",
    desc: "Estruturas expostas, metal e concreto com aconchego controlado."
  },
  {
    id: "natural", label: "Natural", icon: "◯",
    colors: [{ hex: "#E8D5B0", name: "Areia quente" }, { hex: "#5C7A3E", name: "Verde oliva" }, { hex: "#8B6914", name: "Ocre" }, { hex: "#C9B99A", name: "Bege natural" }],
    floor: "Madeira, pedra natural ou cerâmica rústica",
    desc: "Materiais orgânicos, tons terrosos e conexão com a natureza."
  },
  {
    id: "contemporaneo", label: "Contemporâneo", icon: "◈",
    colors: [{ hex: "#F0ECE4", name: "Linho" }, { hex: "#354A5F", name: "Azul ardósia" }, { hex: "#9B7E4E", name: "Caramelo" }, { hex: "#D4CFCA", name: "Greige" }],
    floor: "Porcelanato bold ou madeira clara",
    desc: "Mistura elegante entre estilos com toque atual e sofisticado."
  },
];

const ROOMS = ["Sala de estar","Cozinha","Suíte master","Banheiro","Área externa","Escritório","Área gourmet","Fachada completa","Quarto de hóspedes","Lavabo"];
const AREAS = ["Até 50 m²","50 a 100 m²","100 a 200 m²","200 a 400 m²","Acima de 400 m²"];
const BUDGETS = ["Até R$ 80 mil","R$ 80 a 200 mil","R$ 200 a 500 mil","R$ 500 mil a 1 mi","Acima de R$ 1 milhão"];
const TIPOS = ["Apartamento","Casa","Imóvel comercial","Outro"];

function AIConsultant() {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({});
  const [textInput, setTextInput] = React.useState("");
  const [selectedRooms, setSelectedRooms] = React.useState([]);
  const [sent, setSent] = React.useState(false);
  const chatRef = React.useRef(null);

  React.useEffect(() => {
    if (chatRef.current) chatRef.current.scrollTop = chatRef.current.scrollHeight;
  }, [step, sent]);

  function advance(updates) {
    setData(prev => ({ ...prev, ...updates }));
    setStep(s => s + 1);
    setTextInput("");
  }

  function buildWhatsApp() {
    const s = STYLES.find(x => x.id === data.estilo) || {};
    const rooms = selectedRooms.length ? selectedRooms.join(", ") : "—";
    const palette = (s.colors || []).map(c => c.name).join(", ");
    const msg = `Olá Denis! Vim pelo site e tenho interesse em um projeto.\n\n📋 *Briefing do meu projeto:*\n• Tipo do imóvel: ${data.tipo || "—"}\n• Ambientes: ${rooms}\n• Estilo escolhido: ${s.label || "—"}\n• Paleta sugerida: ${palette}\n• Piso recomendado: ${s.floor || "—"}\n• Área estimada: ${data.area || "—"}\n• Orçamento: ${data.orcamento || "—"}\n\n👤 *Meus dados:*\n• Nome: ${data.nome || "—"}\n• Telefone: ${data.telefone || "—"}\n\nAguardo seu contato!`;
    return `https://wa.me/5511972214510?text=${encodeURIComponent(msg)}`;
  }

  const aiMessages = [
    "Olá! Sou o assistente de arquitetura do Denis Moriama. Vou te ajudar a montar o briefing do seu projeto — leva menos de 2 minutos. Qual é o tipo do imóvel?",
    `Ótimo! E quais ambientes você quer reformar ou criar? Selecione todos que se aplicam.`,
    `Perfeito! Agora me conta: qual estilo visual mais combina com você?`,
    (d) => {
      const s = STYLES.find(x => x.id === d.estilo);
      return `Excelente escolha! O estilo *${s?.label}* pede ${s?.floor}. Aqui está a paleta sugerida para o seu projeto. Qual é a área aproximada?`;
    },
    "Quase lá! Qual é o orçamento estimado para o projeto?",
    "Para o Denis entrar em contato, qual é o seu nome completo?",
    (d) => `Prazer, ${d.nome}! E seu WhatsApp para contato?`,
    (d) => `Perfeito, ${d.nome}! Preparei o briefing completo com a paleta de cores e o piso recomendado. Clique no botão abaixo para enviar tudo para o Denis pelo WhatsApp.`,
  ];

  function getMsg(idx) {
    const m = aiMessages[Math.min(idx, aiMessages.length - 1)];
    return typeof m === "function" ? m(data) : m;
  }

  const selectedStyle = STYLES.find(x => x.id === data.estilo);

  return (
    <section id="consultor-ia" className="ai-section">
      <div className="container">
        <div className="ai-grid">
          {/* Left — copy */}
          <div className="ai-left">
            <div className="eyebrow" style={{color:"var(--gold)"}}>
              <span className="dot"></span>Novo · Consultor de Arquitetura
            </div>
            <h2 className="display">
              Seu projeto começa<br/>
              com uma <em>conversa.</em>
            </h2>
            <p>
              Nosso assistente de arquitetura coleta todas as informações do
              seu espaço, sugere paleta de cores e materiais para o seu estilo,
              e entrega o briefing completo direto para o Denis.
            </p>
            <div className="ai-features">
              <div className="ai-feat"><span className="ai-feat-n">01</span><div><strong>Conte sobre o imóvel</strong><span>Tipo, ambientes e área que deseja reformar</span></div></div>
              <div className="ai-feat"><span className="ai-feat-n">02</span><div><strong>Escolha seu estilo</strong><span>Receba paleta de cores e piso recomendado</span></div></div>
              <div className="ai-feat"><span className="ai-feat-n">03</span><div><strong>Denis recebe o briefing</strong><span>Pelo WhatsApp, já com todas as informações</span></div></div>
            </div>
          </div>

          {/* Right — chat */}
          <div className="ai-chat-wrap">
            <div className="ai-chat-header">
              <div className="ai-avatar">DM</div>
              <div>
                <div className="ai-name">Assistente Denis Moriama</div>
                <div className="ai-status"><span className="ai-dot"></span>online agora</div>
              </div>
            </div>

            <div className="ai-messages" ref={chatRef}>
              {Array.from({ length: step + 1 }).map((_, i) => (
                <div key={i} className="ai-msg-ai">
                  <div className="ai-bubble">{getMsg(i)}</div>

                  {/* Step-specific content inside bubble */}
                  {i === 2 && data.estilo && (
                    <div className="ai-colors">
                      {(STYLES.find(x => x.id === data.estilo)?.colors || []).map((c, ci) => (
                        <div key={ci} className="ai-color-chip">
                          <span style={{background: c.hex}}></span>
                          <small>{c.name}</small>
                        </div>
                      ))}
                    </div>
                  )}
                  {i === 2 && data.estilo && data.area && (
                    <div className="ai-floor-tag">
                      Piso: {STYLES.find(x => x.id === data.estilo)?.floor}
                    </div>
                  )}
                </div>
              ))}

              {/* Show color palette right after style is chosen */}
              {step === 3 && selectedStyle && (
                <div className="ai-msg-ai">
                  <div className="ai-palette-preview">
                    {selectedStyle.colors.map((c, ci) => (
                      <div key={ci} className="ai-color-chip">
                        <span style={{background: c.hex}}></span>
                        <small>{c.name}</small>
                      </div>
                    ))}
                  </div>
                  <div className="ai-floor-tag">🪵 Piso recomendado: {selectedStyle.floor}</div>
                </div>
              )}

              {sent && (
                <div className="ai-msg-ai">
                  <div className="ai-bubble ai-bubble-success">✓ Briefing enviado! Denis entrará em contato em breve.</div>
                </div>
              )}
            </div>

            {/* Input area */}
            <div className="ai-input-area">
              {step === 0 && (
                <div className="ai-choices">
                  {TIPOS.map(t => (
                    <button key={t} className="ai-choice" onClick={() => advance({ tipo: t })}>{t}</button>
                  ))}
                </div>
              )}
              {step === 1 && (
                <div>
                  <div className="ai-choices ai-choices-multi">
                    {ROOMS.map(r => (
                      <button key={r}
                        className={`ai-choice${selectedRooms.includes(r) ? " sel" : ""}`}
                        onClick={() => setSelectedRooms(prev => prev.includes(r) ? prev.filter(x => x !== r) : [...prev, r])}>{r}</button>
                    ))}
                  </div>
                  {selectedRooms.length > 0 && (
                    <button className="ai-confirm" onClick={() => advance({ ambientes: selectedRooms })}>
                      Confirmar ({selectedRooms.length} selecionados) →
                    </button>
                  )}
                </div>
              )}
              {step === 2 && (
                <div className="ai-style-grid">
                  {STYLES.map(s => (
                    <button key={s.id} className="ai-style-card" onClick={() => advance({ estilo: s.id })}>
                      <div className="ai-style-colors">
                        {s.colors.slice(0,3).map((c,ci) => <span key={ci} style={{background: c.hex}}></span>)}
                      </div>
                      <strong>{s.label}</strong>
                      <small>{s.desc}</small>
                    </button>
                  ))}
                </div>
              )}
              {step === 3 && (
                <div className="ai-choices">
                  {AREAS.map(a => (
                    <button key={a} className="ai-choice" onClick={() => advance({ area: a })}>{a}</button>
                  ))}
                </div>
              )}
              {step === 4 && (
                <div className="ai-choices">
                  {BUDGETS.map(b => (
                    <button key={b} className="ai-choice" onClick={() => advance({ orcamento: b })}>{b}</button>
                  ))}
                </div>
              )}
              {step === 5 && (
                <form onSubmit={e => { e.preventDefault(); if (textInput.trim()) advance({ nome: textInput.trim() }); }}>
                  <div className="ai-text-row">
                    <input className="ai-text-in" value={textInput} onChange={e => setTextInput(e.target.value)} placeholder="Seu nome completo" autoFocus />
                    <button type="submit" className="ai-send">→</button>
                  </div>
                </form>
              )}
              {step === 6 && (
                <form onSubmit={e => { e.preventDefault(); if (textInput.trim()) advance({ telefone: textInput.trim() }); }}>
                  <div className="ai-text-row">
                    <input className="ai-text-in" type="tel" value={textInput} onChange={e => setTextInput(e.target.value)} placeholder="(11) 99999-9999" autoFocus />
                    <button type="submit" className="ai-send">→</button>
                  </div>
                </form>
              )}
              {step >= 7 && !sent && (
                <a href={buildWhatsApp()} target="_blank" rel="noopener"
                   className="ai-wa-btn"
                   onClick={() => setSent(true)}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6 0-.3-.1-1.2-.5-2.3-1.4-.9-.7-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5 0-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.5 0 1.5 1.1 2.9 1.3 3.1.2.2 2.2 3.4 5.3 4.7.7.3 1.3.5 1.8.6.7.2 1.4.2 2 .1.6-.1 1.7-.7 2-1.4.3-.7.3-1.2.2-1.4-.1-.2-.3-.3-.6-.4zM12 22a10 10 0 1 1 5.2-18.5L20 2l-1.5 2.7A10 10 0 0 1 12 22z"/></svg>
                  Enviar briefing para o Denis
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
// Export to window for app.jsx
Object.assign(window, {
  Nav, Hero, Intro, Portfolio, About, Testimonials, Blog, CTA, Footer, FloatingWhatsApp, ProjectModal, AIConsultant,
});