/* global React */
const { useState: useStateE, useEffect: useEffectE } = React;

// ============= 06 · FAQ =============
// Trimmed to the six application-decision questions. Anything already
// answered upstream (workshop access in §01, CAD/skills in §02, weight/
// voltage/weapons in §03) deliberately omitted.
const FAQ = [
  ["who can apply?",
   "Students aged 18 or over who are in third-level education, or in their final year of secondary school. You'll also need to be able to easily get to Dogpatch Labs in Dublin."],
  ["how much does it cost a team?",
   "Nothing direct. We'll covers the build budget, €500 base, up to €750 if you want to put in your own €250. You cover your own travel costs, food costs, etc... Fight night tickets & food will be covered by us."],
  ["can I apply with a team?",
   "Yes, however we will allocate team members at our own discretion to balance them. We'll do our best but unfortunately can't guarrantee that your entire team will be accepted, nor that you will exclusively be working together."],
  ["how is intake decided?",
   "Multiple commitee members review each application. We mainly look for intent, commitment, and previous hardware skills & experience. We don't give extra weight for previous combat-robot experience, we like teams that are new to it."],
  ["what if I don't like or have other issues with my team?",
   "Tell us! The sooner the better, we can move you if there is an issue. For more serious issues or concerns, please contact either Alex or Ashling. We'll do everything we can to handle things with discretion."],
  ["how is the bot judged?",
   "There is no specfific public facing score system. Bots will be judged in two seperate brackets, engineering/design, and fight night performance. Where design is rated on creativity, elegance, & repairability."],
];

function CpFaq() {
  return (
    <section className="cp-section" data-cp-id="06" data-screen-label="06 Compete · FAQ">
      <h2 className="cp-sec-h">BEFORE YOU <span className="accent">APPLY.</span></h2>
      <div className="cp-faq">
        <div className="cp-faq-bar">
          <span>▣ FAQ.LOG · {FAQ.length} ENTRIES</span>
          <span style={{ color: "var(--green)" }}>● INDEXED</span>
        </div>
        <div className="cp-faq-body">
          {FAQ.map(([q, a], i) => (
            // Native exclusive accordion: shared `name` causes the browser to
            // auto-collapse any sibling <details> when a new one is opened.
            // Supported in Chrome 120+, Safari 17.2+, Firefox 121+ — all
            // collapse independently as graceful fallback in older browsers.
            <details key={i} className="cp-faq-item" name="cp-faq">
              <summary className="cp-faq-q">{q}</summary>
              <div className="cp-faq-a">{a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============= 07 · FINAL CTA — full-bleed image-backed cap =============
// Cinematic capstone: full-width photo backdrop with corner-bracket frame,
// big display headline, the same compact HeroNotifyField used on the hero
// for action consistency, and a date/venue meta strip anchoring the event.
function CpFinalCTA() {
  return (
    <section className="cp-final" data-cp-id="07" data-screen-label="07 Compete · Apply">
      <div className="cp-final-bg" aria-hidden="true"></div>
      <div className="cp-final-veil" aria-hidden="true"></div>
      <span className="cp-final-corner tl" aria-hidden="true"></span>
      <span className="cp-final-corner tr" aria-hidden="true"></span>
      <span className="cp-final-corner bl" aria-hidden="true"></span>
      <span className="cp-final-corner br" aria-hidden="true"></span>

      <div className="cp-final-content">
        <span className="cp-final-eyebrow">▸ APPLICATIONS OPEN · 01 JUN 2026</span>
        <h2 className="cp-final-title">
          BUILD SOMETHING<br />
          <span className="accent">DANGEROUS.</span>
        </h2>
        <p className="cp-final-body">
          Drop in your email & we'll ping you when applications open.
        </p>
        <div className="cp-final-cta">
          <window.HeroNotifyField />
        </div>
        <div className="cp-final-meta">
          <span><strong>FIGHT NIGHT</strong> · 05 SEP 2026</span>
          <span className="cp-final-meta-sep" aria-hidden="true">·</span>
          <span><strong>VENUE</strong> · DOGPATCH LABS · DUBLIN</span>
        </div>
      </div>
    </section>
  );
}

// ============= PAGE ROOT =============
function CompetePage({ openInterest }) {
  return (
    <div className="compete-page">
      <div className="cp-body">
        <window.CpHook />
        <window.CpMight />
        <window.CpExpectations />
        <window.CpFight />
        <CpFaq />
        <CpFinalCTA />
      </div>
    </div>
  );
}

Object.assign(window, { CpFaq, CpFinalCTA, CompetePage });