/* Sections — Problem, HowItWorks, WhyBrazil, Markets, Trust, Quote, Blog. */

function SectionHead({ eyebrow, title, body, align = 'left', max = 720 }) {
  const center = align === 'center';
  return (
    <div style={{ maxWidth:max, margin: center ? '0 auto' : '0', textAlign: center ? 'center' : 'left' }}>
      <Reveal><Eyebrow style={{ marginBottom:18 }}>{eyebrow}</Eyebrow></Reveal>
      <Reveal delay={60}><h2 className="t-h2" style={{ margin:0, color:'var(--text-1)', textWrap:'balance', whiteSpace:'pre-line' }}>{title}</h2></Reveal>
      {body && <Reveal delay={120}><p className="t-lead" style={{ color:'var(--text-2)', marginTop:18, marginBottom:0, marginInline: center ? 'auto' : 0 }}>{body}</p></Reveal>}
    </div>
  );
}

const PAD = { paddingTop:104, paddingBottom:104 };

/* 03 — Problem */
function Problem({ t }) {
  const p = t.problem;
  return (
    <Section id="problem" bg="alt" label="Problem">
      <Container style={PAD}>
        <SectionHead eyebrow={p.eyebrow} title={p.title} body={p.body} max={780} />
        <div className="bne-grid-4" style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18, marginTop:56 }}>
          {p.stats.map((s, i) => (
            <Reveal key={i} delay={i*80}>
              <div style={{ background:'var(--card-bg)', border:'1px solid var(--border-1)', borderRadius:'var(--r-card)', padding:'28px 26px', height:'100%' }}>
                {s.icon && <div style={{ display:'grid', placeItems:'center', width:40, height:40, borderRadius:10, background:'rgba(123,47,190,.12)', color:'var(--accent)', marginBottom:18 }}>
                  <Icon name={s.icon} size={21}/>
                </div>}
                <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:'clamp(30px,3.2vw,40px)', color:'var(--accent)', letterSpacing:'-.02em', lineHeight:1, whiteSpace:'nowrap' }}>{s.n}</div>
                <div className="t-small" style={{ color:'var(--text-3)', marginTop:12, whiteSpace:'pre-line' }}>{s.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
        {p.sources && <Reveal delay={120}>
          <div className="t-caption" style={{ color:'var(--text-3)', fontFamily:'var(--font-mono)', fontSize:11.5, letterSpacing:'.03em', marginTop:22 }}>{p.sources}</div>
        </Reveal>}
      </Container>
    </Section>
  );
}

