/* global React, Logo, AnimatedLogo, Wordmark, Smile, Reveal, Icon, useInView */
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React;

// ── Sticky nav (menu = troca de tela; sólida fora da home) ──
function Nav() {
  const [scrolled, setScrolled] = useStateHero(false);
  const [menuOpen, setMenuOpen] = useStateHero(false);
  const route = (typeof useRoute === 'function') ? useRoute() : 'top';
  useEffectHero(() => {
    const onScroll = () => setScrolled(window.scrollY > 28);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // fecha o menu mobile ao trocar de tela
  useEffectHero(() => { setMenuOpen(false); }, [route]);
  const links = [
    ['Início', '#top'],
    ['O que fazemos', '#para-quem'],
    ['Produtos', '#produtos'],
    ['Designação', '#designacao'],
    ['Por dentro', '#produto'],
    ['Rentabilidade', '#precificacao'],
    ['Sobre', '#sobre'],
    ['Fale conosco', '#atendimento'],
  ];
  const onHome = route === 'top';
  const solid = scrolled || !onHome || menuOpen;
  const linkColor = solid ? 'var(--ink-soft)' : 'rgba(250,244,234,0.85)';
  const linkHover = solid ? 'var(--ink)' : 'var(--paper)';
  const viewOf = (href) => (typeof ANCHOR_TO_VIEW !== 'undefined' ? ANCHOR_TO_VIEW[href.replace(/^#/, '')] : null) || 'top';
  return (
    <React.Fragment>
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      transition: 'background .3s, box-shadow .3s, border-color .3s',
      background: solid ? 'rgba(250,244,234,0.92)' : 'transparent',
      backdropFilter: solid ? 'saturate(140%) blur(12px)' : 'none',
      WebkitBackdropFilter: solid ? 'saturate(140%) blur(12px)' : 'none',
      borderBottom: solid ? '1px solid var(--line)' : '1px solid transparent',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: scrolled ? 64 : 78, transition: 'height .3s' }}>
        <a href="#top" aria-label="convive" style={{ display: 'inline-flex', paddingTop: 4 }}>
          <AnimatedLogo size={26} color={solid ? 'var(--ink)' : 'var(--paper)'} smileColor={solid ? 'var(--terra)' : 'var(--peach)'} />
        </a>
        <nav style={{ display: 'flex', gap: 26 }} className="nav-links">
          {links.map(([label, href]) => {
            const active = viewOf(href) === route;
            return (
              <a key={href} href={href} style={{ position: 'relative', fontSize: 15, fontWeight: active ? 600 : 500, color: active ? (solid ? 'var(--terra-deep)' : 'var(--paper)') : linkColor, transition: 'color .15s' }}
                 onMouseEnter={e => { if (!active) e.currentTarget.style.color = linkHover; }}
                 onMouseLeave={e => { if (!active) e.currentTarget.style.color = linkColor; }}>
                {label}
                <span style={{ position: 'absolute', left: 0, right: 0, bottom: -7, height: 2, borderRadius: 2, background: solid ? 'var(--terra)' : 'var(--paper)', transform: active ? 'scaleX(1)' : 'scaleX(0)', transformOrigin: 'center', transition: 'transform .22s cubic-bezier(.2,.7,.2,1)' }} />
              </a>
            );
          })}
        </nav>
        <a href="#conviver" className="btn btn-primary nav-cta" style={{ padding: '11px 20px', fontSize: 14.5 }}>Vem conviver</a>
        {/* hamburger (mobile) */}
        <button className="nav-burger" aria-label="Menu" onClick={() => setMenuOpen(o => !o)}
          style={{ display: 'none', border: 0, background: 'transparent', width: 44, height: 44, borderRadius: 11, color: solid ? 'var(--ink)' : 'var(--paper)', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={menuOpen ? 'x' : 'menu'} size={26} />
        </button>
      </div>

      {/* mobile dropdown — compacto, com backdrop pra cobrir conteúdo atrás */}
      <div className="nav-mobile" style={{ display: 'none', maxHeight: menuOpen ? 480 : 0, overflow: 'hidden', transition: 'max-height .35s cubic-bezier(.3,.7,.2,1)', background: 'var(--paper)', borderBottom: menuOpen ? '1px solid var(--line)' : '1px solid transparent' }}>
        <div className="wrap" style={{ display: 'flex', flexDirection: 'column', gap: 0, padding: '4px 0 14px' }}>
          {links.map(([label, href]) => {
            const active = viewOf(href) === route;
            return (
              <a key={href} href={href}
                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 15.5, fontWeight: active ? 600 : 500, color: active ? 'var(--terra-deep)' : 'var(--ink-soft)', padding: '9px 4px', borderBottom: '1px solid var(--line-soft)' }}>
                {label}
                {active && <Icon name="check" size={16} color="var(--terra)" />}
              </a>
            );
          })}
          <a href="#conviver" className="btn btn-primary" style={{ marginTop: 12, justifyContent: 'center', padding: '13px 24px', fontSize: 15 }}>Vem conviver</a>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px){
          .nav-links{ display:none !important; }
          .nav-cta{ display:none !important; }
          .nav-burger{ display:flex !important; }
          .nav-mobile{ display:block !important; }
          .nav-backdrop{ display:block !important; }
        }
        @keyframes navBackdropIn { from { opacity: 0; } to { opacity: 1; } }
      `}</style>
    </header>

    {/* backdrop — FORA do header pra não capturar taps dos itens do menu */}
    {menuOpen && (
      <div onClick={() => setMenuOpen(false)} className="nav-backdrop" aria-hidden="true" style={{ display: 'none', position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(42,38,35,0.55)', zIndex: 99, animation: 'navBackdropIn .25s ease both' }} />
    )}
    </React.Fragment>
  );
}

// ════════════════════════════════════════════════════════════
//  HERO — persona carousel (figurine-carousel mechanics, Convive reality)
// ════════════════════════════════════════════════════════════
const HERO_ITEMS = [
  { key: 'agencias',  ghost: 'AGÊNCIAS',  bg: '#C36A4D', screenAccent: '#C36A4D', icon: 'briefcase',  title: 'Software houses & agências', line: 'Vários projetos. Um lugar só.', metric: ['Esperando por você', '4'], task: 'Aprovar layout · Café Origem' },
  { key: 'bares',     ghost: 'BARES',     bg: '#A04A2E', screenAccent: '#C36A4D', icon: 'utensils',   title: 'Restaurantes & bares',      line: 'A casa cheia, a gestão leve.', metric: ['Comandas hoje', '128'], task: 'Fechar caixa · turno noite' },
  { key: 'vendas',    ghost: 'VENDAS',    bg: '#6E7A4E', screenAccent: '#C36A4D', icon: 'handshake',  title: 'Representantes comerciais',  line: 'Carteira, follow-up e comissão.', metric: ['Follow-ups', '7'], task: 'Retomar · Rede Sabor' },
  { key: 'operacao',  ghost: 'OPERAÇÃO',  bg: '#3A322E', screenAccent: '#C36A4D', icon: 'layers',     title: 'Quem vive da operação',      line: 'Do orçamento ao recebimento.', metric: ['Margem real', '31%'], task: 'Faturar · Agência Norte' },
];

function Hero() {
  const [active, setActive] = useStateHero(0);
  const [animating, setAnimating] = useStateHero(false);
  const [isMobile, setIsMobile] = useStateHero(typeof window !== 'undefined' && window.innerWidth < 640);
  const lock = useRefHero(false);
  const [device, setDevice] = useStateHero('phone'); // hero abre direto no carrossel de celulares
  const [closing, setClosing] = useStateHero(false);

  const openPhone = () => {
    if (closing || device !== 'laptop') return;
    setClosing(true);
    setTimeout(() => setDevice('phone'), 720);
  };

  useEffectHero(() => {
    const onResize = () => setIsMobile(window.innerWidth < 640);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const navigate = (dir) => {
    if (lock.current) return;
    lock.current = true;
    setAnimating(true);
    setActive(p => dir === 'next' ? (p + 1) % 4 : (p + 3) % 4);
    setTimeout(() => { lock.current = false; setAnimating(false); }, 650);
  };

  useEffectHero(() => {
    const onKey = (e) => {
      if (window.scrollY > window.innerHeight * 0.7) return; // only while hero on screen
      if (e.key === 'ArrowRight') navigate('next');
      if (e.key === 'ArrowLeft') navigate('prev');
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const center = active, left = (active + 3) % 4, right = (active + 1) % 4, back = (active + 2) % 4;
  const roleOf = (i) => i === center ? 'center' : i === left ? 'left' : i === right ? 'right' : 'back';

  const cur = HERO_ITEMS[active];
  const TR = '650ms cubic-bezier(0.4,0,0.2,1)';

  const roleStyle = (role) => {
    const base = {
      position: 'absolute', transform: 'translateX(-50%)',
      transition: `transform ${TR}, filter ${TR}, opacity ${TR}, left ${TR}, height ${TR}, bottom ${TR}`,
      willChange: 'transform, filter, opacity', cursor: role === 'center' ? 'default' : 'pointer',
    };
    switch (role) {
      case 'center': return { ...base, left: '50%', bottom: isMobile ? '20%' : '18%', height: isMobile ? '42%' : '56%', transform: 'translateX(-50%) scale(1)', filter: 'blur(0px)', opacity: 1, zIndex: 20 };
      case 'left':   return { ...base, left: isMobile ? '12%' : '22%', bottom: isMobile ? '30%' : '26%', height: isMobile ? '18%' : '24%', filter: 'blur(5px)', opacity: 0.5, zIndex: 10 };
      case 'right':  return { ...base, left: isMobile ? '88%' : '78%', bottom: isMobile ? '30%' : '26%', height: isMobile ? '18%' : '24%', filter: 'blur(5px)', opacity: 0.5, zIndex: 10 };
      default:       return { ...base, left: '50%', bottom: isMobile ? '32%' : '28%', height: isMobile ? '14%' : '18%', filter: 'blur(7px)', opacity: 0.4, zIndex: 5 };
    }
  };

  return (
    <section id="top" style={{ position: 'relative', height: '100vh', minHeight: 620, overflow: 'hidden', backgroundColor: cur.bg, transition: `background-color ${TR}`, fontFamily: 'var(--sans)' }}>
      {/* grain */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 50, opacity: 0.4, backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E")`, backgroundSize: '200px 200px' }} />

      {/* legibility scrim: darken bottom + bottom-left where text lives (sits BEHIND the phones) */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none', background: 'linear-gradient(to top, rgba(26,18,12,0.78) 0%, rgba(26,18,12,0.34) 28%, rgba(0,0,0,0) 52%), radial-gradient(95% 80% at 13% 99%, rgba(26,18,12,0.72) 0%, rgba(0,0,0,0) 60%)' }} />

      {/* giant ghost word — desktop only (mobile usa layout vertical sem fundo) */}
      {!isMobile && (
        <div style={{ position: 'absolute', insetInline: 0, top: '7%', display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none', userSelect: 'none', zIndex: 2 }}>
          <span key={cur.key} className="hero-ghost" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 'clamp(52px, 13vw, 186px)', color: 'var(--paper)', opacity: 0.3, lineHeight: 1, textTransform: 'uppercase', letterSpacing: '-0.03em', whiteSpace: 'nowrap' }}>{cur.ghost}</span>
        </div>
      )}

      {/* device area: laptop first → click → phone carousel */}
      {device === 'laptop' ? (
        <LaptopFigure closing={closing} onOpen={openPhone} isMobile={isMobile} />
      ) : (
        <div className="device-in" style={{ position: 'absolute', inset: 0, zIndex: 3 }}>
          {HERO_ITEMS.map((item, i) => {
            const role = roleOf(i);
            return (
              <div key={item.key} style={roleStyle(role)} onClick={() => { if (role === 'left') navigate('prev'); if (role === 'right') navigate('next'); }}>
                <PhoneFigure item={item} isCenter={role === 'center'} onAdvance={() => navigate('next')} />
              </div>
            );
          })}
        </div>
      )}

      {/* tagline — bottom-left no desktop, centralizado no topo no mobile */}
      <div style={{ position: 'absolute', left: isMobile ? 0 : 96, right: isMobile ? 0 : undefined, top: isMobile ? '11%' : undefined, bottom: isMobile ? undefined : 96, padding: isMobile ? '0 24px' : 0, zIndex: 60, maxWidth: isMobile ? undefined : 360, textAlign: isMobile ? 'center' : 'left', color: 'var(--paper)', textShadow: '0 2px 20px rgba(20,13,8,0.75), 0 1px 4px rgba(20,13,8,0.65)' }}>
        {!isMobile && (
          <div aria-hidden="true" style={{ position: 'absolute', left: -34, right: -54, top: -30, bottom: -34, background: 'radial-gradient(115% 120% at 22% 64%, rgba(18,11,7,0.78) 0%, rgba(18,11,7,0.46) 42%, rgba(18,11,7,0) 74%)', filter: 'blur(10px)', borderRadius: 48, zIndex: -1, pointerEvents: 'none' }} />
        )}
        <div key={cur.key + '-ey'} className="hero-fade" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: isMobile ? 11.5 : 13, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 1, marginBottom: isMobile ? 10 : 16 }}>
          <Icon name={cur.icon} size={isMobile ? 14 : 17} /> {cur.title}
        </div>
        <h1 className="serif-display" style={{ fontSize: isMobile ? 'clamp(26px, 8vw, 36px)' : 'clamp(27px, 3.7vw, 44px)', color: 'var(--paper)', lineHeight: 1.05, letterSpacing: '-0.02em' }}>
          Tecnologia que <em className="it">convive</em><br />com você.
        </h1>
        <p style={{ marginTop: 16, fontSize: 'clamp(14px,1.5vw,16.5px)', color: 'rgba(252,247,239,0.96)', lineHeight: 1.5, maxWidth: 360 }} className="hero-sub">
          Comercial, operação e financeiro de quem vive da própria operação — num lugar só.
        </p>
      </div>

      {/* bottom-center: carousel control cluster (arrows + dots) — só no modo celular */}
      {device === 'phone' && (
      <div style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', bottom: isMobile ? 22 : 34, zIndex: 60, display: 'flex', alignItems: 'center', gap: isMobile ? 14 : 20 }}>
        <button aria-label="Anterior" onClick={() => navigate('prev')} className="hero-arrow"
          style={{ width: isMobile ? 42 : 50, height: isMobile ? 42 : 50, borderRadius: '50%', background: 'rgba(250,244,234,0.12)', border: '2px solid rgba(250,244,234,0.9)', color: 'var(--paper)', display: 'grid', placeItems: 'center', transition: 'transform .15s, background-color .15s' }}>
          <Icon name="arrow-left" size={isMobile ? 20 : 23} stroke={2.2} />
        </button>
        <div style={{ display: 'flex', gap: 9, alignItems: 'center' }}>
          {HERO_ITEMS.map((it, i) => (
            <button key={it.key} aria-label={it.title} onClick={() => { if (!lock.current) { lock.current = true; setActive(i); setTimeout(() => lock.current = false, 650); } }}
              style={{ width: i === active ? 28 : 9, height: 9, borderRadius: 999, border: 0, padding: 0, background: i === active ? 'var(--paper)' : 'rgba(250,244,234,0.5)', transition: 'all .3s', cursor: 'pointer' }} />
          ))}
        </div>
        <button aria-label="Próximo" onClick={() => navigate('next')} className="hero-arrow"
          style={{ width: isMobile ? 42 : 50, height: isMobile ? 42 : 50, borderRadius: '50%', background: 'rgba(250,244,234,0.12)', border: '2px solid rgba(250,244,234,0.9)', color: 'var(--paper)', display: 'grid', placeItems: 'center', transition: 'transform .15s, background-color .15s' }}>
          <Icon name="arrow" size={isMobile ? 20 : 23} stroke={2.2} />
        </button>
      </div>
      )}

      {/* bottom-right CTA */}
      <a href="#conviver" className="hero-cta" style={{ position: 'absolute', right: isMobile ? 20 : 48, bottom: isMobile ? 74 : 70, zIndex: 60, display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 'clamp(13px, 1.1vw, 15px)', letterSpacing: '0.02em', color: 'var(--paper)', lineHeight: 1, opacity: 0.88, textShadow: '0 1px 10px rgba(28,20,14,0.5)', transition: 'opacity .2s' }}>
        Vem conviver <Icon name="arrow" size={isMobile ? 16 : 18} stroke={2.1} />
      </a>

      <style>{`
        .hero-arrow:hover { transform: scale(1.08); background-color: rgba(250,244,234,0.14) !important; }
        .hero-cta:hover { opacity: 1 !important; }
        @keyframes heroRise { from { transform: translateY(10px); } to { transform: none; } }
        @keyframes deviceIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
        .device-in { animation: deviceIn .55s cubic-bezier(.2,.7,.2,1) both; }
        @keyframes laptopFloat { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-8px); } }
        @keyframes tapPulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.05); opacity: 1; } }
        .laptop-float { animation: laptopFloat 5s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce){ .laptop-float { animation: none !important; } }
        .hero-ghost { animation: heroRise .6s cubic-bezier(.2,.7,.2,1) both; }
        .hero-fade { animation: heroRise .5s cubic-bezier(.2,.7,.2,1) both; }
        .phone-screen { scrollbar-width: none; -ms-overflow-style: none; }
        .phone-screen::-webkit-scrollbar { display: none; }
        @keyframes hintBob { 0%,100% { transform: translateX(-50%) translateY(0); opacity:.9 } 50% { transform: translateX(-50%) translateY(4px); opacity:.55 } }
        .phone-hint { animation: hintBob 1.8s ease-in-out infinite; }
        @media (max-width: 640px){ .hero-sub{ display:none; } }
        @media (prefers-reduced-motion: reduce){ .hero-ghost, .hero-fade, .phone-hint { animation: none; } }
      `}</style>
    </section>
  );
}

