// ============================================================
// SECTION — CONSULTING / BUSINESS
// ============================================================

const PILLARS = [
  {
    n: "01",
    title: "Consulting",
    desc: "Soyez accompagnés pour revoir vos process afin d'optimiser votre productivité.",
    items: ["Stratégique", "Commercial", "Opérationnel", "Organisationnel"],
  },
  {
    n: "02",
    title: "Formation",
    desc: "Bénéficiez d'un training business sur-mesure pour booster votre business et vos équipes.",
    items: ["Managers", "Commerciaux", "Coachs sportifs"],
  },
];

function ConsultingSection() {
  const ref = useReveal();

  return (
    <section ref={ref} id="consulting" className="section section-consulting">
      <div className="shell">
        <SectionHeader
          number="01"
          eyebrow="Consulting / formation · Clubs de sports & coachs sportifs"
          title={[
            { text: "Pour les" },
            { text: "clubs de sports", blue: true },
            { text: "coachs sportifs", blue: true },
            { text: "ambitieux qui" },
            { text: "en veulent" },
            { text: "plus." },
          ]}
        />

        <div className="reveal-up consulting-intro" style={{ transitionDelay: "200ms" }}>
          <p>
            <strong style={{ fontWeight: 700, color: "var(--ink)" }}>Besoin d'un coup de pouce ?</strong><br />
            Voyons ensemble comment premiumiser votre expérience client.<br />
            Prospecter, vendre, manager et piloter efficacement votre business.
          </p>
          <p style={{ marginTop: 24 }}>
            <strong style={{ fontWeight: 700, color: "var(--ink)" }}>Via du consulting ou de la formation (prise en charge Qualiopi), choisissez ce qui vous convient le mieux :</strong>
          </p>
        </div>

        <div className="pillars">
          {PILLARS.map((p, i) => (
            <PillarCard key={p.n} pillar={p} index={i} delay={300 + i * 100} />
          ))}
        </div>

        <div className="reveal-up consulting-cta" style={{ transitionDelay: "800ms" }}>
          <div className="consulting-cta-text">
            <span className="eyebrow">Envie de muscler votre activité fitness ?</span>
            <h3 className="display">
              Discutons de vos envies.
            </h3>
          </div>
          <Magnetic>
            <a
              href="mailto:contact@nicolas-nechitch.fr?subject=Demande de renseignement consulting"
              className="btn btn-blue btn-large"
            >
              Demander un échange <ArrowUpRight size={16} />
            </a>
          </Magnetic>
        </div>
      </div>
    </section>
  );
}

function PillarCard({ pillar, index, delay }) {
  const ref = useRef(null);

  return (
    <div
      ref={ref}
      className="pillar reveal-up"
      style={{ "--reveal-delay": `${delay}ms` }}
      data-hover
    >
      <div className="pillar-header">
        <span className="mono pillar-num">{pillar.n}</span>
        <div className="pillar-arrow">
          <ArrowUpRight size={14} />
        </div>
      </div>

      <h3 className="pillar-title display">
        {pillar.title}
      </h3>

      <p className="pillar-desc">{pillar.desc}</p>

      <ul className="pillar-items">
        {pillar.items.map((item, i) => (
          <li key={i} className="mono">
            <span className="pillar-dash">—</span> {item}
          </li>
        ))}
      </ul>

      <div className="pillar-glow"></div>
    </div>
  );
}

function SectionHeader({ number, eyebrow, title }) {
  return (
    <div className="section-header">
      <div className="section-header-meta reveal-fade">
        <span className="mono section-num">[ {number} ]</span>
        <span className="eyebrow">{eyebrow}</span>
      </div>
      <h2 className="display section-title">
        {title.map((line, i) => (
          <span key={i} className="section-title-line">
            <span className="reveal-word">
              <span
                style={{
                  transitionDelay: `${i * 80}ms`,
                  color: line.blue ? "var(--blue)" : undefined,
                  fontSize: line.big ? "1.72em" : undefined,
                  letterSpacing: line.big ? "-0.07em" : undefined,
                  display: line.big ? "inline-block" : undefined,
                  lineHeight: line.big ? "0.9" : undefined,
                }}
                className={line.italic ? "serif" : ""}
              >
                {line.text}
              </span>
            </span>
          </span>
        ))}
      </h2>
    </div>
  );
}

Object.assign(window, { ConsultingSection, PillarCard, SectionHeader, PILLARS });