/* ============================================================
   Content sections
   ============================================================ */
const { useState: useStateS, useEffect: useEffectS } = React;

/* ---------------- NAVBAR ---------------- */
const NAV_LINKS = [
  ["About", "#about"],
  ["Committees", "#committees"],
  ["Agenda", "#agenda"],
  ["Team", "#team"],
  ["Gallery", "#gallery"],
  ["Conduct", "#conduct"],
  ["Partners", "#partners"],
  ["Pay Fee", "#payment"],
  ["FAQ", "#faq"],
  ["Contact", "#contact"],
];

const Navbar = ({ onRegister }) => {
  const [scrolled, setScrolled] = useStateS(false);
  const [open, setOpen] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${open ? "open" : ""}`}>
      <div className="scroll-progress" aria-hidden="true" />
      <div className="wrap nav-inner">
        <a href="#top" className="brand">
          <span className="brand-badge"><img src="assets/bmun-logo.png" alt="BMUN" /></span>
          <span className="brand-text">
            <div className="name">BMUN</div>
            <div className="sub">Balochistan&nbsp;MUN</div>
          </span>
        </a>
        <div className="nav-links">
          {NAV_LINKS.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
        </div>
        <button className="btn btn-primary nav-cta" onClick={onRegister}>Register Now</button>
        <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="Menu" aria-expanded={open}>
          <Icon name={open ? "close" : "menu"} size={24} />
        </button>
      </div>
      {open && (
        <div className="wrap" style={{ paddingBottom: 18 }}>
          <div className="card" style={{ padding: 12, display: "grid", gap: 4 }}>
            {NAV_LINKS.map(([t, h]) => (
              <a key={h} href={h} onClick={() => setOpen(false)}
                 style={{ padding: "12px 14px", borderRadius: 10, fontWeight: 600 }}>{t}</a>
            ))}
            <button className="btn btn-primary" style={{ marginTop: 6 }}
              onClick={() => { setOpen(false); onRegister(); }}>Register Now</button>
          </div>
        </div>
      )}
    </nav>
  );
};

/* ---------------- HERO ---------------- */
const HeroScene = () => (
  <div className="hero-scene" aria-hidden="true">
    {/* WebGL terrain mounts here; CSS/SVG below is the guaranteed-beautiful base */}
    <div id="hero-canvas" className="hero-canvas" />
    <div className="hero-sun" />
    <svg className="hero-mtns" viewBox="0 0 1440 560" preserveAspectRatio="xMidYMax slice">
      <defs>
        <linearGradient id="mtn1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#e3bd7e" /><stop offset="1" stopColor="#cf9f55" />
        </linearGradient>
        <linearGradient id="mtn2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#bd8a44" /><stop offset="1" stopColor="#9a6a2e" />
        </linearGradient>
        <linearGradient id="mtn3" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#8a5526" /><stop offset="1" stopColor="#683c19" />
        </linearGradient>
        <linearGradient id="mtn4" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#5c3417" /><stop offset="1" stopColor="#3d2210" />
        </linearGradient>
        <linearGradient id="mtn5" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#341c0d" /><stop offset="1" stopColor="#1f110a" />
        </linearGradient>
      </defs>
      {/* far, hazy ridge → near, dark ridge (atmospheric perspective) */}
      <path className="mtn mtn-1" fill="url(#mtn1)" d="M0,250 L90,205 L170,232 L260,150 L355,210 L470,140 L560,205 L660,128 L770,200 L880,150 L1000,210 L1110,160 L1230,222 L1340,168 L1440,214 L1440,560 L0,560 Z" />
      <path className="mtn mtn-2" fill="url(#mtn2)" d="M0,310 L130,238 L235,300 L350,225 L470,296 L600,224 L720,300 L840,236 L970,304 L1090,244 L1220,308 L1330,250 L1440,300 L1440,560 L0,560 Z" />
      <path className="mtn mtn-3" fill="url(#mtn3)" d="M0,375 L150,300 L290,372 L430,288 L580,366 L720,290 L870,372 L1010,300 L1160,378 L1300,312 L1440,366 L1440,560 L0,560 Z" />
      <path className="mtn mtn-4" fill="url(#mtn4)" d="M0,440 L180,360 L360,438 L540,350 L720,440 L900,358 L1080,442 L1260,366 L1440,436 L1440,560 L0,560 Z" />
      <path className="mtn mtn-5" fill="url(#mtn5)" d="M0,510 L240,452 L470,512 L700,448 L930,514 L1160,456 L1440,508 L1440,560 L0,560 Z" />
    </svg>
    <div className="hero-haze" />
    <div className="hero-grain" />
  </div>
);

const Hero = ({ onRegister }) => (
  <header className="hero" id="top">
    <HeroScene />
    <div className="wrap hero-inner">
      <Reveal delay={70}>
        <span className="eyebrow eyebrow--center hero-kicker">Balochistan Model United Nations · 2026</span>
      </Reveal>
      <Reveal delay={140}>
        <h1 className="display hero-title">
          Where Quetta&rsquo;s youth learn to<br /><span className="accent">speak, think &amp; lead.</span>
        </h1>
      </Reveal>
      <Reveal delay={220}>
        <p className="lead hero-sub">
          A student-led diplomatic simulation bringing 250+ delegates together for three days of
          debate, negotiation, and global citizenship built by youth, for youth.
        </p>
      </Reveal>
      <Reveal delay={300}>
        <div className="hero-actions">
          <button className="btn btn-primary btn-lg" onClick={onRegister}>
            Register as a Delegate <Icon name="arrowRight" size={18} />
          </button>
          <a className="btn btn-ghost btn-lg" href="#committees">Explore Committees</a>
        </div>
      </Reveal>
      <Reveal delay={360}>
        <div className="hero-meta">
          <span className="chip"><Icon name="calendar" size={16} /> Dates to be announced</span>
          <span className="chip"><Icon name="pin" size={16} /> BUITEMS, Quetta</span>
          <span className="chip"><Icon name="gavel" size={16} /> 6 Committees</span>
        </div>
      </Reveal>
      <Reveal delay={420}>
        <div className="hero-stats">
          <CountStat to={250} suffix="+" label="Delegates expected" />
          <CountStat to={6} label="Specialized committees" />
          <CountStat to={3} label="Days of diplomacy" />
        </div>
      </Reveal>
    </div>
    <a href="#about" className="hero-scroll" aria-label="Scroll to learn more">
      <span className="hero-scroll-dot" />
    </a>
  </header>
);

/* ---------------- ABOUT ---------------- */
const ABOUT_POINTS = [
  ["sparkle", "Authentically student-led", "Not a conference run by adults for students, a movement created by young people who live these challenges firsthand."],
  ["book", "Rooted in real urgency", "Every agenda connects global affairs to local realities, so debate stays intellectually honest and unapologetically relevant."],
  ["users", "Open to everyone", "Private and public, English and Urdu medium, all delegates sit at the same table, regardless of background."],
];
const About = () => (
  <section className="section" id="about">
    <div className="wrap about-grid">
      <Reveal>
        <SectionHead
          eyebrow="About BMUN"
          title="A bold platform for youth in Balochistan."
          sub="In a region where structured debate culture remains rare, BMUN stands out as a platform entirely organized by youth, for youth, bridging local education and global political literacy."
        />
        <div className="about-points">
          {ABOUT_POINTS.map(([ic, t, d], i) => (
            <div className="about-point" key={i}>
              <span className="ic"><Icon name={ic} size={20} /></span>
              <div><h4>{t}</h4><p>{d}</p></div>
            </div>
          ))}
        </div>
      </Reveal>
      <Reveal delay={120}>
        <div className="card" style={{ padding: "44px 40px" }}>
          <blockquote className="about-quote">
            &ldquo;BMUN matters because it wasn&rsquo;t handed to us. We built it, from scratch in a city
            that hasn&rsquo;t had a student-led MUN of this scale in nearly a decade.&rdquo;
            <cite>— The BMUN Organizing Team</cite>
          </blockquote>
          <div className="divider-emblem" style={{ margin: "34px 0" }}>
            <span className="dot"></span>
          </div>
          <p className="muted" style={{ fontSize: 15.5 }}>
            This isn&rsquo;t just about public speaking. It&rsquo;s about finding your voice, even when everything
            around you tells you to stay quiet. That&rsquo;s why BMUN matters.
          </p>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ---------------- COMMITTEES ---------------- */
const COMM_ICONS = { UNHRC: "users", UNW: "star", CCPCJ: "gavel", UNSC: "shield", DISEC: "globe", PNA: "book" };
const CommitteeCard = ({ c, open, onToggle }) => (
  <div className={`comm-card ${open ? "open" : ""}`} onClick={onToggle}>
    <div className="comm-top">
      <div className="comm-head">
        <span className="comm-ic"><Icon name={COMM_ICONS[c.abbr] || "gavel"} size={20} /></span>
        <div>
          <div className="comm-abbr">{c.abbr}{c.committee ? <span className="comm-no"> · {c.committee}</span> : null}</div>
          <h3>{c.name}</h3>
        </div>
      </div>
      <button className="comm-toggle" aria-label="Toggle"><Icon name="plus" size={16} /></button>
    </div>
    <p className="comm-agenda">&ldquo;{c.agenda}&rdquo;</p>
    <div className="comm-detail">
      <div className="comm-detail-inner">
        <div className="label">Mandate</div>
        <p>{c.mandate}</p>
        <div className="comm-foot">
          <span className="chip" style={{ background: "rgba(227,182,95,.12)", borderColor: "rgba(227,182,95,.3)", color: "#e3b65f" }}>
            <Icon name="star" size={14} /> {c.level}
          </span>
          {c.guide && (
            <a className="comm-guide" href={c.guide} target="_blank" rel="noopener" onClick={e => e.stopPropagation()}>
              <Icon name="document" size={15} /> Read study guide <Icon name="arrowRight" size={14} />
            </a>
          )}
        </div>
      </div>
    </div>
  </div>
);
const Committees = () => {
  const [open, setOpen] = useStateS(0);
  return (
    <section className="section committees" id="committees">
      <div className="wrap">
        <Reveal>
          <SectionHead center light
            eyebrow="Committees & Agendas"
            title="Six bodies. Six urgent debates."
            sub="Each committee follows standard MUN procedure: moderated caucuses, resolution drafting, and country-specific policy debate. Tap any card to read its mandate and open the full study guide."
          />
        </Reveal>
        <div className="comm-grid">
          {COMMITTEES.map((c, i) => (
            <Reveal key={c.abbr} delay={i * 80}>
              <CommitteeCard c={c} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------------- AGENDA / TIMELINE ---------------- */
const Agenda = () => (
  <section className="section agenda" id="agenda">
    <GeoDivider />
    <div className="wrap">
      <Reveal>
        <SectionHead center
          eyebrow="The Experience"
          title="Three days, one journey."
          sub="From the opening gavel to the closing ceremony, here's how BMUN 2026 unfolds. Exact timings are shared with confirmed delegates."
        />
      </Reveal>
      <div className="agenda-days">
        {AGENDA.map((d, i) => (
          <Reveal key={d.day} delay={i * 120}>
            <div className="day-card">
              <span className="day-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="day-label">{d.day}</span>
              <h3 className="day-theme">{d.theme}</h3>
              <ul className="day-list">
                {d.items.map((it, j) => (
                  <li key={j}><Icon name="check" size={15} /> {it}</li>
                ))}
              </ul>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
    <GeoDivider />
  </section>
);

/* ---------------- TEAM ---------------- */
const initials = (name) => name.split(/\s*&\s*|\s+/).slice(0, 2).map(w => w[0]).join("").toUpperCase();
const Member = ({ m, lead }) => (
  <div className={`member ${lead ? "top" : ""}`}>
    {m.photo
      ? <div className="avatar avatar--photo"><img src={m.photo} alt={m.name} loading="lazy" /></div>
      : <div className="avatar">{initials(m.name)}</div>}
    <h4>{m.name}</h4>
    <div className="role">{m.role}</div>
    <p>{m.note}</p>
  </div>
);
const Team = () => (
  <section className="section" id="team">
    <div className="wrap">
      <Reveal>
        <SectionHead center
          eyebrow="Organizing Team"
          title="Built by students who refused to wait."
          sub="A hierarchical but collaborative team of high-school and college students from across Quetta, each tier entrusted with a clear set of responsibilities."
        />
      </Reveal>
      <div className="team-org">
        {TEAM_TIERS.map((tier, ti) => (
          <Reveal key={tier.label} delay={ti * 70}>
            {ti > 0 && <div className="team-connector" aria-hidden="true" />}
            <div className="team-tier-label"><span>{tier.label}</span></div>
            <div className={`team-grid ${ti === 0 && tier.members.length === 1 ? "team-grid--top" : `team-grid--${tier.members.length}`}`}>
              {tier.members.map(m => <Member key={`${m.name}-${m.role}`} m={m} lead={ti === 0} />)}
            </div>
          </Reveal>
        ))}
      </div>
      <p className="muted" style={{ fontSize: 13.5, textAlign: "center", marginTop: 40 }}>
        Remaining Executive Council photographs are coming soon, avatars show initials until then.
      </p>
    </div>
  </section>
);

/* ---------------- CODE OF CONDUCT ---------------- */
const CodeOfConduct = () => (
  <section className="section conduct" id="conduct">
    <div className="wrap">
      <Reveal>
        <SectionHead center light
          eyebrow="Delegate Code of Conduct"
          title="Decorum and professionalism, expected of every delegate."
          sub="All delegates are expected to adhere to the following core principles for the duration of the conference. Failure to do so may result in dismissal or disqualification."
        />
      </Reveal>
      <div className="conduct-grid">
        {CODE_OF_CONDUCT.map((c, i) => (
          <Reveal key={c.t} delay={i * 60}>
            <div className="conduct-card">
              <span className="ic"><Icon name={c.ic} size={20} /></span>
              <h4>{c.t}</h4>
              <p>{c.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------- GALLERY (with lightbox) ---------------- */
const Gallery = () => {
  const [lb, setLb] = useStateS(-1);
  const photos = GALLERY_PHOTOS;
  const close = () => setLb(-1);
  const step = (d) => setLb(i => (i + d + photos.length) % photos.length);
  useEffectS(() => {
    if (lb < 0) return;
    const onKey = (e) => {
      if (e.key === "Escape") close();
      else if (e.key === "ArrowLeft") step(-1);
      else if (e.key === "ArrowRight") step(1);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [lb]);
  return (
    <section className="section gallery" id="gallery">
      <div className="wrap">
        <Reveal>
          <SectionHead
            eyebrow="BMUN 2025 · Moments"
            title="Last year, in photographs."
            sub="Real moments from BMUN 2025 committee sessions, the opening ceremony, and delegates at the dais. Tap any photo to enlarge."
          />
        </Reveal>
        <Reveal>
          <div className="gallery-grid">
            {photos.map((p, idx) => (
              <img key={p.src} className={p.cls} src={`assets/gallery/${p.src}`} alt={p.alt}
                   loading="lazy" onClick={() => setLb(idx)} />
            ))}
          </div>
        </Reveal>
      </div>
      {lb >= 0 && (
        <div className="lightbox" onClick={close} role="dialog" aria-modal="true">
          <button className="lb-btn lb-close" onClick={close} aria-label="Close">
            <Icon name="plus" size={22} />
          </button>
          <button className="lb-btn lb-prev" onClick={(e) => { e.stopPropagation(); step(-1); }} aria-label="Previous">
            <Icon name="arrowLeft" size={24} />
          </button>
          <figure className="lb-figure" onClick={(e) => e.stopPropagation()}>
            <img src={`assets/gallery/${photos[lb].src}`} alt={photos[lb].alt} />
            <figcaption>{photos[lb].alt} <span>· {lb + 1}/{photos.length}</span></figcaption>
          </figure>
          <button className="lb-btn lb-next" onClick={(e) => { e.stopPropagation(); step(1); }} aria-label="Next">
            <Icon name="arrowRight" size={24} />
          </button>
        </div>
      )}
    </section>
  );
};

/* ---------------- STATS BAND + COUNTDOWN ---------------- */
const Countdown = () => {
  const calc = () => {
    if (!EVENT_DATE) return null;
    return Math.max(0, new Date(EVENT_DATE).getTime() - Date.now());
  };
  const [ms, setMs] = useStateS(calc);
  useEffectS(() => {
    if (!EVENT_DATE) return;
    const id = setInterval(() => setMs(calc()), 1000);
    return () => clearInterval(id);
  }, []);
  if (!EVENT_DATE) {
    return (
      <div className="countdown tba">
        <Icon name="calendar" size={18} /> Dates to be announced -- BUITEMS, Quetta
      </div>
    );
  }
  const s = Math.floor(ms / 1000);
  const units = [
    [Math.floor(s / 86400), "Days"],
    [Math.floor((s % 86400) / 3600), "Hrs"],
    [Math.floor((s % 3600) / 60), "Min"],
    [s % 60, "Sec"],
  ];
  return (
    <div className="countdown">
      {units.map(([v, l]) => (
        <div className="cd-unit" key={l}>
          <span className="cd-n">{String(v).padStart(2, "0")}</span>
          <span className="cd-l">{l}</span>
        </div>
      ))}
    </div>
  );
};

const StatsBand = () => (
  <section className="statband" id="impact">
    <GeoDivider tone="light" />
    <div className="wrap">
      <div className="statband-grid">
        {STATS.map((s, i) => (
          <Reveal key={s.label} delay={i * 90}>
            <div className="statband-item">
              <CountStat to={s.n} suffix={s.suffix} label={s.label} />
            </div>
          </Reveal>
        ))}
      </div>
    </div>
    <GeoDivider tone="light" />
  </section>
);

/* ---------------- SPONSORS / PARTNERS (empty until confirmed) ---------------- */
const Sponsors = () => (
  <section className="section sponsors" id="partners">
    <div className="wrap">
      <Reveal>
        <SectionHead center
          eyebrow="Partnerships"
          title="Sponsors &amp; partners."
          sub="BMUN 2026 is welcoming sponsors and institutional partners. If your organization shares our mission of empowering Balochistan's youth, we'd love to build this with you."
        />
      </Reveal>
      <Reveal delay={100}>
        <div className="sponsors-empty">
          <span className="sp-emblem"><Icon name="star" size={24} /></span>
          <p>Partner spots for BMUN 2026 are open.</p>
          <a className="btn btn-primary" href="#contact">Become a Partner <Icon name="arrowRight" size={16} /></a>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ---------------- FAQ ---------------- */
const Faq = () => {
  const [open, setOpen] = useStateS(0);
  return (
    <section className="section section--tight" id="faq">
      <div className="wrap">
        <Reveal>
          <SectionHead center eyebrow="Questions" title="Everything you need to know." />
        </Reveal>
        <div className="faq-list">
          {FAQ.map((f, i) => (
            <Reveal key={i} delay={i * 40}>
              <div className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <h4>{f.q}</h4>
                  <span className="ic"><Icon name="plus" size={16} /></span>
                </button>
                <div className="faq-a"><p>{f.a}</p></div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------------- CONTACT + FOOTER ---------------- */
const CONTACTS = [
  { name: "Afnan Khan", role: "President", mail: "mafnankhan001@gmail.com", phone: "+92 306 3934558" },
  { name: "Shah Faisal", role: "Senior Vice President", phone: "+92 322 8360817" },
];
const Contact = ({ onRegister }) => (
  <section className="section contact" id="contact">
    <div className="wrap">
      <Reveal>
        <SectionHead center light
          eyebrow="Get in touch"
          title="Questions? We're one message away."
          sub="Reach out by call, email, or WhatsApp we're happy to arrange a meeting or send additional documents on request."
        />
      </Reveal>
      <div className="contact-grid">
        {CONTACTS.map((c, i) => (
          <Reveal key={c.name} delay={i * 100}>
            <div className="contact-card">
              <div className="who">
                <span className="av">{initials(c.name)}</span>
                <div><h4>{c.name}</h4><div className="role">{c.role}, BMUN</div></div>
              </div>
              <div className="contact-lines">
                {c.mail && <a href={`mailto:${c.mail}`}><Icon name="mail" size={18} /> {c.mail}</a>}
                <a href={`tel:${c.phone.replace(/\s/g, "")}`}><Icon name="phone" size={18} /> {c.phone}</a>
                <a href={`https://wa.me/${c.phone.replace(/[^0-9]/g, "")}`} target="_blank" rel="noopener">
                  <Icon name="whatsapp" size={18} /> WhatsApp
                </a>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------- CLOSING CTA BAND ---------------- */
const CtaBand = ({ onRegister }) => (
  <section className="cta-band" aria-label="Register call to action">
    <div className="cta-glow" aria-hidden="true" />
    <div className="wrap cta-inner">
      <Reveal>
        <span className="eyebrow eyebrow--center">Your seat is waiting</span>
        <h2 className="display h-lg cta-title">Claim your place at the table.</h2>
        <p className="lead cta-sub">
          Registration for BMUN 2026 is open to every student ready to find their voice 
          three days, six committees, one unforgettable stage.
        </p>
        <div className="cta-actions">
          <button className="btn btn-gold btn-lg" onClick={onRegister}>
            Register as a Delegate <Icon name="arrowRight" size={18} />
          </button>
          <a className="btn cta-ghost btn-lg" href="#committees">Explore Committees</a>
        </div>
      </Reveal>
    </div>
  </section>
);

const Footer = ({ onRegister }) => (
  <footer className="footer">
    <div className="wrap">
      <div className="footer-top">
        <div className="footer-brand">
          <span className="brand-text footer-wordmark">
            <div className="name" style={{ color: "#f0e2cb" }}>BMUN</div>
            <div className="sub">Balochistan&nbsp;MUN</div>
          </span>
          <p className="tagline">Empowering Youth. Shaping Tomorrow. Building Leaders.</p>
          <p>A student-led initiative for academic excellence and global citizenship in Balochistan.</p>
          <div className="footer-social">
            <a href="https://instagram.com/balochistanmun" target="_blank" rel="noopener" aria-label="Instagram">
              <Icon name="instagram" size={20} />
            </a>
            <a href="mailto:mafnankhan001@gmail.com" aria-label="Email"><Icon name="mail" size={20} /></a>
          </div>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <h5>Explore</h5>
            {NAV_LINKS.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
          </div>
          <div className="footer-col">
            <h5>Take part</h5>
            <a href="#register" onClick={onRegister}>Register as delegate</a>
            <a href="#committees">View committees</a>
            <a href="https://instagram.com/balochistanmun" target="_blank" rel="noopener">@balochistanmun</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Balochistan Model United Nations. A student-led initiative.</span>
        <span>BUITEMS, Quetta · Dates to be announced</span>
        <a href="#top" className="to-top" aria-label="Back to top">
          <Icon name="arrowRight" size={16} /> Top
        </a>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Navbar, Hero, About, StatsBand, Committees, Agenda, Team, CodeOfConduct, Gallery, Sponsors, CtaBand, Faq, Contact, Footer, initials });