// ── Notebook de abertura (estilo macOS, dashboard real do Control).
//    Clica → a tampa fecha e o carrossel de celulares assume.
function LaptopFigure({ closing, onOpen, isMobile }) {
  const img = (typeof window !== 'undefined' && window.__resources && window.__resources.ctrlDashboard) || 'assets/control/dashboard.png';
  return (
    <div
      onClick={onOpen}
      className={closing ? undefined : 'laptop-float'}
      style={{ position: 'absolute', left: '50%', top: isMobile ? '40%' : '43%', transform: 'translate(-50%,-50%)', zIndex: 20, width: 'min(90vw, 760px)', perspective: 1500, cursor: 'pointer', WebkitTapHighlightColor: 'transparent' }}
    >
      {/* lid (screen) */}
      <div style={{ transformOrigin: '50% 100%', transformStyle: 'preserve-3d', transform: closing ? 'rotateX(-90deg)' : 'rotateX(0deg)', opacity: closing ? 0 : 1, transition: 'transform .68s cubic-bezier(.5,.05,.25,1), opacity .45s .2s ease' }}>
        <div style={{ background: '#1b1815', borderRadius: 'clamp(12px,1.6vw,18px) clamp(12px,1.6vw,18px) 6px 6px', padding: 'clamp(8px,1vw,12px)', boxShadow: '0 50px 90px -32px rgba(0,0,0,.62), 0 10px 24px rgba(0,0,0,.22)', border: '1px solid #2c2825' }}>
          {/* camera dot */}
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 'clamp(4px,.6vw,7px)' }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#39342f' }} />
          </div>
          <div style={{ borderRadius: 6, overflow: 'hidden', background: '#000', aspectRatio: '16 / 10', border: '1px solid #000' }}>
            <img src={img} alt="Convive Control" draggable="false" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
          </div>
        </div>
      </div>
      {/* base / deck */}
      <div style={{ opacity: closing ? 0 : 1, transition: 'opacity .4s ease', position: 'relative', height: isMobile ? 12 : 18, marginTop: -1 }}>
        <div style={{ width: '113%', marginLeft: '-6.5%', height: '100%', background: 'linear-gradient(180deg,#dad3c9 0%,#b6ad9f 100%)', borderRadius: '0 0 14px 14px', boxShadow: '0 20px 34px -16px rgba(0,0,0,.55)' }}>
          <div style={{ width: 'clamp(70px,9vw,110px)', height: isMobile ? 5 : 7, background: '#9c9388', borderRadius: '0 0 9px 9px', margin: '0 auto' }} />
        </div>
      </div>
      {/* tap hint */}
      <div style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', bottom: isMobile ? -52 : -60, opacity: closing ? 0 : 1, transition: 'opacity .35s ease', display: 'inline-flex', alignItems: 'center', gap: 9, background: 'rgba(250,244,234,0.96)', color: 'var(--ink)', borderRadius: 999, padding: '9px 16px', boxShadow: 'var(--shadow-md)', fontSize: isMobile ? 12.5 : 14, fontWeight: 600, whiteSpace: 'nowrap', animation: closing ? 'none' : 'tapPulse 1.9s ease-in-out infinite' }}>
        <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--terra)', color: 'var(--paper)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name="arrow" size={13} stroke={2.4} /></span>
        Clique para abrir no celular
      </div>
    </div>
  );
}

