// sections-b.jsx — Integrations, UseCases, Testimonials, Pricing, FAQ, FinalCTA, Footer
// Exports to window: Integrations, UseCases, Testimonials, Pricing, FAQ, FinalCTA, Footer

function Integrations({ t }) {
  const items = t.integ.items;
  const nodes = items.map(it => it.icon);
  // positions around the hub (percent of cloud box)
  const pos = [
    { top: '6%', left: '50%' }, { top: '26%', left: '86%' }, { top: '70%', left: '84%' },
    { top: '90%', left: '50%' }, { top: '70%', left: '14%' }, { top: '26%', left: '12%' },
  ];
  return (
    <section className="section integ" id="integraciones">
      <div className="wrap integ-grid">
        <div className="reveal">
          <span className="eyebrow"><span className="dot"></span>{t.integ.eyebrow}</span>
          <h2 className="h2" style={{ marginTop: 18 }}>{t.integ.title}</h2>
          <p className="lead" style={{ marginTop: 16 }}>{t.integ.sub}</p>
          <div className="integ-list">
            {items.map((it, i) => (
              <div className="integ-item" key={i}>
                <span className="lg"><BrandIcon name={it.icon} /></span>
                <div>{it.name}<small>{it.desc}</small></div>
              </div>
            ))}
          </div>
          <div className="integ-note">
            <span className="integ-note-ic"><BrandIcon name="database" /></span>
            <span>{t.integ.foot}</span>
          </div>
        </div>
        <div className="integ-cloud reveal">
          <svg className="orbit-lines" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"
            style={{ position: 'absolute', inset: 0, zIndex: 1 }} aria-hidden="true">
            {pos.map((p, i) => (
              <line key={i} x1="50" y1="50" x2={parseFloat(p.left)} y2={parseFloat(p.top)}
                stroke="rgba(27,91,255,.22)" strokeWidth="0.4" strokeDasharray="1.5 1.5" />
            ))}
          </svg>
          <div className="integ-hub"><PingMark size={62} color="#fff" /></div>
          {nodes.map((n, i) => (
            <div className="integ-node" key={i} style={{ top: pos[i].top, left: pos[i].left, transform: 'translate(-50%,-50%)' }}>
              <BrandIcon name={n} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function UseCases({ t }) {
  const [tab, setTab] = React.useState(0);
  const p = t.cases.panels[tab];
  return (
    <section className="section" id="casos">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow"><span className="dot"></span>{t.cases.eyebrow}</span>
          <h2 className="h2" style={{ marginTop: 18 }}>{t.cases.title}</h2>
          <p className="lead">{t.cases.sub}</p>
        </div>
        <div className="uc-tabs reveal">
          {t.cases.tabs.map((tb, i) => (
            <button key={i} className={'uc-tab' + (i === tab ? ' on' : '')} onClick={() => setTab(i)}>{tb}</button>
          ))}
        </div>
        <div className="uc-panel uc-anim" key={tab}>
          <div>
            <h3>{p.h}</h3>
            <p className="lead muted" style={{ color: 'var(--ink-2)' }}>{p.p}</p>
            <ul className="uc-bullets">
              {p.bullets.map((b, i) => (
                <li key={i}><span className="chk"><Icon.check width="18" /></span>{b}</li>
              ))}
            </ul>
          </div>
          <div className="uc-metric">
            <div className="big">{p.metric}</div>
            <div className="muted" style={{ marginTop: 8, fontSize: '1.02rem' }}>{p.metricL}</div>
            <div style={{ height: 1, background: 'var(--line)', margin: '22px 0' }}></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--ink-3)', fontSize: '.9rem' }}>
              <span style={{ width: 26, height: 26 }}><PingMark size={26} /></span>
              {t.cases.tabs[tab]}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials({ t }) {
  return (
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow"><span className="dot"></span>{t.testi.eyebrow}</span>
          <h2 className="h2" style={{ marginTop: 18 }}>{t.testi.title}</h2>
        </div>
        <div className="tw-grid">
          {t.testi.items.map((it, i) => (
            <figure className="tw-card card reveal" key={i} style={{ margin: 0, transitionDelay: (i % 3 * 0.08) + 's' }}>
              <div className="stars">★★★★★</div>
              <p>“{it.q}”</p>
              <figcaption className="tw-who">
                <span className="ava">{it.n[0]}</span>
                <span><b>{it.n}</b><span>{it.r}</span></span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function ConnectorCalc({ p }) {
  const c = p.calc;
  const [n, setN] = React.useState(7);
  const fmt = (v) => p.cur + v.toLocaleString('en-US');
  const extra = Math.max(0, n - 5);
  const monthly = p.plan.basePrice + extra * p.plan.extraPrice;
  const dots = [];
  for (let i = 1; i <= n; i++) dots.push(i <= 5);
  return (
    <div className="calc">
      <div className="calc-head">
        <div className="calc-q">
          <b>{c.title}</b>
          <span>{c.examples}</span>
        </div>
        <div className="calc-count">{n}<small>{c.connectors}</small></div>
      </div>
      <input className="calc-range" type="range" min="1" max="20" value={n}
        onChange={(e) => setN(parseInt(e.target.value, 10))}
        style={{ '--pct': ((n - 1) / 19 * 100) + '%' }} />
      <div className="calc-dots">
        {dots.map((inc, i) => <span key={i} className={inc ? 'inc' : 'ext'}></span>)}
      </div>
      <div className="calc-legend">
        <span><i className="inc"></i>5 {c.included}</span>
        {extra > 0 && <span><i className="ext"></i>{extra} {c.extra} × {fmt(p.plan.extraPrice)}</span>}
      </div>
      <div className="calc-total">
        <div>
          <span className="calc-total-lbl">{c.totalLabel}</span>
          <div className="calc-total-amt">{fmt(monthly)}<small>{c.mo}</small></div>
        </div>
        <div className="calc-onetime">
          <span>{c.plus}</span>
          <b>{fmt(p.plan.impPrice)}</b>
          <span>{c.oneTime}</span>
        </div>
      </div>
    </div>
  );
}

function Pricing({ t }) {
  const p = t.pricing;
  const fmt = (v) => p.cur + v.toLocaleString('en-US');
  return (
    <section className="section" id="precios">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow"><span className="dot"></span>{p.eyebrow}</span>
          <h2 className="h2" style={{ marginTop: 18 }}>{p.title}</h2>
          <p className="lead">{p.sub}</p>
        </div>
        <div className="price2-grid">
          {/* POC */}
          <div className="price-card card reveal poc-card">
            <span className="price-tag" style={{ background: 'var(--wa-green)' }}>{p.poc.tag}</span>
            <div className="price-name">{p.poc.name}</div>
            <div className="price-desc">{p.poc.desc}</div>
            <div className="price-amt">{fmt(p.poc.price)}<small> {p.poc.per}</small></div>
            <div className="poc-dur"><Icon.zap width="15" />{p.poc.duration}</div>
            <ul className="price-feats">
              {p.poc.feats.map((f, j) => <li key={j}><span className="chk"><Icon.check width="17" /></span>{f}</li>)}
            </ul>
            <a href={SALES_WA} target="_blank" rel="noopener" className="btn btn-ghost">{p.poc.cta}</a>
          </div>

          {/* Full plan + calculator */}
          <div className="price-card card reveal feat plan-card">
            <span className="price-tag">★ {p.plan.tag}</span>
            <div className="plan-head">
              <div>
                <div className="price-name">{p.plan.name}</div>
                <div className="price-desc">{p.plan.desc}</div>
              </div>
            </div>
            <div className="plan-rows">
              <div className="plan-row">
                <div><b>{p.plan.impLabel}</b><span>{p.plan.impNote}</span></div>
                <div className="plan-row-amt">{fmt(p.plan.impPrice)}</div>
              </div>
              <div className="plan-row">
                <div><b>{p.plan.baseLabel}</b><span>{p.plan.baseNote}</span></div>
                <div className="plan-row-amt">{fmt(p.plan.basePrice)}<small>{p.calc.mo}</small></div>
              </div>
              <div className="plan-row">
                <div><b>{p.plan.extraLabel}</b><span>{p.plan.extraNote}</span></div>
                <div className="plan-row-amt">{fmt(p.plan.extraPrice)}</div>
              </div>
            </div>
            <ConnectorCalc p={p} />
            <ul className="price-feats plan-feats">
              {p.plan.feats.map((f, j) => <li key={j}><span className="chk"><Icon.check width="17" /></span>{f}</li>)}
            </ul>
            <a href={SALES_WA} target="_blank" rel="noopener" className="btn btn-primary">{p.plan.cta}</a>
          </div>
        </div>
        <p className="center muted" style={{ marginTop: 24, fontSize: '.88rem' }}>{p.note}</p>
      </div>
    </section>
  );
}

function FAQ({ t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow"><span className="dot"></span>{t.faq.eyebrow}</span>
          <h2 className="h2" style={{ marginTop: 18 }}>{t.faq.title}</h2>
        </div>
        <div className="faq reveal">
          {t.faq.items.map((it, i) => (
            <div className={'faq-item' + (open === i ? ' open' : '')} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                {it.q}
                <span className="ic"><Icon.plus width="22" /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 240 : 0 }}>
                <div>{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ t }) {
  return (
    <section className="section" id="contacto">
      <div className="wrap">
        <div className="cta-final reveal">
          <div className="cta-orb" style={{ width: 240, height: 240, top: -80, left: -40 }}></div>
          <div className="cta-orb" style={{ width: 180, height: 180, bottom: -60, right: 40 }}></div>
          <div style={{ position: 'relative', zIndex: 2 }}>
            <h2>{t.finalCta.title}</h2>
            <p>{t.finalCta.sub}</p>
            <div className="hero-cta">
              <a href={SALES_WA} target="_blank" rel="noopener" className="btn btn-white btn-lg">{t.finalCta.cta1}<Icon.arrow width="18" /></a>
              <a href={SALES_WA} target="_blank" rel="noopener" className="btn btn-lg btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,.3)' }}>{t.finalCta.cta2}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <a href="#top" className="brand"><PingMark /> ping</a>
            <p>{t.footer.tag}</p>
          </div>
          {t.footer.cols.map((c, i) => (
            <div key={i}>
              <h5>{c.h}</h5>
              <ul>{c.links.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>{t.footer.rights}</span>
          <span>{t.footer.made}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Integrations, UseCases, Testimonials, Pricing, FAQ, FinalCTA, Footer });