/* ============================================================
   WINNS COUTURE — Fashion Academy page
     · AcademyPage — @winns_fashionacademy: courses + email enrolment
   ============================================================ */

const WC_COURSES = [
  {
    id: "bridal-diploma", name: "Bridal Couture Diploma", price: 450000, label: "ACADEMY · BRIDAL COUTURE", featured: true,
    duration: "12 weeks", format: "In-studio · Port Harcourt",
    blurb: "Our flagship programme — master bridal construction from first sketch to finished gown.",
    learn: ["Corsetry & internal structure", "Hand-beading & lace appliqué", "Draping the couture skirt", "Client fittings & alterations", "Pricing & the business of couture"],
  },
  {
    id: "beadwork", name: "Beadwork & Embellishment", price: 180000, label: "ACADEMY · BEADWORK",
    duration: "4 weeks", format: "Hybrid · studio + online",
    blurb: "The intricate hand-detailing that defines Nigerian occasion wear.",
    learn: ["Bead, crystal & sequin techniques", "Coral & stone setting", "Motif design & placement", "Finishing & durability"],
  },
  {
    id: "pattern-draping", name: "Pattern Cutting & Draping", price: 260000, label: "ACADEMY · PATTERN CUTTING",
    duration: "6 weeks", format: "In-studio · Port Harcourt",
    blurb: "Draft, drape and fit garments to the body, from first block to final toile.",
    learn: ["Bodice, sleeve & skirt blocks", "Draping on the stand", "Grading & size adaptation", "Toile fitting & correction"],
  },
  {
    id: "fashion-business", name: "Fashion Entrepreneurship", price: 120000, label: "ACADEMY · FASHION BUSINESS",
    duration: "3 weeks", format: "Online · live cohort",
    blurb: "Build and price your own label — from studio setup to client management.",
    learn: ["Studio setup & sourcing", "Costing & pricing your work", "Branding & Instagram growth", "Client & order management"],
  },
];

/* Enrolment is by email — no in-app checkout. Each CTA opens the visitor's
   mail client with a message prefilled with the course, duration and price. */
const ACADEMY_EMAIL = "academy@winnscouture.com";
function academyMailto(c) {
  const subject = c ? "Enrolment — " + c.name : "Enrolment enquiry — Winns Fashion Academy";
  const body = c
    ? "Hi Winns Fashion Academy,\n\nI'd like to enrol in the following programme:\n\n"
      + "Course: " + c.name + "\n"
      + "Duration: " + c.duration + "\n"
      + "Price: " + fmtNGN(c.price) + "\n\n"
      + "My details —\nName:\nPhone:\nPreferred start date:\nExperience level:\n\nThank you."
    : "Hi Winns Fashion Academy,\n\nI'd like to enrol. Please send me course details and upcoming start dates.\n\nName:\nPreferred programme:\nPreferred start date:\n\nThank you.";
  return "mailto:" + ACADEMY_EMAIL + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
}

