// La Traverse — SectorPage.
// Une LP sectorielle complète, alimentée par window.SECTORS[slug].
// La source du secteur actif est, dans l'ordre :
//   1. window.__SECTOR_SLUG (à figer pour cloner une LP de prod)
//   2. URL : ?secteur=ecoles-sport
//   3. defaultSlug en prop (sinon 'ecoles-sport')

/* ---------- helpers ---------- */

// Rend un titre fragmenté { text } / { em } en JSX. Tableau plat → ligne unique.
const renderTitle = (parts) =>
  parts.map((p, i) => p.em ? <em key={i}>{p.em}</em> : <React.Fragment key={i}>{p.text}</React.Fragment>);

// Convertit "Texte avec **gras** dedans" → JSX avec <b>.
const renderBold = (str) => {
  const out = [];
  const re = /\*\*([^*]+)\*\*/g;
  let last = 0; let m;
  while ((m = re.exec(str)) !== null) {
    if (m.index > last) out.push(str.slice(last, m.index));
    out.push(<b key={m.index}>{m[1]}</b>);
    last = m.index + m[0].length;
  }
  if (last < str.length) out.push(str.slice(last));
  return out.map((node, i) => <React.Fragment key={i}>{node}</React.Fragment>);
};

const resolveSlug = (fallback) => {
  if (typeof window === 'undefined') return fallback;
  if (window.__SECTOR_SLUG && window.SECTORS[window.__SECTOR_SLUG]) return window.__SECTOR_SLUG;
  const url = new URL(window.location.href);
  const q = url.searchParams.get('secteur');
  if (q && window.SECTORS[q]) return q;
  return fallback;
};

// TidyCal — fixed booking URL with UTM tracking by sector + source position.
// Lets us know which LP (and which CTA on the LP) generated the meeting.
const TIDYCAL_BASE = 'https://tidycal.com/m202e9l/30-minute-meeting';
const tidycalUrl = (slug, position = 'lp-secteur') => {
  const u = new URL(TIDYCAL_BASE);
  u.searchParams.set('utm_source',   'la-traverse');
  u.searchParams.set('utm_medium',   position);    // lp-secteur-hero | lp-secteur-final
  u.searchParams.set('utm_campaign', slug);        // ecoles-sport, cliniques-esthetiques, …
  u.searchParams.set('utm_secteur',  slug);        // alias explicite côté commercial
  return u.toString();
};

/* ---------- 1. HERO ---------- */
const SecHero = ({ s }) => {
  const profile = (window.AGENT_PROFILE && window.AGENT_PROFILE[s.heroChat.agent]) || {};
  const avatar  = window.AGENT_AVATAR_URL ? window.AGENT_AVATAR_URL(s.heroChat.agent) : '';

  return (
    <section className="sec-hero grain" data-screen-label="01 Hero">
      <div className="sec-hero__crumb">
        <a href="index.html">Accueil</a>
        <span className="sec-hero__crumb-sep">/</span>
        <a href="agents.html">Agents IA</a>
        <span className="sec-hero__crumb-sep">/</span>
        <b>{s.crumb}</b>
      </div>

      <div className="sec-hero__split">
        <div className="sec-hero__left">
          <span className="sec-hero__label">{s.heroLabel}</span>

          <h1 className="sec-hero__title">
            <span className="sec-hero__title-line">{renderTitle(s.heroTitle)}</span>
            <span className="sec-hero__title-line">{renderTitle(s.heroTitle2)}</span>
          </h1>

          <p className="sec-hero__lead">{s.heroLead}</p>

          <div className="sec-hero__cta">
            <a className="btn-primary" href={tidycalUrl(s.slug, 'lp-secteur-hero')} target="_blank" rel="noopener">
              Réserver un appel gratuit
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
            <a className="btn-ghost" href="contact.html">Nous écrire →</a>
          </div>

          <div className="sec-hero__meta">
            {s.heroMeta.map((m, i) => <span key={i}>{m}</span>)}
          </div>
        </div>

        <aside className="sec-hero__chat" aria-label="Aperçu agent IA">
          <span className="sec-hero__chat-overlabel">Exemple d'agent en live</span>
          <header className="sec-hero__chat-head">
            <span className="sec-hero__chat-avatar" style={{ background: profile.color }}>
              {avatar && <img src={avatar} alt={s.heroChat.agent} />}
            </span>
            <div>
              <div className="sec-hero__chat-name">{s.heroChat.agent}</div>
              <div className="sec-hero__chat-role">{s.heroChat.role}</div>
            </div>
            <span className="sec-hero__chat-badge">Agent · LIVE</span>
          </header>

          <div className="sec-hero__chat-body">
            {s.heroChat.exchange.map((m, i) => (
              <div key={i} className={`sec-hero__bubble sec-hero__bubble--${m.from}`}>
                <span className="sec-hero__bubble-from">{m.name}</span>
                {m.text}
                {i === s.heroChat.exchange.length - 1 && m.from === 'agent' && (
                  <span className="sec-hero__chat-typing"><span></span><span></span><span></span></span>
                )}
              </div>
            ))}
          </div>

          <footer className="sec-hero__chat-foot">
            {s.heroChat.footer.map((f, i) => <span key={i}>{f}</span>)}
          </footer>
        </aside>
      </div>
    </section>
  );
};

