/* global React, Reveal, Icon, CountUp */
const { useState: usePR, useEffect: useEffPR } = React;

// ════════════════════════════════════════════════════════════
//  PRECIFICAÇÃO — "faturou muito × sobrou pouco"
// ════════════════════════════════════════════════════════════
function Precificacao() {
  const [view, setView] = usePR('real'); // 'fat' | 'real'
  const fat = 28000, custo = 19400, lucro = fat - custo;
  const margem = (lucro / fat) * 100;

  return (
    <section id="precificacao" className="section section-cream">
      <div aria-hidden="true" data-px="-70" style={{ position: 'absolute', top: '-4%', right: '-3%', width: 360, height: 360, borderRadius: '50%', background: 'radial-gradient(circle, rgba(231,193,164,0.5), rgba(231,193,164,0) 68%)', pointerEvents: 'none', zIndex: 0, willChange: 'transform' }} />
      <div aria-hidden="true" data-px="55" data-px-rot="18" style={{ position: 'absolute', bottom: '6%', left: '-2%', width: 180, height: 180, borderRadius: '38% 62% 55% 45% / 55% 40% 60% 45%', border: '2px solid rgba(195,106,77,0.22)', pointerEvents: 'none', zIndex: 0, willChange: 'transform' }} />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 'clamp(36px, 6vw, 84px)', alignItems: 'center' }} className="price-grid">
          <div>
            <Reveal as="div" className="eyebrow">Inteligência de precificação</Reveal>
            <Reveal as="h2" delay={60} className="sec-title">
              Faturou muito.<br /><em className="it" style={{ color: 'var(--terra)' }}>Sobrou pouco?</em>
            </Reveal>
            <Reveal as="p" delay={120} className="sec-lead">
              Faturamento engana. A Convive calcula a rentabilidade <em className="it">real</em> de cada projeto — somando horas da equipe, despesas e impostos — pra você saber onde está ganhando dinheiro de verdade.
            </Reveal>
            <Reveal delay={180} style={{ marginTop: 30, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                ['pulse', 'Custo real por hora de cada pessoa no projeto'],
                ['chart', 'Margem calculada na hora, não no fim do mês'],
                ['spark', 'Aprende com o histórico e sugere o preço certo'],
              ].map(([ic, t]) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
                  <span style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--white)', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', color: 'var(--terra)', flexShrink: 0 }}><Icon name={ic} size={20} /></span>
                  <span style={{ fontSize: 15.5, color: 'var(--ink)', fontWeight: 500 }}>{t}</span>
                </div>
              ))}
            </Reveal>
          </div>

          {/* interactive card */}
          <Reveal delay={120}>
            <div className="card" style={{ padding: 'clamp(22px, 3vw, 32px)', boxShadow: 'var(--shadow-md)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-faint)', textTransform: 'uppercase', letterSpacing: '.05em' }}>Projeto</div>
                  <div className="serif-display" style={{ fontSize: 24 }}>Site + identidade · Café Origem</div>
                </div>
                <span style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--peach-soft)', color: 'var(--terra-deep)', display: 'grid', placeItems: 'center' }}><Icon name="wallet" size={22} /></span>
              </div>

              {/* toggle */}
              <div style={{ display: 'inline-flex', gap: 5, padding: 5, background: 'var(--cream)', borderRadius: 999, margin: '18px 0 22px' }}>
                {[['fat', 'O que faturou'], ['real', 'O que sobrou']].map(([id, label]) => (
                  <button key={id} onClick={() => setView(id)}
                    style={{ border: 0, borderRadius: 999, padding: '9px 16px', fontSize: 13.5, fontWeight: 600, transition: 'all .2s', background: view === id ? 'var(--terra)' : 'transparent', color: view === id ? 'var(--paper)' : 'var(--ink-soft)' }}>
                    {label}
                  </button>
                ))}
              </div>

              {/* the number */}
              <div style={{ marginBottom: 8 }}>
                <div style={{ fontSize: 13.5, color: 'var(--ink-faint)', fontWeight: 600 }}>{view === 'fat' ? 'Faturamento bruto' : 'Lucro real no bolso'}</div>
                <div className="serif-display" style={{ fontSize: 'clamp(44px, 7vw, 62px)', color: view === 'fat' ? 'var(--ink)' : 'var(--terra)', lineHeight: 1, marginTop: 4 }}>
                  {view === 'fat'
                    ? <CountUp to={fat} prefix="R$ " duration={900} />
                    : <CountUp to={lucro} prefix="R$ " duration={900} />}
                </div>
                {view === 'real' && (
                  <div style={{ fontSize: 14, color: 'var(--done)', fontWeight: 600, marginTop: 6 }}>
                    margem real de <CountUp to={margem} decimals={1} suffix="%" duration={900} /> — e não os “R$ 28 mil” que parecia
                  </div>
                )}
              </div>

              {/* breakdown bar */}
              <div style={{ marginTop: 20 }}>
                <div style={{ display: 'flex', height: 18, borderRadius: 999, overflow: 'hidden', border: '1px solid var(--line)' }}>
                  <div style={{ width: `${(13200 / fat) * 100}%`, background: 'var(--ink)' }} title="Equipe" />
                  <div style={{ width: `${(4100 / fat) * 100}%`, background: 'var(--ink-faint)' }} title="Despesas" />
                  <div style={{ width: `${(2100 / fat) * 100}%`, background: 'var(--peach)' }} title="Impostos" />
                  <div style={{ width: `${(lucro / fat) * 100}%`, background: 'var(--terra)' }} title="Lucro" />
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 18px', marginTop: 14 }}>
                  {[['Equipe', 'R$ 13.200', 'var(--ink)'], ['Despesas', 'R$ 4.100', 'var(--ink-faint)'], ['Impostos', 'R$ 2.100', 'var(--peach)'], ['Lucro', 'R$ 8.600', 'var(--terra)']].map(([l, v, c]) => (
                    <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                      <span style={{ width: 11, height: 11, borderRadius: 3, background: c }} />
                      <span style={{ fontSize: 12.5, color: 'var(--ink-soft)' }}><strong style={{ color: 'var(--ink)', fontWeight: 600 }}>{l}</strong> · {v}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media(max-width:840px){.price-grid{grid-template-columns:1fr !important;}}`}</style>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
//  FILOSOFIA — "complexo por trás, simples na frente"
// ════════════════════════════════════════════════════════════
function Filosofia() {
  const [peek, setPeek] = usePR(false);
  return (
    <section id="filosofia" className="section section-paper">
      <div aria-hidden="true" data-px="-60" style={{ position: 'absolute', top: '8%', left: '4%', width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(195,106,77,0.10), rgba(195,106,77,0) 70%)', pointerEvents: 'none', zIndex: 0, willChange: 'transform' }} />
      <div aria-hidden="true" data-px="80" data-px-x="-20" style={{ position: 'absolute', bottom: '12%', right: '6%', width: 150, height: 150, borderRadius: '60% 40% 45% 55% / 45% 55% 45% 55%', background: 'rgba(231,193,164,0.28)', pointerEvents: 'none', zIndex: 0, willChange: 'transform' }} />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="sec-head" style={{ maxWidth: 780, margin: '0 auto', textAlign: 'center' }}>
          <Reveal as="div" className="eyebrow">A filosofia de produto</Reveal>
          <Reveal as="h2" delay={60} className="sec-title">
            Complexo por trás.<br /><em className="it" style={{ color: 'var(--terra)' }}>Simples na frente.</em>
          </Reveal>
          <Reveal as="p" delay={120} className="sec-lead" style={{ margin: '20px auto 0' }}>
            Por fora, uma experiência leve, rápida e sem poluição visual. Por dentro, um motor robusto. Dá uma espiada no que segura a casa.
          </Reveal>
        </div>

        <Reveal delay={140} style={{ marginTop: 46 }}>
          <div style={{ position: 'relative', maxWidth: 920, margin: '0 auto' }}>
            {/* the "simple front" */}
            <div className="card" style={{ padding: 'clamp(22px,3vw,34px)', boxShadow: 'var(--shadow-md)', position: 'relative', zIndex: 2, background: 'var(--white)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 48, height: 48, borderRadius: 13, background: 'var(--terra)', color: 'var(--paper)', display: 'grid', placeItems: 'center' }}><Icon name="spark" size={24} /></span>
                  <div>
                    <div className="serif-display" style={{ fontSize: 22 }}>O que você vê</div>
                    <div style={{ fontSize: 14, color: 'var(--ink-faint)' }}>Um botão. Uma tela limpa. Resolvido.</div>
                  </div>
                </div>
                <button onClick={() => setPeek(p => !p)} className="btn btn-ghost" style={{ padding: '11px 18px', fontSize: 14 }}>
                  {peek ? 'Esconder o motor' : 'Ver o que tem por trás'}
                  <Icon name="arrow-down" size={16} style={{ transform: peek ? 'rotate(180deg)' : 'none', transition: 'transform .3s' }} />
                </button>
              </div>
            </div>

            {/* the "complex back" — revealed */}
            <div style={{ maxHeight: peek ? 460 : 0, opacity: peek ? 1 : 0, overflow: 'hidden', transition: 'max-height .55s cubic-bezier(.3,.7,.2,1), opacity .45s, margin .4s', marginTop: peek ? 16 : 0 }}>
              <div style={{ background: 'var(--ink)', borderRadius: 'var(--radius-lg)', padding: 'clamp(22px,3vw,34px)', color: 'var(--paper)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--peach)', letterSpacing: '.1em' }}>// o motor que você não precisa ver</span>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 16 }}>
                  {[
                    ['layers', 'Arquitetura multi-tenant', 'Cada empresa isolada, escalando sem se esbarrar.'],
                    ['shield', 'Controle de acesso por camadas', 'Cada um vê só o que é da sua alçada.'],
                    ['route', 'Trilha de auditoria completa', 'Quem fez o quê, quando — registrado sozinho.'],
                    ['spark', 'Inteligência de precificação', 'Rentabilidade real calculada projeto a projeto.'],
                  ].map(([ic, t, d]) => (
                    <div key={t} style={{ background: 'rgba(250,244,234,0.06)', borderRadius: 14, padding: 18, border: '1px solid rgba(250,244,234,0.1)' }}>
                      <span style={{ color: 'var(--peach)', display: 'inline-flex', marginBottom: 10 }}><Icon name={ic} size={22} /></span>
                      <div style={{ fontSize: 15.5, fontWeight: 600, marginBottom: 5 }}>{t}</div>
                      <div style={{ fontSize: 13, color: 'rgba(250,244,234,0.7)', lineHeight: 1.45 }}>{d}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Precificacao, Filosofia });