// 100dayslearning — landing page
// Wired to: /python (live), /devops, /ml (coming soon)

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "editorial",
  "showCodeDemo": true,
  "streakOffset": 47
}/*EDITMODE-END*/;

const THEMES = [
  { value: "editorial", label: "Editorial" },
  { value: "terminal",  label: "Terminal"  },
  { value: "sketch",    label: "Sketch"    },
];

// ─────────────────────────────────────────────
//  Reusable bits
// ─────────────────────────────────────────────
function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// ─────────────────────────────────────────────
//  Nav
// ─────────────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="/" className="nav-logo">
          100dayslearning
        </a>
        <div className="nav-links" style={{display: 'flex'}}>
          <a href="#courses">Courses</a>
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="Login.html" className="nav-cta">Sign in</a>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────
//  Hero
// ─────────────────────────────────────────────
function StreakGrid({ done = 47 }) {
  const cells = Array.from({ length: 100 }, (_, i) => {
    if (i < done) return "done";
    if (i === done) return "today";
    return "";
  });
  return (
    <div className="streak-card" data-screen-label="streak preview">
      <div className="streak-head">
        <span><b>Your streak</b> · python.100days</span>
        <span>{done}/100</span>
      </div>
      <div className="streak-grid">
        {cells.map((cls, i) => (
          <div key={i} className={`streak-cell ${cls}`} title={`Day ${i + 1}`}></div>
        ))}
      </div>
      <div className="streak-foot">
        <span>started feb 12</span>
        <span><span className="num">{done}</span> days in a row</span>
      </div>
    </div>
  );
}

