/* global React, Reveal, Icon, Logo, Wordmark, Smile */
const { useState: useST } = React;

// ════════════════════════════════════════════════════════════
//  SOBRE — o significado da marca + princípios
// ════════════════════════════════════════════════════════════
function Sobre() {
  const principios = [
    ['route', 'O sistema se adapta a você', 'Em vez de obrigar a empresa a se moldar ao software, a gente faz o caminho inverso — entra no ritmo da sua operação.'],
    ['users', 'A gente fala como gente', 'Tom brasileiro e direto, sem jargão e sem manual. A tecnologia senta do seu lado, não acima de você.'],
    ['palette', 'Calor humano, num mar de azul', 'Fugimos do azul corporativo padrão de tecnologia. Terracota, creme e grafite — a marca que se reconhece de longe.'],
  ];
  return (
    <section id="sobre" className="section section-cream">
      <div aria-hidden="true" data-px="-58" style={{ position: 'absolute', top: '10%', right: '-2%', width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, rgba(231,193,164,0.45), rgba(231,193,164,0) 68%)', pointerEvents: 'none', zIndex: 0, willChange: 'transform' }} />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 'clamp(36px,6vw,80px)', alignItems: 'center' }} className="sobre-grid">
          <div>
            <Reveal as="div" className="eyebrow">Quem é a Convive</Reveal>
            <Reveal as="h2" delay={60} className="sec-title">
              Mais que um sistema.<br />Um jeito de <em className="it" style={{ color: 'var(--terra)' }}>conviver</em>.
            </Reveal>
            <Reveal as="p" delay={120} className="sec-lead">
              O nome carrega o conceito. <strong style={{ color: 'var(--ink)' }}>"Con"</strong> de junto, <strong style={{ color: 'var(--ink)' }}>"Vive"</strong> de vivo: software que vive ao lado de quem usa.
            </Reveal>
            <Reveal as="p" delay={160} style={{ marginTop: 18, fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.6, maxWidth: 520 }}>
              A gente é a tecnologia que se senta do seu lado pra simplificar a gestão de quem trabalha de verdade. Simplicidade, objetividade e valor humano — em tudo que construímos.
            </Reveal>
            <Reveal delay={200} style={{ marginTop: 30, display: 'inline-flex', alignItems: 'center', gap: 16, background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 16, padding: '18px 22px' }}>
              <Smile width={64} color="var(--terra)" stroke={5} />
              <span style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.4 }}>O sorriso é a nossa assinatura. <strong style={{ color: 'var(--ink)' }}>Tecnologia que convive com você.</strong></span>
            </Reveal>
          </div>

          {/* principles */}
          <Reveal delay={120}>
            <div className="card" style={{ padding: 'clamp(24px,3vw,34px)', boxShadow: 'var(--shadow-md)' }}>
              {principios.map(([ic, t, d], i) => (
                <div key={t} style={{ display: 'flex', gap: 18, paddingBottom: i < 2 ? 24 : 0, marginBottom: i < 2 ? 24 : 0, borderBottom: i < 2 ? '1px solid var(--line-soft)' : 'none' }}>
                  <span style={{ width: 48, height: 48, borderRadius: 13, flexShrink: 0, background: 'var(--peach-soft)', color: 'var(--terra-deep)', display: 'grid', placeItems: 'center' }}><Icon name={ic} size={23} /></span>
                  <div>
                    <div className="serif-display" style={{ fontSize: 21 }}>{t}</div>
                    <div style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.5, marginTop: 4 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media(max-width:840px){.sobre-grid{grid-template-columns:1fr !important;}}`}</style>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
//  FAQ
// ════════════════════════════════════════════════════════════
const FAQS = [
  ['Vocês fazem sob medida ou é um sistema pronto?', 'Sob medida, de verdade — engenharia que escala com o seu negócio. Nada de gambiarra no-code que trava quando você cresce. A base é robusta; o que muda é o que faz sentido pra sua operação.'],
  ['Serve pro meu tipo de negócio?', 'Se você vive da própria operação, provavelmente sim. Atendemos software houses, agências, restaurantes, bares e representantes comerciais — gente que precisa de controle do comercial, da operação e do financeiro num lugar só.'],
  ['Preciso migrar tudo de uma vez?', 'Não. A Convive se adapta à sua rotina, então a gente entra no seu ritmo. Começa pelo que mais dói e vai unificando planilha, caderno e WhatsApp aos poucos.'],
  ['O que é esse "fluxo de designação"?', 'É o nosso diferencial: cada pessoa conclui a sua parte e o sistema passa o trabalho adiante automaticamente. Quem é o próximo já é avisado — sem você cobrar ninguém no grupo.'],
  ['Sob medida não é caro demais?', 'Caro é o retrabalho e o dinheiro que vaza numa gestão bagunçada. A gente mostra a rentabilidade real dos seus projetos justamente pra essa conta fechar a seu favor.'],
];

function FAQ() {
  const [open, setOpen] = useST(0);
  return (
    <section id="faq" className="section section-paper">
      <div className="wrap" style={{ maxWidth: 860 }}>
        <div className="sec-head" style={{ textAlign: 'center', margin: '0 auto' }}>
          <Reveal as="div" className="eyebrow">Dúvidas</Reveal>
          <Reveal as="h2" delay={60} className="sec-title">Antes de você perguntar.</Reveal>
        </div>
        <Reveal delay={120} style={{ marginTop: 40 }}>
          <div className="card" style={{ overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
            {FAQS.map(([q, a], i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: i < FAQS.length - 1 ? '1px solid var(--line-soft)' : 'none' }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '22px 24px', background: 'transparent', border: 0, textAlign: 'left' }}>
                    <span className="serif-display" style={{ fontSize: 'clamp(18px,2.2vw,22px)', color: isOpen ? 'var(--terra-deep)' : 'var(--ink)', transition: 'color .2s' }}>{q}</span>
                    <span style={{ flexShrink: 0, width: 32, height: 32, borderRadius: '50%', background: isOpen ? 'var(--terra)' : 'var(--cream)', color: isOpen ? 'var(--paper)' : 'var(--ink-soft)', display: 'grid', placeItems: 'center', transition: 'all .25s', transform: isOpen ? 'rotate(45deg)' : 'none' }}><Icon name="plus" size={18} /></span>
                  </button>
                  <div style={{ maxHeight: isOpen ? 200 : 0, opacity: isOpen ? 1 : 0, overflow: 'hidden', transition: 'max-height .4s cubic-bezier(.3,.7,.2,1), opacity .35s' }}>
                    <p style={{ padding: '0 24px 24px', fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.6, maxWidth: 680 }}>{a}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
//  CONVIVER — closing CTA band
// ════════════════════════════════════════════════════════════
function Conviver() {
  return (
    <section id="conviver" className="section section-terra" style={{ overflow: 'hidden', position: 'relative' }}>
      <div aria-hidden="true" style={{ position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle, rgba(250,244,234,0.14), rgba(250,244,234,0) 62%)' }} />
      <div className="wrap" style={{ position: 'relative', textAlign: 'center', maxWidth: 820 }}>
        <Reveal style={{ display: 'flex', justifyContent: 'center', marginBottom: 26 }}>
          <Smile width={86} color="var(--paper)" stroke={7} />
        </Reveal>
        <Reveal as="h2" delay={60} className="serif-display" style={{ fontSize: 'clamp(40px, 6.4vw, 76px)', color: 'var(--paper)' }}>
          Vem <em className="it">conviver</em>.
        </Reveal>
        <Reveal as="p" delay={120} style={{ fontSize: 'clamp(17px,1.7vw,21px)', color: 'rgba(250,244,234,0.86)', maxWidth: 560, margin: '22px auto 0', lineHeight: 1.55 }}>
          Conta pra gente como é a sua operação. A gente mostra a Convive rodando no seu contexto — sem compromisso, no seu ritmo.
        </Reveal>
        <Reveal delay={180} style={{ display: 'flex', gap: 13, justifyContent: 'center', marginTop: 38, flexWrap: 'wrap' }}>
          <a href="https://wa.me/5511994760504" target="_blank" rel="noopener" className="btn btn-lg" style={{ background: 'var(--paper)', color: 'var(--terra-deep)' }}>
            <Icon name="whatsapp" size={19} /> Chamar no WhatsApp
          </a>
          <a href="#atendimento" className="btn btn-lg" style={{ background: 'transparent', color: 'var(--paper)', border: '1.5px solid rgba(250,244,234,0.5)' }}>
            Falar com a Adriana
          </a>
        </Reveal>
        <Reveal delay={240} style={{ marginTop: 22, fontSize: 14, color: 'rgba(250,244,234,0.7)' }}>
          Resposta no mesmo dia · Londrina · PR
        </Reveal>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
//  FOOTER + /links
// ════════════════════════════════════════════════════════════
function Footer() {
  const cols = [
    ['Conheça', [['Para quem é', '#para-quem'], ['Fluxo de designação', '#designacao'], ['O produto', '#produto'], ['Rentabilidade real', '#precificacao']]],
    ['A Convive', [['Nossa história', '#sobre'], ['Filosofia', '#filosofia'], ['Dúvidas', '#faq'], ['Trabalhe com a gente', '#conviver']]],
    ['Comece por aqui', [['Agende uma conversa', '#conviver'], ['Veja o produto', '#produto'], ['Fale no WhatsApp', 'https://wa.me/5511994760504'], ['Instagram', 'https://instagram.com/convivetecnologia']]],
  ];
  return (
    <footer className="section-ink" style={{ paddingTop: 72, paddingBottom: 36 }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }} className="foot-grid">
          <div>
            <Logo size={30} color="var(--paper)" smileColor="var(--peach)" />
            <p style={{ marginTop: 22, fontSize: 15, color: 'rgba(250,244,234,0.7)', lineHeight: 1.55, maxWidth: 280 }}>
              Tecnologia que convive com você. Gestão sob medida pra quem trabalha de verdade.
            </p>
            <div style={{ marginTop: 20, fontSize: 13.5, color: 'rgba(250,244,234,0.5)', lineHeight: 1.7 }}>
              Londrina · Paraná<br />
              @convivetecnologia
            </div>
          </div>
          {cols.map(([title, links]) => (
            <div key={title}>
              <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--peach)', marginBottom: 16 }}>{title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {links.map(([l, href]) => (
                  <a key={l} href={href} style={{ fontSize: 14.5, color: 'rgba(250,244,234,0.78)', transition: 'color .15s', width: 'fit-content' }}
                     onMouseEnter={e => e.currentTarget.style.color = 'var(--paper)'}
                     onMouseLeave={e => e.currentTarget.style.color = 'rgba(250,244,234,0.78)'}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 52, paddingTop: 24, borderTop: '1px solid rgba(250,244,234,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14 }}>
          <span style={{ fontSize: 13, color: 'rgba(250,244,234,0.5)' }}>© 2026 Convive Tecnologia · Londrina · PR</span>
          <span style={{ fontSize: 13, color: 'rgba(250,244,234,0.5)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            Complexo por trás, simples na frente <Smile width={40} color="var(--peach)" stroke={3} />
          </span>
        </div>
      </div>
      <style>{`@media(max-width:840px){.foot-grid{grid-template-columns:1fr 1fr !important;gap:32px !important;}}@media(max-width:520px){.foot-grid{grid-template-columns:1fr !important;}}`}</style>
    </footer>
  );
}

Object.assign(window, { Sobre, FAQ, Conviver, Footer });
