// home-app.jsx — page composition: hero credential flip + mount.
// Nav, Footer, useReveal, QR now come from shared.jsx (loaded first).
const { useState: aS, useEffect: aE, useRef: aR } = React;
const A = window.HOME;
const AI2 = window.AICONS;

/* HERO + credential flip card */
function CredentialCard() {
  const c = A.credential;
  const [seen, setSeen] = aS(false);
  const ref = aR(null);
  aE(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((e) => { if (e[0].isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div className={"hero-card-stage" + (seen ? " hero-in" : "")} ref={ref}>
      <div className="card-hover-zone">
        <div
          className="cardflip"
          tabIndex={0}
          aria-label="Credential card — hover or focus to view verification details"
        >
          {/* FRONT */}
          <div className="card-face card-front">
            <div className="cf-top">
              <span className="cf-issuer"><span className="brand-mark">A</span>{c.issuer}</span>
              <span className="cf-verified"><span className="vchk"><AI2.check /></span>Verified</span>
            </div>
            <div className="cf-label">Certified</div>
            <div className="cf-name">{c.name} <span className="cf-level">· {c.level}</span></div>
            <div className="cf-rows">
              <div><div className="cf-k">Holder</div><div className="cf-v">{c.holder}</div></div>
              <div><div className="cf-k">Issued</div><div className="cf-v">{c.issued}</div></div>
              <div><div className="cf-k">Credential ID</div><div className="cf-v cf-id">{c.id}</div></div>
            </div>
            <span className="cf-hint">Hover to verify ↺</span>
          </div>
          {/* BACK */}
          <div className="card-face card-back">
            <div className="cb-top">Verification</div>
            <div className="cb-mid">
              <div>
                <div className="cb-verify-lab">Verify this credential at</div>
                <div className="cb-verify-id">atlas.org/v/{c.id}</div>
                <a href="verify.html" className="cb-link" onClick={(e) => e.stopPropagation()}>Open verification <AI2.arrow style={{ width: 15, height: 15 }} /></a>
              </div>
              <div className="cb-qr"><QR /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  const h = A.hero;
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="reveal in">
          <span className="hero-eyebrow"><span className="he-rule"></span><span className="label label-accent">{h.eyebrow}</span></span>
          <h1>{h.headline}</h1>
          <p className="hero-sub">{h.sub}</p>
          <div className="hero-cta">
            <a href="https://app.atlas-ai.academy/" className="btn btn-primary btn-lg">Get certified <AI2.arrow style={{ width: 18, height: 18 }} /></a>
            <a href="https://app.atlas-ai.academy/setup?mode=practice" className="btn btn-outline btn-lg">Try a sample question</a>
          </div>
          <p className="hero-license" style={{ marginTop: 22, fontSize: 13, fontWeight: 700, letterSpacing: ".01em", color: "#374151" }}>
            Developed at and/or under license from Carnegie Mellon University
          </p>
        </div>
        <div className="reveal in">
          <CredentialCard />
        </div>
      </div>
    </section>
  );
}

/* 2.5 — Institutional verification strip (neutral placeholder, toggleable) */
function TrustStrip() {
  const t = A.trustStrip;
  if (!t || !t.enabled) return null;
  return (
    <section className={"trust-strip" + (t.pending ? " is-pending" : "")} aria-label="Institutional verification">
      <div className="wrap trust-strip-inner">
        <div className="ts-main">
          <span className="ts-badge" aria-hidden="true"><AI2.shield /></span>
          <div className="ts-text">
            <span className="ts-line"><span className="ts-verb">{t.verb}</span> <span className="ts-inst">{t.institution}</span></span>
            <span className="ts-sub">{t.sub}</span>
          </div>
        </div>
        {t.link && <a className="ts-link arrowlink" href={t.link.href}>{t.link.label} <AI2.arrow /></a>}
        {t.pending && <span className="ts-pending" title="Internal note: replace with the agreed institution name once the partnership agreement is signed and legal has approved the exact wording. Not for public launch.">Placeholder · pending agreement</span>}
      </div>
    </section>
  );
}

function App() {
  useReveal();
  aE(() => {
    const p = new URLSearchParams(window.location.search);
    const name = p.get('atlas_name');
    if (name) {
      try { localStorage.setItem('atlas_name', decodeURIComponent(name)); } catch {}
      const url = new URL(window.location.href);
      url.searchParams.delete('atlas_name');
      window.history.replaceState({}, '', url.toString());
    }
  }, []);
  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <TrustStrip />
        <Levels />
        <Sample />
        <Dimensions />
        <Profile />
        <Verify />
        <Trust />
        <Explore />
        <Closing />
      </main>
      <TeamBanner />
      <Footer />
    </React.Fragment>
  );
}

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