/* global React, window, Icon, Mascot, Reveal, Counter, FloatingDeco, TeacherPortrait, useT, TEACHERS, STATS */
const { useState, useEffect, useRef } = React;

// ============================================================
// LEARNING JOURNEY
// ============================================================
function Journey() {
  const t = useT();
  return (
    <section className="section" id="journey">
      <div className="container">
        <Reveal className="section-head">
          <span className="eyebrow"><span className="dot"></span>{t.journey.eyebrow}</span>
          <h2>{t.journey.titleA}<br/>{t.journey.titleB}</h2>
          <p className="lead">{t.journey.lead}</p>
        </Reveal>

        <div className="journey-wrap">
          <div className="journey">
            {t.journey.steps.map((s, i) => (
              <Reveal key={i} delay={i * 150}>
                <div className="step">
                  <div className="num">{s.num}</div>
                  <h3>{s.title}</h3>
                  <p>{s.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TEACHERS — with portrait illustrations
// ============================================================
const TEACHER_PORTRAIT_STYLES = ["gold", "navy", "purple", "warm"];

function Teachers() {
  const t = useT();
  return (
    <section className="section" id="teachers" style={{ paddingTop: 60 }}>
      <FloatingDeco variant="subtle"/>
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <Reveal className="section-head">
          <span className="eyebrow"><span className="dot"></span>{t.teachers.eyebrow}</span>
          <h2>{t.teachers.titleA}<br/>{t.teachers.titleB}</h2>
          <p className="lead">{t.teachers.lead}</p>
        </Reveal>

        <div className="teachers-grid">
          {TEACHERS.map((tr, i) => {
            const loc = t.teachers.names[tr.initials] || { name: tr.name, subj: tr.subj };
            const portraitStyle = TEACHER_PORTRAIT_STYLES[i % TEACHER_PORTRAIT_STYLES.length];
            return (
              <Reveal key={tr.initials} delay={i * 100}>
                <div className="teacher">
                  <div className="teacher-photo">
                    <TeacherPortrait style={portraitStyle} initials={tr.initials}/>
                    <div style={{ position: "absolute", bottom: 14, insetInlineEnd: 14, padding: "5px 12px", borderRadius: 999, background: "rgba(255,255,255,0.95)", color: "#0F1B3D", fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 12 }}>
                      <Icon name="check" size={12}/> {t.teachers.verified}
                    </div>
                  </div>
                  <div className="teacher-body">
                    <h3>{loc.name}</h3>
                    <div className="subj">{loc.subj}</div>
                    <div className="teacher-stats">
                      <div><Icon name="clock" size={13}/> {tr.years} {t.teachers.years}</div>
                      <div><Icon name="users" size={13}/> {tr.students.toLocaleString()} {t.teachers.students}</div>
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ACHIEVEMENTS
// ============================================================
function Achievements() {
  const t = useT();
  return (
    <section className="section achievements" id="achievements">
      <div className="container">
        <Reveal className="section-head">
          <span className="eyebrow"><span className="dot"></span>{t.achievements.eyebrow}</span>
          <h2 style={{ color: "var(--always-cream)" }}>{t.achievements.titleA}<br/>{t.achievements.titleB}</h2>
          <p className="lead">{t.achievements.lead}</p>
        </Reveal>

        <div className="ach-grid">
          {STATS.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="ach-tile">
                <div className="n">
                  <Counter value={s.n} decimal={s.decimal} suffix={s.suffix}/>
                </div>
                <div className="l">{t.achievements.statLabels[i]}</div>
              </div>
            </Reveal>
          ))}
        </div>

        <div className="cert-showcase">
          <Reveal delay={100}>
            <div className="cert">
              <div className="border-mark"/>
              <div style={{ fontFamily: "var(--f-display)", fontSize: 12, letterSpacing: "0.2em", color: "var(--gold-deep)", textTransform: "uppercase" }}>
                <span className="en">Certificate of Achievement</span>
              </div>
              <div style={{ fontFamily: "var(--f-display)", fontSize: 14, color: "var(--ink-soft)", marginTop: 6 }}>{t.achievements.cert.kicker}</div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: 32, color: "var(--navy)", marginTop: 28, lineHeight: 1.2 }}>
                {t.achievements.cert.student}
              </div>
              <div style={{ fontFamily: "var(--f-body)", fontSize: 15, color: "var(--ink-soft)", marginTop: 8, maxWidth: "70%" }}>
                {t.achievements.cert.body1}
                <br/>{t.achievements.cert.body2} <strong style={{ color: "var(--gold-deep)" }}>{t.achievements.cert.grade}</strong>
              </div>
              <div className="seal">
                <Icon name="star" size={28}/>
              </div>
              <div style={{ position: "absolute", bottom: 40, insetInlineEnd: 40, textAlign: "start", fontFamily: "var(--f-en)", fontSize: 11, color: "var(--ink-mute)" }}>
                <div style={{ borderTop: "1.5px solid var(--navy)", paddingTop: 6, minWidth: 120 }}>
                  {t.achievements.cert.sig}<br/>{t.achievements.cert.date}
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={250}>
            <div>
              <h3 style={{ color: "var(--always-cream)", fontSize: 32, lineHeight: 1.25 }}>
                {t.achievements.rightTitleA}<br/>
                <span style={{ background: "linear-gradient(135deg, var(--gold-2), var(--yellow))", WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent" }}>
                  {t.achievements.rightTitleB}
                </span>
              </h3>
              <p style={{ color: "rgba(251, 246, 236, 0.75)", fontSize: 17, lineHeight: 1.7, marginTop: 16 }}>
                {t.achievements.rightLead}
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0", display: "flex", flexDirection: "column", gap: 14 }}>
                {t.achievements.bullets.map((text, i) => (
                  <li key={i} style={{ display: "flex", alignItems: "center", gap: 12, color: "rgba(251, 246, 236, 0.92)", fontFamily: "var(--f-display)", fontWeight: 500 }}>
                    <span style={{ width: 28, height: 28, borderRadius: "50%", background: "rgba(217,164,65,0.2)", color: "var(--gold-2)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                      <Icon name="check" size={14}/>
                    </span>
                    {text}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TESTIMONIALS
// ============================================================
function Testimonials() {
  const t = useT();
  const { lang } = window.useEyad();
  const trackRef = useRef(null);
  const scroll = (dir) => {
    const tr = trackRef.current; if (!tr) return;
    const amount = 444 * dir;
    const sign = lang === "ar" ? -1 : 1;
    tr.scrollBy({ left: sign * amount, behavior: "smooth" });
  };
  return (
    <section className="section" id="stories">
      <div className="container">
        <Reveal className="section-head">
          <span className="eyebrow"><span className="dot"></span>{t.stories.eyebrow}</span>
          <h2>{t.stories.titleA}<br/>{t.stories.titleB}</h2>
          <p className="lead">{t.stories.lead}</p>
        </Reveal>

        <div className="testi-wrap">
          <div className="testi-track" ref={trackRef}>
            {t.testimonials.map((it, i) => (
              <article className="testi" key={i}>
                <div className="stars">{"★★★★★"}</div>
                <div className="quote-mark">"</div>
                <p className="body">{it.body}</p>
                <div className="who">
                  <div className="avatar" style={{ width: 44, height: 44 }}>{it.initials}</div>
                  <div>
                    <div className="name">{it.name}</div>
                    <div className="role">{it.role}</div>
                  </div>
                </div>
              </article>
            ))}
          </div>
          <div className="testi-controls">
            <button onClick={() => scroll(1)} aria-label={t.stories.prev}><Icon name="chevron" size={18}/></button>
            <button onClick={() => scroll(-1)} aria-label={t.stories.next} style={{ transform: "scaleX(-1)" }}><Icon name="chevron" size={18}/></button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CTA + signup form
// ============================================================
function CTA({ mascotStyle, signupRef }) {
  const t = useT();
  const [form, setForm] = useState({ studentName: "", age: "", parentEmail: "", subject: "all" });
  const [errs, setErrs] = useState({});
  const [submitted, setSubmitted] = useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    const newErr = {};
    if (!form.studentName.trim()) newErr.studentName = t.cta.errors.name;
    if (!form.age || Number(form.age) < 4 || Number(form.age) > 17) newErr.age = t.cta.errors.age;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.parentEmail)) newErr.parentEmail = t.cta.errors.email;
    setErrs(newErr);
    if (Object.keys(newErr).length === 0) setSubmitted(true);
  };

  return (
    <section className="section cta" id="cta" ref={signupRef}>
      <div className="container">
        <div className="cta-inner">
          <div className="cta-mascot">
            <Mascot style={mascotStyle}/>
          </div>
          <div style={{ position: "relative", zIndex: 1 }}>
            <span className="eyebrow"><span className="dot"></span>{t.cta.eyebrow}</span>
            <h2>{t.cta.titleA}<br/>{t.cta.titleB}</h2>
            <p>{t.cta.body}</p>
            <ul style={{ listStyle: "none", padding: 0, marginTop: 28, display: "flex", flexDirection: "column", gap: 12 }}>
              {t.cta.bullets.map((b) => (
                <li key={b} style={{ display: "flex", alignItems: "center", gap: 12, color: "rgba(251,246,236,0.9)", fontFamily: "var(--f-display)" }}>
                  <span style={{ width: 26, height: 26, borderRadius: "50%", background: "rgba(217,164,65,0.25)", color: "var(--gold-2)", display: "grid", placeItems: "center" }}>
                    <Icon name="check" size={13}/>
                  </span>
                  {b}
                </li>
              ))}
            </ul>
          </div>

          <div className="signup" style={{ position: "relative", zIndex: 1 }}>
            {submitted ? (
              <div className="signup-success">
                <div className="check"><Icon name="check" size={28}/></div>
                <h3 style={{ fontSize: 22 }}>{t.cta.success.title}</h3>
                <p>{t.cta.success.body1}<br/>{t.cta.success.body2}</p>
                <button className="btn btn-ghost" style={{ marginTop: 18, background: "rgba(255,255,255,0.08)", borderColor: "rgba(255,255,255,0.15)", color: "var(--always-cream)" }}
                  onClick={() => { setSubmitted(false); setForm({ studentName: "", age: "", parentEmail: "", subject: "all" }); }}>
                  {t.cta.success.again}
                </button>
              </div>
            ) : (
              <form onSubmit={onSubmit}>
                <div style={{ marginBottom: 18, fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 18, color: "var(--always-cream)" }}>
                  {t.cta.formTitle}
                </div>
                <label>{t.cta.labels.name}</label>
                <input type="text" placeholder={t.cta.ph.name}
                  value={form.studentName}
                  onChange={(e) => setForm({ ...form, studentName: e.target.value })}/>
                {errs.studentName && <div className="err">{errs.studentName}</div>}
                <div className="row">
                  <div>
                    <label>{t.cta.labels.age}</label>
                    <input type="number" min="4" max="17" placeholder={t.cta.ph.age}
                      value={form.age}
                      onChange={(e) => setForm({ ...form, age: e.target.value })}/>
                  </div>
                  <div>
                    <label>{t.cta.labels.subject}</label>
                    <select value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })}>
                      <option value="all"     style={{ color: "#000" }}>{t.cta.subjectOpts.all}</option>
                      <option value="quran"   style={{ color: "#000" }}>{t.cta.subjectOpts.quran}</option>
                      <option value="arabic"  style={{ color: "#000" }}>{t.cta.subjectOpts.arabic}</option>
                      <option value="math"    style={{ color: "#000" }}>{t.cta.subjectOpts.math}</option>
                      <option value="science" style={{ color: "#000" }}>{t.cta.subjectOpts.science}</option>
                    </select>
                  </div>
                </div>
                {errs.age && <div className="err">{errs.age}</div>}
                <label>{t.cta.labels.email}</label>
                <input type="email" placeholder={t.cta.ph.email} dir="ltr"
                  value={form.parentEmail}
                  onChange={(e) => setForm({ ...form, parentEmail: e.target.value })}/>
                {errs.parentEmail && <div className="err">{errs.parentEmail}</div>}
                <button type="submit" className="btn btn-primary">
                  {t.cta.submit}
                  <Icon name="arrow" size={16}/>
                </button>
                <div style={{ marginTop: 14, fontSize: 12, color: "rgba(251,246,236,0.5)", textAlign: "center" }}>
                  {t.cta.micro} <a href="#" style={{ color: "var(--gold-2)" }}>{t.cta.terms}</a> {t.cta.and} <a href="#" style={{ color: "var(--gold-2)" }}>{t.cta.privacy}</a>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  const t = useT();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-about">
            <div className="brand" style={{ display: "flex", alignItems: "center", gap: 12, fontFamily: "var(--f-display)", fontWeight: 900, fontSize: 22, color: "var(--navy)" }}>
              <span className="brand-mark"><Icon name="spark" size={20}/></span>
              {t.nav.brand}
            </div>
            <p>{t.footer.about}</p>
            <div className="socials">
              <a href="#"><Icon name="twitter" size={16}/></a>
              <a href="#"><Icon name="insta" size={16}/></a>
              <a href="#"><Icon name="youtube" size={16}/></a>
              <a href="#"><Icon name="tiktok" size={16}/></a>
            </div>
          </div>
          {Object.entries(t.footer.cols).map(([k, col]) => (
            <div key={k}>
              <h4>{col.h}</h4>
              <ul>
                {col.items.map((item) => (
                  <li key={item}><a href="#">{item}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div>{t.footer.copyright}</div>
          <div style={{ fontFamily: "var(--f-en)", direction: "ltr" }}>{t.footer.tag}</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Journey, Teachers, Achievements, Testimonials, CTA, Footer });