// Home view for the Beweging prototype.
(function () {
  const { Icon, PROGRAMS, Media, HERO, GALLERY } = window.PROTO;

  const css = `
  .hm-hero{position:relative;overflow:hidden;padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,96px);}
  .hm-heromedia{position:absolute;inset:0;z-index:0;}
  .hm-heromedia .shade{background:
    linear-gradient(90deg, var(--bg) 4%, color-mix(in srgb,var(--bg) 72%,transparent) 40%, color-mix(in srgb,var(--bg) 22%,transparent) 72%, transparent 100%),
    linear-gradient(to top, var(--bg) 2%, transparent 55%);}
  .hm-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,18vw,220px);gap:12px;}
  .hm-gallery .media{border-radius:calc(var(--radius)*2);}
  .hm-gallery .g0{grid-column:span 2;}
  .hm-gallery .g5{grid-column:span 2;}
  .hm-gcap{position:absolute;left:18px;bottom:16px;z-index:2;font-family:'Anton',sans-serif;
    font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:#fff;}
  .hm-hero .ghost{position:absolute;right:-3vw;top:-2vw;font-family:'Anton',sans-serif;
    font-size:clamp(180px,30vw,420px);line-height:.8;color:#fff;opacity:.035;text-transform:uppercase;
    user-select:none;pointer-events:none;}
  .hm-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;}
  .hm-g1{width:42vw;height:42vw;background:var(--accent);left:-14vw;top:-16vw;opacity:.4;}
  .hm-g2{width:36vw;height:36vw;background:#1C7ED6;right:-12vw;bottom:-22vw;opacity:.22;}
  .hm-hero-in{position:relative;z-index:1;max-width:62%;}
  .hm-hero h1{font-family:'Anton',sans-serif;font-size:clamp(54px,8.5vw,118px);line-height:.88;
    text-transform:uppercase;letter-spacing:-.01em;margin:22px 0 24px;}
  .hm-hero h1 span{background:linear-gradient(95deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff));-webkit-background-clip:text;
    background-clip:text;color:transparent;}
  .hm-lead{font-size:clamp(17px,1.4vw,20px);color:var(--mut);max-width:48ch;margin:0 0 32px;}
  .hm-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
  .hm-stats{display:flex;gap:clamp(28px,5vw,64px);margin-top:clamp(48px,6vw,72px);position:relative;z-index:1;flex-wrap:wrap;}
  .hm-stat .n{font-family:'Anton',sans-serif;font-size:clamp(34px,4vw,52px);letter-spacing:-.01em;line-height:1;}
  .hm-stat .l{color:var(--mut);font-size:14px;margin-top:6px;}

  .hm-ticker{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);}
  .hm-ticker .it{flex:1;padding:18px 20px;border-right:1px solid var(--line);display:flex;align-items:center;
    gap:12px;cursor:pointer;transition:background .15s;}
  .hm-ticker .it:last-child{border-right:none;}
  .hm-ticker .it:hover{background:var(--panel);}
  .hm-ticker .dot{width:9px;height:9px;border-radius:50%;flex:none;}
  .hm-ticker .nm{font-family:'Anton',sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:.03em;}

  .hm-rows{display:flex;flex-direction:column;}
  .hm-row{display:grid;grid-template-columns:50px minmax(220px,1fr) 2fr auto;gap:24px;align-items:center;
    padding:26px 8px;border-top:1px solid var(--line);cursor:pointer;transition:background .15s,padding-left .15s;}
  .hm-rows .hm-row:last-child{border-bottom:1px solid var(--line);}
  .hm-row:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 12%,transparent),transparent 60%);padding-left:18px;}
  .hm-row .num{font-family:'Anton',sans-serif;font-size:18px;color:var(--mut);}
  .hm-row .nm{font-family:'Anton',sans-serif;font-size:clamp(24px,2.6vw,34px);text-transform:uppercase;
    letter-spacing:-.01em;display:flex;align-items:center;gap:14px;}
  .hm-row .ic{width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex:none;color:#fff;}
  .hm-row .bl{color:var(--mut);font-size:15.5px;line-height:1.5;}
  .hm-row .go{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13px;text-transform:uppercase;
    letter-spacing:.05em;padding:11px 16px;border-radius:var(--radius);color:#fff;justify-self:end;}

  .hm-why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .hm-why .c{background:var(--bg2);border:1px solid var(--line);border-radius:calc(var(--radius)*2);padding:30px;}
  .hm-why .c .ic{width:48px;height:48px;border-radius:var(--radius);background:var(--panel);color:var(--accent);
    display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
  .hm-why .c h3{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;margin:0 0 8px;letter-spacing:.01em;}
  .hm-why .c p{color:var(--mut);font-size:15px;margin:0;line-height:1.55;}

  .hm-week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
  .hm-day h5{font-family:'Anton',sans-serif;font-size:15px;text-transform:uppercase;color:var(--mut);
    margin:0 0 12px;letter-spacing:.06em;border-bottom:1px solid var(--line);padding-bottom:10px;}
  .hm-slot{display:flex;flex-direction:column;gap:3px;background:var(--bg2);border:1px solid var(--line);
    border-left-width:3px;border-radius:var(--radius);padding:9px 10px;margin-bottom:8px;cursor:pointer;transition:transform .12s,background .15s;}
  .hm-slot:hover{background:var(--panel);transform:translateX(2px);}
  .hm-slot .t{font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.02em;}
  .hm-slot .n{font-size:11.5px;color:var(--mut);line-height:1.25;}
  .hm-empty{color:#3a3d45;font-size:12px;padding:9px 2px;}

  .hm-leden{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .hm-q{background:var(--bg2);border:1px solid var(--line);border-radius:calc(var(--radius)*2);padding:28px;}
  .hm-q .stars{display:flex;gap:3px;color:var(--accent);margin-bottom:16px;}
  .hm-q p{font-size:17px;line-height:1.5;margin:0 0 22px;}
  .hm-q .who{display:flex;align-items:center;gap:13px;}
  .hm-q .av{width:44px;height:44px;border-radius:50%;background:var(--panel);display:flex;align-items:center;
    justify-content:center;font-family:'Anton',sans-serif;font-size:18px;color:var(--accent);}
  .hm-q .who .nm{font-weight:700;font-size:15px;}
  .hm-q .who .ro{color:var(--mut);font-size:13px;}

  .hm-band{position:relative;overflow:hidden;border-radius:calc(var(--radius)*4);
    background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#000));padding:clamp(48px,6vw,80px);}
  .hm-band .ghost{position:absolute;right:-30px;bottom:-90px;font-family:'Anton',sans-serif;font-size:300px;
    line-height:.8;color:#fff;opacity:.10;text-transform:uppercase;pointer-events:none;}
  .hm-band h2{font-family:'Anton',sans-serif;font-size:clamp(38px,5.5vw,68px);text-transform:uppercase;
    color:#fff;margin:0 0 14px;line-height:.95;position:relative;}
  .hm-band p{color:rgba(255,255,255,.9);font-size:18px;max-width:46ch;margin:0 0 30px;position:relative;}
  .hm-steps{display:flex;gap:14px;position:relative;flex-wrap:wrap;}
  .hm-step{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);
    padding:16px 20px;min-width:150px;}
  .hm-step .k{font-family:'Anton',sans-serif;font-size:17px;text-transform:uppercase;color:#fff;}
  .hm-step .d{color:rgba(255,255,255,.85);font-size:13px;}

  @media(max-width:980px){
    .hm-hero-in{max-width:100%;}
    .hm-why,.hm-leden{grid-template-columns:1fr;}
    .hm-week{grid-template-columns:repeat(2,1fr);}
    .hm-row{grid-template-columns:36px 1fr;}
    .hm-row .bl,.hm-row .go{display:none;}
    .hm-ticker{flex-wrap:wrap;}
    .hm-ticker .it{flex:1 1 50%;border-bottom:1px solid var(--line);}
    .hm-ticker .it:nth-child(even){border-right:none;}
    .hm-gallery{grid-template-columns:repeat(2,1fr);}
    .hm-gallery .g0,.hm-gallery .g5{grid-column:span 2;}
  }`;

  function Stars() {
    return <div className="stars">{[0,1,2,3,4].map(i => <Icon key={i} name="star" size={15} style={{ fill: "var(--accent)" }} />)}</div>;
  }

  function Home({ go, onJoin }) {
    const week = window.PROTO.scheduleByDay();
    const reviews = [
      { q: "Leuke afwisselende en uitdagende lessen. Goede begeleiding. Ik voel me veel fitter — was ik maar jaren eerder begonnen.", nm: "Edwin", ro: "Software Engineer" },
      { q: "Ik vind het onverwacht leuk. Elke week kijk ik er weer naar uit.", nm: "Karin", ro: "Freelance vertaalster" },
      { q: "Even lekker helemaal los gaan, en daarna voel je je topfit.", nm: "Anton", ro: "Video editor" },
    ];
    return (
      <div className="view">
        <style>{css}</style>

        {/* HERO */}
        <header className="hm-hero">
          <Media id={HERO} w={1800} alt="Training bij AP-FIT" className="hm-heromedia" />
          <div className="hm-glow hm-g1"></div>
          <div className="hm-glow hm-g2"></div>
          <div className="ghost">MOVE</div>
          <div className="wrap">
            <div className="hm-hero-in">
              <span className="eyebrow">// Beweegclub · Anna Paulowna</span>
              <h1>Train hard.<br /><span>Leef sterk.</span></h1>
              <p className="hm-lead">Van Hyrox tot kracht & balans, van circuit tot fitness. Eén club, alle disciplines — getraind op jouw niveau, met de mentaliteit van topsporters.</p>
              <div className="hm-cta">
                <a className="btn btn-pri btn-lg" onClick={onJoin}>Gratis proefles <Icon name="arrow" size={17} /></a>
                <a className="btn btn-ghost btn-lg" href="#rooster">Bekijk rooster</a>
              </div>
            </div>
            <div className="hm-stats">
              <div className="hm-stat"><div className="n">6</div><div className="l">disciplines, één club</div></div>
              <div className="hm-stat"><div className="n">25+</div><div className="l">trainingen per week</div></div>
              <div className="hm-stat"><div className="n">16–80</div><div className="l">jaar — iedereen welkom</div></div>
              <div className="hm-stat"><div className="n">2</div><div className="l">vaste, ervaren coaches</div></div>
            </div>
          </div>
        </header>

        {/* TICKER */}
        <div className="hm-ticker">
          {PROGRAMS.map((p) => (
            <div className="it" key={p.key} onClick={() => go({ view: "program", key: p.key })}>
              <span className="dot" style={{ background: p.accent }}></span>
              <span className="nm">{p.name}</span>
            </div>
          ))}
        </div>

        {/* PROGRAMMA'S */}
        <section className="section" id="takken">
          <div className="wrap">
            <div className="sec-head">
              <span className="eyebrow">// De programma's</span>
              <h2>Kies jouw discipline</h2>
              <p>Eén merk, één lat. Elke discipline herken je aan z'n eigen signaalkleur — klik door voor het volledige programma.</p>
            </div>
            <div className="hm-rows">
              {PROGRAMS.map((p, i) => (
                <div className="hm-row" key={p.key} style={{ "--ac": p.accent }} onClick={() => go({ view: "program", key: p.key })}>
                  <div className="num">0{i + 1}</div>
                  <div className="nm"><span className="ic" style={{ background: p.accent }}><Icon name={p.glyph} size={22} /></span>{p.name}</div>
                  <div className="bl">{p.blurb}</div>
                  <a className="go" style={{ background: p.accent }}>Bekijk <Icon name="arrow" size={15} /></a>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* WHY */}
        <section className="section" id="over" style={{ background: "var(--bg2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
          <div className="wrap">
            <div className="sec-head">
              <span className="eyebrow">// Waarom hier</span>
              <h2>Topsport-mentaliteit,<br />voor iedereen</h2>
            </div>
            <div className="hm-why">
              <div className="c"><div className="ic"><Icon name="balance" size={24} /></div><h3>Op jouw niveau</h3><p>Elke oefening schaalt mee. Van eerste proefles tot wedstrijd — je gaat de confrontatie alleen met jezelf aan.</p></div>
              <div className="c"><div className="ic"><Icon name="fist" size={24} /></div><h3>Coaches met niveau</h3><p>Getraind door ervaren coaches David Roovers en Ciska van der Voort. Persoonlijke begeleiding, scherpe techniek.</p></div>
              <div className="c"><div className="ic"><Icon name="flame" size={24} /></div><h3>Nooit hetzelfde</h3><p>Afwisselende trainingen met halters, kettlebells, stootkussens en eigen gewicht. Verveling bestaat hier niet.</p></div>
            </div>
          </div>
        </section>

        {/* SFEER / GALLERY */}
        <section className="section" style={{ paddingBottom: 0 }}>
          <div className="wrap">
            <div className="sec-head">
              <span className="eyebrow">// De sfeer</span>
              <h2>Eén club, vele gezichten</h2>
              <p>Van vroege Hyrox-runs tot rustige yoga — verschillende werelden, dezelfde energie.</p>
            </div>
            <div className="hm-gallery">
              {GALLERY.map((id, i) => (
                <Media key={id} id={id} w={i === 0 ? 1000 : 700} className={"zoom g" + i} alt="" />
              ))}
            </div>
          </div>
        </section>

        {/* ROOSTER */}
        <section className="section" id="rooster">
          <div className="wrap">
            <div className="sec-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16 }}>
              <div>
                <span className="eyebrow">// Het rooster</span>
                <h2>Deze week</h2>
                <p>Een greep uit het weekrooster. Leden schrijven zich online in via WodUp.</p>
              </div>
              <a className="btn btn-ghost" href="https://ftf.wodup.nl" target="_blank">Online inschrijven <Icon name="arrow" size={15} /></a>
            </div>
            <div className="hm-week">
              {window.PROTO.WEEK.map((d) => (
                <div className="hm-day" key={d}>
                  <h5>{d}</h5>
                  {week[d].length === 0 ? <div className="hm-empty">—</div> : week[d].map((s, idx) => (
                    <div className="hm-slot" key={idx} style={{ borderLeftColor: s.accent }} onClick={() => go({ view: "program", key: s.key })}>
                      <span className="t">{s.time}</span>
                      <span className="n">{s.name}</span>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* LEDEN */}
        <section className="section" style={{ background: "var(--bg2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
          <div className="wrap">
            <div className="sec-head"><span className="eyebrow">// Wat leden zeggen</span><h2>Onverwacht leuk</h2></div>
            <div className="hm-leden">
              {reviews.map((r) => (
                <div className="hm-q" key={r.nm}>
                  <Stars />
                  <p>“{r.q}”</p>
                  <div className="who"><div className="av">{r.nm[0]}</div><div><div className="nm">{r.nm}</div><div className="ro">{r.ro}</div></div></div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA BAND */}
        <section className="section" id="kosten">
          <div className="wrap">
            <div className="hm-band">
              <div className="ghost">JOIN</div>
              <h2>Kom langs.<br />Doe mee. Word lid.</h2>
              <p>Niet zeker welk programma bij je past? Loop binnen of doe gratis een keer mee — we kijken samen wat werkt.</p>
              <div className="hm-steps">
                <div className="hm-step"><div className="k">See us</div><div className="d">Kom kijken wat we doen</div></div>
                <div className="hm-step"><div className="k">Try us</div><div className="d">Doe een keer gratis mee</div></div>
                <div className="hm-step"><div className="k">Join us</div><div className="d">Geef je op als lid</div></div>
              </div>
              <div style={{ marginTop: 30, position: "relative" }}>
                <a className="btn btn-lg" style={{ background: "#fff", color: "#1a1a1a" }} onClick={onJoin}>Plan je proefles <Icon name="arrow" size={17} /></a>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.PROTO.Home = Home;
})();