// Guide / Onboarding — how the league works + FAQ + calendar export
const GuideScreen = ({ tweaks }) => {
  const [openFaq, setOpenFaq] = useState(0);
  const steps = window.WZN.GUIDE_STEPS;
  const faq = window.WZN.FAQ_ITEMS;

  return (
    <div className="guide-screen">
      {/* Intro hero */}
      <div className="guide-hero" style={{borderColor: tweaks.accent}}>
        <div className="gh-stamp">
          <span className="gh-code" style={{color: tweaks.accent, borderColor: tweaks.accent}}>BRIEFING / 13</span>
          <span className="gh-classified">CLASSIFICATION · OPEN</span>
        </div>
        <h1 className="gh-title">SLIK FUNGERER<br/><span style={{color: tweaks.accent}}>WZN LEAGUE</span></h1>
        <p className="gh-lede">
          Ny her? Bra. Det tar 15 minutter å forstå alt. Vi har delt det ned i 4 steg —
          fra registrering til hvordan poeng telles og hvordan vi unngår juks.
          Helt på bunnen finner du FAQ og kalenderen for hele sesongen.
        </p>
        <div className="gh-meta">
          <div className="gh-meta-cell">
            <span>LESETID</span><b>15 MIN</b>
          </div>
          <div className="gh-meta-cell">
            <span>SIST OPPDATERT</span><b>11.05.2026</b>
          </div>
          <div className="gh-meta-cell">
            <span>SESONG</span><b>05 / 2026</b>
          </div>
          <div className="gh-meta-cell">
            <span>SPRÅK</span><b>NORSK · EN</b>
          </div>
        </div>
      </div>

      {/* Steps */}
      <div className="panel">
        <SectionHeader
          code="STEG"
          title="DE 4 STEGENE"
          subtitle="Fra null til klar på matchday"
          accent={tweaks.accent}
        />
        <div className="guide-steps">
          {steps.map((s, i) => (
            <div key={s.n} className="guide-step">
              <div className="gs-num" style={{borderColor: tweaks.accent}}>
                <div className="gs-num-n" style={{color: tweaks.accent}}>{s.n}</div>
                <div className="gs-num-t">{s.time}</div>
              </div>
              <div className="gs-body">
                <h3 className="gs-title">{s.title}</h3>
                <p className="gs-text">{s.body}</p>
              </div>
              {i < steps.length - 1 && <div className="gs-arrow">↓</div>}
            </div>
          ))}
        </div>
      </div>

      {/* lp points explainer */}
      <div className="panel">
        <SectionHeader
          code="P01"
          title="Ligapoeng · UTREGNING"
          subtitle="Slik blir tallene til"
          accent={tweaks.accent}
        />
        <div className="LP-grid">
          <div className="LP-formula">
            <div className="wf-row">
              <span className="wf-l">PLACEMENT-POENG</span>
              <span className="wf-r" style={{color: tweaks.accent}}>opptil 70p</span>
            </div>
            <div className="wf-table">
              <div className="wfc">1st<b style={{color: tweaks.accent}}>70</b></div>
              <div className="wfc">2nd<b>50</b></div>
              <div className="wfc">3rd<b>40</b></div>
              <div className="wfc">4-5<b>30</b></div>
              <div className="wfc">6-10<b>20</b></div>
              <div className="wfc">11-15<b>12</b></div>
              <div className="wfc">16-25<b>6</b></div>
              <div className="wfc">26+<b>0</b></div>
            </div>
            <div className="wf-plus">+</div>
            <div className="wf-row">
              <span className="wf-l">KILL-POENG</span>
              <span className="wf-r" style={{color: tweaks.accent}}>5 per kill</span>
            </div>
            <div className="wf-eq">=</div>
            <div className="wf-row final">
              <span className="wf-l">TOTAL PER GAME</span>
              <span className="wf-r big" style={{color: tweaks.accent}}>Ligapoeng</span>
            </div>
          </div>
          <div className="LP-example">
            <div className="we-head">EKSEMPEL</div>
            <div className="we-title">FROST_magnus34 · MD-09 G3</div>
            <div className="we-line"><span>2nd plass</span><b>50</b></div>
            <div className="we-line"><span>9 kills × 5</span><b>45</b></div>
            <div className="we-line total"><span>TOTALT G3</span><b style={{color: tweaks.accent}}>95</b></div>
            <div className="we-foot">Beste 4 av 5 games per matchday teller i sesongtabellen</div>
          </div>
        </div>
      </div>

      {/* Division ladder */}
      <div className="panel">
        <SectionHeader
          code="D01"
          title="DIVISJONSSYSTEMET"
          subtitle="Opprykk · nedrykk · playoff"
          accent={tweaks.accent}
        />
        <div className="div-ladder">
          <div className="dl-div d1">
            <div className="dl-head">
              <div className="dl-tag" style={{background: tweaks.accent, color:'#000'}}>DIV.1</div>
              <div className="dl-name">ELITE · 25 LAG</div>
            </div>
            <div className="dl-rows">
              <div className="dl-row promo"><span>POS 1-3</span><b>PREMIE-FORDELING</b></div>
              <div className="dl-row"><span>POS 4-21</span><b>TRYGT · BLIR I DIV.1</b></div>
              <div className="dl-row playoff"><span>POS 22-23</span><b>PLAYOFF MOT D2-3 og D2-4</b></div>
              <div className="dl-row demote"><span>POS 24-25</span><b style={{color: tweaks.accent}}>↓ RYKKER NED</b></div>
            </div>
          </div>
          <div className="dl-arrows">
            <div className="dl-up">↑ OPPRYKK</div>
            <div className="dl-down" style={{color: tweaks.accent}}>↓ NEDRYKK</div>
          </div>
          <div className="dl-div d2">
            <div className="dl-head">
              <div className="dl-tag">DIV.2</div>
              <div className="dl-name">CHALLENGER · 25 LAG</div>
            </div>
            <div className="dl-rows">
              <div className="dl-row promo"><span>POS 1-2</span><b style={{color: tweaks.accent}}>↑ DIREKTE OPPRYKK</b></div>
              <div className="dl-row playoff"><span>POS 3-4</span><b>PLAYOFF MOT D1-22 og D1-23</b></div>
              <div className="dl-row"><span>POS 5-25</span><b>BLIR I DIV.2</b></div>
            </div>
          </div>
        </div>
      </div>

      {/* Calendar export + actions */}
      <div className="dual">
        <div className="panel">
          <SectionHeader
            code="C01"
            title="LEGG SESONGEN I KALENDEREN"
            subtitle="Alle matchdays · 1 klikk"
            accent={tweaks.accent}
          />
          <div className="cal-strip">
            {["MD-10","MD-11","MD-12","MD-13","MD-14","MD-15","MD-16","MD-17"].map((m, i) => (
              <div key={m} className={`cal-cell ${i === 0 ? "next" : ""}`}>
                <div className="cal-m" style={{color: i === 0 ? tweaks.accent : null}}>{m}</div>
                <div className="cal-d">{13 + i*7}.05</div>
                <div className="cal-t">20:00</div>
              </div>
            ))}
          </div>
          <div className="cal-actions">
            <button className="cta cta-primary" style={{background: tweaks.accent, borderColor: tweaks.accent}}>
              <span>↓ EKSPORTER .ICS</span>
            </button>
            <button className="ghost-btn">GOOGLE CALENDAR ↗</button>
            <button className="ghost-btn">APPLE CALENDAR ↗</button>
            <button className="ghost-btn">DISCORD BOT-VARSEL ↗</button>
          </div>
        </div>

        <div className="panel">
          <SectionHeader
            code="V01"
            title="VERIFISERING · 4 STEG"
            subtitle="Slik blir resultater til poeng"
            accent={tweaks.accent}
          />
          <ol className="verify-steps">
            <li>
              <span className="vs-n" style={{color: tweaks.accent}}>1</span>
              <div>
                <b>Kaptein laster opp screenshot</b>
                <p>Lobby-scoreboard + endscreen-placement, innen 10 min etter game.</p>
              </div>
            </li>
            <li>
              <span className="vs-n" style={{color: tweaks.accent}}>2</span>
              <div>
                <b>AI ekstraherer tall</b>
                <p>Vi leser scoreboard automatisk og sammenligner med innrapporterte tall.</p>
              </div>
            </li>
            <li>
              <span className="vs-n" style={{color: tweaks.accent}}>3</span>
              <div>
                <b>Diskrepanser flagges</b>
                <p>Avvik &gt; 0 går til admin manuelt. Resten godkjennes automatisk på &lt; 60 sek.</p>
              </div>
            </li>
            <li>
              <span className="vs-n" style={{color: tweaks.accent}}>4</span>
              <div>
                <b>Poeng telles inn</b>
                <p>LP-tabell og leaderboard oppdateres innen 2 min etter godkjenning.</p>
              </div>
            </li>
          </ol>
        </div>
      </div>

      {/* FAQ */}
      <div className="panel">
        <SectionHeader
          code="FAQ"
          title="OFTE STILTE SPØRSMÅL"
          subtitle="Trykk for å åpne"
          accent={tweaks.accent}
        />
        <div className="faq-list">
          {faq.map((f, i) => {
            const open = openFaq === i;
            return (
              <div key={i} className={`faq-row ${open ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpenFaq(open ? -1 : i)}>
                  <span className="faq-q-n" style={{color: tweaks.accent}}>{String(i+1).padStart(2,"0")}</span>
                  <span className="faq-q-t">{f.q}</span>
                  <span className="faq-q-tog" style={{color: tweaks.accent}}>{open ? "−" : "+"}</span>
                </button>
                {open && <div className="faq-a">{f.a}</div>}
              </div>
            );
          })}
        </div>
      </div>

      {/* CTA bottom */}
      <div className="panel guide-end">
        <div className="ge-stamp" style={{borderColor: tweaks.accent}}>BRIEF END</div>
        <h2 className="ge-title">KLAR TIL Å MELDE PÅ LAGET?</h2>
        <p className="ge-sub">Sesong 06 starter 01.06.2026 · registrering åpen til 25.05</p>
        <div className="ge-cta">
          <button className="cta cta-primary big" style={{background: tweaks.accent, borderColor: tweaks.accent}}>
            <span>REGISTRER LAG</span> <span>▶</span>
          </button>
          <button className="cta cta-ghost">DISCORD · SPØR ADMIN ↗</button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { GuideScreen });