// protheus-page.jsx — generic Protheus campaign page renderer
// Exports: ProtheusPage

const PP_STATUS_ICON = {
  ok: ['check', '#1F8A5B'],
  rever: ['alert-triangle', '#B07A00'],
  ajustar: ['circle-alert', 'var(--accent)'],
};

function PPHero({ d }) {
  const L = window.JYNX_LINKS;
  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((line, i) => <React.Fragment key={i}>{line}{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' }}>
            <a href={L.demo} className="btn btn--primary btn--lg">Agendar diagnóstico gratuito <Icon name="arrow-right" size={18} /></a>
            <a href={L.wa} className="btn btn--ghost btn--lg"><Icon name="message-circle" size={18} /> Falar com especialista Protheus</a>
          </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.heroCard.title}</span>
              <span className="rtcard__erp">Protheus</span>
            </div>
            <ul className="rtcard__list">
              {d.heroCard.items.map(([label, badge, type]) => {
                const [icn, col] = PP_STATUS_ICON[type] || PP_STATUS_ICON.ajustar;
                return (
                  <li key={label}>
                    <span className="rtcard__ic" style={{ color: col }}><Icon name={icn} size={16} /></span>
                    <span className="rtcard__lbl">{label}</span>
                    <span className={'rtcard__st rtcard__st--' + type}>{badge}</span>
                  </li>
                );
              })}
            </ul>
            <div className="rtcard__foot">
              <Icon name="shield-check" size={16} />
              <span>Escopo fechado, prazo definido e rastreabilidade</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PPDores({ 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]}<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 PPPassos({ d }) {
  return (
    <section className="section rtcomo section--alt" id="como">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">{d.passosEyebrow}</div>
          <h2>{d.passosTitle[0]}<br />{d.passosTitle[1]}</h2>
        </div>
        <div className="rtcomo__steps">
          <div className="rtcomo__line" aria-hidden="true"></div>
          {d.passos.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={window.JYNX_LINKS.demo} className="btn btn--primary btn--lg">Agendar diagnóstico gratuito <Icon name="arrow-right" size={18} /></a>
        </div>
      </div>
    </section>
  );
}

function PPProva() {
  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 PPCross({ slug }) {
  const BASE = window.JYNX_BASE || '';
  const others = Object.keys(window.PROTHEUS_META).filter(s => s !== slug);
  return (
    <section className="section rtcross section--alt" id="cross">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Além desta frente</div>
          <h2>Todo o ciclo do seu<br />Protheus, com a JYNX</h2>
          <p>Cada frente cuida de uma parte do seu Protheus, com a mesma rastreabilidade do começo ao fim.</p>
        </div>
        <div className="rtcross__grid">
          {others.map((s, i) => {
            const [ic, title, desc] = window.PROTHEUS_META[s];
            return (
              <a key={s} href={BASE + 'protheus/' + s + '.html'} className="rtcross__card card" data-reveal style={{ '--reveal-delay': (i * 60) + 'ms' }}>
                <span className="rtcross__ic"><Icon name={ic} size={20} /></span>
                <div>
                  <h3>{title}</h3>
                  <p>{desc}</p>
                </div>
                <Icon name="arrow-up-right" size={16} className="rtcross__arrow" />
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function PPCTA({ d }) {
  const L = window.JYNX_LINKS;
  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>Vamos resolver isso<br />no seu Protheus?</h2>
        <p>Comece por um diagnóstico gratuito do seu ambiente ou fale agora com um especialista Protheus.</p>
        <div className="rtcta__btns">
          <a href={L.demo} className="btn btn--primary btn--lg">Agendar diagnóstico gratuito <Icon name="arrow-right" size={18} /></a>
          <a href={L.wa} className="btn btn--ghost btn--lg"><Icon name="message-circle" size={18} /> Falar com especialista Protheus</a>
        </div>
      </div>
    </section>
  );
}

function ProtheusPage({ slug }) {
  const d = window.PROTHEUS_PAGES[slug];
  if (!d) return <div style={{ padding: 80, textAlign: 'center' }}>Página não encontrada.</div>;
  return (
    <React.Fragment>
      <PPHero d={d} />
      <PPDores d={d} />
      <PPPassos d={d} />
      <PPProva />
      <PPCross slug={slug} />
      <PPCTA d={d} />
    </React.Fragment>
  );
}

window.ProtheusPage = ProtheusPage;