/* global React */
const { useState, useEffect, useRef } = React;

// =============================================================
// LANG SWITCHER, bandeiras SVG inline (sem dependência externa)
// Conectado ao window.setLimifyLang / window.LIMIFY_LANG (i18n.js)
// =============================================================
const FlagBR = () => (
  <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
    <defs><clipPath id="brc"><circle cx="9" cy="9" r="9"/></clipPath></defs>
    <g clipPath="url(#brc)">
      <rect width="18" height="18" fill="#009C3B"/>
      <path d="M9 2.5L16 9l-7 6.5L2 9z" fill="#FFDF00"/>
      <circle cx="9" cy="9" r="3" fill="#002776"/>
      <path d="M6.2 8.8c1.6-.5 3.5-.5 5.6.1" stroke="#fff" strokeWidth="0.5" fill="none"/>
    </g>
  </svg>
);

const FlagUS = () => (
  <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
    <defs><clipPath id="usc"><circle cx="9" cy="9" r="9"/></clipPath></defs>
    <g clipPath="url(#usc)">
      <rect width="18" height="18" fill="#fff"/>
      {[0,2,4,6,8,10,12].map(y => (
        <rect key={y} y={y * 1.286} width="18" height="1.286" fill="#B22234"/>
      ))}
      <rect width="8" height="9" fill="#3C3B6E"/>
      {Array.from({ length: 9 }).map((_, i) => (
        <circle key={i} cx={1.2 + (i % 4) * 1.8} cy={1.2 + Math.floor(i / 4) * 2} r="0.3" fill="#fff"/>
      ))}
    </g>
  </svg>
);

const FlagES = () => (
  <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
    <defs><clipPath id="esc"><circle cx="9" cy="9" r="9"/></clipPath></defs>
    <g clipPath="url(#esc)">
      <rect width="18" height="18" fill="#AA151B"/>
      <rect y="4.5" width="18" height="9" fill="#F1BF00"/>
    </g>
  </svg>
);

const LANGS = [
  { code: 'pt', label: 'Português', short: 'PT', Flag: FlagBR },
  { code: 'en', label: 'English',   short: 'EN', Flag: FlagUS },
  { code: 'es', label: 'Español',   short: 'ES', Flag: FlagES },
];

// Hook: re-render quando idioma muda (via window.setLimifyLang em i18n.js)
function useLang() {
  const [, setTick] = useState(0);
  useEffect(() => {
    const h = () => setTick(x => x + 1);
    window.addEventListener('limify-lang-changed', h);
    return () => window.removeEventListener('limify-lang-changed', h);
  }, []);
  return (typeof window !== 'undefined' && window.LIMIFY_LANG) || 'pt';
}

