// Landing page sections

function Nav({ onCalc }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 16);
    h();
    window.addEventListener("scroll", h, { passive: true });
    return () => window.removeEventListener("scroll", h);
  }, []);
  return (
    <div className="nav-wrap">
      <nav className={"nav" + (scrolled ? " scrolled" : "")}>
        <a className="nav-logo" href="../index.html" aria-label="SH Squads">
          <div className="nav-mark">
            <span>{'{'}</span>
            <span className="b">SH</span>
            <span className="slash">/</span>
            <span>Squads{'}'}</span>
          </div>
          <span className="nav-tag">design.build.launch</span>
        </a>
        <div className="nav-right">
<button className="btn btn--primary btn--sm" onClick={onCalc} style={{padding:"9px 16px", fontSize:13}}>
            Calcular potencial <span className="arr">→</span>
          </button>
        </div>
      </nav>
    </div>
  );
}

function Hero({ onCalc }) {
  return (
    <section id="top" className="hero">
      <div className="hero-glow"></div>
      <div className="container">
        <div className="hero-inner">
          <div className="eyebrow center" style={{marginBottom: 16}}>
            Calculadora · Inteligência de negócios
          </div>
          <h1>
            Quanto a sua empresa está <span className="hl-green">deixando de faturar</span> por não oferecer serviços financeiros?
          </h1>
          <div className="hero-preheader">
            <Icon name="spark" size={14} stroke={1.8}/>
            Descubra em apenas 3 minutos
          </div>
          <p className="hero-sub">
            Sabia que a sua empresa pode oferecer serviços financeiros e ganhar dinheiro com isso? Em 3 minutos, você vai descobrir o potencial de receita ao embarcar maquininha, conta digital, PIX, crédito e cartão na sua operação.
          </p>
          <div className="hero-actions">
            <button className="btn btn--primary btn--xl" onClick={onCalc}>
              Calcular meu potencial <span className="arr">→</span>
            </button>
          </div>
          <div className="hero-trust">
            <span className="pulse-dot"></span>
            <span>Grátis</span>
            <span className="hero-divider"></span>
            <span>Relatório em PDF</span>
            <span className="hero-divider"></span>
            <span>Sem compromisso</span>
          </div>

          <div className="hero-proof">
            <div className="hero-proof-card">
              <div className="icon-chip"><Icon name="trending-up" size={18}/></div>
              <div>
                <div className="num">6 frentes</div>
                <div className="lbl">de receita financeira</div>
              </div>
            </div>
            <div className="hero-proof-card">
              <div className="icon-chip"><Icon name="calculator" size={18}/></div>
              <div>
                <div className="num">Cálculo real</div>
                <div className="lbl">baseado em produção</div>
              </div>
            </div>
            <div className="hero-proof-card">
              <div className="icon-chip"><Icon name="download" size={18}/></div>
              <div>
                <div className="num">Relatório PDF</div>
                <div className="lbl">diagnóstico + caminho técnico</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhyMatters() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow center">Por que importa</span>
          <h2>Você pode ter a <span className="hl">sua própria fintech</span> sem virar um banco</h2>
          <p>Embedded finance virou a próxima fronteira de margem. A pergunta não é se sua empresa vai oferecer serviços financeiros — é quanto da sua base você vai monetizar antes que outra empresa monetize.</p>
        </div>
        <div className="why-grid">
          <div className="why-card">
            <div className="num">R$ 1,2<span className="small"> tri</span></div>
            <div className="lbl">Volume Embedded Finance BR · 2025</div>
            <p className="body">Receita transacionada no Brasil via serviços financeiros embarcados em produtos não-bancários.</p>
          </div>
          <div className="why-card">
            <div className="num">+38<span className="small">% a.a.</span></div>
            <div className="lbl">Crescimento anual</div>
            <p className="body">Taxa composta do mercado de embedded finance no Brasil — dobra de tamanho a cada 28 meses.</p>
          </div>
          <div className="why-card">
            <div className="num">12-30<span className="small">%</span></div>
            <div className="lbl">Aumento de margem</div>
            <p className="body">Ganho médio em negócios que embarcam serviços financeiros sobre uma base de clientes existente.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="section section--surface">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow center">Como funciona</span>
          <h2>Faça um cálculo <span className="hl">gratuito</span></h2>
          <p>Você responde algumas perguntas, a gente cruza com dados de mercado e taxas de adoção reais. Em poucos minutos você tem um pré-diagnóstico de viabilidade de uma fintech para o seu negócio.</p>
        </div>
        <div className="how-grid">
          <div className="how-line"></div>
          <div className="how-step">
            <div className="step-num">01</div>
            <div className="step-lbl">Diagnóstico rápido</div>
            <div className="step-title">3 perguntas sobre seu negócio</div>
            <p className="step-body">Segmento, tamanho da base e faturamento. É o que define a janela de receita possível.</p>
          </div>
          <div className="how-step">
            <div className="step-num">02</div>
            <div className="step-lbl">Cálculo real</div>
            <div className="step-title">Potencial em 6 frentes de receita</div>
            <p className="step-body">Maquininha, conta, cartão, crédito, antecipação, câmbio — com taxas e adoção médias do mercado.</p>
          </div>
          <div className="how-step">
            <div className="step-num">03</div>
            <div className="step-lbl">Resultado + plano</div>
            <div className="step-title">Você recebe o número, o gráfico e o caminho</div>
            <p className="step-body">Receita anual estimada por produto, ROI e o stack técnico mínimo pra colocar em produção.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Credibility() {
  return (
    <section className="section">
      <div className="container">
        <div className="quote-wrap">
          <span className="eyebrow" style={{marginBottom: 18, display:"flex"}}>Bastidor</span>
          <p className="quote">
            A SH Squads construiu, operou e vendeu uma Banking as a Service para o ecossistema XP. O modelo de cálculo aqui é o mesmo que usamos com clientes que faturam serviços financeiros em produção <em>hoje</em>.
          </p>
          <div className="quote-sig">Founders, SH Squads</div>
        </div>
      </div>
    </section>
  );
}

const EXPERTS = [
  {
    name: "Lucas Montanini",
    role: "Sócio",
    photo: "../img/lucas-montanini.jpg",
    linkedin: "https://www.linkedin.com/in/lucas-montanini/",
    bio: "Traz mais de 10 anos de experiência liderando a construção de infraestruturas críticas e inovação financeira de alta escala. Cofundador da Live On BaaS, plataforma que transacionou bilhões até ser adquirida pelo Banco Modal (XP Inc.).",
  },
  {
    name: "Bruno Cardoso",
    role: "Co-founder & CTO",
    photo: "../img/bruno-cardoso.jpg",
    linkedin: "https://www.linkedin.com/in/bruno-cardoso-51a72b130/",
    bio: "Engenheiro sênior com mais de 9 anos projetando sistemas distribuídos e liderando a tecnologia de Credit as a Service no Banco Modal/XP. Especialista em plataformas financeiras reguladas.",
  },
  {
    name: "Orlando Ovigli",
    role: "Partner & CIO",
    photo: "../img/orlando-ovigli.jpg",
    linkedin: "https://www.linkedin.com/in/orlandoovigli/",
    bio: "Cofundador e VP de Ecossistemas Digitais na FCamara. Especialista em comércio digital, serviços financeiros e inovação corporativa com ampla experiência liderando transformações em grandes empresas.",
  },
  {
    name: "Roberto Wajnsztok",
    role: "Co-founder & COO",
    photo: "../img/roberto-wajnsztok.jpg",
    linkedin: "https://www.linkedin.com/in/roberto-wajnsztok/",
    bio: "Ex-diretor do Walmart.com, Shoptime e Ri Happy, com mais de duas décadas de liderança em varejo e negócios. CEO da Origin5, consultoria que já acelerou mais de 150 grandes marcas do mercado.",
  },
  {
    name: "Carlos Akira Sato",
    role: "Head Regulatório",
    photo: "../img/carlos-akira.jpg",
    linkedin: "https://www.linkedin.com/in/carlosakira/",
    bio: "Executivo com sólida bagagem em private equity, assessoria estratégica e M&A. Na SH, lidera a governança regulatória e compliance de novas tecnologias, ativos digitais e estruturas financeiras.",
  },
  {
    name: "João Pedro",
    role: "Head Comercial",
    photo: "../img/joao-pedro.jpg",
    linkedin: "https://www.linkedin.com/in/jooaopalmeida/",
    bio: "Profissional de desenvolvimento de negócios com experiência em tecnologia e fintechs. Histórico de atuação no ecossistema da LiveOn e Banco Modal (XP Inc.).",
  },
  {
    name: "Jonatas Moretto",
    role: "Head of Product Operations",
    photo: "../img/jonatas-moretto.jpg",
    linkedin: "https://www.linkedin.com/in/jonatasmoretto/",
    bio: "Especialista em design de produto, UX e eficiência operacional. Com histórico na LiveOn e Banco Modal (XP Inc.), conecta tecnologia e negócio garantindo eficiência na esteira de entrega.",
  },
];

function Experts() {
  const [current, setCurrent] = React.useState(0);
  const [perPage, setPerPage] = React.useState(3);
  const [baseOffset, setBaseOffset] = React.useState(0);
  const [dragging, setDragging] = React.useState(false);
  const [dragDelta, setDragDelta] = React.useState(0);
  const wrapRef = React.useRef(null);
  const dragStartX = React.useRef(null);
  const isDragging = React.useRef(false);
  const gap = 20;

  React.useEffect(() => {
    const update = () => {
      const w = window.innerWidth;
      setPerPage(w <= 600 ? 1 : w <= 900 ? 2 : 3);
    };
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);

  React.useEffect(() => {
    if (!wrapRef.current) return;
    const cardW = (wrapRef.current.offsetWidth - gap * (perPage - 1)) / perPage;
    setBaseOffset(current * (cardW + gap));
  }, [current, perPage]);

  const max = Math.max(0, EXPERTS.length - perPage);
  const getCardW = () => wrapRef.current ? (wrapRef.current.offsetWidth - gap * (perPage - 1)) / perPage : 0;

  const startDrag = (x) => { isDragging.current = true; dragStartX.current = x; setDragging(true); setDragDelta(0); };
  const moveDrag = (x) => { if (!isDragging.current) return; setDragDelta(x - dragStartX.current); };
  const endDrag = () => {
    if (!isDragging.current) return;
    isDragging.current = false; setDragging(false);
    const t = getCardW() * 0.25;
    if (dragDelta < -t) setCurrent(c => Math.min(max, c + 1));
    else if (dragDelta > t) setCurrent(c => Math.max(0, c - 1));
    setDragDelta(0);
  };

  const cardFlexBasis = `calc(${100 / perPage}% - ${gap * (perPage - 1) / perPage}px)`;
  const translateX = baseOffset - dragDelta;

  return (
    <section className="section section--surface">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow center">Quem está por trás</span>
          <h2>O time que <span className="hl">já construiu</span> fintechs em produção</h2>
          <p>Não é deck de consultoria. É quem desenhou, construiu e operou fintechs em banking whitelabel — e ajudou empresas a faturar com embedded finance na vida real.</p>
        </div>
        <div className="exp-carousel-wrap" ref={wrapRef}
          onMouseDown={(e) => { e.preventDefault(); startDrag(e.clientX); }}
          onMouseMove={(e) => moveDrag(e.clientX)}
          onMouseUp={endDrag} onMouseLeave={() => { if (isDragging.current) endDrag(); }}
          onTouchStart={(e) => startDrag(e.touches[0].clientX)}
          onTouchMove={(e) => moveDrag(e.touches[0].clientX)}
          onTouchEnd={endDrag}
          style={{overflow:'hidden', touchAction:'pan-y'}}
        >
          <div style={{
            display:'flex', gap:gap+'px',
            transform:`translateX(-${translateX}px)`,
            transition: dragging ? 'none' : 'transform .45s cubic-bezier(.22,1,.36,1)',
            cursor: dragging ? 'grabbing' : 'grab',
            userSelect: 'none',
          }}>
            {EXPERTS.map((e, i) => (
              <div key={i} className="expert-card" style={{flex:`0 0 ${cardFlexBasis}`,minWidth:0}}>
                <div className="exp-photo">
                  <img src={e.photo} alt={e.name} draggable="false" style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'center top',borderRadius:'50%'}}/>
                </div>
                <div className="name">{e.name}</div>
                <div className="role">{e.role}</div>
                <p className="bio" style={{flex:1}}>{e.bio}</p>
                <a href={e.linkedin} target="_blank" rel="noopener noreferrer" className="exp-linkedin"
                  onClick={(e) => { if (Math.abs(dragDelta) > 5) e.preventDefault(); }}
                  style={{pointerEvents: dragging ? 'none' : 'auto'}}
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
                    <rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>
                  </svg>
                  LinkedIn
                </a>
              </div>
            ))}
          </div>
        </div>
        {max > 0 && (
          <div style={{display:'flex',justifyContent:'center',gap:8,marginTop:28}}>
            {Array.from({length: max + 1}).map((_, i) => (
              <button key={i} onClick={() => setCurrent(i)} style={{
                width:8,height:8,borderRadius:'50%',border:'none',cursor:'pointer',padding:0,
                background: current === i ? 'var(--green-700)' : 'var(--border-default)',
                transition:'background .2s',
              }}/>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

const PARTNERS = [
  { src: '../img/partners/Bullet.svg',                        alt: 'Bullet' },
  { src: '../img/partners/mag.svg',                           alt: 'MAG',          h: 38 },
  { src: '../img/partners/logo-flow.svg',                     alt: 'Flow' },
  { src: '../img/partners/logo-jpb-pagamentos.svg',           alt: 'JPB Pagamentos', h: 38 },
  { src: '../img/partners/logo-celcoin.svg',                  alt: 'Celcoin' },
  { src: '../img/partners/Logo-StarLive-01-1-scaled-366x119.png', alt: 'StarLive', h: 38 },
  { src: '../img/partners/zuvia.svg',                         alt: 'Zuvia',        h: 32 },
  { src: '../img/partners/logo-longevitar.png',               alt: 'Longevitar',   h: 16 },
  { src: '../img/partners/logo_branco_tagline-svg.svg',       alt: 'BMP',          h: 36 },
  { src: '../img/partners/logo-7pay.png',                     alt: '7Pay',         h: 36 },
];

function LogosMarquee() {
  const items = [...PARTNERS, ...PARTNERS];
  return (
    <section className="logos-wrap">
      <div className="container">
        <div className="logos-head">
          <span className="lbl">Parceiros e clientes em produção</span>
        </div>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {items.map((p, i) => (
            <span key={i} className="logo-item">
              <img
                src={p.src}
                alt={p.alt}
                draggable="false"
                style={{
                  height: p.h ? p.h + 'px' : '28px',
                  width: 'auto',
                  filter: 'brightness(0)',
                  opacity: 0.45,
                  display: 'block',
                }}
              />
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onCalc }) {
  return (
    <section className="section">
      <div className="container">
        <div className="final-cta">
          <span className="eyebrow center">Pronto?</span>
          <h2>Pronto pra ver quanto a sua fintech pode faturar?</h2>
          <p>Responde 3 perguntas e o cálculo sai na hora — sem espera.</p>
          <button className="btn btn--primary btn--xl" onClick={onCalc}>
            Calcular meu potencial <span className="arr">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

function FooterMini() {
  return (
    <div className="container">
      <div className="footer-mini">
        <div className="left">
          <span>© SH Squads · Design. Build. Launch.</span>
        </div>
        <div className="right">
          <span style={{color: "var(--green-700)"}}>// design.build.launch</span>
        </div>
      </div>
    </div>
  );
}

function LandingPage({ onCalc }) {
  return (
    <React.Fragment>
      <Nav onCalc={onCalc}/>
      <Hero onCalc={onCalc}/>
      <LogosMarquee/>
      <WhyMatters/>
      <HowItWorks/>
      <Experts/>
      <Credibility/>
      <FinalCTA onCalc={onCalc}/>
      <FooterMini/>
    </React.Fragment>
  );
}

Object.assign(window, { LandingPage });