/* 04 — How it works: sticky intro left, four step nodes on one connector line right */
function HowItWorks({ t, bg = 'app' }) {
  const h = t.how;
  const TOKEN = 46;
  return (
    <Section id="how" bg={bg} label="How it works">
      <Container style={PAD}>
        <div className="bne-split" style={{ display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:56, alignItems:'stretch' }}>
          <div>
            <div className="bne-how-sticky" style={{ position:'sticky', top:104 }}>
              <SectionHead eyebrow={h.eyebrow} title={h.title} body={h.sub} />
              <div style={{ position:'relative', width:'100%', aspectRatio:'4 / 3', borderRadius:'var(--r-lg)', overflow:'hidden', marginTop:32, border:'1px solid var(--border-1)' }}>
                <image-slot id="how-video-call" fit="cover" shape="rounded" radius="14"
                  placeholder="Drop a photo of a video call between US and Brazil teams — laptop screen showing remote participants, candid, real work context"
                  style={{ position:'absolute', inset:0, display:'block', width:'100%', height:'100%' }}></image-slot>
              </div>
            </div>
          </div>
          <div style={{ position:'relative' }}>
            {/* one unbroken line through the four number tokens */}
            <div aria-hidden="true" data-how-line="" style={{ position:'absolute', left:TOKEN/2 - 1, top:TOKEN/2, width:2, height:0,
              background:'linear-gradient(180deg, rgba(123,47,190,.45), rgba(123,47,190,.28))' }}
              ref={el => {
                if (!el || el.__bneMeasured) return; el.__bneMeasured = true;
                const measure = () => {
                  const wrap = el.parentElement; if (!wrap) return;
                  const rows = wrap.querySelectorAll('[data-how-row]'); if (!rows.length) return;
                  const wr = wrap.getBoundingClientRect();
                  const lr = rows[rows.length-1].getBoundingClientRect();
                  el.style.height = Math.max(0, lr.top - wr.top) + 'px';
                };
                measure();
                setTimeout(measure, 700); setTimeout(measure, 1600);
                window.addEventListener('resize', measure);
                if (window.ResizeObserver) { const ro = new ResizeObserver(measure); ro.observe(el.parentElement); }
              }}></div>
            <div style={{ display:'flex', flexDirection:'column', gap:18 }}>
              {h.steps.map((s, i) => {
                const hot = !!s.badge; /* step 02 = emphasized node */
                return (
                  <Reveal key={i} delay={i*100}>
                    <div data-how-row="" style={{ display:'flex', gap:18, alignItems:'flex-start' }}>
                      <div style={{ display:'grid', placeItems:'center', flexShrink:0, width:TOKEN, height:TOKEN, borderRadius:'50%', position:'relative', zIndex:1,
                        background: hot ? 'var(--accent)' : 'var(--app-bg)',
                        border:`1.5px solid ${hot ? 'var(--accent)' : 'rgba(123,47,190,.38)'}`,
                        color: hot ? '#fff' : 'var(--accent)', fontFamily:'var(--font-mono)', fontSize:14, fontWeight:500,
                        boxShadow: hot ? '0 6px 18px rgba(123,47,190,.35)' : 'none' }}>{s.n}</div>
                      <div style={{ flex:1, background:'var(--card-bg)', borderRadius:'var(--r-card)', padding:'22px 24px',
                        border:`1px solid ${hot ? 'rgba(123,47,190,.42)' : 'var(--border-1)'}`,
                        boxShadow: hot ? '0 14px 38px rgba(123,47,190,.16)' : 'none' }}>
                        <div style={{ display:'flex', alignItems:'center', gap:12, flexWrap:'wrap' }}>
                          <span style={{ display:'grid', placeItems:'center', width:38, height:38, borderRadius:10, background:'rgba(123,47,190,.14)', color:'var(--accent)' }}>
                            <Icon name={s.icon} size={20}/>
                          </span>
                          <span className="t-h4" style={{ color:'var(--text-1)' }}>{s.t}</span>
                          {s.badge && <span style={{ marginLeft:'auto', padding:'6px 13px', borderRadius:'var(--r-pill)', background:'rgba(123,47,190,.14)', border:'1px solid rgba(123,47,190,.4)', color:'var(--accent)', fontFamily:'var(--font-mono)', fontSize:11.5, letterSpacing:'.12em', textTransform:'uppercase', whiteSpace:'nowrap' }}>{s.badge}</span>}
                        </div>
                        <p className="t-body" style={{ color:'var(--text-2)', margin:'12px 0 0' }}>{s.b}</p>
                      </div>
                    </div>
                  </Reveal>
                );
              })}
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* 05 — Why Brazil (always purple) */
function WhyBrazil({ t }) {
  const w = t.why;
  return (
    <Section id="why" bg="navy" label="Why Brazil" style={{ overflow:'hidden', background:'var(--purple-deep)' }}>
      {/* atmospheric Brazil photo — background layer (drop a São Paulo skyline here) */}
      <image-slot id="why-brazil-bg" className="on-purple" fit="cover" shape="rect"
        placeholder="Drop a São Paulo skyline photo"
        style={{ position:'absolute', inset:0, zIndex:0, display:'block' }}></image-slot>
      {/* navy/purple overlay + soft top/bottom fades — photo reads as ambient texture */}
      <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none', zIndex:1,
        background:'linear-gradient(180deg, var(--purple-deep) 0%, rgba(11,7,30,.78) 16%, rgba(11,7,30,.74) 84%, var(--purple-deep) 100%)' }}></div>
      <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none', zIndex:1,
        background:'radial-gradient(45% 60% at 90% 10%, rgba(155,85,214,.22), transparent 60%)' }}></div>
      <Container style={{ ...PAD, position:'relative', zIndex:2, pointerEvents:'none' }}>
        <div style={{ display:'flex', flexWrap:'wrap', alignItems:'flex-end', justifyContent:'space-between', gap:20, pointerEvents:'auto' }}>
          <SectionHead eyebrow={w.eyebrow} title={w.title} max={620} />
          <Reveal delay={120}><p className="t-h4" style={{ color:'var(--text-2)', maxWidth:340, margin:0, fontWeight:600 }}>{w.body}</p></Reveal>
        </div>
        <div className="bne-grid-2" style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:18, marginTop:52, pointerEvents:'auto' }}>
          {w.points.map((pt, i) => (
            <Reveal key={i} delay={i*80}>
              <div style={{ display:'flex', gap:18, alignItems:'flex-start', background:'var(--deep-card)', border:'1px solid var(--deep-border)', borderRadius:'var(--r-card)', padding:'26px 28px', height:'100%' }}>
                <div style={{ display:'grid', placeItems:'center', flexShrink:0, width:46, height:46, borderRadius:12, background:'var(--deep-chip)', color:'var(--accent)' }}>
                  <Icon name={pt.icon} size={23}/>
                </div>
                <div>
                  <div className="t-h4" style={{ color:'var(--on-deep-1)' }}>{pt.t}</div>
                  <p className="t-body" style={{ color:'var(--on-deep-2)', margin:'6px 0 0' }}>{pt.b}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        {/* Row 2 — three deeper columns with atmospheric photos */}
        {w.advantage && <div className="bne-grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18, marginTop:48, pointerEvents:'auto' }}>
          {w.advantage.map((col, i) => (
            <Reveal key={col.id} delay={i*90}>
              <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
                <div style={{ position:'relative', width:'100%', aspectRatio:'3 / 2', borderRadius:'var(--r-lg)', overflow:'hidden', border:'1px solid var(--deep-border)' }}>
                  <image-slot id={col.id} className="on-purple" fit="cover" shape="rounded" radius="14"
                    placeholder={col.ph}
                    style={{ position:'absolute', inset:0, display:'block', width:'100%', height:'100%' }}></image-slot>
                  <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none', background:'rgba(11,7,30,.32)' }}></div>
                </div>
                <div className="t-h4" style={{ color:'var(--on-deep-1)', marginTop:18 }}>{col.t}</div>
                <p className="t-body" style={{ color:'var(--on-deep-2)', margin:'8px 0 0' }}>{col.b}</p>
              </div>
            </Reveal>
          ))}
        </div>}
        <Reveal delay={120}>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginTop:28, padding:'16px 20px', borderRadius:'var(--r-btn)', background:'rgba(123,47,190,.22)', border:'1px solid rgba(198,163,236,.3)', pointerEvents:'auto' }}>
            <Icon name="globe" size={20} style={{ color:'var(--accent)', flexShrink:0 }}/>
            <span className="t-body" style={{ color:'var(--on-deep-1)' }}>{w.note}</span>
          </div>
        </Reveal>
      </Container>
    </Section>
  );
}

