// Method 8 — demo · Home / command center + shared PageHead helper.

const { Ico, I, StatCard, AISum, useNav } = window;

// ---- shared page header ----
function PageHead({ eyebrow, title, sub, actions }) {
  return (
    <header className="pg-head">
      <div className="pg-head-l">
        {eyebrow && <div className="eyebrow">{eyebrow}</div>}
        <h1>{title}</h1>
        {sub && <div className="sub">{sub}</div>}
      </div>
      {actions && <div className="pg-head-r">{actions}</div>}
    </header>
  );
}

const QUICK = [
  { id: 'gap', hue: ['#eff8ff', '#0ba5ec'], icon: I.file, t: 'Gap assessment', d: '165 standards-conformance assessments across 15 sites. Answer, and conformance recalculates live.' },
  { id: 'workshop', hue: ['#f4f3ff', '#6938ef'], icon: I.poll, t: 'Formative workshop', d: 'Run a facilitated maturity session. The room polls live; the AI synthesises the result in the moment.' },
  { id: 'survey', hue: ['#f0fdf9', '#0e9384'], icon: I.activity, t: 'Culture survey', d: 'Send a safety-culture pulse to frontline workers and watch perception scores land by site.' },
  { id: 'os', hue: ['#fef6ee', '#e04f16'], icon: I.layers, t: 'Operating system', d: 'You are live on Assess & Sense. See the whole operating system and what comes next.' },
];

function HomeView() {
  const { go } = useNav();
  return (
    <>
      <AISum
        head={<>Group conformance is <b>68%</b> (+6 QoQ) with <b>71%</b> of assessments complete. The St&nbsp;Ives critical-risk workshop is <b>live now</b>, and the Safety Culture pulse is collecting responses.</>}
        act="Open the live workshop, or review the survey results landing this morning."/>

      <PageHead
        eyebrow={<><span>Group HSE assurance</span><span className="dot"/><span>15 sites · 4 regions</span><span className="dot"/><span className="live">Live — synced 8 min ago</span></>}
        title="Good morning, Priya"
        sub={<>Everything Gold Fields runs on Method 8, in one place. You're using <b>Assess</b> and <b>Sense</b> today — gap assessments, formative workshops and culture surveys.</>}
        actions={<>
          <button className="btn btn-ai"><Ico d={I.spark} sw={2}/> Ask Method 8</button>
          <button className="btn btn-sec"><Ico d={I.ext} sw={2}/> Board pack</button>
        </>}/>

      <section className="stats" style={{ marginBottom: 22 }}>
        <StatCard hue="violet" icon={I.shield} trend="+6 pts" trendDir="up" label="Group conformance" value="68" unit="%" foot={<>3 sites below 50%</>}/>
        <StatCard hue="fuchsia" icon={I.file} trend="71%" trendDir="up" label="Gap assessments" value="117" unit="/ 165" foot={<><b>48</b> in progress</>}/>
        <StatCard hue="teal" icon={I.activity} trend="collecting" trendDir="flat" label="Culture pulse" value="1,240" unit="sent" foot={<><b>61%</b> responded</>}/>
        <StatCard hue="violet" icon={I.poll} trend="live now" trendDir="up" label="Workshops run" value="9" foot={<>St Ives · in session</>}/>
      </section>

      <div style={{ marginBottom: 12, font: '600 13px/16px Inter', color: 'var(--ink3)', textTransform: 'uppercase', letterSpacing: '.4px' }}>Jump in</div>
      <section className="quick" style={{ marginBottom: 24 }}>
        {QUICK.map(q => (
          <div key={q.id} className="qcard" onClick={() => go(q.id)}>
            <div className="qic" style={{ background: q.hue[0], color: q.hue[1] }}><Ico d={q.icon} sw={2} size={20}/></div>
            <div className="qt">{q.t}</div>
            <div className="qd">{q.d}</div>
            <div className="qgo">Open <Ico d={I.arrowR} sw={2.4} size={13}/></div>
          </div>
        ))}
      </section>

      <div className="grid-2">
        <div className="card">
          <div className="card-head">
            <div className="card-head-l"><h2>What needs you</h2><div className="sub">The AI keeps this current so you don't chase it</div></div>
            <span className="badge amber">4</span>
          </div>
          <div className="card-body" style={{ paddingTop: 6 }}>
            {[
              ['Approve findings', 'Tailings & dams · Damang', 'ok', 'Approve'],
              ['Review live workshop result', 'Critical risk · St Ives', 'ai', 'Open'],
              ['Survey results ready', 'Safety culture · group', 'ok', 'View'],
              ['Provide data', 'Cyanide mgmt · Salares Norte', 'warn', 'Submit'],
            ].map(([t, s, ic, cta], i) => (
              <div key={i} className="feed-item" style={{ borderBottom: i < 3 ? '1px solid var(--line2)' : 'none' }}>
                <div className={`feed-ic ${ic}`}><Ico d={ic === 'ok' ? I.check : ic === 'ai' ? I.spark : I.file} sw={2.2}/></div>
                <div style={{ flex: 1 }}><div className="feed-msg"><b>{t}</b></div><div className="feed-meta">{s}</div></div>
                <button className="btn btn-sec btn-sm" onClick={() => { if (i === 1) go('workshop'); else if (i === 2) go('survey'); }}>{cta}</button>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div className="card clk" onClick={() => go('os')}>
            <div className="card-head"><div className="card-head-l"><h2>Your operating system</h2><div className="sub">2 of 5 phases live</div></div><span className="card-link">See map <Ico d={I.arrowR} sw={2} size={12}/></span></div>
            <div className="card-body" style={{ paddingTop: 14 }}>
              <div className="osspine">
                {['Design', 'Govern', 'Assess', 'Improve', 'Sense'].map((s, i) => (
                  <React.Fragment key={s}>
                    {i > 0 && <span className="arr">›</span>}
                    <div className={`osstop ${(s === 'Assess' || s === 'Sense') ? 'on' : 'off'}`}>{s}{!(s === 'Assess' || s === 'Sense') && <span className="lk"> 🔒</span>}</div>
                  </React.Fragment>
                ))}
              </div>
              <div className="osrail-foot" style={{ marginTop: 11 }}>You're live on <b style={{ color: 'var(--ink2)' }}>Assess</b> and <b style={{ color: 'var(--ink2)' }}>Sense</b>. The rest of the system is ready when you are.</div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><div className="card-head-l"><h2>Recent activity</h2></div></div>
            <div className="card-body" style={{ paddingTop: 6 }}>
              <div className="feed-item"><div className="feed-ic ai"><Ico d={I.spark} sw={2.2}/></div><div><div className="feed-msg"><b>AI</b> synthesised poll 4 — <b>field verification</b> rated lowest</div><div className="feed-meta"><span className="tag ai">workshop</span> live</div></div></div>
              <div className="feed-item"><div className="feed-ic ok"><Ico d={I.check} sw={2.4}/></div><div><div className="feed-msg">Culture pulse passed <b>60% response</b> at St Ives</div><div className="feed-meta">12 min ago</div></div></div>
              <div className="feed-item"><div className="feed-ic warn"><Ico d={I.file} sw={2}/></div><div><div className="feed-msg"><b>High-Priority gap</b> · Business Partner mgmt · Safety Standard, St Ives</div><div className="feed-meta">38 min ago</div></div></div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { PageHead, HomeView });