/* ============================================================
   RACK & BOX ACADEMY — couture & tailoring school
   ============================================================ */

const ACADEMY_COURSES = [
  { id: "agbada-menswear", name: "Agbada & Menswear Construction", format: "In-studio", duration: "8 weeks", level: "Beginner–Intermediate", label: "ATELIER · WORKSHOP" },
  { id: "bridal-couture", name: "Bridal Couture & Beading", format: "In-studio", duration: "10 weeks", level: "Intermediate", label: "BESPOKE · FITTING ROOM" },
  { id: "pattern-drafting", name: "Pattern Drafting & Fit", format: "Online", duration: "6 weeks", level: "Beginner", label: "ATELIER · LAGOS WORKSHOP" },
  { id: "aso-oke-fabric", name: "Aso-Oke & Fabric Craft", format: "In-studio", duration: "4 weeks", level: "All levels", label: "ATELIER · HAND-WEAVING ASO-OKE" },
  { id: "business-bespoke", name: "The Business of Bespoke", format: "Online", duration: "4 weeks", level: "All levels", label: "BESPOKE · MEASURING TAPE & CLOTH" },
];

function AcademyPage({ onNav }) {
  const [course, setCourse] = useState(ACADEMY_COURSES[0].id);
  const [sent, setSent] = useState(false);
  const formRef = useRef(null);

  const enrolIn = (id) => {
    setCourse(id);
    const el = formRef.current;
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 90;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <div className="fade-page">
      <section className="bespoke-hero">
        <Ph label="ATELIER · WORKSHOP" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "var(--accent-bright)" }}>Rack & Box Academy</Eyebrow>
          <h1 className="serif about-hero-h">Learn the craft behind the cloth.</h1>
          <p className="lede on-img" style={{ maxWidth: "46ch", marginTop: 16 }}>
            A couture and tailoring school for makers who want to build a real trade — taught by the same atelier
            that dresses our grooms and brides.
          </p>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap-wide">
          <Reveal className="section-head" style={{ marginBottom: 40 }}>
            <div>
              <Eyebrow line>Masterclasses</Eyebrow>
              <h2 className="serif" style={{ marginTop: 14 }}>Choose your craft</h2>
            </div>
            <p style={{ maxWidth: "34ch", color: "var(--ink-soft)", fontSize: 14 }}>
              Small cohorts, hands-on instruction and a certificate on completion — in our Lagos atelier or live online.
            </p>
          </Reveal>

          <div className="aca-grid">
            {ACADEMY_COURSES.map((c, i) => (
              <Reveal key={c.id} delay={(i % 4) + 1} className="aca-card">
                <div className="aca-media"><Ph label={c.label} ratio="portrait" /></div>
                <div className="aca-body">
                  <h3 className="serif aca-name">{c.name}</h3>
                  <div className="aca-meta">
                    <span>{c.format}</span><span className="aca-dot">·</span>
                    <span>{c.duration}</span><span className="aca-dot">·</span>
                    <span>{c.level}</span>
                  </div>
                  <Btn block arrow={false} variant="ghost" onClick={() => enrolIn(c.id)}>Enrol</Btn>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad" style={{ paddingTop: 0 }}>
        <div className="wrap-wide co-grid">
          <aside className="co-aside">
            <Eyebrow line>How cohorts work</Eyebrow>
            {[
              ["01", "Small cohorts", "Six to twelve students per intake, so every hand gets real time with a master tailor."],
              ["02", "In-studio or online", "Join us at the Lagos atelier for hands-on classes, or follow live online sessions from anywhere."],
              ["03", "Graduate with a portfolio", "Every course ends with a finished piece you cut and sewed yourself, ready to show for work."],
            ].map(([n, t, d]) => (
              <div className="bk-step" key={n}><span className="mono">{n}</span><div><strong>{t}</strong><p>{d}</p></div></div>
            ))}
          </aside>

          <div className="co-form" ref={formRef}>
            <div className="bespoke-form-card">
              {sent ? (
                <div className="contact-sent" style={{ padding: "30px 0" }}>
                  <div className="confirm-badge sm"><Icon name="check" size={26} /></div>
                  <h3 className="serif" style={{ fontSize: 30, margin: "14px 0 8px" }}>Enrolment received</h3>
                  <p style={{ color: "var(--ink-soft)" }}>Thank you for applying to the Academy. We'll confirm your seat and next steps by email within 48 hours.</p>
                  <Btn style={{ marginTop: 20 }} onClick={() => onNav("home", {})}>Back to home</Btn>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <h2 className="serif" style={{ fontSize: 30, marginBottom: 6 }}>Enrol in a masterclass</h2>
                  <p style={{ color: "var(--ink-soft)", marginBottom: 22, fontSize: 14 }}>Applications reviewed within 48 hours.</p>
                  <div className="form-grid">
                    <div className="field"><label>Name</label><input className="input" required placeholder="Your name" /></div>
                    <div className="field"><label>Email</label><input className="input" type="email" required placeholder="you@email.com" /></div>
                    <div className="field"><label>Phone</label><input className="input" type="tel" placeholder="+234 …" /></div>
                    <div className="field"><label>Course</label>
                      <select className="input" value={course} onChange={(e) => setCourse(e.target.value)}>
                        {ACADEMY_COURSES.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
                      </select>
                    </div>
                    <div className="field span2"><label>Message</label><textarea className="input" rows="4" placeholder="Tell us a little about your experience and goals…"></textarea></div>
                  </div>
                  <Btn block arrow={false} type="submit" style={{ marginTop: 18 }}>Submit application</Btn>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AcademyPage, ACADEMY_COURSES });