/* 07 — Markets */
function Markets({ t }) {
  const m = t.markets;
  return (
    <Section id="markets" bg="alt" label="Markets">
      <Container style={PAD}>
        <SectionHead eyebrow={m.eyebrow} title={m.title} align="center" max={680} />
        <div className="bne-grid-4" style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18, marginTop:56 }}>
          {m.cols.map((col, i) => (
            <Reveal key={i} delay={i*80}>
              <div style={{ background:'var(--card-bg)', border:'1px solid var(--border-1)', borderRadius:'var(--r-card)', padding:'30px 26px', height:'100%', borderTop:'3px solid var(--accent-strong)' }}>
                <div style={{ display:'grid', placeItems:'center', width:48, height:48, borderRadius:12, background:'rgba(123,47,190,.14)', color:'var(--accent)', marginBottom:18 }}>
                  <BrandIcon name={col.icon} size={24}/>
                </div>
                <div className="t-h3" style={{ color:'var(--text-1)' }}>{col.region}</div>
                <p className="t-body" style={{ color:'var(--text-2)', marginTop:10, marginBottom:0 }}>{col.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* 09 — Trust & badges */
function Trust({ t }) {
  const tr = t.trust;
  return (
    <Section id="trust" bg="deep" label="Trust">
      <Container style={PAD}>
        <SectionHead eyebrow={tr.eyebrow} title={tr.title} align="center" max={620} />
        <div className="bne-grid-4" style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20, marginTop:56 }}>
          {tr.stats.map((s, i) => (
            <Reveal key={i} delay={i*70}>
              <div style={{ textAlign:'center' }}>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:'clamp(40px,5vw,60px)', color:'var(--on-deep-1)', letterSpacing:'-.03em', lineHeight:1 }}>
                  <CountUp value={s.n} suffix={s.suf} />
                </div>
                <div className="t-body" style={{ color:'var(--on-deep-2)', marginTop:8 }}>{s.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <div style={{ marginTop:64, paddingTop:36, borderTop:'1px solid var(--deep-border)' }}>
            <div className="t-caption" style={{ textAlign:'center', color:'var(--on-deep-3)', fontFamily:'var(--font-mono)', letterSpacing:'.08em', marginBottom:24 }}>{tr.badgeLabel}</div>
            <div className="bne-badges" style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16 }}>
              {tr.badges.map((b, i) => (
                <div key={i} style={{ display:'grid', placeItems:'center', height:84, borderRadius:'var(--r-card)', border:'1px dashed rgba(255,255,255,.22)', color:'var(--on-deep-3)', fontFamily:'var(--font-mono)', fontSize:13, textAlign:'center', padding:'0 12px' }}>{b}</div>
              ))}
            </div>
          </div>
        </Reveal>
      </Container>
    </Section>
  );
}

/* 10 — Brand-voice statement (no placeholder testimonials) */
function Quote({ t }) {
  return (
    <Section id="quote" bg="app" label="Statement">
      <Container style={{ paddingTop:96, paddingBottom:96, textAlign:'center' }}>
        <Reveal>
          <div style={{ display:'inline-flex', marginBottom:28 }}><Mark size={48} variant="gradient" /></div>
        </Reveal>
        <Reveal delay={80}>
          <blockquote className="t-h1" style={{ margin:0, color:'var(--text-1)', maxWidth:900, marginInline:'auto', textWrap:'balance' }}>“{t.quote.text}”</blockquote>
        </Reveal>
        <Reveal delay={160}>
          <div className="t-caption" style={{ color:'var(--text-3)', marginTop:24, fontFamily:'var(--font-mono)', letterSpacing:'.06em' }}>{t.quote.sub}</div>
        </Reveal>
      </Container>
    </Section>
  );
}

/* 11 — Blog / insights */
function Blog({ t }) {
  const b = t.blog;
  return (
    <Section id="blog" bg="alt" label="Insights">
      <Container style={PAD}>
        <div style={{ display:'flex', flexWrap:'wrap', alignItems:'flex-end', justifyContent:'space-between', gap:18 }}>
          <SectionHead eyebrow={b.eyebrow} title={b.title} max={520} />
          <Reveal delay={80}>
            <a href="#" style={{ display:'inline-flex', alignItems:'center', gap:7, color:'var(--accent)', textDecoration:'none', fontWeight:600, fontFamily:'var(--font-body)', fontSize:15 }}>
              {b.seeAll} <Icon name="arrow" size={17}/>
            </a>
          </Reveal>
        </div>
        <div className="bne-grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginTop:48 }}>
          {b.items.map((a, i) => (
            <Reveal key={i} delay={i*90}>
              <article style={{ background:'var(--card-bg)', border:'1px solid var(--border-1)', borderRadius:'var(--r-card)', overflow:'hidden', height:'100%', display:'flex', flexDirection:'column' }}>
                <div style={{ height:150, background:`linear-gradient(135deg, var(--navy-600), var(--navy-800))`, position:'relative', display:'grid', placeItems:'center' }}>
                  <Mark size={34} variant="paper" />
                  <span style={{ position:'absolute', top:14, left:14, padding:'5px 10px', borderRadius:99, background:'var(--deep-border)', backdropFilter:'blur(6px)', color:'#fff', fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.04em' }}>{a.tag}</span>
                </div>
                <div style={{ padding:'22px 22px 24px', display:'flex', flexDirection:'column', flex:1 }}>
                  <h3 className="t-h4" style={{ color:'var(--text-1)', margin:0, textWrap:'balance' }}>{a.t}</h3>
                  <div style={{ display:'flex', alignItems:'center', gap:10, marginTop:'auto', paddingTop:18 }}>
                    <span className="t-caption" style={{ color:'var(--accent)', fontFamily:'var(--font-mono)' }}>{b.soon}</span>
                    <span style={{ color:'var(--text-3)' }}>·</span>
                    <span className="t-caption" style={{ color:'var(--text-3)' }}>{a.read}</span>
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* 05b — The Brazil Advantage (culture / creativity / code). Mid-purple band. */
function BrazilAdvantage({ t }) {
  const a = t.brazilAdv;
  return (
    <Section id="brazil-advantage" bg="deep" label="Brazil advantage" style={{ overflow:'hidden', background:'var(--deep-bg-2)' }}>
      <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(50% 70% at 15% 10%, rgba(123,47,190,.10), transparent 60%)' }}></div>
      <Container style={{ ...PAD, position:'relative' }}>
        <SectionHead eyebrow={a.eyebrow} title={a.title} align="center" max={760} />
        <div className="bne-grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginTop:56 }}>
          {a.cols.map((c, i) => (
            <Reveal key={i} delay={i*90}>
              <div style={{ background:'var(--deep-card)', border:'1px solid var(--deep-border)', borderRadius:'var(--r-card)', padding:'30px 28px', height:'100%' }}>
                <div style={{ display:'grid', placeItems:'center', width:48, height:48, borderRadius:12, background:'var(--deep-chip)', color:'var(--accent)' }}>
                  <Icon name={c.icon} size={24}/>
                </div>
                <div className="t-h4" style={{ color:'var(--on-deep-1)', marginTop:18 }}>{c.t}</div>
                <p className="t-body" style={{ color:'var(--on-deep-2)', marginTop:10, marginBottom:0 }}>{c.b}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <div style={{ marginTop:28, padding:'24px 28px', borderRadius:'var(--r-card)', background:'var(--deep-chip)', border:'1px solid rgba(123,47,190,.28)', display:'flex', gap:16, alignItems:'center' }}>
            <div style={{ flexShrink:0 }}><Mark size={34} variant="auto" /></div>
            <p className="t-h4" style={{ margin:0, color:'var(--on-deep-1)', fontWeight:700, textWrap:'balance' }}>{a.banner}</p>
          </div>
        </Reveal>
      </Container>
    </Section>
  );
}

Object.assign(window, { SectionHead, Problem, HowItWorks, WhyBrazil, Markets, Trust, Quote, Blog, PAD, BrazilAdvantage });
