/* =========================================================================
 *  Python Tutor — Landing page (home.jsx)
 *  -----------------------------------------------------------------------
 *  Hero + three feature cards + footer. All theme tokens come from the
 *  shared styles.css (copied from the parent ctwcad.com site). New
 *  visual primitives live in styles-python.css and are namespaced
 *  with .pt- so they don't collide with the .ct- classes.
 * =======================================================================*/

const { useEffect } = React;

// Brandmark lives in components/brandmark.jsx (window.PyBrand). The
// previous inline P-glyph here has been replaced by the new ">_" mark
// that matches the Downloads/python-logos files. We reference window.PyBrand
// at render time (not at file-load) so we don't capture undefined if
// brandmark.jsx loaded out of order.

function FeatureCard({ eyebrow, title, body }) {
  return (
    <div className="pt-feature">
      <div className="ct-eyebrow pt-feature-eyebrow">{eyebrow}</div>
      <h3 className="pt-feature-title">{title}</h3>
      <p className="pt-feature-body">{body}</p>
    </div>
  );
}

function Home({ onNavigate }) {
  const M = window.FramerMotion ? window.FramerMotion.motion : null;
  const HeroWrap = M ? M.div : "div";
  const heroAnim = M ? {
    initial: { opacity: 0, y: 12 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
  } : {};

  /* Subtle scroll-into-view animation for the feature row, mirroring the
     restraint of ctwcad.com — no marketing-site theatrics. */
  return (
    <div className="pt-page">
      <header className="pt-topbar">
        <window.PyBrand size={20}/>
        <div className="pt-topbar-right">
          <a className="ct-btn ct-btn-ghost" href="https://ctwcad.com" target="_blank" rel="noopener noreferrer">
            ctwcad.com
          </a>
        </div>
      </header>

      <main className="pt-main">
        <HeroWrap className="pt-hero" {...heroAnim}>
          <div className="ct-eyebrow pt-hero-eyebrow">A CTWCAD product</div>
          <h1 className="pt-hero-h1">
            Learn Python.<br/>
            From scratch. To PyTorch.
          </h1>
          <p className="pt-hero-sub">
            A self-paced tutor designed to take you from your first variable to
            following Karpathy's <em>Neural Networks: Zero to Hero</em> — without
            skipping the parts that matter.
          </p>
          <div className="pt-hero-cta">
            <a className="ct-btn ct-btn-primary ct-btn-lg" href="#download">
              Download for Windows
            </a>
            <button
              className="ct-btn ct-btn-lg pt-cta-disabled"
              disabled
              aria-disabled="true"
              title="Android version is on the way"
            >
              Coming soon for Android
            </button>
          </div>
        </HeroWrap>

        <section className="pt-features" aria-label="Why Python Tutor">
          <FeatureCard
            eyebrow="01 / Active recall"
            title="Active recall every minute"
            body="Forced retrieval beats passive reading. Every concept gets quizzed within five minutes of being introduced. The act of trying — even when you get it wrong — is what makes the learning stick."
          />
          <FeatureCard
            eyebrow="02 / Spaced repetition"
            title="Spaced repetition that won't let you forget"
            body="Wrong answers come back tomorrow. Right answers stretch out to 3, 7, 14, then 30 days. The Leitner-box system used by Anki — built in, automatic."
          />
          <FeatureCard
            eyebrow="03 / Mastery gates"
            title="Mastery gates, not vibes"
            body="End of each module, a cold mastery test. 85% to advance. Fall short, the test locks for 24 hours and your weakest concepts are surfaced. No skipping ahead."
          />
        </section>
      </main>

      <footer className="pt-footer">
        <div className="ct-mono ct-dim pt-footer-line">
          Part of the CTWCAD family. Built by Seth Ricks.
        </div>
        <a className="ct-mono pt-footer-link" href="https://ctwcad.com" target="_blank" rel="noopener noreferrer">
          ctwcad.com →
        </a>
      </footer>
    </div>
  );
}

window.PythonTutorHome = Home;