// home-sections.jsx — interactive blocks: audience, sample Q, scale, verify, trust, explore, closing, footer.
const { useState: uS, useEffect: uE, useRef: uR } = React;
const HC = window.HOME;

/* icons come from shared.jsx (loaded first) */
const AI = window.AICONS;

/* ---------- 6 · Exam mechanics strip (real system facts) ---------- */
function Mechanics() {
  return (
    <section className="mechanics" aria-label="How the exam works">
      <div className="wrap mech-inner">
        {HC.mechanics.map((m) => (
          <div className="mech-item" key={m.k}>
            <span className="mech-k">{m.k}</span>
            <span className="mech-v">{m.v}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- 3 · Who it's for — the three certification levels ---------- */
function Levels() {
  const lv = HC.levels;
  return (
    <section className="section" id="audience" data-nav="certifications">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label label-accent">Who it's for</span>
          <h2>Three levels. One standard.</h2>
          <p className="sec-intro">Three certification levels span the range of AI-augmented work. Choose the one that matches your role and experience.</p>
        </div>
        <div className="aud-grid">
          {lv.items.map((a, i) => (
            <a className="lvl-card reveal" href={a.href} key={a.key} style={{ transitionDelay: i * 70 + "ms" }}>
              <div className="lvl-head">
                <span className="lvl-badge">{a.label}</span>
                <span className="lvl-diff" aria-label={"Difficulty " + a.difficulty + " of 3"}>
                  {[1, 2, 3].map((d) => <span key={d} className={"lvl-dot" + (d <= a.difficulty ? " on" : "")}></span>)}
                </span>
              </div>
              <h3 className="lvl-title">{a.title}</h3>
              <div className="lvl-rows">
                <div className="lvl-row"><span className="lvl-k">Best for</span><span className="lvl-v">{a.bestFor}</span></div>
                <div className="lvl-row"><span className="lvl-k">Focus</span><span className="lvl-v">{a.focus}</span></div>
              </div>
              <span className="arrowlink lvl-cta">{a.cta} <AI.arrow /></span>
            </a>
          ))}
        </div>
        <p className="lvl-note">{lv.note}</p>
      </div>
    </section>
  );
}

/* ---------- 3b · The six competency dimensions ---------- */
// Simple line-art icon per dimension (ETS-style), index-aligned to the six items.
// Duotone (ETS-style): a soft accent-filled shape + accent stroke detail.
const DIM_ICONS = [
  // 01 AI Literacy — open book
  (<g key="i"><path d="M12 6.4C9.4 4.9 6.8 4.7 4.3 5.1V17.9c2.5-.4 5.1-.2 7.7 1.3 2.6-1.5 5.2-1.7 7.7-1.3V5.1C17.2 4.7 14.6 4.9 12 6.4Z" fill="currentColor" fillOpacity=".16" /><path d="M12 6.4C9.4 4.9 6.8 4.7 4.3 5.1V17.9c2.5-.4 5.1-.2 7.7 1.3 2.6-1.5 5.2-1.7 7.7-1.3V5.1C17.2 4.7 14.6 4.9 12 6.4Zm0 0v12.8" /></g>),
  // 02 Prompting & AI Collaboration — chat bubble + dots
  (<g key="i"><path d="M4 7A2.5 2.5 0 0 1 6.5 4.5h11A2.5 2.5 0 0 1 20 7v5a2.5 2.5 0 0 1-2.5 2.5H10l-4 3.3V14.5H6.5A2.5 2.5 0 0 1 4 12Z" fill="currentColor" fillOpacity=".16" /><path d="M4 7A2.5 2.5 0 0 1 6.5 4.5h11A2.5 2.5 0 0 1 20 7v5a2.5 2.5 0 0 1-2.5 2.5H10l-4 3.3V14.5H6.5A2.5 2.5 0 0 1 4 12Z" /><path d="M8.5 9.5h.01M12 9.5h.01M15.5 9.5h.01" /></g>),
  // 03 Output Evaluation — magnifier + check
  (<g key="i"><circle cx="10.5" cy="10.5" r="6" fill="currentColor" fillOpacity=".16" /><circle cx="10.5" cy="10.5" r="6" /><path d="M19.5 19.5l-4-4M8 10.6l1.9 1.9 3.6-3.8" /></g>),
  // 04 Data & Evidence Reasoning — bar chart
  (<g key="i"><path d="M5.4 13h2.2v6H5.4zM10.9 7h2.2v12h-2.2zM16.4 10h2.2v9h-2.2z" fill="currentColor" fillOpacity=".16" /><path d="M4 19.2h16M6.5 19V13M12 19V7M17.5 19v-9" /></g>),
  // 05 Workflow Integration — connected nodes
  (<g key="i"><circle cx="6" cy="6.5" r="2.6" fill="currentColor" fillOpacity=".16" /><circle cx="18" cy="6.5" r="2.6" fill="currentColor" fillOpacity=".16" /><circle cx="12" cy="17.5" r="2.6" fill="currentColor" fillOpacity=".16" /><path d="M8.6 6.5h6.8M7.3 8.7l3.5 6.6M16.7 8.7l-3.5 6.6" /><circle cx="6" cy="6.5" r="2.6" /><circle cx="18" cy="6.5" r="2.6" /><circle cx="12" cy="17.5" r="2.6" /></g>),
  // 06 Responsible AI & Risk Awareness — shield + check
  (<g key="i"><path d="M12 3.4l7.2 2.9V11c0 4.5-3.1 7.8-7.2 9-4.1-1.2-7.2-4.5-7.2-9V6.3Z" fill="currentColor" fillOpacity=".16" /><path d="M12 3.4l7.2 2.9V11c0 4.5-3.1 7.8-7.2 9-4.1-1.2-7.2-4.5-7.2-9V6.3Z" /><path d="M9 11.3l2 2 4-4" /></g>),
];

function Dimensions() {
  return (
    <section className="section section--soft" id="dimensions" data-nav="standard">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label label-accent">What's measured</span>
          <h2>Scored across six AI competency dimensions.</h2>
          <p className="sec-intro">Every exam assesses the same six dimensions of working competence with AI — and reports each one, so a result shows where you're strong, not just whether you passed.</p>
        </div>
        <div className="dim-grid">
          {HC.dimensions.items.map((d, i) => (
            <div className="dim-item reveal" key={d.n} style={{ transitionDelay: (i % 3) * 70 + "ms" }}>
              <div className="dim-top">
                <span className="dim-ic" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                    {DIM_ICONS[i]}
                  </svg>
                </span>
                <span className="dim-n mono">{d.n}</span>
              </div>
              <h3 className="dim-name">{d.name}</h3>
              <p className="dim-tag">{d.tag}</p>
            </div>
          ))}
        </div>
        <div className="dim-foot reveal">
          <a className="cta-text" href="standard.html">View the full standard <AI.arrow /></a>
        </div>
      </div>
    </section>
  );
}

/* ---------- 4 · Answerable sample question ---------- */
function Sample() {
  const s = HC.sample;
  const [picked, setPicked] = uS(null);
  const answered = picked !== null;
  return (
    <section className="section section--soft" id="sample" data-nav="certifications">
      <div className="wrap">
        <div className="sample-wrap">
          <div className="sample-aside reveal">
            <span className="label label-accent">The bar, in practice</span>
            <h2>Answer a real exam question.</h2>
            <p className="sec-intro">Our exams measure judgment, not memorized prompts. Try one and see the reasoning behind every option.</p>
            <p className="sample-disc">{s.disclaimer}</p>
            <a className="cta-text" href="https://app.atlas-ai.academy/setup?mode=practice">Try the practice exam <AI.arrow /></a>
          </div>

          <div className="qcard reveal">
            <div className="qcard-top">
              <span className="qtag level">{s.level}</span>
              <span className="qtag domain">{s.domain}</span>
            </div>
            <p className="qprompt">{s.prompt}</p>
            <div className="qopts">
              {s.options.map((o) => {
                let cls = "qopt";
                if (answered) {
                  if (o.correct) cls += " correct revealed";
                  else if (picked === o.key) cls += " wrong revealed";
                  else cls += " dim";
                }
                return (
                  <button key={o.key} className={cls} disabled={answered} onClick={() => setPicked(o.key)}>
                    <span className="qopt-main">
                      <span className="qopt-key">{o.key}</span>
                      <span className="qopt-text">{o.text}</span>
                      {answered && o.correct && <AI.check className="qopt-mark" />}
                      {answered && picked === o.key && !o.correct && <AI.x className="qopt-mark" />}
                    </span>
                    {answered && (o.correct || picked === o.key) && (
                      <span className="qwhy"><span className="qwhy-inner">{o.why}</span></span>
                    )}
                  </button>
                );
              })}
            </div>
            <div className={"qpayoff" + (answered ? " show" : "")}>
              <span className="pay-ic"><AI.shield /></span>
              <p>{s.payoff}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 5 · Sample result profile — hexagon radar ---------- */
function HexRadar({ dims, scores }) {
  const cx = 200, cy = 188, R = 116, labelR = 150;
  const ang = (i) => (-90 + i * 60) * Math.PI / 180;
  const pt = (r, i) => [cx + r * Math.cos(ang(i)), cy + r * Math.sin(ang(i))];
  const poly = (r) => dims.map((_, i) => pt(r, i).join(",")).join(" ");
  const dataPoly = dims.map((_, i) => pt(R * (scores[i] / 100), i).join(",")).join(" ");
  const rings = [25, 50, 75, 100];
  return (
    <svg className="hex-svg" viewBox="0 0 400 372" role="img"
      aria-label={"Sample competency profile across six dimensions: " + dims.map((d, i) => d.name + " " + scores[i]).join(", ")}>
      {rings.map((r) => <polygon key={r} className="hex-ring" points={poly(R * r / 100)} />)}
      {dims.map((_, i) => { const [x, y] = pt(R, i); return <line key={i} className="hex-axis" x1={cx} y1={cy} x2={x} y2={y} />; })}
      <g className="hex-data">
        <polygon className="hex-area" points={dataPoly} />
        {dims.map((_, i) => { const [x, y] = pt(R * (scores[i] / 100), i); return <circle key={i} className="hex-dot" cx={x} cy={y} r="4" />; })}
      </g>
      {dims.map((d, i) => {
        const [lx, ly] = pt(labelR, i);
        const c = Math.cos(ang(i));
        const anchor = c > 0.3 ? "start" : c < -0.3 ? "end" : "middle";
        return (
          <text key={i} className="hex-label" x={lx} y={ly} textAnchor={anchor}>
            <tspan className="hl-name">{d.short}</tspan>
            <tspan className="hl-score" x={lx} dy="15">{scores[i]}</tspan>
          </text>
        );
      })}
    </svg>
  );
}

function Profile() {
  const p = HC.profile;
  const prof = p.profiles[1]; // one representative sample — the level isn't the point
  const overall = Math.round(prof.scores.reduce((a, b) => a + b, 0) / prof.scores.length);
  return (
    <section className="section" id="scale" data-nav="standard">
      <div className="wrap profile-split">
        <div className="profile-copy reveal">
          <span className="label label-accent">More than a certificate</span>
          <h2>You don't just pass — you understand yourself.</h2>
          <p className="sec-intro">{p.caption} You leave with a clear picture of where your AI competence is strong, and where to grow.</p>
          <ul className="profile-points">
            {p.points.map((pt) => (
              <li key={pt}><AI.check className="pp-check" /> {pt}</li>
            ))}
          </ul>
          <a className="cta-text" href={p.cta.href}>{p.cta.label} <AI.arrow /></a>
        </div>
        <div className="profile-figure reveal">
          <div className="hex-figure">
            <HexRadar dims={p.dims} scores={prof.scores} />
            <div className="hex-overall">
              <span className="ho-num mono">{overall}</span>
              <span className="ho-of">/ 100 overall</span>
            </div>
          </div>
          <p className="profile-sample">Sample profile — every exam returns one like this.</p>
        </div>
      </div>
    </section>
  );
}

/* ---------- 6 · Verify demo ---------- */
function Verify() {
  const [v, setV] = uS("");
  const [res, setRes] = uS(null);
  const submit = (e) => {
    e.preventDefault();
    const id = v.trim().toUpperCase();
    if (!id) return;
    const rec = HC.validIds[id];
    setRes(rec ? { ok: true, id, ...rec } : { ok: false, id });
  };
  return (
    <section className="section section--soft" id="verify" data-nav="standard">
      <div className="wrap verify-band">
        <div className="verify-copy reveal">
          <span className="label label-accent">For anyone checking</span>
          <h2>Verify any Atlas credential.</h2>
          <p>A credential is only as good as the ability to confirm it. Every Atlas credential resolves to a public record — so an employer can settle it in one click.</p>
        </div>

        <div className="verify-card reveal">
          <form className="verify-form" onSubmit={submit}>
            <input className="verify-input" value={v} onChange={(e) => setV(e.target.value)} placeholder="Enter a credential ID (e.g. ATL-2F9K-4827-LX)" aria-label="Credential ID" spellCheck="false" />
            <button type="submit" className="btn btn-primary">Verify</button>
          </form>

          {res && (
            <div className="verify-result">
              {res.ok ? (
                <div className="vr-row">
                  <span className="vr-badge ok"><AI.check /></span>
                  <div style={{ flex: 1 }}>
                    <div className="vr-status ok">Verified · {res.status}</div>
                    <div className="vr-name">{res.name} · {res.level}</div>
                    <div className="vr-sub">Issued to {res.holder} · {res.issued} · <span className="mono">{res.id}</span></div>
                    <div className="vr-link"><a href={"verify.html?id=" + res.id} className="arrowlink">View full credential <AI.arrow /></a></div>
                  </div>
                </div>
              ) : (
                <div className="vr-row">
                  <span className="vr-badge no"><AI.x /></span>
                  <div>
                    <div className="vr-status no">No match</div>
                    <div className="vr-sub">No credential found for <span className="mono">{res.id}</span>. Check the ID and try again.</div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------- 7 · Trust: editorial statement + spec sheet ---------- */
function Trust() {
  const t = HC.trust;
  return (
    <section className="section" id="trust" data-nav="organizations">
      <div className="wrap trust-layout">
        <div className="trust-lead reveal">
          <span className="label label-accent">Why it's trusted</span>
          <h2>Evidence, not adjectives.</h2>
          <p className="trust-statement">{t.statement}</p>
        </div>
        <dl className="trust-spec reveal">
          {t.specs.map((s, i) => (
            <div className="spec-row" key={s.k}>
              <dt><span className="spec-n mono">{String(i + 1).padStart(2, "0")}</span>{s.k}</dt>
              <dd>{s.v}{s.href && <span className="spec-link"><a className="arrowlink" href={s.href}>{s.linkLabel} <AI.arrow /></a></span>}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

/* ---------- 8 · Explore ---------- */
function Explore() {
  return (
    <section className="section section--soft" id="explore" data-nav="about">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label label-accent">Explore</span>
          <h2>Go deeper.</h2>
          <p className="sec-intro">The detail lives on dedicated pages. Start wherever you need.</p>
        </div>
        <div className="explore-grid">
          {HC.explore.map((e, i) => (
            <a className="explore-item reveal" href={e.href} key={e.n} style={{ transitionDelay: i * 60 + "ms" }}>
              <span className="ex-n">{e.n}</span>
              <h3>{e.title}</h3>
              <p>{e.text}</p>
              <span className="ex-go">View <AI.arrow /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- 9 · Closing CTA + footer ---------- */
function Closing() {
  return (
    <section className="closing">
      <div className="wrap">
        <h2 className="reveal">Put your AGI competence on the record.</h2>
        <p className="reveal">Sit the exam, earn a verifiable credential, and prove the judgment your work depends on.</p>
        <div className="closing-cta reveal">
          <a href="certifications.html" className="btn btn-primary btn-lg">Get certified <AI.arrow style={{ width: 18, height: 18 }} /></a>
          <a href="contact-sales.html" className="btn btn-outline btn-lg">Talk to sales</a>
        </div>
      </div>
    </section>
  );
}

/* Footer now lives in shared.jsx (single source of truth) */

Object.assign(window, { Mechanics, Levels, Dimensions, Sample, Profile, Verify, Trust, Explore, Closing });