function LangSwitcher({ inDrawer = false, onPick }) {
  const lang = useLang();
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  // Fecha o menu ao clicar fora
  useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  const pick = (code) => {
    if (code === lang) { setOpen(false); if (onPick) onPick(); return; }
    setOpen(false);
    if (window.setLimifyLang) {
      window.setLimifyLang(code);
    } else {
      try { localStorage.setItem('limify-lang', code); } catch (e) {}
    }
    if (onPick) onPick();
  };

  const current = LANGS.find(l => l.code === lang) || LANGS[0];
  const Cur = current.Flag;

  return (
    <div className={`lang-switch ${inDrawer ? 'is-drawer ' : ''}${open ? 'is-open' : ''}`} ref={ref}>
      <button
        type="button"
        className="lang-btn"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-label={`Idioma: ${current.label}`}
        onClick={() => setOpen(o => !o)}
      >
        <span className="lang-flag"><Cur /></span>
        <span className="lang-code mono">{current.short}</span>
        <svg className="lang-chev" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
          <path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      {open && (
        <ul className="lang-menu" role="listbox">
          {LANGS.map(l => {
            const F = l.Flag;
            const active = l.code === lang;
            return (
              <li key={l.code} role="option" aria-selected={active}>
                <button
                  type="button"
                  className={`lang-opt ${active ? 'is-active' : ''}`}
                  onClick={() => pick(l.code)}
                >
                  <span className="lang-flag"><F /></span>
                  <span className="lang-opt-label">{l.label}</span>
                  <span className="lang-opt-short mono">{l.short}</span>
                </button>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

// =============================================================
// NAV
// =============================================================
function Nav({ isLight, linkPrefix = "" }) {
  const lang = useLang(); // re-render on language change
  const home = linkPrefix ? linkPrefix : "#top";
  const [isOpen, setIsOpen] = React.useState(false);
  const [submenuOpen, setSubmenuOpen] = React.useState(false);
  const close = () => { setIsOpen(false); setSubmenuOpen(false); };
  const t = window.t || ((k) => k);

  // Close submenu when clicking outside (desktop)
  React.useEffect(() => {
    if (!submenuOpen) return;
    const onClick = (e) => {
      if (!e.target.closest('.nav-submenu-wrap')) setSubmenuOpen(false);
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, [submenuOpen]);

  return (
    <nav className={`nav ${isLight ? "is-light" : ""} ${isOpen ? "is-open" : ""}`}>
      <a href={home} className="nav-logo" onClick={close}>
        <img src="assets/limify-symbol-azul.png" alt="Limify" className="nav-logo-mark" />
        Limify
      </a>
      <button
        type="button"
        className="nav-toggle"
        aria-expanded={isOpen}
        aria-label={isOpen ? "Fechar menu" : "Abrir menu"}
        onClick={() => setIsOpen(o => !o)}>
        <span className="nav-toggle-bars" aria-hidden="true"><span></span></span>
      </button>
      <div className="nav-links">
        <div className={`nav-submenu-wrap ${submenuOpen ? "is-open" : ""}`}>
          <button
            type="button"
            className="nav-link-button"
            aria-expanded={submenuOpen}
            onClick={(e) => { e.stopPropagation(); setSubmenuOpen(o => !o); }}>
            {t('nav_funcionalidades')}
            <span className="nav-chevron" aria-hidden="true">▾</span>
          </button>
          <div className="nav-submenu">
            <span className="nav-submenu-title">{t('nav_submenu_title')}</span>
            <a href="funcionalidades/orcamento-m2.html" className="nav-submenu-item" onClick={close}>
              <span className="nav-submenu-item-title">{t('nav_sub_m2_t')}</span>
              <span className="nav-submenu-item-sub">{t('nav_sub_m2_s')}</span>
            </a>
            <a href="funcionalidades/projeto-completo.html" className="nav-submenu-item" onClick={close}>
              <span className="nav-submenu-item-title">{t('nav_sub_proj_t')}</span>
              <span className="nav-submenu-item-sub">{t('nav_sub_proj_s')}</span>
            </a>
            <a href="funcionalidades/render-3d.html" className="nav-submenu-item" onClick={close}>
              <span className="nav-submenu-item-title">{t('nav_sub_render_t')}</span>
              <span className="nav-submenu-item-sub">{t('nav_sub_render_s')}</span>
            </a>
            <a href="funcionalidades/valor-real.html" className="nav-submenu-item" onClick={close}>
              <span className="nav-submenu-item-title">{t('nav_sub_real_t')}</span>
              <span className="nav-submenu-item-sub">{t('nav_sub_real_s')}</span>
            </a>
          </div>
        </div>
        <a href="planos.html" onClick={close}>{t('nav_planos')}</a>
        <a href={`${linkPrefix}#demo`} onClick={close}>{t('nav_demo')}</a>
        <a href="blog/index.html" onClick={close}>{t('nav_blog')}</a>
      </div>
      <LangSwitcher />
      <div className="nav-cta">
        <a href="https://app.limify.pro/login" className="btn btn-secondary">{t('nav_login')}</a>
        <a href="https://app.limify.pro/signup" className="btn btn-primary">{t('nav_signup')}</a>
      </div>
    </nav>
  );
}

// =============================================================
// HERO, 3 variantes via Tweaks
// =============================================================
function HeroA() {
  useLang(); // re-render on language change
  const t = window.t || ((k) => k);

  // Glass orbs flutuantes, todos descem em direcao ao dashboard com scroll,
  // somem atras dele (z-index do hero-stage maior). Bob senoidal continuo.
  React.useEffect(() => {
    const floats = document.querySelectorAll('.hero-a .hero-float');
    if (!floats.length) return;
    // Velocidades de descida (todas positivas, valores > 1 = "voa" pra baixo)
    const speeds = [1.05, 1.20, 1.35, 1.15, 1.45, 1.30];
    // Cada orb tem seu proprio ritmo, amplitude e fase pra parecer organico
    const orbs = [
      { phase: 0.0, bobAmp: 18, bobFreq: 0.55, drftAmp: 14, drftFreq: 0.38, rotAmp: 4.5, rotFreq: 0.42 },
      { phase: 1.1, bobAmp: 14, bobFreq: 0.70, drftAmp: 10, drftFreq: 0.46, rotAmp: 6.0, rotFreq: 0.32 },
      { phase: 2.3, bobAmp: 22, bobFreq: 0.48, drftAmp: 16, drftFreq: 0.34, rotAmp: 3.5, rotFreq: 0.50 },
      { phase: 0.7, bobAmp: 16, bobFreq: 0.62, drftAmp: 12, drftFreq: 0.42, rotAmp: 5.0, rotFreq: 0.36 },
      { phase: 1.8, bobAmp: 12, bobFreq: 0.78, drftAmp: 9,  drftFreq: 0.52, rotAmp: 7.0, rotFreq: 0.28 },
      { phase: 2.9, bobAmp: 20, bobFreq: 0.52, drftAmp: 15, drftFreq: 0.40, rotAmp: 4.0, rotFreq: 0.46 },
    ];
    const fadeStart = 220; // px de translacao apos o qual comeca a sumir
    const fadeEnd   = 520; // px apos o qual ja sumiu totalmente
    let rafId = 0;
    let active = true;
    const t0 = performance.now();

    // Capturar offset horizontal de cada orb pro centro (pra puxar pro
    // meio enquanto somem). Re-mede em resize.
    const heroFloatsEl = document.querySelector('.hero-a .hero-floats');
    let pullOffsets = new Array(floats.length).fill(0);
    const measure = () => {
      if (!heroFloatsEl) return;
      const halfW = heroFloatsEl.offsetWidth / 2;
      floats.forEach((el, i) => {
        const orbCenter = el.offsetLeft + el.offsetWidth / 2;
        pullOffsets[i] = halfW - orbCenter; // delta total quando k=1
      });
    };
    measure();
    window.addEventListener('resize', measure);

    const tick = () => {
      if (!active) return;
      const elapsed = (performance.now() - t0) / 1000;
      const sy = window.scrollY;
      floats.forEach((el, i) => {
        const sp = speeds[i % speeds.length];
        const o = orbs[i % orbs.length];
        const bob   = Math.sin(elapsed * o.bobFreq  + o.phase)         * o.bobAmp;
        const drift = Math.cos(elapsed * o.drftFreq + o.phase * 1.3)   * o.drftAmp;
        const rot   = Math.sin(elapsed * o.rotFreq  + o.phase * 0.7)   * o.rotAmp;
        const dy = sy * sp;
        // Fade + shrink + pull-to-center quando se aproximam do dashboard
        const k = Math.max(0, Math.min(1, (dy - fadeStart) / (fadeEnd - fadeStart)));
        // easing: ease-in pra puxada (lenta no comeco, acelera no fim)
        const ke = k * k;
        const opacity = 1 - k;
        const scale = 1 - k * 0.35;
        const pullX = pullOffsets[i] * ke;
        el.style.transform = `translate3d(${drift + pullX}px, ${dy + bob}px, 0) rotate(${rot}deg) scale(${scale})`;
        el.style.opacity = String(opacity);
      });
      rafId = requestAnimationFrame(tick);
    };
    const heroEl = document.querySelector('.hero-a');
    let obs;
    if (heroEl && 'IntersectionObserver' in window) {
      obs = new IntersectionObserver((entries) => {
        const visible = entries.some(e => e.isIntersecting);
        if (visible && !active) { active = true; rafId = requestAnimationFrame(tick); }
        else if (!visible && active) { active = false; cancelAnimationFrame(rafId); }
      }, { threshold: 0 });
      obs.observe(heroEl);
    }
    rafId = requestAnimationFrame(tick);
    return () => {
      active = false;
      cancelAnimationFrame(rafId);
      if (obs) obs.disconnect();
      window.removeEventListener('resize', measure);
    };
  }, []);

  // Cards, parallax no mouse + hover tilt
  React.useEffect(() => {
    if (typeof gsap === 'undefined') return;
    const heroEl  = document.querySelector('.hero-a');
    const tlCard  = heroEl && heroEl.querySelector('.hero-card-float--tl');
    const brCard  = heroEl && heroEl.querySelector('.hero-card-float--br');
    if (!heroEl || !tlCard || !brCard) return;

    const listeners = [];
    function on(el, type, fn) { el.addEventListener(type, fn); listeners.push({ el, type, fn }); }

    // Parallax, mouse move sobre o hero inteiro
    on(heroEl, 'mousemove', (e) => {
      const r  = heroEl.getBoundingClientRect();
      const cx = ((e.clientX - r.left)  / r.width  - 0.5) * 2; // -1 → 1
      const cy = ((e.clientY - r.top)   / r.height - 0.5) * 2;
      gsap.to(tlCard, { x: cx * 14, y: cy * 9,  duration: 0.55, ease: 'power1.out', overwrite: 'auto' });
      gsap.to(brCard, { x: cx * -10, y: cy * -7, duration: 0.55, ease: 'power1.out', overwrite: 'auto' });
    });
    on(heroEl, 'mouseleave', () => {
      gsap.to(tlCard, { x: 0, y: 0, duration: 0.9, ease: 'power2.inOut' });
      gsap.to(brCard, { x: 0, y: 0, duration: 0.9, ease: 'power2.inOut' });
    });

    // Hover individual, tilt + scale (não conflita pq só mexe rotation/scale)
    on(tlCard, 'mouseenter', () => gsap.to(tlCard, { rotation: -2.5, scale: 1.06, duration: 0.25, ease: 'power2.out', overwrite: 'auto' }));
    on(tlCard, 'mouseleave', () => gsap.to(tlCard, { rotation: 0,    scale: 1,    duration: 0.35, ease: 'power2.inOut', overwrite: 'auto' }));
    on(brCard, 'mouseenter', () => gsap.to(brCard, { rotation:  2.5, scale: 1.06, duration: 0.25, ease: 'power2.out', overwrite: 'auto' }));
    on(brCard, 'mouseleave', () => gsap.to(brCard, { rotation: 0,    scale: 1,    duration: 0.35, ease: 'power2.inOut', overwrite: 'auto' }));

    return () => listeners.forEach(({ el, type, fn }) => el.removeEventListener(type, fn));
  }, []);

  // Cards, counter animado nos valores (dispara no mount)
  React.useEffect(() => {
    if (typeof gsap === 'undefined') return;
    const tlValue = document.querySelector('.hero-card-float--tl .hcf-value');
    const brValue = document.querySelector('.hero-card-float--br .hcf-value');
    if (!tlValue || !brValue) return;

    // TL: R$ 30.034
    const tlObj = { val: 0 };
    gsap.to(tlObj, {
      val: 30034,
      duration: 1.8,
      delay: 0.6,
      ease: 'power2.out',
      onUpdate() {
        const v = Math.round(tlObj.val);
        tlValue.textContent = 'R$ ' + v.toLocaleString('pt-BR');
      },
      onComplete() {
        tlValue.textContent = 'R$ 30.034';
      }
    });

    // BR: 30%
    const brObj = { val: 0 };
    gsap.to(brObj, {
      val: 30,
      duration: 1.6,
      delay: 0.9,
      ease: 'power2.out',
      onUpdate() {
        brValue.textContent = Math.round(brObj.val) + '%';
      },
      onComplete() {
        brValue.textContent = '30%';
      }
    });
  }, []);

  // Variant A: ToDesktop-style, headline gigante + glass orbs + dashboard flutuando com glow
  return (
    <section id="top" className="hero hero-a tone-dark">
      <div className="hero-bg-grid" aria-hidden="true"></div>
      <div className="hero-light" aria-hidden="true"></div>

      {/* Glass orbs flutuantes (orçamento/finanças), animadas via useEffect acima */}
      <div className="hero-floats" aria-hidden="true">
        <div className="hero-float hf-1">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 4h6l-1.2 3H10.2z"/>
            <path d="M8 7h8c1.5 0 4.5 6 4.5 11s-3 3-8.5 3-8.5 2-8.5-3 3-11 4.5-11z"/>
            <path d="M12 11v8"/>
            <path d="M9.5 13H14a1.5 1.5 0 0 1 0 3h-3.5a1.5 1.5 0 0 0 0 3h4"/>
          </svg>
        </div>
        <div className="hero-float hf-2">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 20h18"/>
            <rect x="5" y="13" width="3" height="6" rx="0.5"/>
            <rect x="10.5" y="9" width="3" height="10" rx="0.5"/>
            <rect x="16" y="5" width="3" height="14" rx="0.5"/>
          </svg>
        </div>
        <div className="hero-float hf-3">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="9"/>
            <path d="M12 6v12"/>
            <path d="M9 9h4.5a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3H15"/>
          </svg>
        </div>
        <div className="hero-float hf-4">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="5" y="3" width="14" height="18" rx="2"/>
            <rect x="8" y="6" width="8" height="3"/>
            <circle cx="9" cy="13" r="0.6" fill="currentColor"/>
            <circle cx="12" cy="13" r="0.6" fill="currentColor"/>
            <circle cx="15" cy="13" r="0.6" fill="currentColor"/>
            <circle cx="9" cy="17" r="0.6" fill="currentColor"/>
            <circle cx="12" cy="17" r="0.6" fill="currentColor"/>
            <circle cx="15" cy="17" r="0.6" fill="currentColor"/>
          </svg>
        </div>
        <div className="hero-float hf-5">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 17l6-6 4 4 7-7"/>
            <path d="M14 8h6v6"/>
          </svg>
        </div>
        <div className="hero-float hf-6">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/>
          </svg>
        </div>
      </div>

      <div className="container">
        <div className="hero-eyebrow-row">
          <span className="eyebrow">{t('hero_eyebrow')}</span>
        </div>

        <h1 className="display hero-headline">
          {t('hero_line1')}{" "}
          <span className="fc-title-grad">{t('hero_line2')}</span>
        </h1>

        <p className="lead hero-sub">{t('hero_sub')}</p>

        <div className="hero-ctas">
          <a href="https://app.limify.pro/signup" className="btn btn-primary">
            {t('hero_cta')}
            <span className="btn-arrow"></span>
          </a>
        </div>

        <div className="hero-meta">
          <span className="hero-meta-item">
            <i className="dot"></i> {t('hero_meta_free')}
          </span>
          <span className="hero-meta-item">
            <i className="dot"></i> {t('hero_meta_card')}
          </span>
          <span className="hero-meta-item">
            <i className="dot"></i> {t('hero_meta_warranty')}
          </span>
        </div>
      </div>

      {/* Hero product mockup */}
      <div className="hero-stage">
        <div className="hero-stage-glow" aria-hidden="true"></div>
        <img
          src="assets/browser-hero.png"
          alt="Limify, dashboard de orçamentos"
          className="hero-dashboard-img"
          width="1280"
          height="731"
          loading="eager"
          decoding="async"
        />

        {/* Floating ornaments */}
        <div className="hero-card-float hero-card-float--tl">
          <div className="hcf-label">Lucro líquido real</div>
          <div className="hcf-value">R$ 30.034</div>
          <div className="hcf-trend hcf-trend--up">↑ +100% vs período anterior</div>
        </div>
        <div className="hero-card-float hero-card-float--br">
          <div className="hcf-label">Margem real</div>
          <div className="hcf-value hcf-value--brand">30%</div>
          <div className="hcf-trend">Faturamento · R$ 100.140</div>
        </div>
      </div>
    </section>
  );
}

function HeroB() {
  // Variant B: Paste/Apple, centralizado, headline gigante, mockup grande embaixo
  return (
    <section id="top" className="hero hero-b tone-dark">
      <div className="hero-light" aria-hidden="true"></div>
      <div className="container center">
        <span className="eyebrow">Plataforma completa de orçamento</span>
        <h1 className="display mt-24">
          Orçamentos prontos em minutos,{" "}
          <span className="fc-title-grad">apresentados em um formato que vende</span>
        </h1>
        <p className="lead mt-24" style={{ margin: "24px auto 0" }}>
          Lance seus custos uma vez e o Limify gera orçamentos profissionais.
          M², projeto completo, render, modelagem ou obra completa. Tudo em um
          link compartilhável que vende por você.
        </p>
        <div className="hero-ctas justify-center mt-32">
          <a href="https://app.limify.pro/signup" className="btn btn-primary">Criar conta gratuita</a>
        </div>
      </div>

      <div className="container hero-b-stage">
        <div className="hero-stage-glow" aria-hidden="true"></div>
        <div className="window hero-window">
          <div className="window-bar">
            <div className="window-dots"><i></i><i></i><i></i></div>
            <span className="window-title">limify.app · visão geral do escritório</span>
          </div>
          <div className="window-body">
            <div className="mockup-placeholder" style={{ minHeight: 600 }}>
              <span className="mp-label">DASHBOARD PRINCIPAL · 1440 × 900</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroC() {
  // Variant C: Split, copy à esquerda + dashboard à direita
  return (
    <section id="top" className="hero hero-c tone-dark">
      <div className="hero-light" aria-hidden="true"></div>
      <div className="container hero-split">
        <div className="hero-split-copy">
          <span className="eyebrow">Limify · v2.0</span>
          <h1 className="display mt-24">
            Orçamentos prontos em minutos,{" "}
            <span className="fc-title-grad">apresentados em um formato que vende</span>
          </h1>
          <p className="lead mt-24">
            Lance seus custos uma vez e o Limify gera orçamentos profissionais.
            M², projeto completo, render, modelagem ou obra completa. Tudo em um
            link compartilhável que vende por você.
          </p>
          <div className="hero-ctas mt-32">
            <a href="https://app.limify.pro/signup" className="btn btn-primary">Criar conta gratuita</a>
          </div>
          <div className="hero-meta mt-32">
            <span className="hero-meta-item"><i className="dot"></i> Gratuito para começar</span>
            <span className="hero-meta-item"><i className="dot"></i> Garantia de 7 dias</span>
          </div>
        </div>
        <div className="hero-split-stage">
          <div className="hero-stage-glow" aria-hidden="true"></div>
          <div className="window hero-window">
            <div className="window-bar">
              <div className="window-dots"><i></i><i></i><i></i></div>
              <span className="window-title">novo orçamento</span>
            </div>
            <div className="window-body">
              <div className="mockup-placeholder" style={{ minHeight: 520 }}>
                <span className="mp-label">FORM ORÇAMENTO · M²</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === "B") return <HeroB />;
  if (variant === "C") return <HeroC />;
  return <HeroA />;
}

// =============================================================
// MARQUEE, escritórios fictícios
// =============================================================
function Marquee() {
  const offices = [
    "Estúdio Verdi", "Forma Arquitetura", "Lacerda + Mendes",
    "Arq.Núcleo", "BV Engenharia", "Casa Branco Studio",
    "Atelier Norte", "Studio Linha", "Praça 9 Arquitetos",
    "Vidal & Associados", "Plano Aberto", "Concreto.Lab",
  ];
  const items = [...offices, ...offices];
  return (
    <section className="marquee-section tone-dark">
      <div className="container center">
        <p className="marquee-label">Mais de 2.300 escritórios já confiam no Limify</p>
      </div>
      <div className="marquee mt-32">
        <div className="marquee-track">
          {items.map((o, i) => (
            <div className="marquee-item" key={i}>
              <span className="marquee-dot"></span>
              <span>{o}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Marquee = Marquee;