// Main app for itservicekalmar.com — sysadmin command center
const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#5eead4",
  "density": "regular",
  "showGrid": true,
  "monoFont": "JetBrains Mono"
}/*EDITMODE-END*/;

const ACCENTS = ["#5eead4", "#a3e635", "#f59e0b", "#60a5fa", "#f472b6"];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent;

  useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.style.setProperty("--accent", accent);
    document.documentElement.style.setProperty("--mono", `'${t.monoFont}', ui-monospace, monospace`);
    document.documentElement.dataset.density = t.density;
    document.documentElement.dataset.grid = t.showGrid ? "on" : "off";
  }, [t, accent]);

  return (
    <div className="page">
      <div className="bg-grid" aria-hidden="true" />
      <div className="bg-noise" aria-hidden="true" />
      <div className="bg-glow" aria-hidden="true" style={{ background: `radial-gradient(60% 50% at 30% 20%, ${accent}22, transparent 70%)` }} />

      <StatusBar accent={accent} />

      {/* HERO VIDEO SLIDER */}
      <HeroVideoSlider accent={accent} />

      {/* HEADER */}
      <header className="masthead">
        <div className="brand">
          <span className="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 40 40" width="36" height="36">
              <rect x="2" y="2" width="36" height="36" rx="6" fill="none" stroke={accent} strokeWidth="1.5" />
              <path d="M10 14h20M10 20h20M10 26h12" stroke={accent} strokeWidth="1.5" strokeLinecap="square" />
              <circle cx="6" cy="14" r="1.4" fill={accent} />
              <circle cx="6" cy="20" r="1.4" fill={accent} />
              <circle cx="6" cy="26" r="1.4" fill={accent} />
            </svg>
          </span>
          <div className="brand-text">
            <span className="brand-name">itservicekalmar<span style={{ color: accent }}>.com</span></span>
            <span className="brand-sub">// 40 years of uptime · est. 1986</span>
          </div>
        </div>
        <nav className="nav">
          {[
            ["00", "intro", "#hero"],
            ["01", "tjänster", "#svc"],
            ["02", "expertis", "#exp"],
            ["03", "diagnostik", "#diag"],
            ["04", "kontakt", "#contact"],
          ].map(([n, l, h]) => (
            <a key={n} href={h}>
              <span className="nav-n" style={{ color: accent }}>{n}</span>
              <span>{l}</span>
            </a>
          ))}
        </nav>
        <div className="nav-cta">
          <a href="#contact" className="btn btn-primary" style={{ borderColor: accent, color: accent }}>
            <span style={{ background: accent }} className="btn-dot" />
            boka diagnos · gratis
          </a>
        </div>
      </header>

      {/* HERO */}
      <section id="hero" className="hero" data-screen-label="01 Hero">
        <div className="hero-left">
          <div className="kicker">
            <span style={{ background: accent }} className="kicker-dot" />
            <span>SYSTEM ONLINE · KALMAR · SE-SE</span>
          </div>
          <h1 className="h1">
            <span className="h1-line">
              <span className="h1-num" style={{ color: accent }}>$</span>{" "}
              <Typewriter text="40 år av djup IT-expertis." speed={45} />
            </span>
            <span className="h1-line h1-dim">
              <Typewriter text="Levererad av en (1) människa." speed={45} />
            </span>
            <span className="h1-line">
              <Typewriter text="i Kalmar sedan 1986." speed={45} />
              <span className="caret-h1" style={{ background: accent }} />
            </span>
          </h1>
          <p className="lead">
            PC. Mac. Servrar. Personlig service. Inte fyra avdelningar — fyra kärnor i samma skalle. Du lämnar in en trasig maskin, en knepig server eller en obegriplig faktura från ett moln, och får tillbaka något som funkar — med en förklaring du faktiskt förstår.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#contact" style={{ borderColor: accent, color: accent }}>
              <span className="btn-dot" style={{ background: accent }} /> kör diagnostik
            </a>
            <a className="btn btn-ghost" href="#svc">
              ./services --list
            </a>
            <span className="hero-meta">
              <span>tel</span> <b>073-726&nbsp;51&nbsp;63</b>
              <span>·</span>
              <span>svar inom</span> <b>2&nbsp;tim</b>
            </span>
          </div>

          <div className="hero-metrics">
            <Metric label="UPTIME" value="40" unit="år" sub="// sedan 1986, inga driftstopp i karriären" seed={1} accent={accent} />
            <Metric label="TICKETS" value="312k" unit="" sub="// pc, mac, servrar, telefoner" seed={2} accent={accent} />
            <Metric label="SVARSTID" value="2" unit="tim" sub="// medel, vardagar 09–17" seed={3} accent={accent} />
            <Metric label="KARMA" value="98" unit="%" sub="// nöjda kunder, 1452 omdömen" seed={4} accent={accent} />
          </div>
        </div>

        <aside className="hero-right">
          <div className="card card-term">
            <BootLog accent={accent} />
          </div>
          <div className="card card-spec">
            <header className="card-h">
              <span>SPEC · /etc/teknikern</span>
              <span className="card-h-dot" style={{ background: accent }} />
            </header>
            <dl className="spec">
              <div><dt>kernel</dt><dd>human-6.2.lts</dd></div>
              <div><dt>uptime</dt><dd>40y 5m 23d</dd></div>
              <div><dt>shell</dt><dd>/bin/svenska, /bin/english</dd></div>
              <div><dt>cpus</dt><dd>1 (men välomtänkt) — Carl Tunell</dd></div>
              <div><dt>tools</dt><dd>en fungerande coccosnöt, ölkorv &amp; kex</dd></div>
              <div><dt>flags</dt><dd>+empati +tålamod +tystnadsplikt</dd></div>
            </dl>
          </div>
        </aside>
      </section>

      {/* SERVICES */}
      <section id="svc" className="band" data-screen-label="02 Services">
        <header className="band-h">
          <span className="band-tag" style={{ color: accent }}>// 01 — tjänster</span>
          <h2 className="h2">Fyra moduler. Ett huvud.</h2>
          <p className="band-lead">
            Kompetensen är inte uppdelad per disk eller per OS. Det är samma person som dyker ner i ett serverrack klockan 11 och plockar ihop en gammal MacBook klockan 14. Klicka på en modul för att expandera.
          </p>
        </header>
        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.id} s={s} accent={accent} idx={i} />
          ))}
        </div>
      </section>

      {/* EXPERTISE */}
      <section id="exp" className="band band-alt" data-screen-label="03 Expertise">
        <header className="band-h">
          <span className="band-tag" style={{ color: accent }}>// 02 — expertis</span>
          <h2 className="h2">40 år, dokumenterat.</h2>
          <p className="band-lead">
            En kort logfil från 1986 till nu. Ingen kompetens listas som inte använts på en riktig kund senaste tolv månaderna.
          </p>
        </header>
        <div className="exp-grid">
          <Timeline accent={accent} />
          <div className="exp-side">
            <div className="card card-skills">
              <header className="card-h">
                <span>SKILL MATRIX · /proc/teknikern/skills</span>
                <span className="card-h-dot" style={{ background: accent }} />
              </header>
              <SkillMatrix accent={accent} />
            </div>
            <div className="card card-creds">
              <header className="card-h">
                <span>CERTIFIKAT · /etc/creds</span>
                <span className="card-h-dot" style={{ background: accent }} />
              </header>
              <ul className="creds">
                <li><span style={{color:accent}}>▸</span> Microsoft Certified · 2003 → idag</li>
                <li><span style={{color:accent}}>▸</span> Apple Certified Mac Technician</li>
                <li><span style={{color:accent}}>▸</span> Cisco CCNA · återcertifierad 2024</li>
                <li><span style={{color:accent}}>▸</span> VMware VCP-DCV</li>
                <li><span style={{color:accent}}>▸</span> CompTIA A+, Network+, Security+</li>
                <li><span style={{color:accent}}>▸</span> Lödcertifierad IPC-A-610 (riktig löd, inte hot air)</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* DIAGNOSTICS — terminal + monitoring */}
      <section id="diag" className="band" data-screen-label="04 Diagnostics">
        <header className="band-h">
          <span className="band-tag" style={{ color: accent }}>// 03 — diagnostik</span>
          <h2 className="h2">Prova själv. Det här är min vardag.</h2>
          <p className="band-lead">
            Vänster: en riktig terminal — skriv <code>help</code>. Höger: ett (anonymiserat) klipp ur övervakningen som rullar i butiken just nu.
          </p>
        </header>
        <div className="diag-grid-outer">
          <Terminal accent={accent} />
          <DiagnosticPanel accent={accent} />
        </div>
      </section>

      {/* CONTACT */}
      <section id="contact" className="band band-alt" data-screen-label="05 Contact">
        <header className="band-h">
          <span className="band-tag" style={{ color: accent }}>// 04 — kontakt</span>
          <h2 className="h2">Skicka ett paket. Eller en mening.</h2>
          <p className="band-lead">
            Diagnos är alltid gratis. Du får ett pris innan jag börjar — inte en räkning efteråt med ord du inte känner igen.
          </p>
        </header>
        <div className="contact-grid">
          <ContactForm accent={accent} />
          <div className="contact-side">
            <div className="card">
              <header className="card-h"><span>BUTIK · /var/butik</span><span className="card-h-dot" style={{ background: accent }} /></header>
              <dl className="spec">
                <div><dt>adress</dt><dd><a href="https://share.google/lR8ycsQwVQM8dyMVu" target="_blank" rel="noreferrer" style={{ borderBottom: `1px dashed ${accent}` }}>Magistratsgatan 6 A, Kalmar</a></dd></div>
                <div><dt>öppet</dt><dd>mån–fre 09:00–17:00</dd></div>
                <div><dt>telefon</dt><dd><a href="tel:+46737265163" style={{ color: accent }}>073-726 51 63</a></dd></div>
                <div><dt>e-post</dt><dd><a href="mailto:itservice-kalmar@gmx.net" style={{ color: accent }}>itservice-kalmar@gmx.net</a></dd></div>
                <div><dt>tekniker</dt><dd>Carl Tunell</dd></div>
                <div><dt>akut</dt><dd>SMS dygnet runt vid avtal</dd></div>
              </dl>
            </div>
            <div className="card">
              <header className="card-h"><span>PRIS · /etc/pris</span><span className="card-h-dot" style={{ background: accent }} /></header>
              <ul className="pris">
                <li><span>diagnos</span> <b style={{ color: accent }}>0 kr</b></li>
                <li><span>arbete (timme, ex moms)</span> <b>895 kr</b></li>
                <li><span>hembesök Kalmar</span> <b>+295 kr</b></li>
                <li><span>fjärrsupport / ärende</span> <b>fr 395 kr</b></li>
                <li><span>datarekonstruktion</span> <b>offert</b></li>
              </ul>
            </div>
            <pre className="ascii-map" style={{ color: accent }}>
{`     ╭──────────────────────────╮
     │          ┌───┐           │
     │          │ █ │           │
     │          └───┘           │
     │       ▲                  │
     │       │ Magistratsgatan  │
     │   ────┴────── 6 A ────── │
     │                          │
     ╰──────────────────────────╯
        ※ uppskattad gångtid från
          centralen: ~8 min`}
            </pre>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="foot">
        <div className="foot-inner">
          <div className="foot-l">
            <span className="brand-name">itservicekalmar<span style={{ color: accent }}>.com</span></span>
            <span className="foot-sub">// © 1986–2026 · org.nr XXXXXX-XXXX · F-skatt · GDPR-vänlig</span>
          </div>
          <pre className="foot-ascii" style={{ color: accent }}>
{`                    .----------------------------.
   /\\_/\\            |  itservice-kalmar@gmx.net  |
  ( o.o )    ◀──────|  073-726 51 63             |
   > ^ <            |  Magistratsgatan 6 A       |
                    '----------------------------'`}
          </pre>
          <div className="foot-r">
            <span>built locally · no trackers · loaded in</span>
            <span style={{ color: accent }}>{Math.floor(performance.now())}ms</span>
          </div>
        </div>
      </footer>

      {/* TWEAKS */}
      <TweaksPanel>
        <TweakSection label="Tema" />
        <TweakRadio
          label="Läge"
          value={t.theme}
          options={["dark", "light"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENTS}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Densitet"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakToggle
          label="Bakgrundsraster"
          value={t.showGrid}
          onChange={(v) => setTweak("showGrid", v)}
        />
        <TweakSection label="Typografi" />
        <TweakSelect
          label="Monospace"
          value={t.monoFont}
          options={["JetBrains Mono", "IBM Plex Mono", "Geist Mono", "Space Mono"]}
          onChange={(v) => setTweak("monoFont", v)}
        />
      </TweaksPanel>
    </div>
  );
}

function ContactForm({ accent }) {
  const [stage, setStage] = useState(0); // 0 idle, 1 sending, 2 sent
  const [data, setData] = useState({ name: "", email: "", machine: "PC", problem: "" });
  const upd = (k) => (e) => setData({ ...data, [k]: e.target.value });

  const send = (e) => {
    e.preventDefault();
    if (!data.name || !data.problem) return;
    setStage(1);
    setTimeout(() => setStage(2), 1400);
  };

  if (stage === 2) {
    return (
      <div className="form form-done">
        <pre className="form-done-art" style={{ color: accent }}>
{`  ╔══════════════════════╗
  ║  ✓  TICKET CREATED  ║
  ╠══════════════════════╣
  ║  #${String(Math.floor(Math.random()*900000)+100000)}             ║
  ║  ETA: 2 timmar       ║
  ║  status: triaged     ║
  ╚══════════════════════╝`}
        </pre>
        <h3 style={{ color: accent }}>Mottaget. Du hör av mig.</h3>
        <p>Tack <b>{data.name}</b>. Jag tittar på <b>{data.machine}</b> så snart jag är vid datorn — i regel inom 2 timmar på vardagar.</p>
        <button className="btn btn-ghost" onClick={() => { setStage(0); setData({ name: "", email: "", machine: "PC", problem: "" }); }}>
          ./new-ticket
        </button>
      </div>
    );
  }

  return (
    <form className="form" onSubmit={send}>
      <header className="card-h">
        <span>NY ÄRENDE · POST /api/tickets</span>
        <span className="card-h-dot" style={{ background: stage === 1 ? "#facc15" : accent }} />
      </header>
      <label className="field">
        <span><span style={{ color: accent }}>$</span> namn</span>
        <input value={data.name} onChange={upd("name")} placeholder="Anders Andersson" required />
      </label>
      <label className="field">
        <span><span style={{ color: accent }}>$</span> e-post · valfritt</span>
        <input type="email" value={data.email} onChange={upd("email")} placeholder="anders@exempel.se" />
      </label>
      <div className="field">
        <span><span style={{ color: accent }}>$</span> typ av maskin</span>
        <div className="seg">
          {["PC", "Mac", "Server", "Annat"].map((m) => (
            <button
              type="button"
              key={m}
              className={`seg-b ${data.machine === m ? "on" : ""}`}
              style={data.machine === m ? { borderColor: accent, color: accent } : null}
              onClick={() => setData({ ...data, machine: m })}
            >
              {m}
            </button>
          ))}
        </div>
      </div>
      <label className="field">
        <span><span style={{ color: accent }}>$</span> beskriv felet</span>
        <textarea
          value={data.problem}
          onChange={upd("problem")}
          rows={5}
          placeholder="ex: MacBook startar med tre pip, sen mörker. Hände efter resa."
          required
        />
      </label>
      <div className="form-foot">
        <span className="form-meta">→ skickas krypterat · besvaras av en människa · inget callcenter</span>
        <button className="btn btn-primary" type="submit" disabled={stage === 1} style={{ borderColor: accent, color: accent }}>
          {stage === 1 ? (
            <><span className="btn-dot pulse" style={{ background: accent }} /> skickar…</>
          ) : (
            <><span className="btn-dot" style={{ background: accent }} /> ./submit</>
          )}
        </button>
      </div>
    </form>
  );
}

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