// ============================================================
// SECTION — APP DYNA
// ============================================================

const DYNA_FEATURES = [
  {
    n: "01",
    t: "Pilotage business",
    d: "Tableaux de bords en temps réel : chiffre d'affaires, prospects, ventes… Obtenez une visibilité à 360° sur votre business.",
    metric: "15sec/jour",
    metricLabel: "pour piloter son business",
  },
  {
    n: "02",
    t: "E-training",
    d: "Formations business en libre accès : prospection, commercial, management, pilotage… Suivez-les à votre rythme.",
    metric: "Vidéos business",
    metricLabel: "en libre accès",
  },
  {
    n: "03",
    t: "Coaching IA",
    d: "dyna est calibrée sur tous les sujets business liés au fitness, disponible 24/7.",
    metric: "24/7",
    metricLabel: "disponible",
  },
  {
    n: "04",
    t: "Mentoring humain",
    d: "Quand l'IA ne suffit plus, accédez à un cercle de mentors\nexperts de leurs sujets.",
    metric: "1:1",
    metricLabel: "sessions privées",
  },
];

function DynaSection() {
  const ref = useReveal();
  const [activeFeature, setActiveFeature] = useState(0);

  return (
    <section ref={ref} id="dyna" className="section section-dyna">
      <div className="shell">
        <SectionHeader
          number="02"
          eyebrow="App Dyna"
          title={[
            { text: "L'écosystème" },
            { text: "business", blue: true, big: true },
            { text: "dédié aux pros" },
            { text: "du fitness." },
          ]}
        />

        <div className="reveal-up dyna-intro" style={{ transitionDelay: "300ms" }}>
          <p>
            <strong style={{ fontWeight: 700, color: "var(--ink)" }}>dyna</strong> est une app dédiée aux pros du fitness : coachs sportifs, commerciaux, managers, dirigeants. Elle propose une transversale <br className="hide-mobile" />
            <strong style={{ fontWeight: 700, color: "var(--ink)" }}>digitale</strong>, <strong style={{ fontWeight: 700, color: "var(--ink)" }}>IA</strong> et <strong style={{ fontWeight: 700, color: "var(--ink)" }}>humaine</strong> pour s'adapter à chacun.
          </p>
        </div>

        <div className="dyna-grid">
          <div className="dyna-features">
            {DYNA_FEATURES.map((f, i) => (
              <div
                key={f.n}
                className="reveal-up dyna-feature"
                data-active={activeFeature === i ? "true" : "false"}
                style={{ "--reveal-delay": `${400 + i * 80}ms` }}
                onMouseEnter={() => setActiveFeature(i)}
                data-hover
              >
                <div className="dyna-feature-head">
                  <span className="mono dyna-feature-n">{f.n}</span>
                  <span className="dyna-feature-metric mono">
                    <span className="dyna-feature-metric-num">{f.metric}</span>
                    <span className="dyna-feature-metric-label">{f.metricLabel}</span>
                  </span>
                </div>
                <h4 className="dyna-feature-title">{f.t}</h4>
                <p style={{ whiteSpace: "pre-line" }}>{f.d}</p>
                <div className="dyna-feature-line"></div>
              </div>
            ))}
          </div>

          <div className="dyna-phone-wrap reveal-fade" style={{ transitionDelay: "500ms" }}>
            <DynaPhone activeFeature={activeFeature} />
          </div>
        </div>

        <div className="reveal-up dyna-cta" style={{ transitionDelay: "900ms" }}>
          <div className="dyna-cta-text">
            <span className="eyebrow">Disponible sur iOS · Android</span>
            <img src="assets/dyna-logo.png" alt="dyna" className="dyna-cta-logo" />
          </div>
          <div className="dyna-cta-form">
            <Magnetic>
              <a href="#" className="btn btn-blue" data-hover>
                Télécharger dyna sur Apple Store <ArrowUpRight size={14} />
              </a>
            </Magnetic>
            <Magnetic>
              <a href="#" className="btn btn-green" data-hover>
                Télécharger dyna sur Android Store <ArrowUpRight size={14} />
              </a>
            </Magnetic>
          </div>
        </div>
      </div>
    </section>
  );
}

function DynaPhone({ activeFeature }) {
  return (
    <div className="dyna-phone-stage">
      <Tilt max={6}>
        <div className="phone phone--video">
          <video
            className="phone-video"
            src="assets/dyna-mockup.mp4"
            autoPlay
            loop
            muted
            playsInline
            preload="auto"
          />
          <div className="phone-shadow"></div>
        </div>
      </Tilt>

      <div className="dyna-orbit">
        <div className="dyna-orbit-ring"></div>
        <div className="dyna-orbit-ring dyna-orbit-ring-2"></div>
      </div>
    </div>
  );
}