/* ---------- 2. PROBLEM ---------- */
const SecProblem = ({ s }) => (
  <section className="page-section page-section--cream" data-screen-label="02 Probleme">
    <div className="page-section__wrap">
      <div className="page-section__head sec-problem__head">
        <span className="b-marker"><span className="b-marker__br">[</span> {s.problemMarker} <span className="b-marker__br">]</span></span>
        <h2 className="page-section__title sec-problem__title">{renderTitle(s.problemTitle)}</h2>
      </div>
      <div className="sec-problem__body">
        {s.problemParas.map((p, i) => <p key={i}>{renderBold(p)}</p>)}
      </div>
    </div>
  </section>
);

/* ---------- 3. AGENT TEAM (3 cards) ---------- */
const SecAgents = ({ s }) => (
  <section className="page-section" data-screen-label="03 Agents">
    <div className="page-section__head">
      <span className="b-marker"><span className="b-marker__br">[</span> {s.agentsMarker} <span className="b-marker__br">]</span></span>
      <h2 className="page-section__title">{renderTitle(s.agentsTitle)}</h2>
    </div>
    <div className="sec-agents__grid">
      {s.agents.map(a => {
        const p = (window.AGENT_PROFILE && window.AGENT_PROFILE[a.name]) || { color: '#c4622a' };
        const av = window.AGENT_AVATAR_URL ? window.AGENT_AVATAR_URL(a.name) : '';
        return (
          <article key={a.name} className="sec-agent" style={{ '--agent-color': p.color }}>
            <span className="sec-agent__flood" aria-hidden="true"></span>
            <header className="sec-agent__head">
              <span className="sec-agent__photo">
                {av && <img src={av} alt={a.name} loading="lazy" />}
              </span>
              <div>
                <h3 className="sec-agent__name">{a.name}</h3>
                <span className="sec-agent__role">{a.role}</span>
              </div>
            </header>
            <p className="sec-agent__desc">{renderBold(a.desc)}</p>
          </article>
        );
      })}
    </div>
  </section>
);

