// chrome.jsx — GW page chrome (top bar, secondary nav, breadcrumb, sidebar)
// The wordmark is a CSS-rendered placeholder approximating the GW lockup;
// swap in the real asset before launch.

function GWChrome({ children, heavy }) {
  return (
    <div className={`gw-page ${heavy ? "heavy" : ""}`}>
      {/* Top bar */}
      <div className="gw-topbar">
        <div className="gw-topbar-inner">
          <a className="gw-logo" href="#top" aria-label="GW Elliott School of International Affairs">
            <div className="gw-logo-mark" aria-hidden="true">
              <div className="bar"></div>
              <div className="letters">GW</div>
            </div>
            <div className="gw-school-name">Elliott School of<br />International Affairs</div>
          </a>
          <a className="gw-apply-btn" href="#apply">Apply</a>
        </div>
      </div>

      {/* Secondary nav */}
      <nav className="gw-nav-secondary" aria-label="Primary">
        <div className="gw-nav-secondary-inner">
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Academics</a></li>
            <li><a href="#">Admissions</a></li>
            <li><a href="#">Current Students</a></li>
            <li><a href="#">Diversity, Equity, and Inclusion</a></li>
            <li><a href="#">Faculty</a></li>
            <li><a href="#">Research</a></li>
          </ul>
          <div className="gw-nav-search" aria-label="Search">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <circle cx="8" cy="8" r="5.5" stroke="currentColor" strokeWidth="1.6"/>
              <line x1="12" y1="12" x2="16" y2="16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </div>
        </div>
      </nav>

      {/* Breadcrumb */}
      <div className="gw-breadcrumb">
        <a href="#">Home</a>
        <span className="sep">▸</span>
        <a href="#">Academics</a>
        <span className="sep">▸</span>
        <a href="#">Graduate Academics</a>
        <span className="sep">▸</span>
        <span className="current">Global Capstone</span>
      </div>

      {/* Two-col main */}
      <div className="gw-main">
        <aside className="gw-sidebar" aria-label="Section navigation">
          <div className="gw-side-section">
            <span className="title">Academics</span>
            <ul>
              <li><a className="gw-side-link" href="#">Graduate Academics</a></li>
              <li><a className="gw-side-link nested" href="#">Master's Programs</a></li>
              <li><a className="gw-side-link nested" href="#">Graduate Certificate Programs</a></li>
              <li><a className="gw-side-link nested" href="#">Graduate Course Descriptions</a></li>
              <li><a className="gw-side-link nested" href="#">Graduate Language Proficiency Requirement</a></li>
              <li><a className="gw-side-link nested active" href="#" aria-current="page">Global Capstone</a></li>
              <li><a className="gw-side-link nested" href="#">Professional Skills Courses</a></li>
              <li><a className="gw-side-link" href="#">Undergraduate Academics</a></li>
              <li><a className="gw-side-link" href="#">Online Education</a></li>
              <li><a className="gw-side-link" href="#">Executive Education</a></li>
              <li><a className="gw-side-link" href="#">Experiential Learning</a></li>
            </ul>
          </div>
        </aside>

        <main className="gw-content" id="top">
          <h1 className="gw-page-title">Global Capstone</h1>
          <p className="page-intro">
            Global Capstone is the culminating experience and signature project for Elliott School graduate students from seven master's programs, including International Affairs, Security Policy, Global Communication, Asian Studies, European & Eurasian Studies, Latin American & Hemispheric Studies, and Middle East Studies.
          </p>
          {children}
        </main>
      </div>

      <GWFooter />
    </div>
  );
}

function GWFooter() {
  const social = {
    facebook: "M24 12a12 12 0 1 0-13.875 11.854v-8.385H7.078V12h3.047V9.356c0-3.007 1.79-4.668 4.532-4.668 1.313 0 2.686.235 2.686.235v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.385A12.002 12.002 0 0 0 24 12z",
    x: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
    youtube: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12z",
    linkedin: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
  };
  const Icon = ({ d }) => (
    <a className="gwf-soc" href="#" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d={d} /></svg>
    </a>
  );
  const instagram = (
    <a className="gwf-soc" href="#" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
        <rect x="2" y="2" width="20" height="20" rx="5" />
        <circle cx="12" cy="12" r="4.5" />
        <circle cx="17.5" cy="6.5" r="1.3" fill="currentColor" stroke="none" />
      </svg>
    </a>
  );

  return (
    <footer className="gwf">
      <div className="gwf-top">
        <div className="gwf-inner">
          <div className="gwf-col gwf-brand">Elliott School of International Affairs</div>
          <div className="gwf-col gwf-contact">
            1957 E Street, NW<br />Washington, DC 20052
            <div className="gwf-bold">Contact the front desk:</div>
            <a className="gwf-link" href="#">Elliott@gwu.edu</a><br />
            202-994-6240
          </div>
          <div className="gwf-col gwf-links">
            <a className="gwf-link" href="#">Graduate Admissions</a>
            <a className="gwf-link" href="#">Graduate Academics</a>
            <a className="gwf-link" href="#">Undergraduate Admissions</a>
            <a className="gwf-link" href="#">Undergraduate Academics</a>
          </div>
          <div className="gwf-col gwf-actions">
            <a className="gwf-btn blue" href="#">Give to the Elliott School</a>
            <a className="gwf-btn navy" href="#">Subscribe to our emails</a>
            <div className="gwf-social">
              <Icon d={social.facebook} />
              {instagram}
              <Icon d={social.x} />
              <Icon d={social.youtube} />
              <Icon d={social.linkedin} />
            </div>
          </div>
        </div>
      </div>

      <div className="gwf-bottom">
        <div className="gwf-inner gwf-bottom-inner">
          <div className="gwf-gw">
            <span className="gwf-gw-rule"></span>
            <div className="gwf-gw-name">The George<br />Washington<br />University</div>
            <span className="gwf-gw-rule"></span>
            <div className="gwf-gw-loc">Washington, DC</div>
          </div>
          <div className="gwf-policy">
            <div className="gwf-policy-row">
              <a href="#">Campus Advisories</a>
              <a href="#">EO/Nondiscrimination Policy</a>
              <a href="#">Website Privacy Notice</a>
            </div>
            <div className="gwf-policy-row">
              <a href="#">Contact GW</a>
              <a href="#">Accessibility</a>
              <a href="#">Terms of Use</a>
              <a href="#">Copyright</a>
              <a href="#">Report a Barrier to Accessibility</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.GWChrome = GWChrome;