// Tela: App Desktop — Em Breve

function AppDesktop({ onBack }) {
  const toast = useToast();
  return (
    <>
      <PageHead
        title={<>Ezza para <em>desktop</em></>}
        subtitle="Em desenvolvimento · macOS e Windows · em breve"
        back onBack={onBack}
      />

      <div className="card dl-hero">
        <div className="dl-hero-left">
          <span className="dl-eyebrow dl-eyebrow-soon">🚧 &nbsp;Em desenvolvimento</span>
          <div className="dl-title">Sua pipeline em <em>qualquer lugar</em></div>
          <div className="dl-sub">Estamos construindo o app nativo da Ezza para macOS e Windows. Atalho global, notificações do sistema e modo offline — tudo sem abrir o navegador.</div>

          <div className="dl-soon-os">
            <div className="dl-soon-os-item">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/>
              </svg>
              <span style={{fontSize:14, fontWeight:700}}>macOS</span>
              <span className="pill pill-lav" style={{fontSize:10}}>Em breve</span>
            </div>
            <div className="dl-soon-os-item">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/>
              </svg>
              <span style={{fontSize:14, fontWeight:700}}>Windows</span>
              <span className="pill pill-lav" style={{fontSize:10}}>Em breve</span>
            </div>
          </div>

          <button
            className="btn-primary"
            style={{marginTop: 22, width: '100%', justifyContent: 'center', background: 'white', color: 'var(--ink)'}}
            onClick={() => toast('Ótimo! Você será avisado assim que o app for lançado.')}
          >
            {ICN.bell} &nbsp;Quero ser avisado no lançamento
          </button>

          <div className="muted" style={{fontSize: 11, marginTop: 10, textAlign:'center', color:'oklch(1 0 0 / 0.45)'}}>
            Previsão: Q3 2026 · macOS 12+ e Windows 10/11
          </div>
        </div>

        <div className="dl-hero-right">
          <div className="dl-mock">
            <div className="dl-mock-bar">
              <span className="dl-tl"/><span className="dl-tl dl-tl-y"/><span className="dl-tl dl-tl-g"/>
              <span className="dl-mock-title">Ezza CRM — Pipeline</span>
            </div>
            <div className="dl-mock-body">
              <div className="dl-mock-cmdk">
                <span style={{opacity:0.5}}>{ICN.search}</span>
                <span>Buscar contatos, leads, casos…</span>
                <span className="cmdk-kbd" style={{marginLeft:'auto'}}>⌘K</span>
              </div>
              <div className="dl-mock-cols">
                {['blue','yellow','lav','mint','pink'].map((c,i) => (
                  <div key={i} className={`dl-mock-col dl-mock-col-${c}`}>
                    <div className="dl-mock-pill">Etapa {i+1}</div>
                    <div className="dl-mock-card" />
                    <div className="dl-mock-card" />
                    {i < 3 && <div className="dl-mock-card" />}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="dl-features">
        {[
          { ic: ICN.cmd,      tit: "Atalho global ⌃Espaço",      desc: "Abra a Ezza de qualquer app sem trocar de janela." },
          { ic: ICN.bell,     tit: "Notificações nativas",       desc: "Receba avisos de leads, casos e menções pelo sistema." },
          { ic: ICN.refresh,  tit: "Modo offline",                desc: "Veja contatos e leads recentes mesmo sem internet." },
          { ic: ICN.bolt2,    tit: "Performance 2× maior",        desc: "Render nativo e menor uso de memória." },
        ].map((f, i) => (
          <div key={i} className="card dl-feat">
            <div className="dl-feat-ic">{f.ic}</div>
            <div className="dl-feat-tit">{f.tit}</div>
            <div className="dl-feat-desc muted">{f.desc}</div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-title">Roadmap do app</div>
          <span className="pill pill-lav" style={{fontSize:11}}>Planejado</span>
        </div>
        <div className="col" style={{gap: 12}}>
          {[
            { v: 'v1.0', d: 'Q3 2026', tag: 'Em breve', tagColor: 'lav',  notes: 'Lançamento inicial · macOS Apple Silicon e Windows 64-bit · atalho global ⌃Espaço.' },
            { v: 'v1.1', d: 'Q3 2026', tag: 'Em breve', tagColor: 'lav',  notes: 'Notificações nativas de leads, casos e menções · integração com calendar do sistema.' },
            { v: 'v1.2', d: 'Q4 2026', tag: 'Em breve', tagColor: 'lav',  notes: 'Modo offline · acesso a contatos e leads recentes sem conexão.' },
            { v: 'v2.0', d: '2027',    tag: 'Futuro',   tagColor: '',     notes: 'Suporte a Windows ARM · atalhos avançados de pipeline · widgets de notificação.' },
          ].map((r, i) => (
            <div key={i} className="ver-row">
              <div className="ver-v">{r.v}</div>
              <div className="ver-date muted">{r.d}</div>
              <div className="ver-notes">{r.notes}</div>
              {r.tag && <span className={`pill ${r.tagColor ? 'pill-' + r.tagColor : ''}`}>{r.tag}</span>}
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .dl-hero {
          background: linear-gradient(135deg, oklch(0.20 0.04 260) 0%, oklch(0.16 0.02 280) 100%) !important;
          color: white;
          padding: 36px !important;
          margin-bottom: 14px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 36px;
          align-items: center;
          border: 0 !important;
          overflow: hidden;
        }
        .cs-flat .dl-hero, .cs-outlined .dl-hero { background: linear-gradient(135deg, oklch(0.20 0.04 260) 0%, oklch(0.16 0.02 280) 100%) !important; }

        .dl-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: oklch(0.78 0.10 250); }
        .dl-eyebrow-soon { color: oklch(0.88 0.12 85); letter-spacing: 0.06em; }

        .dl-soon-os { display: flex; gap: 12px; margin-top: 22px; }
        .dl-soon-os-item { display: flex; align-items: center; gap: 10px; background: oklch(1 0 0 / 0.08); border-radius: 12px; padding: 10px 16px; flex: 1; color: white; }
        .dl-title { font-size: 36px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin-top: 8px; }
        .dl-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: oklch(0.85 0.07 295); }
        .dl-sub { font-size: 13.5px; line-height: 1.5; color: oklch(1 0 0 / 0.7); margin-top: 12px; max-width: 380px; }
        .dl-sub .cmdk-kbd { background: oklch(1 0 0 / 0.18); border-color: oklch(1 0 0 / 0.25); color: white; }

        .dl-os-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; padding: 6px; background: oklch(1 0 0 / 0.08); border-radius: 16px; }
        .dl-os {
          background: transparent; color: white; border: 0;
          display: flex; gap: 12px; align-items: center;
          padding: 12px 14px;
          border-radius: 12px;
          cursor: default; text-align: left;
          font-family: inherit;
        }
        .dl-os-on { background: oklch(1 0 0 / 0.15); }
        .dl-os-glyph { width: 28px; height: 28px; border-radius: 8px; background: oklch(1 0 0 / 0.15); display: grid; place-items: center; font-size: 16px; }

        .dl-variants { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
        .dl-hero .btn-primary { background: white; color: var(--ink); }
        .dl-hero .btn-ghost { background: oklch(1 0 0 / 0.08) !important; color: white !important; }
        .dl-hero .btn-ghost span { color: white !important; }

        /* mock */
        .dl-mock { background: oklch(0.96 0.012 250); border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); transform: rotate(-1.5deg); }
        .dl-mock-bar { background: oklch(0.20 0.01 250); padding: 8px 12px; display: flex; gap: 6px; align-items: center; }
        .dl-tl { width: 10px; height: 10px; border-radius: 50%; background: oklch(0.62 0.18 25); }
        .dl-tl-y { background: oklch(0.78 0.16 95); }
        .dl-tl-g { background: oklch(0.65 0.13 155); }
        .dl-mock-title { color: oklch(0.85 0 0); font-size: 10px; margin-left: 14px; font-weight: 600; }
        .dl-mock-body { padding: 14px; }
        .dl-mock-cmdk { display: flex; align-items: center; gap: 8px; background: white; border-radius: 999px; padding: 6px 12px; font-size: 11px; color: var(--ink-muted); }
        .dl-mock-cmdk .cmdk-kbd { font-size: 9px; padding: 1px 5px; }
        .dl-mock-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
        .dl-mock-col { background: white; border-radius: 10px; padding: 8px; min-height: 130px; }
        .dl-mock-col-blue   { background: oklch(0.97 0.04 245); }
        .dl-mock-col-yellow { background: oklch(0.97 0.06 95); }
        .dl-mock-col-lav    { background: oklch(0.97 0.04 295); }
        .dl-mock-col-mint   { background: oklch(0.97 0.06 160); }
        .dl-mock-col-pink   { background: oklch(0.97 0.04 18); }
        .dl-mock-pill { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 8px; }
        .dl-mock-card { background: white; height: 28px; border-radius: 8px; margin-bottom: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

        .dl-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
        .dl-feat { padding: 18px 20px !important; }
        .dl-feat-ic { width: 40px; height: 40px; border-radius: 12px; background: oklch(0.93 0.06 250); color: oklch(0.42 0.16 250); display: grid; place-items: center; margin-bottom: 12px; }
        .dl-feat-tit { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
        .dl-feat-desc { font-size: 12px; margin-top: 4px; line-height: 1.4; }

        .ver-row { display: grid; grid-template-columns: 80px 100px 1fr auto; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid oklch(0.93 0.01 255); }
        .ver-row:last-child { border-bottom: 0; }
        .ver-v { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
        .ver-date { font-size: 11.5px; font-family: var(--font-mono); }
        .ver-notes { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
      `}</style>
    </>
  );
}

// macOS apple glyph
const _appleGlyphStyles = `
  .dl-os-glyph::before { content: ''; }
`;

window.AppDesktop = AppDesktop;