function PhoneScreenDashboard() {
  return (
    <div className="phone-content">
      <div className="phone-header">
        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>BONJOUR</div>
          <div style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>Tableau de bord</div>
        </div>
        <div className="phone-avatar"></div>
      </div>

      <div className="phone-stat-card">
        <div className="mono" style={{ fontSize: 9, color: "var(--ink-muted)", letterSpacing: "0.1em" }}>REVENUS · 30J</div>
        <div className="mono" style={{ fontSize: 28, marginTop: 4, letterSpacing: "-0.03em", fontWeight: 500 }}>
          €48,720
        </div>
        <div style={{ fontSize: 10, color: "var(--blue)", marginTop: 2, fontFamily: "var(--font-mono)" }}>
          ↗ +12.4% vs mois dernier
        </div>
        <svg viewBox="0 0 200 50" className="phone-chart">
          <path d="M0 40 L20 35 L40 38 L60 28 L80 30 L100 22 L120 25 L140 18 L160 20 L180 12 L200 10"
            fill="none" stroke="var(--blue)" strokeWidth="1.5" strokeLinecap="round" />
          <path d="M0 40 L20 35 L40 38 L60 28 L80 30 L100 22 L120 25 L140 18 L160 20 L180 12 L200 10 L200 50 L0 50 Z"
            fill="url(#chart-grad)" />
          <defs>
            <linearGradient id="chart-grad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="rgba(0,64,255,0.18)" />
              <stop offset="1" stopColor="rgba(0,64,255,0)" />
            </linearGradient>
          </defs>
        </svg>
      </div>

      <div className="phone-mini-grid">
        <div className="phone-mini-card">
          <div className="mono" style={{ fontSize: 8, color: "var(--ink-muted)" }}>MEMBRES</div>
          <div className="mono" style={{ fontSize: 16, marginTop: 2, fontWeight: 600 }}>342</div>
          <div style={{ fontSize: 9, color: "var(--blue)", fontFamily: "var(--font-mono)" }}>↗ +8</div>
        </div>
        <div className="phone-mini-card">
          <div className="mono" style={{ fontSize: 8, color: "var(--ink-muted)" }}>RÉTENTION</div>
          <div className="mono" style={{ fontSize: 16, marginTop: 2, fontWeight: 600 }}>91%</div>
          <div style={{ fontSize: 9, color: "var(--blue)", fontFamily: "var(--font-mono)" }}>↗ +3.4</div>
        </div>
      </div>
    </div>
  );
}

function PhoneScreenTraining() {
  return (
    <div className="phone-content">
      <div className="phone-header">
        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>PROGRAMME</div>
          <div style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>Force · Semaine 3</div>
        </div>
      </div>

      {[
        { name: "Squat", reps: "5×5", d: "100kg" },
        { name: "Bench Press", reps: "5×5", d: "82kg" },
        { name: "Rowing barre", reps: "4×8", d: "65kg" },
      ].map((ex, i) => (
        <div key={i} className="phone-exercise">
          <div className="phone-exercise-icon" style={{ background: i === 0 ? "var(--blue)" : "var(--ink)" }}></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>{ex.name}</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginTop: 1 }}>{ex.reps} · {ex.d}</div>
          </div>
          <div className="phone-exercise-check">
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
              <path d="M2 5L4 7L8 3" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
        </div>
      ))}

      <div className="phone-cta-mini">
        Lancer la séance →
      </div>
    </div>
  );
}

function PhoneScreenAI() {
  return (
    <div className="phone-content">
      <div className="phone-header">
        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--blue)" }}>● COACH IA</div>
          <div style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>Discussion</div>
        </div>
      </div>

      <div className="phone-msg phone-msg-user">
        Comment je structure mon offre premium ?
      </div>
      <div className="phone-msg phone-msg-ai">
        Commence par identifier ton positionnement sur les 4 piliers.
        <span className="phone-msg-cursor">▌</span>
      </div>
      <div className="phone-msg phone-msg-ai phone-msg-faded">
        Veux-tu que je détaille chaque pilier appliqué à ton cas ?
      </div>

      <div className="phone-input mono">
        <span style={{ color: "var(--ink-muted)" }}>Posez votre question…</span>
      </div>
    </div>
  );
}

function PhoneScreenMentoring() {
  return (
    <div className="phone-content">
      <div className="phone-header">
        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>MENTORS</div>
          <div style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>Cercle privé</div>
        </div>
      </div>

      {[
        { i: "NN", n: "Nicolas N.", r: "Stratégie · Premium", color: "var(--ink)" },
        { i: "MR", n: "Marie R.", r: "Opérations", color: "#444" },
        { i: "TS", n: "Thomas S.", r: "Commercial", color: "var(--blue)" },
      ].map((m, i) => (
        <div key={i} className="phone-mentor">
          <div className="phone-mentor-avatar" style={{ background: m.color }}>
            <span className="mono" style={{ color: "white", fontSize: 11, fontWeight: 600 }}>{m.i}</span>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>{m.n}</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", marginTop: 1 }}>{m.r}</div>
          </div>
          <div className="phone-mentor-btn mono">Réserver</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { DynaSection, DynaPhone, DYNA_FEATURES });