// ============================================================
// SECTION — ABOUT + FOOTER
// ============================================================

const PARTNERS = [
  { slug: "cmg", name: "CMG Sports Club", file: "cmg.webp" },
  { slug: "crossfit-biarritz", name: "Crossfit Biarritz", file: "crossfit-biarritz.jpg" },
  { slug: "duds", name: "Dud's Sport Fitness Club", file: "duds.png" },
  { slug: "easygym", name: "easyGym", file: "easygym.png" },
  { slug: "energie-forme", name: "Énergie Forme", file: "energie-forme.jpg" },
  { slug: "fit20", name: "fit20", file: "fit20.png" },
  { slug: "fitness-park", name: "Fitness Park", file: "fitness-park.jpg" },
  { slug: "front-de-seine", name: "Front de Seine", file: "front-de-seine.png" },
  { slug: "jobifit", name: "Jobifit", file: "jobifit.webp" },
  { slug: "lappart-fitness", name: "L'Appart Fitness", file: "lappart-fitness.webp" },
  { slug: "orangetheory", name: "Orangetheory Fitness", file: "orangetheory.jpg" },
  { slug: "sds", name: "S.D.S. La Salle de Sport — Paris Madeleine", file: "sds.webp" },
];

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

  return (
    <section ref={ref} id="about" className="section section-about">
      <div className="shell">
        <div className="about-grid">
          <div className="about-left">
            <SectionHeader
              number="04"
              eyebrow="À propos"
              title={[
                { text: "12 ans à" },
                { text: "prospecter," },
                { text: "vendre," },
                { text: "manager" },
                { text: "et piloter" },
                { text: "du fitness." },
              ]}
            />

            <div className="reveal-up about-bio" style={{ "--reveal-delay": "300ms" }}>
              <p>
                Je m'appelle <strong>Nicolas Nechitch</strong>. J'ai commencé en alternance par de l'accueil/commercial au sein d'un club, jusqu'à gérer une cinquantaine de collaborateurs sur plusieurs centres.
              </p>
              <p>
                Aujourd'hui, j'accompagne les clubs de sport et les coachs sportifs indépendants à générer plus de CA en les aidant à premiumiser la gestion de leur business, du premier call de prospection à la signature du contrat jusqu'à la fidélisation de leurs clients.
              </p>
            </div>

            <div className="reveal-up about-stats" style={{ transitionDelay: "500ms" }}>
              <BigStat
                n="12"
                suffix="ans"
                l={<>dans l'industrie fitness<br /><strong style={{ color: "var(--ink)", fontWeight: 600 }}>salarié, consultant, formateur, entrepreneur</strong></>}
              />
              <BigStat
                n="750"
                suffix="+"
                l={<>pros du fitness accompagnés<br /><strong style={{ color: "var(--ink)", fontWeight: 600 }}>coachs sportifs, commerciaux, managers, dirigeants</strong></>}
              />
              <BigStat
                n="12"
                suffix="+"
                l={<>marques fitness partenaires<br /><strong style={{ color: "var(--ink)", fontWeight: 600 }}>en salarié ou prestataire indépendant</strong></>}
              />
            </div>

            <div className="reveal-up about-partners" style={{ transitionDelay: "650ms" }}>
              <span className="eyebrow">On a travaillé ensemble</span>
              <div className="about-partners-grid">
                {PARTNERS.map((p) => (
                  <div className="about-partner" key={p.slug} title={p.name}>
                    <img src={`assets/partners/${p.file}`} alt={p.name} />
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="about-right reveal-fade" style={{ transitionDelay: "400ms" }}>
            <div className="about-card">
              <div className="about-card-meta mono">
                <span>NN/PROFIL</span>
                <span style={{ color: "var(--blue)" }}>● ACTIF</span>
              </div>

              <div className="about-card-portrait">
                <PortraitPlaceholder />
              </div>

              <div className="about-card-quote">
                « Le fitness premium est une succession de détails qui font la différence. »
              </div>

              <div className="about-card-foot mono">
                <div>—</div>
                <div>NICOLAS NECHITCH · 2026</div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>
  );
}

function BigStat({ n, suffix, l }) {
  return (
    <div className="big-stat">
      <div className="big-stat-num display mono">
        {n}
        {suffix && <span className="big-stat-suffix">{suffix}</span>}
      </div>
      <div className="big-stat-label">{l}</div>
    </div>
  );
}

// ===== CTA / FOOTER =====
function FooterSection() {
  const ref = useReveal();

  return (
    <section ref={ref} className="section section-footer">
      <div className="shell">
        <div className="footer-cta">
          <div className="reveal-fade footer-eyebrow">
            <span className="eyebrow">CONTACT · 2026</span>
          </div>

          <h2 className="display footer-title">
            <div className="footer-title-line footer-title-line--small">
              <SplitReveal text="Prêt à passer au" />
            </div>
            <div className="footer-title-line">
              <span className="reveal-word">
                <span style={{ transitionDelay: "200ms", color: "var(--blue)" }}>premium</span>
              </span>
              <span className="footer-title-question">?</span>
            </div>
          </h2>

          <div className="reveal-up footer-actions" style={{ transitionDelay: "500ms" }}>
            <Magnetic>
              <a
                href="mailto:contact@nicolas-nechitch.fr"
                className="btn btn-blue btn-large"
              >
                contact@nicolas-nechitch.fr <ArrowUpRight size={16} />
              </a>
            </Magnetic>
          </div>
        </div>

        <div className="footer-grid">
          <div className="footer-col">
            <span className="mono footer-col-title">SUIVRE</span>
            <a href="#" data-hover>Instagram <ArrowUpRight /></a>
            <a href="#" data-hover>LinkedIn <ArrowUpRight /></a>
            <a href="#" data-hover>YouTube <ArrowUpRight /></a>
            <a href="#" data-hover>X / Twitter <ArrowUpRight /></a>
          </div>

          <div className="footer-col">
            <span className="mono footer-col-title">EXPLORER</span>
            <a href="#consulting" data-hover>Consulting</a>
            <a href="#dyna" data-hover>App Dyna</a>
            <a href="#guide-business" data-hover>Guide business</a>
            <a href="#about" data-hover>À propos</a>
          </div>

          <div className="footer-col">
            <span className="mono footer-col-title">CONTACT</span>
            <a href="mailto:contact@nicolas-nechitch.fr" data-hover>contact@nicolas-nechitch.fr</a>
            <span className="text-muted">Paris · France</span>
            <span className="text-muted">Réponse sous 48h</span>
          </div>

          <div className="footer-col">
            <span className="mono footer-col-title">NEWSLETTER</span>
            <p className="text-muted" style={{ fontSize: 13 }}>
              Une analyse business par mois. Concise, actionnable, sans bruit.
            </p>
            <div className="footer-newsletter">
              <input type="email" placeholder="vous@exemple.com" className="footer-input mono" data-hover />
              <button className="footer-input-btn" data-hover>
                <ArrowUpRight />
              </button>
            </div>
          </div>
        </div>

        <div className="footer-mega">
          <div className="footer-mega-text mono">NICOLAS · NECHITCH</div>
        </div>

        <div className="footer-bottom mono">
          <span>© 2026 Nicolas Nechitch. Tous droits réservés.</span>
          <span className="footer-bottom-meta">
            <span style={{ color: "var(--blue)" }}>●</span> nicolas-nechitch.fr
          </span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AboutSection, BigStat, FooterSection });