/* global React */
const { useState, useEffect, useRef } = React;

/* —— COUNT-UP —— */
function CountUp({ target, suffix = "", duration = 1800 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const fired = useRef(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !fired.current) {
        fired.current = true;
        const t0 = performance.now();
        const tick = (now) => {
          const p = Math.min((now - t0) / duration, 1);
          const ease = 1 - Math.pow(1 - p, 4);
          setVal(Math.floor(ease * target));
          if (p < 1) requestAnimationFrame(tick);
          else setVal(target);
        };
        requestAnimationFrame(tick);
        obs.disconnect();
      }
    }, { threshold: 0.2 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [target, duration]);

  return <span ref={ref}>{val}{suffix}</span>;
}


function AboutPage({ setRoute }) {
  const team = [
    {
      n: "Daniel Graham",
      role: "CEO · Senior Trader · Head Instructor",
      bio: "Independent Financial Advisor (Series 7, 63, 65, 32). Wall Street professional since 2009. Leads the live desk and the mentorship program.",
      tags: ["Equities", "Options", "Mentorship"],
      img: "media/daniel.png",
    },
    {
      n: "Artur Voroj",
      role: "Chief Technical Officer",
      bio: "Creator of the TraderDaddy Indicators and the TraderDaddy Pro Options Platform. Bridges cutting-edge technology with the trading desk.",
      tags: ["Technology", "Indicators", "Options Platform"],
      img: "media/artur.jpg",
    },
    {
      n: "Brandon Chui",
      role: "Advisor to the CEO · Junior Trading Analyst",
      bio: "Bridges the team and the membership. Coordinates community programming and member success.",
      tags: ["Community", "Analysis"],
      img: "media/brandon.jpg",
    },
    {
      n: "Martin",
      role: "Senior Mentor · Trading Professional",
      bio: "Brings deep technical expertise and hands-on mentorship to members at every level across Futures and Forex.",
      tags: ["Futures", "Forex"],
      img: "media/martin.jpg",
    },
  ];

  return (
    <div className="page">
      <section className="page-hero" style={{ textAlign: "center" }}>
        <div className="container">
          <span className="t-mono-label" style={{ color: "var(--acc)", fontSize: 15, letterSpacing: "0.18em" }}>// ABOUT TRADERDADDY</span>
          <h1 className="t-display" style={{ marginTop: 20, maxWidth: 900, marginInline: "auto" }}>
            We built the trading community we <span className="t-serif-italic" style={{ color: "var(--acc)" }}>wish we'd had.</span>
          </h1>
        </div>
      </section>

      {/* MISSION */}
      <section>
        <div className="container" style={{ textAlign: "center" }}>
          <span className="t-mono-label" style={{ color: "var(--acc)", fontSize: 15, letterSpacing: "0.18em" }}>// OUR MISSION</span>
          <h2 className="t-h2" style={{ marginTop: 20, maxWidth: 760, marginInline: "auto" }}>
            To help you trade the markets with a <span className="t-serif-italic" style={{ color: "var(--acc)" }}>predictable, affordable, and successful</span> approach — without doing it alone.
          </h2>
          <div style={{ maxWidth: 640, marginInline: "auto", marginTop: 32, display: "grid", gap: 20 }}>
            <p className="t-lede" style={{ color: "var(--ink-2)" }}>
              We saw a real gap in personalized education for students and professionals who want to excel in trading.
              So we built TraderDaddy — to give others the opportunity to launch a trading career with targeted, human guidance.
            </p>
            <p style={{ color: "var(--ink-2)", fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: "clamp(20px, 2vw, 28px)", lineHeight: 1.35 }}>
              "40+ years of combined experience — taught by the people who lived it."
            </p>
          </div>
        </div>
      </section>

      {/* —— STATS STRIP —— */}
      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            borderTop: "1px solid var(--line)",
            borderLeft: "1px solid var(--line)",
          }}>
            {[
              { target: 40, suffix: "+", label: "Years combined experience" },
              { target: 500, suffix: "+", label: "Active community members" },
              { target: 4, suffix: "", label: "Markets traded together" },
              { target: 13, suffix: "", label: "Years NYC's #1 academy" },
            ].map(({ target, suffix, label }) => (
              <div key={label} style={{
                padding: "40px 32px",
                borderRight: "1px solid var(--line)",
                borderBottom: "1px solid var(--line)",
              }}>
                <div style={{
                  fontSize: "clamp(40px, 4vw, 60px)",
                  fontWeight: 700,
                  letterSpacing: "-0.04em",
                  color: "var(--acc)",
                  lineHeight: 1,
                }}>
                  <CountUp target={target} suffix={suffix} />
                </div>
                <div className="t-mono-label" style={{ marginTop: 12 }}>{label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHAT MEMBERS GET */}
      <section className="method">
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// WHAT MEMBERS GET</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>Built around access, not content libraries.</h2>
          </div>
          <div className="principles">
            {[
              ["Private interactive sessions in real time", "Screens shared, questions answered live. Not pre-recorded. Not a webinar."],
              ["Technical & fundamental analysis", "Both sides — the chart and the why behind it. Taught together."],
              ["Flexible & convenient scheduling", "Built for full-time workers, students, and night-shift traders alike."],
              ["Direct access to professionals", "You'll know our team by name. They'll know yours."],
              ["Programs across all markets", "Futures, Forex, Equities, Crypto — one community, four markets."],
              ["Lifetime WhatsApp & Discord access", "Once you're in, you're in. The community is yours."],
            ].map(([h, p], i) => (
              <div key={i} className="principle">
                <span className="t-mono" style={{ color: "var(--acc)", fontSize: 14 }}>0{i + 1} —</span>
                <h3 className="t-h3" style={{ marginTop: 12 }}>{h}</h3>
                <p className="t-body" style={{ color: "var(--ink-2)", marginTop: 12 }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TEAM */}
      <section>
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// THE TEAM</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>Working traders. Real credentials.</h2>
          </div>
          <div className="team-grid team-grid-4">
            {team.map((m, i) => (
              <div key={i} className="team-card">
                <div className="team-photo" style={!m.img ? { background: `linear-gradient(135deg, oklch(${30 + i * 5}% 0.06 ${220 + i * 20}), oklch(${48 + i * 4}% 0.08 ${220 + i * 20}))` } : {}}>
                  {m.img && (
                    <img
                      src={m.img}
                      alt={m.n}
                      style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }}
                    />
                  )}
                  {!m.img && (
                    <div className="t-mono-label" style={{ position: "absolute", inset: "auto auto 12px 16px", color: "var(--ink-3)" }}>
                      PORTRAIT · {m.n.split(" ").map(w => w[0]).join("")}
                    </div>
                  )}
                </div>
                <div style={{ marginTop: 20 }}>
                  <div style={{ color: "var(--ink-0)", fontSize: 18, fontWeight: 500 }}>{m.n}</div>
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--acc)", letterSpacing: "0.05em", marginTop: 4, textTransform: "uppercase" }}>{m.role}</div>
                  <p className="t-body" style={{ color: "var(--ink-2)", marginTop: 12, fontSize: 14 }}>{m.bio}</p>
                  <div className="row gap-2 wrap" style={{ marginTop: 16 }}>
                    {m.tags.map(t => (
                      <span key={t} className="pill" style={{ animation: "none", fontSize: 10, padding: "4px 10px" }}>{t}</span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section>
        <div className="container">
          <div className="cta-block">
            <div className="cta-bg-grid" aria-hidden></div>
            <h2 className="t-h2" style={{ position: "relative" }}>Want to see if it's a fit?</h2>
            <p className="t-lede" style={{ marginTop: 16, maxWidth: 540, marginInline: "auto", position: "relative" }}>
              We do a quick intake call before every membership. No pitch — just a real conversation.
            </p>
            <button className="btn btn-primary" style={{ marginTop: 32, position: "relative" }} onClick={() => setRoute("contact")}>
              Start the conversation
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.AboutPage = AboutPage;