function Hero({ streakOffset }) {
  return (
    <header className="hero wrap" data-screen-label="01 Hero">
      <div className="hero-grid">
        <div>
          <div className="eyebrow" style={{marginBottom: 24}}>A different kind of online course</div>
          <h1>
            100 days.<br />
            30 minutes a day.<br />
            <span className="stroke">That's the whole pitch.</span>
          </h1>
          <p className="lead" style={{marginTop: 28}}>
            Stop bouncing between tutorials. Pick a hundred days, show up,
            and at the end you'll know Python. Or DevOps. Or machine learning.
            Or you won't, and you'll have your money back.
          </p>
          <div className="cta-row">
            <a href="Login.html" className="btn">
              Start day 1 of Python <Arrow />
            </a>
            <span className="free-tag">
              <span className="pulse"></span>
              First 10 days free · no card
            </span>
          </div>
        </div>
        <StreakGrid done={streakOffset} />
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────
//  Courses
// ─────────────────────────────────────────────
const COURSES = [
  {
    slug: "python",
    title: "Python in 100 days",
    blurb: "From print('hello world') to building a web scraper, a small API, and a tiny game. No prior code.",
    status: "live",
    badge: "Available now",
  },
  {
    slug: "devops",
    title: "DevOps in 100 days",
    blurb: "Linux, Docker, CI/CD, Terraform, observability. For developers who keep getting paged.",
    status: "soon",
    badge: "Coming soon",
  },
  {
    slug: "ml",
    title: "Machine Learning in 100 days",
    blurb: "Numpy through transformers, the long way. Math you actually need, code you actually write.",
    status: "soon",
    badge: "Coming soon",
  },
];

function CourseCard({ c }) {
  const live = c.status === "live";
  const inner = (
    <>
      <span className={`course-tag ${c.status}`}>
        <span className="dot"></span>
        {c.badge}
      </span>
      <h3>{c.title}</h3>
      <p>{c.blurb}</p>
      <div className="course-foot">
        <span className="price">
          <s>€19.99</s> <b>€9.99</b>
        </span>
        {live ? (
          <span className="go">Start day 1 <Arrow /></span>
        ) : (
          <span className="go" style={{opacity: .6}}>Notify me <Arrow /></span>
        )}
      </div>
    </>
  );
  if (live) {
    return <a href="Login.html" className="course live">{inner}</a>;
  }
  return (
    <a href={`/${c.slug}/notify`} className="course soon">{inner}</a>
  );
}

function Courses() {
  return (
    <section className="section wrap" id="courses" data-screen-label="02 Courses">
      <div className="eyebrow">Three courses, one method</div>
      <h2 style={{marginTop: 12}}>Pick one. Finish it. Then pick another.</h2>
      <div className="courses">
        {COURSES.map(c => <CourseCard key={c.slug} c={c} />)}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
//  How it works
// ─────────────────────────────────────────────
function How() {
  const items = [
    {
      n: "01",
      title: "A daily streak that's actually kind",
      body: "Show up, mark the day done. Miss one, and your streak resets, but your progress doesn't. No guilt notifications. No 'we miss you' emails."
    },
    {
      n: "02",
      title: "Code right here, in the page",
      body: "No installs, no terminal, no path issues on day one. The editor runs in your browser. When you're ready for a real setup, day 14 walks you through it."
    },
    {
      n: "03",
      title: "An AI that asks instead of tells",
      body: "Stuck? Tap 'hint'. You'll get a question back, not the answer. Tap again for a nudge. Tap a third time and yes, fine, you'll get the solution."
    },
  ];
  return (
    <section className="section wrap" id="how" data-screen-label="03 How it works">
      <div className="eyebrow">How it works</div>
      <h2 style={{marginTop: 12}}>The thing that makes you finish is the thing nobody else builds.</h2>
      <div className="how">
        {items.map(it => (
          <div className="how-item" key={it.n}>
            <div className="num">{it.n}</div>
            <h3>{it.title}</h3>
            <p>{it.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
//  Code demo
// ─────────────────────────────────────────────
function CodeDemo() {
  const [output, setOutput] = useState(null);
  const [hint, setHint] = useState(null);

  const run = () => {
    setOutput("Hello, Maya!\nYou are 28 years old.\nIn 100 days you'll be 28 and a developer.");
    setHint(null);
  };
  const askHint = () => {
    setHint("Take a look at line 4. You're concatenating a string with an integer. What does Python do when you ask it to add a number to a string? Try wrapping `age` in something.");
    setOutput(null);
  };
  const reset = () => { setOutput(null); setHint(null); };

  return (
    <section className="section wrap" id="demo" data-screen-label="04 Code demo">
      <div className="eyebrow">Day 03 · strings &amp; variables</div>
      <h2 style={{marginTop: 12}}>This is what every lesson looks like.</h2>
      <p className="lead" style={{marginTop: 18}}>
        A short brief, a small puzzle, a place to write code, and an AI tutor that
        knows when to shut up. No videos to scrub through.
      </p>
      <div className="demo">
        <div className="demo-bar">
          <div className="lights"><span></span><span></span><span></span></div>
          <span>day_03_hello.py</span>
        </div>
        <div className="demo-grid">
          <pre className="demo-code">{`
`}<span className="ln">1</span><span className="cmt"># Ask the user their name and age,</span>{`
`}<span className="ln">2</span><span className="cmt"># then tell them how old they'll be after 100 days.</span>{`
`}<span className="ln">3</span>name <span className="kw">=</span> <span className="kw">input</span>(<span className="str">"name? "</span>){`
`}<span className="ln">4</span>age  <span className="kw">=</span> <span className="kw">int</span>(<span className="kw">input</span>(<span className="str">"age?  "</span>)){`
`}<span className="ln">5</span>{`
`}<span className="ln">6</span><span className="kw">print</span>(<span className="str">f"Hello, {'{name}'}!"</span>){`
`}<span className="ln">7</span><span className="kw">print</span>(<span className="str">f"You are {'{age}'} years old."</span>){`
`}<span className="ln">8</span><span className="kw">print</span>(<span className="str">f"In 100 days you'll be "</span> <span className="kw">+</span> age <span className="kw">+</span> <span className="str">" and a developer."</span>){`
`}          </pre>
          <div className="demo-side">
            <div className="demo-actions">
              <button className="chip" onClick={run}>▸ Run</button>
              <button className="chip" onClick={askHint}>? Hint</button>
              <button className="chip" onClick={reset}>↻ Reset</button>
            </div>
            <div className="demo-output">
              {output && (
                <>
                  <span className="prompt">{">"} python day_03_hello.py</span>{"\n"}
                  {output}
                </>
              )}
              {!output && !hint && (
                <span style={{color: 'var(--muted)'}}>Press <b>Run</b> to see what happens. Or <b>Hint</b>. There's a bug on line 8.</span>
              )}
            </div>
            {hint && (
              <div className="ai-msg">
                <span className="ai-from">Tutor</span>
                {hint}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
//  Founder note
// ─────────────────────────────────────────────
function Founder() {
  return (
    <section className="section wrap" id="founder" data-screen-label="05 Founder note">
      <div className="eyebrow">Why this exists</div>
      <h2 style={{marginTop: 12}}>I built this because I couldn't finish a course either.</h2>

      <div className="founder">
        <div className="founder-letter">
          <p>
            In 2022 I bought three Python courses on the same day. I watched
            forty-five minutes of the first one, twenty of the second, and
            opened the third exactly once. By Tuesday I'd quit all of them.
          </p>
          <p>
            The problem wasn't me, and it probably isn't you either. The
            problem is that every course is built like a weekend marathon.
            Twelve hours of video, four projects, a certificate at the end.
            Nobody actually learns anything in a weekend.
          </p>
          <p>
            So I built the course I needed: one small thing per day, for a
            hundred days. Thirty minutes. A short brief, a small puzzle, and a
            tutor that doesn't hand you the answer the second you ask. The
            first ten days are free because I don't trust courses that ask for
            a card before you've seen anything.
          </p>
          <p>
            If day 10 doesn't convince you, leave. I won't try to win you
            back. If it does, there's another ninety waiting.
          </p>
          <div className="founder-sig">Aanya</div>
          <div className="founder-meta">founder · still writing day 78 of devops</div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
//  Pricing
// ─────────────────────────────────────────────
function Pricing() {
  return (
    <section className="section wrap" id="pricing" data-screen-label="06 Pricing">
      <div className="eyebrow">Pricing</div>
      <h2 style={{marginTop: 12}}>One course. One price. Forever.</h2>

      <div className="price-card">
        <div className="number">
          <span className="curr">€</span>9.99
        </div>
        <div className="was">
          <s>€19.99</s> regular price
          <span className="badge">50% off launch</span>
        </div>
        <ul className="price-list">
          <li><span className="check">✓</span><span><b>First 10 days free.</b> No card up front.</span></li>
          <li><span className="check">✓</span><span>One-time payment. Lifetime access.</span></li>
          <li><span className="check">✓</span><span>In-browser editor &amp; AI tutor included.</span></li>
          <li><span className="check">✓</span><span>30-day refund. No questions asked.</span></li>
          <li><span className="check">✓</span><span>Four small things you've actually built by day 100.</span></li>
        </ul>
        <a href="checkout.html" className="btn" style={{margin: '0 auto'}}>
          Start day 1 of Python <Arrow />
        </a>
        <div style={{marginTop: 18, fontFamily: 'var(--font-ui)', fontSize: 12, color: 'var(--muted)'}}>
          you won't be charged for 10 days
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
//  FAQ
// ─────────────────────────────────────────────
const FAQS = [
  {
    q: "Do I really not need a credit card to start?",
    a: "Right. You sign up with an email, you get the first ten days. No card, no auto-trial, no calendar reminder ten days later. If you want to keep going on day 11, you'll pay then."
  },
  {
    q: "What happens if I miss a day?",
    a: "Your streak resets to zero. Your progress doesn't. Every day you've finished stays finished. The streak is a nudge, not a punishment. Some weeks you'll have a 30-day streak; some weeks you'll start over twice. Both are fine."
  },
  {
    q: "Is €9.99 monthly or annual?",
    a: "Neither. It's once. You pay €9.99 for the course, you keep it forever, including any updates I push. No subscription, no auto-renew."
  },
  {
    q: "How long does each day take?",
    a: "Thirty minutes on average. Some days are 15 (a small concept, a quick puzzle). A few near the end are 45–60. You can do them faster, but the point is the daily-ness, not the speed."
  },
  {
    q: "What do I have at the end?",
    a: "Four small things you built yourself: a command-line tool, a web scraper, a tiny API, and a small game. No certificate. I'd rather you have working code on your laptop than a PDF on your hard drive."
  },
  {
    q: "Can I do more than one course at once?",
    a: "You can. I'd ask you not to. The whole bet of this site is that one small thing per day, repeated, beats three big things you start and don't finish."
  },
  {
    q: "Is there a community? A Discord? A forum?",
    a: "Not yet, on purpose. The first version of this is just you and the course. If a community helps people finish, I'll build one. If it turns into another thing to scroll, I won't."
  },
];

function FAQ() {
  return (
    <section className="section wrap" id="faq" data-screen-label="07 FAQ">
      <div className="eyebrow">Things people ask</div>
      <h2 style={{marginTop: 12}}>Questions, honestly answered.</h2>
      <div className="faq-list">
        {FAQS.map((f, i) => (
          <details className="faq-item" key={i} open={i === 0}>
            <summary>
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </summary>
            <div className="answer">{f.a}</div>
          </details>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
//  Footer
// ─────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <a href="/" className="nav-logo" style={{marginBottom: 14}}>
              100dayslearning
            </a>
            <p style={{maxWidth: '38ch', marginTop: 14, color: 'var(--muted)', fontFamily: 'var(--font-ui)', fontSize: 13}}>
              One small thing per day, for a hundred days.
              Built in a kitchen in Berlin.
            </p>
          </div>
          <div>
            <h4>Courses</h4>
            <ul>
              <li><a href="Login.html">Python</a></li>
              <li><a href="/devops">DevOps</a></li>
              <li><a href="/ml">Machine Learning</a></li>
            </ul>
          </div>
          <div>
            <h4>Site</h4>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="Login.html">Sign in</a></li>
            </ul>
          </div>
          <div>
            <h4>Hello</h4>
            <ul>
              <li><a href="mailto:hi@100dayslearning.com">hi@100dayslearning.com</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Changelog</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 100dayslearning</span>
          <span><a href="/privacy">Privacy</a> · <a href="/terms">Terms</a></span>
        </div>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────
//  App
// ─────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.body.dataset.theme = t.theme;
  }, [t.theme]);

  return (
    <>
      <Nav />
      <Hero streakOffset={t.streakOffset} />
      <Courses />
      <How />
      {t.showCodeDemo && <CodeDemo />}
      <Founder />
      <Pricing />
      <FAQ />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Aesthetic" />
        <TweakRadio
          label="Direction"
          value={t.theme}
          options={THEMES.map(x => x.value)}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakSection label="Hero" />
        <TweakSlider
          label="Streak day"
          value={t.streakOffset}
          min={0} max={100} step={1}
          onChange={(v) => setTweak('streakOffset', v)}
        />
        <TweakSection label="Sections" />
        <TweakToggle
          label="Show code demo"
          value={t.showCodeDemo}
          onChange={(v) => setTweak('showCodeDemo', v)}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);