// A floating phone showing the Convive app. The center one scrolls & is interactive.
function PhoneFigure({ item, isCenter, onAdvance }) {
  const [appScrolled, setAppScrolled] = useStateHero(false);
  const bars = [42, 64, 38, 78, 52, 88];
  const tasks = [
    [item.task, 'esperando por você', 'active'],
    ['Revisar orçamento · Studio Lumen', 'concluído', 'done'],
    ['Enviar NF · Mercado Vila', 'aguardando', 'wait'],
  ];
  const tint = s => s === 'active' ? 'var(--terra)' : s === 'done' ? 'var(--done)' : 'var(--ink-faint)';
  return (
    <div className={isCenter ? 'phone-float' : undefined} style={{ height: '100%', aspectRatio: '0.56 / 1', background: 'var(--ink)', borderRadius: 'clamp(18px, 2.4vw, 30px)', padding: '5px', boxShadow: '0 50px 90px -34px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.18)', position: 'relative' }}>
      {/* notch */}
      <div style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: '32%', height: 14, background: 'var(--ink)', borderRadius: 999, zIndex: 5 }} />
      <div className="phone-screen" onScroll={(e) => { if (e.currentTarget.scrollTop > 6) setAppScrolled(true); }} style={{ position: 'relative', width: '100%', height: '100%', background: 'var(--paper)', borderRadius: 'inherit', overflowY: isCenter ? 'auto' : 'hidden', overflowX: 'hidden', pointerEvents: isCenter ? 'auto' : 'none', display: 'flex', flexDirection: 'column' }}>
        {/* sticky header */}
        <div style={{ position: 'sticky', top: 0, zIndex: 4, background: 'var(--paper)', padding: '18px 14px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--line-soft)' }}>
          <Wordmark size={16} color="var(--ink)" />
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 9.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em', color: 'var(--terra-deep)', background: 'var(--peach-soft)', borderRadius: 999, padding: '4px 8px' }}>
            <Icon name={item.icon} size={12} /> {item.key}
          </span>
        </div>

        <div style={{ padding: '12px 14px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {/* hero metric */}
          <div style={{ padding: '13px 15px', borderRadius: 14, background: 'var(--peach-soft)', border: '1px solid var(--peach)' }}>
            <div style={{ fontSize: 9.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--terra-deep)' }}>{item.metric[0]}</div>
            <div className="serif-display" style={{ fontSize: 36, color: 'var(--terra-deep)', lineHeight: 1, marginTop: 3 }}>{item.metric[1]}</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-soft)', marginTop: 4 }}>{item.line}</div>
          </div>

          {/* two chips */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {[['Em operação', '11'], ['No prazo', '92%']].map(([l, v]) => (
              <div key={l} style={{ padding: '9px 11px', borderRadius: 11, background: 'var(--cream)', border: '1px solid var(--line-soft)' }}>
                <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--ink-faint)', textTransform: 'uppercase', letterSpacing: '.04em' }}>{l}</div>
                <div className="serif-display" style={{ fontSize: 19, marginTop: 1 }}>{v}</div>
              </div>
            ))}
          </div>

          {/* area chart */}
          <div style={{ padding: '11px 13px', borderRadius: 12, background: 'var(--white)', border: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 7 }}>
              <span style={{ fontSize: 11, fontWeight: 600 }}>Rentabilidade · 14d</span>
              <span style={{ fontSize: 10, color: 'var(--done)', fontWeight: 600 }}>+8%</span>
            </div>
            <svg viewBox="0 0 120 40" preserveAspectRatio="none" style={{ width: '100%', height: 40 }}>
              <defs><linearGradient id={`pf-${item.key}`} x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stopColor="#C36A4D" stopOpacity="0.26"/><stop offset="100%" stopColor="#C36A4D" stopOpacity="0"/></linearGradient></defs>
              <path d="M0 34 C 22 30 34 18 52 18 S 86 6 120 5 L120 40 L0 40Z" fill={`url(#pf-${item.key})`} />
              <path d="M0 34 C 22 30 34 18 52 18 S 86 6 120 5" fill="none" stroke="var(--terra)" strokeWidth="2.4" strokeLinecap="round" />
              <circle cx="120" cy="5" r="3" fill="var(--terra)" />
            </svg>
          </div>

          {/* bar chart */}
          <div style={{ padding: '11px 13px', borderRadius: 12, background: 'var(--white)', border: '1px solid var(--line)' }}>
            <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 9 }}>Margem por projeto</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 52 }}>
              {bars.map((h, i) => (
                <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: '4px 4px 0 0', background: i === bars.length - 1 ? 'var(--terra)' : 'var(--peach)' }} />
              ))}
            </div>
          </div>

          {/* designação list */}
          <div style={{ padding: '11px 13px', borderRadius: 12, background: 'var(--cream)', border: '1px solid var(--line-soft)', display: 'flex', flexDirection: 'column', gap: 9 }}>
            <div style={{ fontSize: 11, fontWeight: 600 }}>Sua designação</div>
            {tasks.map(([t, label, s]) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: tint(s), flexShrink: 0 }} />
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 10.5, fontWeight: 500, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t}</div>
                  <div style={{ fontSize: 9, fontWeight: 600, color: tint(s) }}>{label}</div>
                </div>
              </div>
            ))}
          </div>

          <button onClick={() => isCenter && onAdvance && onAdvance()} style={{ height: 34, borderRadius: 10, border: 0, background: 'var(--terra)', color: 'var(--paper)', fontSize: 11.5, fontWeight: 600, fontFamily: 'var(--sans)', cursor: 'pointer' }}>Passar adiante →</button>
        </div>
      </div>

      {/* scroll hint (center only, auto-hides once the app is scrolled) */}
      {isCenter && (
        <div className="phone-hint" style={{ position: 'absolute', bottom: 14, left: '50%', transform: 'translateX(-50%)', zIndex: 6, display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(42,38,35,0.82)', color: 'var(--paper)', borderRadius: 999, padding: '5px 11px', fontSize: 10, fontWeight: 600, pointerEvents: 'none', opacity: appScrolled ? 0 : 1, animation: appScrolled ? 'none' : undefined, transition: 'opacity .4s ease' }}>
          <Icon name="arrow-down" size={12} /> deslize
        </div>
      )}
    </div>
  );
}

