// site.jsx — shared chrome, sections, and data for 100dayslearning.
// Loaded by every page (index/Courses/How/Faq) before that page's own
// entry script. Components are published on window (like tweaks-panel.jsx)
// so each page can compose them. No render happens here.

const { useState, useEffect, useMemo } = React;

function useDarkMode() {
  const [dark, setDark] = useState(() => {
    const saved = localStorage.getItem('darkMode');
    if (saved !== null) return saved === 'true';
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
  });

  useEffect(() => {
    document.body.dataset.dark = dark ? 'true' : '';
    localStorage.setItem('darkMode', String(dark));
  }, [dark]);

  return [dark, () => setDark(d => !d)];
}

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"    },
];

// Shared per-page setup: tweak state, dark mode, and body theme sync.
function usePage() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [dark, toggleDark] = useDarkMode();
  useEffect(() => {
    document.body.dataset.theme = t.theme;
  }, [t.theme]);
  return { t, setTweak, dark, toggleDark };
}

// ─────────────────────────────────────────────
//  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 MoonIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M13.5 9.5A6 6 0 0 1 6.5 2.5a6 6 0 1 0 7 7z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function SunIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M11.54 4.46l-1.41 1.41M4.95 11.54l-1.41 1.41" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}

function Nav({ dark, onToggleDark, active }) {
  const link = (href, label, key) => (
    <a href={href} className={active === key ? "is-active" : undefined}>{label}</a>
  );
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="index.html" className="nav-logo">
          100dayslearning
        </a>
        <div className="nav-links">
          {link("index.html", "Home", "home")}
          {link("Courses.html", "Courses", "courses")}
          {link("Faq.html", "FAQ", "faq")}
        </div>
        <div className="nav-right">
          <button className="dark-toggle" onClick={onToggleDark} aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}>
            {dark ? <SunIcon /> : <MoonIcon />}
          </button>
          <a href="Login.html" className="nav-cta">Sign in</a>
        </div>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────
//  Hero
// ─────────────────────────────────────────────
// Theme-aware sprout — inherits the accent colour, so it adapts to every
// theme + dark mode. Ties to the 🌱 favicon and the "grow a little each day"
// idea, sitting just above the streak grid.
function Sprout() {
  return (
    <svg className="sprout-svg" width="96" height="96" viewBox="0 0 120 120" fill="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" opacity="0.45">
        <path d="M60 4 V18" />
        <path d="M28 14 L37 27" />
        <path d="M92 14 L83 27" />
      </g>
      <path d="M60 114 C60 86 60 72 60 48" stroke="currentColor" strokeWidth="3.6" strokeLinecap="round" />
      <path d="M60 66 C43 66 31 55 29 40 C46 40 58 51 60 66 Z"
            fill="currentColor" fillOpacity="0.16" stroke="currentColor" strokeWidth="3" strokeLinejoin="round" />
      <path d="M60 56 C77 56 89 45 91 30 C74 30 62 41 60 56 Z"
            fill="currentColor" fillOpacity="0.16" stroke="currentColor" strokeWidth="3" strokeLinejoin="round" />
    </svg>
  );
}

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: 40}}>
            Stop juggling between tutorials. Pick a hundred days, show up,
            and at the end you will be better than 90% in Python. Or DevOps. Or Machine Learning.

          </p>
          <div className="cta-row">
            <a href="Courses.html" className="btn">
              View courses <Arrow />
            </a>
          </div>
        </div>
        <div className="hero-visual">
          <Sprout />
          <StreakGrid done={streakOffset} />
        </div>
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────
//  FAQ
// ─────────────────────────────────────────────
const FAQS = [
  {
    q: "Is it really free?",
    a: "Yes. Sign up with an email, get all 100 days. From day 11 onwards, you'll watch a short 15-second ad before each session."
  },
  {
    q: "What happens if I miss a day?",
    a: "Your streak resets to zero. Every day you've finished stays finished."
  },
  {
    q: "Why ads and not a payment?",
    a: "Because I think education should be free. The ads keep the lights on without making hole in my pocket. Fifteen seconds once a day is a fair trade for a full course."
  },
  {
    q: "How long does each day take?",
    a: "Thirty minutes on average. Some days are 15 (a small lesson, a quick quiz and few small coding problems). A few near the end are 45–60. You can do them faster."
  },
  {
    q: "What do I have at the end?",
    a: "Four small projects you built yourself. A command-line tool, a web scraper, a tiny API, and a small game."
  },
  {
    q: "Can I do more than one course at once?",
    a: "You can. I would not reccomend it though."
  },
  {
    q: "Is there a community? A Discord? A forum?",
    a: "Not yet."
  },
];

function FAQ() {
  return (
    <section className="section wrap" id="faq" data-screen-label="07 FAQ">
      <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>
  );
}

// ─────────────────────────────────────────────
//  Page header (sub-pages get a small intro band)
// ─────────────────────────────────────────────
function PageHead({ eyebrow, title, sub }) {
  return (
    <header className="page-head wrap">
      <div className="eyebrow">{eyebrow}</div>
      <h1>{title}</h1>
      {sub && <p className="lead" style={{marginTop: 18}}>{sub}</p>}
    </header>
  );
}

// ─────────────────────────────────────────────
//  Footer
// ─────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <a href="index.html" 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 basement in Linz.
            </p>
          </div>
          <div>
            <h4>Site</h4>
            <ul>
              <li><a href="Courses.html">Courses</a></li>
              <li><a href="Faq.html">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">support@100dayslearning.com</a></li>
              <li><a href="#">X</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>
  );
}

// ─────────────────────────────────────────────
//  Tweaks panel (shared across pages)
// ─────────────────────────────────────────────
function SiteTweaks({ t, setTweak, showStreak = false, showDemo = false }) {
  return (
    <TweaksPanel>
      <TweakSection label="Aesthetic" />
      <TweakRadio
        label="Direction"
        value={t.theme}
        options={THEMES.map(x => x.value)}
        onChange={(v) => setTweak('theme', v)}
      />
      {showStreak && (
        <>
          <TweakSection label="Hero" />
          <TweakSlider
            label="Streak day"
            value={t.streakOffset}
            min={0} max={100} step={1}
            onChange={(v) => setTweak('streakOffset', v)}
          />
        </>
      )}
      {showDemo && (
        <>
          <TweakSection label="Sections" />
          <TweakToggle
            label="Show code demo"
            value={t.showCodeDemo}
            onChange={(v) => setTweak('showCodeDemo', v)}
          />
        </>
      )}
    </TweaksPanel>
  );
}

Object.assign(window, {
  useDarkMode, usePage, Arrow, MoonIcon, SunIcon,
  Nav, Hero, StreakGrid,
  FAQ, PageHead, Footer, SiteTweaks,
  THEMES, TWEAK_DEFAULTS, FAQS,
});