function AcademyPage({ onNav }) {
  return (
    <div className="fade-page">
      {/* Hero */}
      <section className="bespoke-hero">
        <Ph label="ACADEMY · STUDENTS AT WORK" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "#e9c97a" }}>Winns Fashion Academy</Eyebrow>
          <h1 className="serif about-hero-h">Learn couture from the<br />atelier that lives it.</h1>
          <p className="lede on-img" style={{ maxWidth: "48ch", marginTop: 16 }}>
            Hands-on training in bridal construction, beadwork and the business of fashion — taught inside
            a working couture studio in Port Harcourt. <span className="mono" style={{ opacity: 0.85 }}>@winns_fashionacademy</span>
          </p>
          <div className="hero-cta" style={{ marginTop: 26 }}>
            <Btn href={academyMailto(null)}>Enrol now</Btn>
            <Btn variant="ghost" arrow={false} className="on-dark" onClick={() => onNav("contact", {})}>Ask a question</Btn>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="section-pad-sm">
        <div className="wrap-wide about-stats">
          {[["300+", "Designers trained"], ["4", "Certified programmes"], ["1:6", "Tutor to student ratio"], ["92%", "Launch their own label"]].map(([n, l]) => (
            <Reveal key={l} className="about-stat"><strong className="serif">{n}</strong><span>{l}</span></Reveal>
          ))}
        </div>
      </section>

      {/* Courses — 2×2 equal-height grid */}
      <section className="section-pad">
        <div className="wrap-wide">
          <Reveal className="section-head" style={{ marginBottom: 44 }}>
            <div>
              <Eyebrow>Programmes</Eyebrow>
              <h2 className="serif" style={{ marginTop: 14 }}>Choose your path</h2>
            </div>
            <button className="link-arrow" onClick={() => onNav("contact", {})}>Download the prospectus</button>
          </Reveal>
          <div className="academy-grid">
            {WC_COURSES.map((c, i) => (
              <Reveal key={c.id} delay={i % 2 + 1}>
                <div className={"pkg-card" + (c.featured ? " featured" : "")}>
                  <div className="pkg-body">
                    <div className="pkg-lead mono" style={{ marginBottom: 14 }}>{c.duration} · {c.format}</div>
                    <h3 className="serif pkg-name">{c.name}</h3>
                    <p className="pkg-blurb">{c.blurb}</p>
                    <ul className="pkg-list">
                      {c.learn.map((d) => <li key={d}><Icon name="check" size={14} /> <span>{d}</span></li>)}
                    </ul>
                    <div className="pkg-price">{fmtNGN(c.price)}</div>
                    <Btn block arrow={false} variant={c.featured ? undefined : "ghost"} href={academyMailto(c)}>
                      Enrol in this course
                    </Btn>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="section-pad story-sec">
        <div className="wrap-wide values-grid">
          {[
            ["scissors", "Learn by making", "Every class is hands-on. You leave with finished garments and a portfolio, not just notes."],
            ["ruler", "Small cohorts", "Six students to a tutor, so your fittings, patterns and beadwork get real attention."],
            ["globe", "From studio to label", "Graduates leave ready to take clients — with pricing, branding and a launch plan in hand."],
          ].map(([ic, t, d], i) => (
            <Reveal key={t} delay={i + 1} className="value-card">
              <Icon name={ic} size={26} stroke={1.3} />
              <h3 className="serif" style={{ fontSize: 26, fontWeight: 500, margin: "16px 0 10px" }}>{t}</h3>
              <p style={{ color: "var(--ink-soft)" }}>{d}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Graduate quote */}
      <section className="about-quote-sec">
        <div className="wrap center">
          <Reveal><blockquote className="serif about-quote">“I walked in able to sew and walked out running my own bridal label. The beadwork module alone changed everything.”</blockquote></Reveal>
          <Reveal delay={1}><div className="testi-author" style={{ marginTop: 24 }}>Chidinma U. <span>· Class of 2025 · Founder, Nma Bridal</span></div></Reveal>
        </div>
      </section>

      {/* Enrol — by email */}
      <section className="section-pad">
        <div className="wrap-wide bespoke-book-grid">
          <div className="bespoke-steps-col">
            <Eyebrow line>How to enrol</Eyebrow>
            {[
              ["01", "Choose your programme", "Pick the course and start date that fits your goals."],
              ["02", "Email us", "Send a note with your chosen course — no experience required for foundation courses."],
              ["03", "Secure your seat", "Pay a deposit to confirm; cohorts are capped at twelve."],
              ["04", "Start creating", "Join us in-studio or online and begin building your portfolio."],
            ].map(([n, t, d]) => (
              <div className="bk-step" key={n}><span className="mono">{n}</span><div><strong>{t}</strong><p>{d}</p></div></div>
            ))}
          </div>
          <div className="bespoke-form-card">
            <Eyebrow>Ready to begin?</Eyebrow>
            <h2 className="serif" style={{ fontSize: 30, margin: "10px 0 8px" }}>Enrol by email</h2>
            <p style={{ color: "var(--ink-soft)", marginBottom: 20, fontSize: 14.5, lineHeight: 1.6 }}>
              Email the academy with your chosen programme and preferred start date. Places are limited to twelve per cohort — we'll confirm your seat and next steps within 24 hours.
            </p>
            <label className="bk-label">Enrol in a specific programme</label>
            <div className="bk-pills" style={{ marginBottom: 22 }}>
              {WC_COURSES.map((c) => <a key={c.id} className="chip" href={academyMailto(c)}>{c.name}</a>)}
            </div>
            <Btn block href={academyMailto(null)}>Email academy@winnscouture.com</Btn>
          </div>
        </div>
      </section>
    </div>
  );
}

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