// conv-page.jsx — generic bottom-of-funnel landing renderer
// Reuses rt* styles (protheus.css) + depo (components2.css). Exports: ConvPage

function _href(v) {
  const L = window.JYNX_LINKS;
  if (v === 'demo') return L.demo;
  if (v === 'wa') return L.wa;
  if (v === 'signup') return L.signup;
  if (v === 'email') return L.email;
  return v; // already a path/url
}

function ConvCTAs({ primary, secondary, size }) {
  const cls = 'btn--' + (size || 'lg');
  return (
    <React.Fragment>
      <a href={_href(primary[1])} className={'btn btn--primary ' + cls}>{primary[0]} <Icon name="arrow-right" size={18} /></a>
      <a href={_href(secondary[1])} className={'btn btn--ghost ' + cls}>
        <Icon name={secondary[2] || 'message-circle'} size={18} /> {secondary[0]}
      </a>
    </React.Fragment>
  );
}

function ConvHero({ d }) {
  return (
    <section className="rthero">
      <div className="rthero__atmo" aria-hidden="true"></div>
      <div className="wrap rthero__inner">
        <div className="rthero__copy">
          <span className="rthero__pill" data-reveal><JynxMark size={14} color="#fff" /> {d.pill}</span>
          <h1 data-reveal style={{ '--reveal-delay': '60ms' }}>
            {d.h1.map((l, i) => <React.Fragment key={i}>{l}{i < d.h1.length - 1 && <br />}</React.Fragment>)}
          </h1>
          <p className="rthero__lead" data-reveal style={{ '--reveal-delay': '120ms' }}>{d.lead}</p>
          <div className="rthero__cta" data-reveal style={{ '--reveal-delay': '200ms' }}>
            <ConvCTAs primary={d.primary} secondary={d.secondary} />
          </div>
          <div className="rthero__trust" data-reveal style={{ '--reveal-delay': '260ms' }}>
            <span><b>+7 anos</b> no ecossistema TOTVS</span>
            <span className="rthero__dot"></span>
            <span><b>+200</b> processos automatizados</span>
          </div>
        </div>

        <div className="rthero__visual" data-reveal style={{ '--reveal-delay': '180ms' }}>
          <div className="rtcard">
            <div className="rtcard__head">
              <span className="rtcard__tag"><JynxMark size={15} color="var(--accent)" /> {d.paraquemTitle}</span>
              <span className="rtcard__erp">Fluig</span>
            </div>
            <ul className="rtcard__list rtcard__list--plain">
              {d.paraquem.map((label) => (
                <li key={label}>
                  <span className="rtcard__ic" style={{ color: 'var(--accent)' }}><Icon name="check" size={16} /></span>
                  <span className="rtcard__lbl">{label}</span>
                </li>
              ))}
            </ul>
            <div className="rtcard__foot">
              <Icon name="shield-check" size={16} />
              <span>Se você se identifica, a JYNX resolve</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ConvDores({ d }) {
  return (
    <section className="section rtriscos" id="dores">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">{d.doresEyebrow}</div>
          <h2>{d.doresTitle[0]}{d.doresTitle[1] && <br />}{d.doresTitle[1]}</h2>
          <p>{d.doresSub}</p>
        </div>
        <div className="rtriscos__grid">
          {d.dores.map(([ic, t, desc], i) => (
            <div key={t} className="rtriscos__card card" data-reveal style={{ '--reveal-delay': (i * 70) + 'ms' }}>
              <span className="rtriscos__ic"><Icon name={ic} size={22} /></span>
              <h3>{t}</h3>
              <p>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ConvComo({ d }) {
  return (
    <section className="section rtcomo section--alt" id="como">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">{d.comoEyebrow}</div>
          <h2>{d.comoTitle[0]}{d.comoTitle[1] && <br />}{d.comoTitle[1]}</h2>
        </div>
        <div className="rtcomo__steps">
          <div className="rtcomo__line" aria-hidden="true"></div>
          {d.como.map(([ic, t, desc], i) => (
            <div key={t} className="rtcomo__step" data-reveal style={{ '--reveal-delay': (i * 110) + 'ms' }}>
              <div className="rtcomo__node">
                <span className="rtcomo__num">{i + 1}</span>
                <span className="rtcomo__ic"><Icon name={ic} size={22} /></span>
              </div>
              <h3>{t}</h3>
              <p>{desc}</p>
            </div>
          ))}
        </div>
        <div className="rtcomo__cta" data-reveal>
          <a href={_href(d.primary[1])} className="btn btn--primary btn--lg">{d.primary[0]} <Icon name="arrow-right" size={18} /></a>
        </div>
      </div>
    </section>
  );
}

function ConvProva() {
  return (
    <section className="section rtprova" id="prova">
      <div className="wrap">
        <p className="rtprova__trust" data-reveal>
          <b>+7 anos</b> no ecossistema TOTVS, <b>+200</b> processos automatizados. Empresas que operam processos críticos confiam na JYNX.
        </p>
        <div className="depo__grid">
          {window.PROTHEUS_QUOTES.map(([quote, name, role], i) => (
            <figure key={name} className="depo__card card" data-reveal style={{ '--reveal-delay': (i * 90) + 'ms' }}>
              <span className="depo__mark">”</span>
              <blockquote>{quote}</blockquote>
              <figcaption>
                <span className="depo__avatar">{name.split(' ').map(w => w[0]).slice(0, 2).join('')}</span>
                <span>
                  <span className="depo__name">{name}</span>
                  <span className="depo__role">{role}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function ConvCTA({ d }) {
  return (
    <section className="section rtcta section--ink" id="cta">
      <div className="rtcta__mark" aria-hidden="true"><JynxMark size={480} color="color-mix(in srgb, var(--accent) 13%, transparent)" /></div>
      <div className="wrap rtcta__inner" data-reveal>
        <span className="rthero__pill"><JynxMark size={14} color="#fff" /> {d.pill}</span>
        <h2>Pronto para resolver isso?</h2>
        <p>Dê o primeiro passo agora. É gratuito e sem compromisso.</p>
        <div className="rtcta__btns">
          <ConvCTAs primary={d.primary} secondary={d.secondary} />
        </div>
      </div>
    </section>
  );
}

function ConvPage({ slug }) {
  const d = window.CONV_PAGES[slug];
  if (!d) return <div style={{ padding: 80, textAlign: 'center' }}>Página não encontrada.</div>;
  return (
    <React.Fragment>
      <ConvHero d={d} />
      <ConvDores d={d} />
      <ConvComo d={d} />
      <ConvProva />
      <ConvCTA d={d} />
    </React.Fragment>
  );
}

window.ConvPage = ConvPage;