// sections-a.jsx — PingMark, Icon, Nav, Hero, Stats, HowItWorks
// Exports to window: PingMark, Icon, Nav, Hero, Stats, HowItWorks, FloatChip

function PingMark({ size = 34, color = 'var(--brand)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <rect x="3" y="4" width="30" height="25" rx="9" fill={color} />
      <path d="M13 29l-3 6 8-4.5" fill={color} />
      <circle cx="14" cy="16.5" r="2.6" fill="#fff" />
      <circle cx="21" cy="16.5" r="2.6" fill="#fff" />
      <circle cx="28" cy="16.5" r="2.6" fill="#fff" />
      <circle cx="32" cy="9" r="6.5" fill="#25D366" stroke="#fff" strokeWidth="2.4" />
    </svg>
  );
}

const Icon = {
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  play: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M8 5v14l11-7z"/></svg>,
  check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 6L9 17l-5-5"/></svg>,
  plus: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  chevR: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9 6l6 6-6 6"/></svg>,
  zap: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>,
  ear: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M6 8.5a6 6 0 0 1 12 0c0 2.5-1.5 3.5-1.5 6a3 3 0 0 1-3 3"/><path d="M9 20a2 2 0 0 0 2-2"/></svg>,
  plug: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9 2v6M15 2v6M7 8h10v3a5 5 0 0 1-10 0V8zM12 16v6"/></svg>,
};

function FloatChip({ style, icon, color, title, sub, delay }) {
  return (
    <div className="float-chip" style={{ ...style, animationDelay: (delay || 0) + 's' }}>
      <div className="fic" style={{ background: color, padding: 5 }}>{icon}</div>
      <div><span style={{ display: 'block' }}>{title}</span><small>{sub}</small></div>
    </div>
  );
}

function Nav({ t, lang, setLang, variant }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="wrap nav-inner">
        <a href="#top" className="brand"><PingMark /> ping</a>
        <nav className="nav-links">
          <a href="#how">{t.nav.how}</a>
          <a href="#integraciones">{t.nav.integrations}</a>
          <a href="#casos">{t.nav.cases}</a>
          <a href="#precios">{t.nav.pricing}</a>
        </nav>
        <div className="nav-right">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang === 'es' ? 'on' : ''} onClick={() => setLang('es')}>ES</button>
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <a href={SALES_WA} target="_blank" rel="noopener" className="btn btn-primary" style={{ padding: '11px 20px' }}>{t.nav.cta}</a>
        </div>
      </div>
    </header>
  );
}

function Hero({ t, lang, variant }) {
  const h = t.hero;
  const dark = variant === 'dark';
  return (
    <section className={'hero v-' + variant} id="top">
      {!dark && (
        <div className="hero-bg" aria-hidden="true">
          <div className="hero-blob" style={{ width: 520, height: 520, top: -160, right: -120, background: 'var(--brand-100)' }}></div>
          <div className="hero-blob" style={{ width: 380, height: 380, bottom: -120, left: -100, background: 'rgba(37,211,102,.18)' }}></div>
        </div>
      )}
      <div className="wrap hero-grid">
        <div className="hero-text reveal in">
          <span className="eyebrow"><span className="dot"></span>{h.badge}</span>
          <h1 style={{ marginTop: 22 }}>
            {h.h1a}<br /><span className="accent">{h.h1b}</span><br />{h.h1c}
          </h1>
          <p className="lead">{h.sub}</p>
          <div className="hero-cta">
            <a href={SALES_WA} target="_blank" rel="noopener" className="btn btn-primary btn-lg">{h.cta1}<Icon.arrow width="18" /></a>
            <a href="#how" className={'btn btn-lg ' + (dark ? 'btn-ghost' : 'btn-ghost')}><Icon.play width="15" />{h.cta2}</a>
          </div>
          <div className="hero-trust">
            <div className="avatars">
              {['#1B5BFF', '#25D366', '#7C5CFF', '#FF8A3D'].map((c, i) => (
                <span key={i} style={{ background: `linear-gradient(135deg, ${c}, #ffffff55)` }}></span>
              ))}
            </div>
            <div>
              <div className="stars">★★★★★</div>
              <div className="muted" style={{ fontSize: '.85rem' }}>{h.rating}</div>
            </div>
          </div>
        </div>
        <div className="hero-phone">
          <FloatChip color="#1A73E8" title={lang === 'es' ? 'Cita agendada' : 'Booked'} sub="Google Calendar" delay={0}
            style={{ top: 150, left: -38 }} icon={<BrandIcon name="calendar" style={{ width: 20, height: 20 }} />} />
          <FloatChip color="#2684FF" title={lang === 'es' ? 'Ticket creado' : 'Ticket created'} sub="Jira · PING-204" delay={1.4}
            style={{ bottom: 96, right: -30 }} icon={<BrandIcon name="jira" style={{ width: 20, height: 20 }} />} />
          <ChatDemo lang={lang} />
        </div>
      </div>
    </section>
  );
}

function useReveal(deps = []) {
  // Failure-proof reveal: content is visible by default. We only HIDE elements
  // that are below the fold (adding .pre), then reveal them on scroll. If JS or
  // any listener ever fails, nothing stays hidden.
  React.useLayoutEffect(() => {
    const MARK = () => window.innerHeight * 0.92;
    const all = Array.prototype.slice.call(document.querySelectorAll('.reveal'));
    let armed = [];
    all.forEach((el) => {
      if (el.classList.contains('in')) return;
      const top = el.getBoundingClientRect().top;
      if (top >= MARK()) { el.classList.add('pre'); armed.push(el); }
      else { el.classList.add('in'); }
    });
    let raf = 0;
    const reveal = () => {
      raf = 0;
      const limit = MARK();
      armed = armed.filter((el) => {
        if (el.getBoundingClientRect().top < limit) {
          el.classList.remove('pre');
          el.classList.add('in');
          return false;
        }
        return true;
      });
      if (!armed.length) detach();
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(reveal); };
    function detach() {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    }
    if (armed.length) {
      window.addEventListener('scroll', onScroll, { passive: true });
      window.addEventListener('resize', onScroll);
    }
    return () => { detach(); if (raf) cancelAnimationFrame(raf); };
  }, deps);
}

function Stats({ t }) {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="stat-strip reveal">
          {t.stats.items.map((s, i) => (
            <div className="cell" key={i}>
              <div className="stat-num">{s.n}</div>
              <div className="stat-lbl">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ t }) {
  const icons = [<Icon.ear width="22" />, <Icon.plug width="22" />, <Icon.zap width="22" />];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow"><span className="dot"></span>{t.how.eyebrow}</span>
          <h2 className="h2" style={{ marginTop: 18 }}>{t.how.title}</h2>
          <p className="lead">{t.how.sub}</p>
        </div>
        <div className="steps">
          {t.how.steps.map((s, i) => (
            <div className="step card reveal" key={i} style={{ transitionDelay: (i * 0.1) + 's' }}>
              <div className="n">0{i + 1}</div>
              <div style={{ color: 'var(--brand)', marginBottom: 12 }}>{icons[i]}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              {i < 2 && <div className="arrow"><Icon.chevR width="26" /></div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PingMark, Icon, Nav, Hero, Stats, HowItWorks, FloatChip, useReveal });