/* ---------- 3b. ROUTER (spoke architecture — optional) ---------- */
const SecRouter = ({ s }) => {
  if (!s.router) return null;
  const r = s.router;
  return (
    <section className="page-section sec-router" data-screen-label="03b Routeur">
      <div className="page-section__head">
        <span className="b-marker"><span className="b-marker__br">[</span> {r.marker} <span className="b-marker__br">]</span></span>
        <h2 className="page-section__title">{renderTitle(r.title)}</h2>
        <p className="sec-router__lead">{renderBold(r.lead)}</p>
      </div>

      <div className="sec-router__spoke">
        <div className="sec-router__hub">
          <span className="sec-router__hub-icon" aria-hidden="true">⚡</span>
          <span className="sec-router__hub-name">{r.name}</span>
          <span className="sec-router__hub-sub">200 ms</span>
        </div>

        <div className="sec-router__routes">
          {r.routes.map((route, i) => (
            <div key={i} className={`sec-router__route ${route.agent ? '' : 'sec-router__route--escalade'}`}>
              <span className="sec-router__route-intent">{route.intent}</span>
              <span className="sec-router__route-arrow" aria-hidden="true">→</span>
              <span className="sec-router__route-agent">
                {route.agent ? route.agent : '🚨'} <small>{route.label}</small>
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- 3c. AGENT DEEP-DIVES (optional) ---------- */
const SecDeepDive = ({ s }) => {
  if (!s.agentDeepDives) return null;
  return (
    <section className="page-section page-section--cream sec-deepdive" data-screen-label="03c Deep-dives agents">
      <div className="page-section__wrap">
        <div className="page-section__head">
          <span className="b-marker"><span className="b-marker__br">[</span> En détail <span className="b-marker__br">]</span></span>
          <h2 className="page-section__title">Chaque agent, <em>en action.</em></h2>
        </div>

        <div className="sec-deepdive__list">
          {s.agentDeepDives.map((agent) => {
            const profile = (window.AGENT_PROFILE && window.AGENT_PROFILE[agent.name]) || { color: '#c4622a' };
            const avatar  = window.AGENT_AVATAR_URL ? window.AGENT_AVATAR_URL(agent.name) : '';
            return (
              <article key={agent.name} className="sec-dd" style={{ '--agent-color': profile.color }}>
                <header className="sec-dd__head">
                  <span className="sec-dd__photo">
                    {avatar && <img src={avatar} alt={agent.name} loading="lazy" />}
                  </span>
                  <div>
                    <h3 className="sec-dd__name">{agent.name} <small>{agent.subtitle}</small></h3>
                    <span className="sec-dd__role">{agent.role}</span>
                  </div>
                </header>
                <p className="sec-dd__mission">{agent.mission}</p>

                {/* Conversation example */}
                <div className="sec-dd__conv">
                  <span className="sec-dd__conv-label">Exemple de conversation</span>
                  <div className="sec-dd__conv-body">
                    {agent.conversation.map((m, i) => (
                      <div key={i} className={`sec-dd__bubble sec-dd__bubble--${m.from}`}>
                        <span className="sec-dd__bubble-from">{m.name}</span>
                        {m.text}
                      </div>
                    ))}
                  </div>
                </div>

                {/* Actions table */}
                <div className="sec-dd__actions">
                  <span className="sec-dd__actions-label">Actions automatisées</span>
                  {agent.actions.map((a, i) => (
                    <div key={i} className="sec-dd__action">
                      <span className="sec-dd__action-name">{a.action}</span>
                      <span className="sec-dd__action-detail">{a.detail}</span>
                    </div>
                  ))}
                </div>

                {/* Timeline (Théo only) */}
                {agent.timeline && (
                  <div className="sec-dd__timeline">
                    {agent.timeline.map((t, i) => (
                      <div key={i} className="sec-dd__tl-step" style={{ '--step-color': t.color }}>
                        <span className="sec-dd__tl-day">{t.day}</span>
                        <span className="sec-dd__tl-dot" aria-hidden="true"></span>
                        <span className="sec-dd__tl-label">{t.label}</span>
                      </div>
                    ))}
                  </div>
                )}
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ---------- 3d. PATIENT TIMELINE (optional) ---------- */
const SecPatientTimeline = ({ s }) => {
  if (!s.patientTimeline) return null;
  const t = s.patientTimeline;
  return (
    <section className="page-section sec-ptimeline" data-screen-label="03d Timeline patient">
      <div className="page-section__head">
        <span className="b-marker"><span className="b-marker__br">[</span> {t.marker} <span className="b-marker__br">]</span></span>
        <h2 className="page-section__title">{renderTitle(t.title)}</h2>
        <p className="sec-ptimeline__lead">{t.lead}</p>
      </div>

      <div className="sec-ptimeline__track">
        {t.steps.map((step, i) => {
          const profile = step.agent ? ((window.AGENT_PROFILE && window.AGENT_PROFILE[step.agent]) || { color: '#c4622a' }) : { color: '#64748b' };
          return (
            <div key={i} className="sec-ptimeline__step" style={{ '--step-color': profile.color }}>
              <div className="sec-ptimeline__step-line">
                <span className="sec-ptimeline__step-dot" aria-hidden="true"></span>
                {i < t.steps.length - 1 && <span className="sec-ptimeline__step-connector" aria-hidden="true"></span>}
              </div>
              <div className="sec-ptimeline__step-body">
                <div className="sec-ptimeline__step-top">
                  <span className="sec-ptimeline__step-time">{step.time}</span>
                  {step.agent && <span className="sec-ptimeline__step-agent">{step.agent}</span>}
                </div>
                <h4 className="sec-ptimeline__step-label">{step.label}</h4>
                <p className="sec-ptimeline__step-desc">{step.desc}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
};

/* ---------- 4. CHANNELS ---------- */
const SecChannels = ({ s }) => (
  <section className="page-section page-section--cream" data-screen-label="04 Canaux">
    <div className="page-section__wrap">
      <div className="page-section__head">
        <span className="b-marker"><span className="b-marker__br">[</span> {s.channelsMarker} <span className="b-marker__br">]</span></span>
        <h2 className="page-section__title">{renderTitle(s.channelsTitle)}</h2>
      </div>
      <div className="sec-channels__grid">
        {s.channels.map(c => (
          <article key={c.name} className="sec-channel">
            <h3 className="sec-channel__name">{c.name}</h3>
            <p className="sec-channel__sub">{c.sub}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- 5. OUTCOME ---------- */
const SecOutcome = ({ s }) => (
  <section className="sec-outcome grain grain--dark" data-screen-label="05 Resultat">
    <div className="sec-outcome__wrap">
      <span className="b-marker b-marker--inv b-marker--amber">
        <span className="b-marker__br">[</span> {s.outcomeMarker} <span className="b-marker__br">]</span>
      </span>
      <h2 className="sec-outcome__title" style={{ marginTop: 18 }}>{renderTitle(s.outcomeTitle)}</h2>
      <p className="sec-outcome__lead">{s.outcomeLead}</p>
    </div>
  </section>
);

/* ---------- 6. FINAL CTA ---------- */
const SecFinal = ({ s }) => (
  <section className="sec-final" data-screen-label="06 CTA finale">
    <h2 className="sec-final__title">{renderTitle(s.finalTitle)}</h2>
    <p className="sec-final__lead">{s.finalLead}</p>
    <div className="sec-final__cta">
      <a className="btn-primary" href={tidycalUrl(s.slug, 'lp-secteur-final')} target="_blank" rel="noopener">
        Réserver un appel gratuit
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
      <a className="btn-ghost" href="contact.html">Nous écrire →</a>
    </div>
  </section>
);

/* ---------- 7. CROSS-SELL ---------- */
const SecCrossSell = ({ s }) => {
  const others = window.SECTORS_ORDER.filter(slug => slug !== s.slug);
  return (
    <section className="sec-cross" data-screen-label="07 Autres secteurs">
      <div className="sec-cross__inner">
        <div className="sec-cross__head">
          <span className="b-marker"><span className="b-marker__br">[</span> Autres secteurs <span className="b-marker__br">]</span></span>
          <h2 className="sec-cross__title">Découvrez nos agents <em>par secteur.</em></h2>
        </div>
        <div className="sec-cross__grid">
          {others.map(slug => {
            const c = window.SECTORS_CROSSSELL[slug];
            return (
              <a key={slug} href={`agents-secteur.html?secteur=${slug}`} className="sec-cross__card">
                <h3 className="sec-cross__card-name">{c.label}</h3>
                <p className="sec-cross__card-tag">{c.tag}</p>
                <span className="sec-cross__card-arrow">Voir la LP</span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ---------- MAIN ---------- */
const SectorPage = ({ defaultSlug = 'ecoles-sport' }) => {
  const [slug, setSlug] = React.useState(() => resolveSlug(defaultSlug));

  // Reveal observer
  React.useEffect(() => {
    const els = document.querySelectorAll('[data-reveal]');
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('is-revealed')); return; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('is-revealed'); obs.unobserve(e.target); } });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
    els.forEach(e => obs.observe(e));
    return () => obs.disconnect();
  }, [slug]);

  // Sync URL when sector changes (keeps cross-sell / share consistent)
  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    const url = new URL(window.location.href);
    if (url.searchParams.get('secteur') !== slug) {
      url.searchParams.set('secteur', slug);
      window.history.replaceState(null, '', url.toString());
    }
    document.title = `Agents IA — ${window.SECTORS[slug].crumb} · La Traverse`;
  }, [slug]);

  const s = window.SECTORS[slug];

  return (
    <>
      <Nav activePage="agents" />
      <main>
        <SecHero s={s} />
        <div data-reveal><SecProblem s={s} /></div>
        <div data-reveal><SecAgents s={s} /></div>
        {s.router && <div data-reveal><SecRouter s={s} /></div>}
        {s.agentDeepDives && <div data-reveal><SecDeepDive s={s} /></div>}
        {s.patientTimeline && <div data-reveal><SecPatientTimeline s={s} /></div>}
        <div data-reveal><SecChannels s={s} /></div>
        <div data-reveal><SecOutcome s={s} /></div>
        <div data-reveal><SecFinal s={s} /></div>
        <div data-reveal><SecCrossSell s={s} /></div>
      </main>
      <Footer />
    </>
  );
};

window.SectorPage = SectorPage;