/* global React */
// ── Product showcase: real screenshots in a tabbed frame ──────────────────

function ShowcaseSection() {
  const screens = [
    {
      key: 'pdv',
      label: 'Frente de caixa',
      title: 'LothusPDV',
      desc: 'A tela de venda que sua equipe usa todo dia. Atalhos F2–F12, NFC-e on-line, leitura por código ou descrição.',
      img: 'assets/pdv-frente-caixa.png',
      mobile: false,
      tags: ['NFC-e on-line', 'Atalhos F2–F12', 'Venda em segundos'],
      caption: 'Tela real do LothusPDV — versão atual em produção'
    },
    {
      key: 'resumo',
      label: 'Resumo de caixa',
      title: 'Fechamento sem diferença',
      desc: 'Vendas, recebimentos, despesas, sangrias, custo, lucro e margem em uma tela. Exporta pra Excel.',
      img: 'assets/resumo-caixa.png',
      mobile: false,
      tags: ['Lucro · Margem', 'Por forma de pagamento', 'Exporta Excel'],
      caption: 'Resumo de caixa · Maio/2025 · dados reais de cliente (anonimizado)'
    },
    {
      key: 'retaguarda',
      label: 'Retaguarda · Visão Geral',
      title: 'LothusRetaguarda',
      desc: 'O painel que abre na primeira tela: faturamento líquido, contas a receber, vencidos, próximos 30 dias e maiores devedores — no período que você escolher.',
      img: 'assets/retaguarda-dashboard.png',
      mobile: false,
      tags: ['Faturamento líquido', 'Contas a receber', 'Maiores devedores'],
      caption: 'Módulo Retaguarda · Visão Geral · período "7 dias"'
    },
    {
      key: 'compras',
      label: 'Importação XML',
      title: 'LothusCompras',
      desc: 'Importa XML da NF-e do fornecedor, divide IPI + ICMS + frete entre os produtos, mantém margem fixa ou preço de venda.',
      img: 'assets/importacao-xml.png',
      mobile: false,
      tags: ['XML do fornecedor', 'Custo + impostos', 'Margem automática'],
      caption: 'Entrada de mercadoria com XML — sem digitar item por item'
    },
    {
      key: 'app',
      label: 'LothusApp mobile',
      title: 'Sua loja no bolso',
      desc: 'Vendas, ticket médio, custo, lucro bruto e margem do dia — em tempo real, no celular, de onde estiver.',
      img: 'assets/app-celular.jpg',
      mobile: true,
      tags: ['Tempo real', 'Modo auditoria', 'Funciona em qualquer Android/iOS'],
      caption: 'LothusApp · captura real · cliente "SYSIT Comercio"'
    }
  ];
  const [active, setActive] = React.useState(0);
  const s = screens[active];

  return (
    <section className="section" id="porDentro">
      <div className="shell-wide">
        <div className="sec-head">
          <div>
            <span className="kicker"><span className="num">→</span> Por dentro</span>
            <h2 className="display-lg" style={{marginTop: 24}}>
              O que você vê <em style={{fontStyle:'italic'}}>é o que você compra.</em>
            </h2>
          </div>
          <p className="lede">
            Não tem render bonito, não tem tela de marketing. Estas são as telas reais do LothusPDV em
            operação hoje — feitas pra balcão, atalhos de teclado, varejista que precisa vender rápido.
          </p>
        </div>

        <div className="showcase">
          <div className="show-tabs">
            {screens.map((sc, i) => (
              <button
                key={sc.key}
                className={`show-tab ${i === active ? 'active' : ''}`}
                onClick={() => setActive(i)}>
                <span className="lbl">{String(i+1).padStart(2,'0')} · {sc.label}</span>
                <span className="title">{sc.title}</span>
                <span className="desc">{sc.desc}</span>
              </button>
            ))}
          </div>
          <div className="show-frame">
            <div className="chrome">
              <div className="dots"><span></span><span></span><span></span></div>
              <span style={{marginLeft: 8, color:'var(--ink-soft)'}}>{s.title}</span>
              <span className="url">{s.mobile ? 'LothusApp · Android/iOS' : 'lothuspdv.com.br · sistema desktop'}</span>
            </div>
            <div className={`stage ${s.mobile ? 'mobile' : ''}`}>
              <img src={s.img} alt={`Tela do ${s.title}`} loading="lazy"/>
            </div>
            <div className="caption">
              <span>{s.caption}</span>
              <div className="tags">
                {s.tags.map((t) => <span key={t}>{t}</span>)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ShowcaseSection });