/* pv-d.jsx — Variant D · Narrativ / cinematisk. Exposes window.VariantD. */

const TitleD = ({f}) => <span>{f.pre}<em>{f.em}</em></span>;
const sIcon = (d) => <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">{d}</svg>;
const NavIcons = {
  hjem:<path d="M2 7l6-5 6 5M4 6v7h8V6"/>,
  assistent:<><path d="M2.5 3.5h11v7h-6l-3 2.5V10.5h-2z"/></>,
  innboks:<><path d="M3 4h10v8H3z"/><path d="M3 5l5 4 5-4"/></>,
  saker:<><rect x="2.5" y="3" width="11" height="10" rx="1"/><path d="M2.5 6h11M6 1.5v3M10 1.5v3"/></>,
  tidslogg:<><circle cx="8" cy="8" r="6"/><path d="M8 4.5V8l2.5 1.5"/></>,
  bibliotek:<><path d="M3 3h4.5v10H3zM8.5 3H13v10H8.5z"/></>,
};
function Sidebar({active}){
  const item = (k,label,ct)=>(
    <span className={'d-nav'+(active===k?' on':'')}>{sIcon(NavIcons[k])} {label}{ct?<span className="ct">{ct}</span>:null}</span>
  );
  return (
    <aside className="d-side">
      {item('hjem','Hjem')}{item('assistent','Assistent')}{item('innboks','Innboks','9+')}
      {item('saker','Saker')}{item('tidslogg','Tidslogg','9+')}{item('bibliotek','Bibliotek')}
    </aside>
  );
}
function TopBar({title}){
  return (
    <div className="d-topbar">
      <div className="d-topbar-brand"><img src="assets/logo-blue.png" alt="" /> Nordivé</div>
      <div className="d-topbar-main">
        <span className="d-topbar-title">{title}</span>
        <div className="d-topbar-right">
          <span className="d-logg">{sIcon(<><circle cx="8" cy="8" r="6"/><path d="M8 4.5V8l2.5 1.5"/></>)} Logg tid <span className="ct">15</span></span>
          <span className="d-avatar">JS</span>
          <span className="d-logout">Logg ut</span>
        </div>
      </div>
    </div>
  );
}

/* ── HOME dashboard (hero visual) ──────────────────────── */
const H_FRISTER = [
  {dd:'23',mm:'jun',t:'Tingretten Oslo — Tilsvar i sak 26-450',m:'Domstol',w:'i morgen',c:'red'},
  {dd:'25',mm:'jun',t:'Hansen AS — Svar på forliksforslag',m:'Klient',w:'om 3 d',c:'amber'},
  {dd:'27',mm:'jun',t:'Borgarting — Bekreftelse av anke',m:'Domstol',w:'om 5 d',c:'mid'},
  {dd:'30',mm:'jun',t:'Strand & Kvist — Gjennomgang av NDA',m:'Kontrakt',w:'om 8 d',c:'mid'},
];
const H_MAIL = [
  {t:'Forliksforslag i sak 26-450',m:'Adv. Berg · motpart',time:'12m',read:false},
  {t:'Spørsmål om akseptfrist',m:'Klient · Kari Berntsen',time:'41m',read:false},
  {t:'Berammet hovedforhandling 14.08',m:'Domstoladministrasjonen',time:'1t',read:true},
  {t:'Tilsvar mottatt — Auron SPA',m:'Motpart · prosessfullmektig',time:'2t',read:true},
  {t:'Honoraroppgave til gjennomgang',m:'Intern · regnskap',time:'3t',read:true},
];
function HomeDashboard(){
  return (
    <div className="d-app">
      <TopBar title="Hjem" />
      <div className="d-grid home">
        <Sidebar active="hjem" />
        <div className="h-main">
          <div className="h-greet"><em>God morgen,</em> Sindre</div>
          <div className="h-eye">Mandag · 22. juni · 2026</div>
          <span className="h-pill"><span className="d"></span> 4 saker haster i dag</span>

          <div className="h-summary">
            <span className="lbl">Oppsummering · i dag så langt</span>
            <span className="val">8 nye e-poster, 2 trenger oppfølging — Tingretten bekreftet sak 26-450.</span>
            <span className="ar">→</span>
          </div>

          <div className="h-q">Hva vil du gjøre i dag?</div>
          <div className="h-actions">
            <div className="h-act">
              <span className="h-act-ic">{sIcon(<><path d="M3 4h10v8H3z"/><path d="M3 5l5 4 5-4"/></>)}</span>
              <span className="h-act-tag">Haster</span>
              <div className="h-act-t">Gjennomgå innboksen</div>
              <div className="h-act-d">4 saker haster · 2 frister ≤ 5 dager</div>
            </div>
            <div className="h-act">
              <span className="h-act-ic">{sIcon(<path d="M2.5 3.5h11v7h-6l-3 2.5V10.5h-2z"/>)}</span>
              <div className="h-act-t">Spør Assistenten</div>
              <div className="h-act-d">Søk i Lovdata, regn ut frister, analyser dokumenter — alt i én chat.</div>
            </div>
            <div className="h-act">
              <span className="h-act-ic">{sIcon(<><rect x="2.5" y="3" width="11" height="10" rx="1"/><path d="M2.5 6h11"/></>)}</span>
              <div className="h-act-t">Åpne en sak</div>
              <div className="h-act-d">10 aktive saker · 3 haster</div>
            </div>
          </div>

          <div className="h-stats">
            <span><b>10</b> aktive saker</span><span className="sep">·</span>
            <span><b>4</b> haster</span><span className="sep">·</span>
            <span><b>5</b> frister neste 30 d</span><span className="sep">·</span>
            <span><b>29</b> uleste</span>
          </div>

          <div className="h-lists">
            <div>
              <div className="h-list-h"><span className="t">Haster · neste 7 dager <b>4</b></span><span className="lnk">Se alle →</span></div>
              {H_FRISTER.map((f,i)=>(
                <div className="h-frist" key={i}>
                  <span className="h-date"><span className="dd">{f.dd}</span><span className="mm">{f.mm}</span></span>
                  <span className="h-frist-main"><span className="h-frist-t">{f.t}</span><span className="h-frist-m">{f.m}</span></span>
                  <span className={'h-when '+f.c}>{f.w}</span>
                </div>
              ))}
            </div>
            <div>
              <div className="h-list-h"><span className="t">Siste e-poster <b>5</b></span><span className="lnk">Åpne innboks →</span></div>
              {H_MAIL.map((m,i)=>(
                <div className="h-mail" key={i}>
                  <span className={'dot'+(m.read?' read':'')}></span>
                  <span className="h-mail-main"><span className="h-mail-t">{m.t}</span><span className="h-mail-m">{m.m}</span></span>
                  <span className="h-mail-time">{m.time}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="h-cmd"><span className="star">✳</span> Spør assistenten… <span className="kbd">⌘J</span></div>
        </div>
      </div>
    </div>
  );
}

/* ── CASE dashboard (annotated deep-dive) ──────────────── */
const CALLOUTS = [
  {n:'1', t:'Sakens tilstand på tre sekunder', b:<>Neste frist, siste melding og <b>AI-status fra siste analyse</b> — øverst, alltid. Du slipper å lete for å vite hvor saken står.</>},
  {n:'2', t:'AI-anbefalte neste steg', b:<>KI leser innkommende meldinger og foreslår konkrete handlinger. Hver anbefaling viser <b>hvilken e-post den kommer fra</b>.</>},
  {n:'3', t:'Handle uten å bytte verktøy', b:<>Generer dokumenter, gjør filer klare for Aktørportalen, eller start en workflow — <b>rett fra saken</b>.</>},
  {n:'4', t:'Alle dokumenter i saken', b:<>Last opp eller dra inn filer — de kobles automatisk til saken og blir <b>søkbare</b>.</>},
  {n:'5', t:'Én tidslinje — klar til fakturering', b:<>Meldinger, dokumenter og tidslogg i én strøm. <b>Loggført tid</b> følger saken helt til faktura.</>},
];
function CaseDashboard({annotated}){
  const P = (n) => annotated ? <span className="d-pin">{n}</span> : null;
  return (
    <div className="d-app">
      <TopBar title="Saker" />
      <div className="d-grid">
        <Sidebar active="saker" />
        <div className="d-main">
          <div className="d-crumb"><span className="lnk">‹ Saker</span> DEMO-2026-001 <span className="st">Aktiv</span><span className="d-edit">✎ Rediger sak</span></div>
          <div className="d-title">Kari Berntsen · <em>Eiendomstvist, Strandvegen 12</em></div>
          <div className="d-meta">Eiendomsrett · 3 meldinger</div>
          <div className="d-tabs"><span className="d-tab on">Oversikt</span><span className="d-tab">Aktivitet <span className="mini">3</span></span><span className="d-tab">Notater</span></div>
          <div className="d-pinwrap">{P('1')}
            <div className="d-kpis">
              <div className="d-kpi"><div className="l">Neste frist</div><div className="v red">23. juni</div><div className="s">— i morgen · lukkes etter 3 dager</div></div>
              <div className="d-kpi"><div className="l">Meldinger</div><div className="v">3</div><div className="s">Sist: i dag 12:34</div></div>
              <div className="d-kpi"><div className="l">AI-status</div><div className="v" style={{fontSize:'1rem'}}>Klient</div><div className="s">Fra siste analyse</div></div>
            </div>
          </div>
          <div className="d-pinwrap">{P('2')}
            <div className="d-rec-head"><span className="d-rec-h">Anbefalinger</span><span className="d-rec-edit">Rediger sak</span></div>
            <div className="d-rec"><span className="bd"></span><div className="tx"><div className="tt">Forbered vurdering av forliksforslaget, jf. § 110.</div><div className="src">Foreslått av AI fra: «Re: Sak 26-450 — orientering»</div></div><span className="go">→</span></div>
            <div className="d-rec"><span className="bd"></span><div className="tx"><div className="tt">Avklar om det er akseptfrist på forliksforslaget.</div><div className="src">Foreslått av AI fra: «Re: Sak 26-450 — orientering»</div></div><span className="go">→</span></div>
            <div className="d-rec"><span className="bd"></span><div className="tx"><div className="tt">Ring klient kl. 14 som avtalt.</div><div className="src">Foreslått av AI fra: «Re: Sak 26-450 — orientering»</div></div><span className="go">→</span></div>
          </div>
          <div className="d-pinwrap">{P('5')}
            <div className="d-aktivitet">
              <div className="d-akt-h">Aktivitet</div>
              <div className="d-akt-row"><span><b>3</b> meldinger · <b>3</b> dokumenter · <b>1t 30min</b> tidslogg</span><span className="lnk">Se hele tidslinjen →</span></div>
            </div>
          </div>
        </div>
        <aside className="d-rail">
          <div className="d-pinwrap">{P('3')}
            <div className="d-rail-h">Handlinger</div>
            <div className="d-act">{sIcon(<path d="M4 2h6l3 3v9H4z"/>)} Generer dokument <span className="go">›</span></div>
            <div className="d-act">{sIcon(<><rect x="2.5" y="3.5" width="11" height="9"/><path d="M2.5 6.5h11"/></>)} Aktørportalen <span className="go">›</span></div>
            <div className="d-act">{sIcon(<><circle cx="4" cy="4" r="1.5"/><circle cx="4" cy="12" r="1.5"/><circle cx="12" cy="8" r="1.5"/><path d="M4 5.5v5M5.5 4H9a2 2 0 012 2M5.5 12H9a2 2 0 002-2"/></>)} Workflow <span className="go">›</span></div>
          </div>
          <div className="d-pinwrap">{P('4')}
            <div className="d-rail-h">Dokumenter</div>
            <div className="d-doc">{sIcon(<path d="M4 2h6l3 3v9H4z"/>)} Stevning.pdf</div>
            <div className="d-doc">{sIcon(<path d="M4 2h6l3 3v9H4z"/>)} Bevisoppgave.pdf</div>
            <div className="d-doc">{sIcon(<path d="M4 2h6l3 3v9H4z"/>)} Tilsvar_utkast.docx</div>
            <div className="d-upload">+ Last opp dokument</div>
          </div>
        </aside>
      </div>
    </div>
  );
}

/* ── process steps (improved timeline) ─────────────────── */
const STEPS = [
  {n:'1', t:'Fang', b:'KI leser innboksen og fanger preklusive frister, avsender og sak — automatisk, før du har åpnet meldingen.', id:'triage', from:'Innkommende e-post', to:'Frist fanget', url:'innboks'},
  {n:'2', t:'Forstå', b:'Fristen forankres i Lovdata og regnes ut mot rettsferie, helg og helligdag — med lovgrunnlaget synlig.', id:'assistent', from:'Tråd', to:'Lovdata-forankret svar', url:'assistent'},
  {n:'3', t:'Foreslå', b:'Svarutkast og dokumenter bygges fra dine egne maler, koblet til riktig sak og klare i editoren.', id:'maler', from:'Mal', to:'Ferdig utkast', url:'maler'},
  {n:'4', t:'Godkjenn', b:'Du godkjenner, tiden logger seg selv, og alt pushes videre til fakturasystemet.', id:'tidslogg', from:'Ett klikk', to:'Logget & fakturerbart', url:'tidslogg', keep:'Du beholder kontrollen — hele veien.'},
];

/* ── system explorer (interactive) ─────────────────────── */
function SystemExplorer(){
  const [active,setActive] = React.useState(0);
  const f = FEATURES[active];
  return (
    <div className="pc">
      <div className="pc-grid">
        <nav className="pc-tabs">
          {FEATURES.map((ff,i)=>(
            <button className={'pc-tab'+(i===active?' on':'')} key={ff.id} onClick={()=>setActive(i)}>
              <span className="pc-tab-n">{ff.num}</span>
              <span><span className="pc-tab-t">{ff.cat}</span><span className="pc-tab-m">{ff.pre}{ff.em}</span></span>
            </button>
          ))}
        </nav>
        <div className="pc-stage">
          <div className="pc-card">
            <div className="pc-card-head">
              <div>
                <span className="feat-eye">{f.num} · {f.cat}</span>
                <h3><TitleD f={f}/></h3>
                <p>{f.desc}</p>
              </div>
            </div>
            <div className="pc-card-body pc-anim" key={f.id}>
              <ul className="checks">{f.bullets.map((b,j)=><li key={j}>{b}</li>)}</ul>
              <div><Panel id={f.id}/>
                <div className="parea">{f.parea.map((p,j)=><span className={j===0?'on':''} key={j}>{p}</span>)}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function VariantD(){
  return (
    <div className="page vD-page">
      {/* HERO */}
      <section className="dhero">
        <div className="wrap">
          <div className="dhero-top">
            <div className="eye">Produktet</div>
            <h1>Dagen begynner <em>ferdig sortert.</em></h1>
            <p className="dhero-sub">Nordivé åpner med dagens viktigste: hva som haster, hvilke frister som nærmer seg, og hva KI foreslår at du tar først. Resten av det administrative går av seg selv — du beholder kontrollen der skjønnet kreves.</p>
            <div className="dhero-btns">
              <a className="d-btn d-btn-primary" href="#">Book en demo
                <svg viewBox="0 0 16 16" width="15" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
              <button className="dhero-play"><span className="pp"><svg viewBox="0 0 16 16" width="12" fill="var(--navy)"><path d="M4 3l9 5-9 5z"/></svg></span> Se hvordan det funker</button>
            </div>
          </div>
        </div>
        <div className="wrapw"><HomeDashboard/></div>
      </section>

      {/* TRUST STRIP */}
      <section className="d-strip">
        <div className="wrapw">
          <div className="d-strip-in">
            <span className="d-strip-label">I pilot med norske advokatfirmaer</span>
            <div className="d-strip-items">
              <span className="d-strip-item">Tingretten Oslo</span>
              <span className="d-strip-item">Lovdata Pro <span className="badge">Integrert</span></span>
              <span className="d-strip-item">Brønnøysund</span>
              <span className="d-strip-item">Aktørportalen</span>
              <span className="d-strip-item">Microsoft 365 <span className="badge">SSO</span></span>
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS STORY */}
      <section className="d-flow">
        <div className="wrap">
          <div className="d-sec-head">
            <div className="eye">Slik jobber Nordivé</div>
            <h2>Fra innboks til <em>godkjent</em> — i bakgrunnen.</h2>
            <p>Fire steg som går av seg selv. Du blir bedt inn der vurderingen krever en advokat — ikke før.</p>
          </div>
          <div className="d-steps">
            {STEPS.map((s,i)=>(
              <div className="d-step" key={s.id}>
                <div className="d-gutter">
                  <span className="d-stepnum">{s.n}</span>
                  {i<STEPS.length-1 && <span className="d-thread"></span>}
                </div>
                <div>
                  <div className="d-step-eye">Steg 0{s.n}</div>
                  <h3 className="d-step-t">{s.t}</h3>
                  <p className="d-step-b">{s.b}</p>
                  <span className="d-io"><span className="from">{s.from}</span><span className="ar">→</span><span className="to">{s.to}</span></span>
                  {s.keep && <div style={{marginTop:'1rem'}}><span className="d-step-keep">✓ {s.keep}</span></div>}
                </div>
                <div className="d-step-shot">
                  <div className="shot-frame">
                    <div className="shot-bar"><span className="shot-dots"><i></i><i></i><i></i></span><span className="shot-url">app.nordiveai.no/{s.url}</span></div>
                    <div className="shot-body"><Panel id={s.id}/></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* UNIFIED SYSTEM — interactive explorer */}
      <section className="d-system">
        <div className="wrap">
          <div className="d-sec-head">
            <div className="eye">Ett system</div>
            <h2>Seks funksjoner, <em>én</em> arbeidsflyt.</h2>
            <p>Velg en funksjon for å se den i produktet. Alt henger sammen i samme sak — ingen kopiering mellom verktøy, ingen tapt kontekst.</p>
          </div>
          <SystemExplorer/>
        </div>
      </section>

      {/* SAKER DEEP-DIVE (annotated) */}
      <section className="d-saker">
        <div className="wrap">
          <div className="d-sec-head">
            <div className="eye">Produktet · Saker</div>
            <h2>Hver sak samlet — <em>med anbefalinger.</em></h2>
            <p>Én side per sak: klient, frister, dokumenter og aktivitet. Pluss det advokaten faktisk trenger — neste steg, foreslått av assistenten.</p>
          </div>
          <div className="d-saker-hint"><span className="pl">+</span> Hvert nummer peker på hvor i saksbildet det skjer</div>
        </div>
        <div className="wrapw"><CaseDashboard annotated /></div>
        <div className="wrapw">
          <div className="d-callouts">
            {CALLOUTS.map((c)=>(
              <div className="d-callout" key={c.n}>
                <span className="d-callout-n">{c.n}</span>
                <div><h4 className="d-callout-t">{c.t}</h4><p className="d-callout-b">{c.b}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NAVY TRUST BAND */}
      <section className="d-trust">
        <div className="wrap">
          <div className="eye">Sikkerhet</div>
          <h2>Bygget for <em>taushetsplikt.</em></h2>
          <p>Norsk hostet på Azure Norway East, KI-inferens i EU-låst arkitektur, og ingen lagring av klientdata. Zero-Data Retention er ikke et tillegg — det er fundamentet.</p>
          <div className="d-certs">
            <span className="d-cert">Norsk hostet</span>
            <span className="d-cert">EU-data</span>
            <span className="d-cert">GDPR-compliant</span>
            <span className="d-cert">Zero-Data Retention</span>
            <span className="d-cert">Microsoft SSO</span>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="d-cta">
        <div className="wrap">
          <h2>Gi advokatene tiden <em>tilbake.</em></h2>
          <p>Vi er i pilotfase og tar inn et begrenset antall firmaer. Etter en kort, uforpliktende demo kan firmaet ditt starte — med direkte linje til teamet.</p>
          <div className="d-cta-btns">
            <a className="d-btn d-btn-primary" href="#">Søk om pilot-tilgang
              <svg viewBox="0 0 16 16" width="15" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
            <a className="d-btn d-btn-ghost" href="#">Book en demo</a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.VariantD = VariantD;
window.HomeDashboard = HomeDashboard;