// ── Para quem é ──────────────────────────────────────────────
function ParaQuem() {
  const groups = [
    { ic: 'kanban', t: 'Gestão comercial', pain: 'CRM, propostas, follow-ups, contratos e funil de vendas em um único lugar.', fix: 'Pare de perder oportunidade por falta de acompanhamento.' },
    { ic: 'route', t: 'Gestão operacional', pain: 'Ordens de serviço, projetos, tarefas e a execução da operação, ponta a ponta.', fix: 'Saiba exatamente quem está fazendo o quê e em qual etapa.' },
    { ic: 'wallet', t: 'Gestão financeira', pain: 'Custos, fluxo de caixa, faturamento, rentabilidade e indicadores reais.', fix: 'Entenda pra onde o dinheiro vai — e onde está o lucro.' },
    { ic: 'spark', t: 'Processos sob medida', pain: 'Módulos exclusivos pra realidade do seu negócio, não um molde genérico.', fix: 'O sistema se adapta à empresa — não o contrário.' },
  ];
  return (
    <section id="para-quem" className="section section-cream">
      <div className="wrap">
        <div className="sec-head">
          <Reveal as="div" className="eyebrow">O que a Convive faz</Reveal>
          <Reveal as="h2" delay={60} className="sec-title">
            Sistemas sob medida pra quem precisa de <em className="it" style={{ color: 'var(--terra)' }}>controle</em>.
          </Reveal>
          <Reveal as="p" delay={120} className="sec-lead">
            Desenvolvemos sistemas personalizados pra centralizar processos, acabar com as planilhas soltas e dar visibilidade total da operação — do comercial ao financeiro, num lugar só.
          </Reveal>
        </div>

        <div className="paraquem-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, marginTop: 52 }}>
          {groups.map((g, i) => (
            <Reveal key={g.t} delay={i * 80}>
              <ParaQuemCard {...g} />
            </Reveal>
          ))}
        </div>
        <style>{`@media (max-width: 680px){ .paraquem-grid{ grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
}

function ParaQuemCard({ ic, t, pain, fix }) {
  const [hover, setHover] = useStateHero(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      className="card"
      style={{ padding: 26, height: '100%', display: 'flex', flexDirection: 'column', gap: 14, transition: 'transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s', transform: hover ? 'translateY(-6px)' : 'none', boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)', borderColor: hover ? 'var(--peach)' : 'var(--line)' }}
    >
      <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: hover ? 'var(--terra)' : 'var(--peach-soft)', color: hover ? 'var(--paper)' : 'var(--terra-deep)', transition: 'background .25s, color .25s' }}>
        <Icon name={ic} size={23} />
      </span>
      <h3 className="serif-display" style={{ fontSize: 22 }}>{t}</h3>
      <p style={{ fontSize: 14.5, color: 'var(--ink-faint)', lineHeight: 1.5 }}>{pain}</p>
      <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '1px solid var(--line-soft)', display: 'flex', gap: 9, alignItems: 'flex-start' }}>
        <span style={{ color: 'var(--done)', flexShrink: 0, marginTop: 2 }}><Icon name="check" size={17} /></span>
        <p style={{ fontSize: 14.5, color: 'var(--ink)', lineHeight: 1.45, fontWeight: 500 }}>{fix}</p>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, ParaQuem });