// pages.jsx — About, Gallery, Testimonials, Contact
(function () {
  const { useState } = React;
  const Icon = window.Icon;
  const D = window.DATA;
  const { PageHero, Placeholder, TestimonialCard, Stars, CountUp } = window;

  /* ===================== ABOUT ===================== */
  function About({ navigate }) {
    const I = D.INSTITUTE;
    const values = [
      { icon: "target", t: "Practical first", d: "We teach the skills employers and clients actually pay for — through real projects, not just theory." },
      { icon: "heart", t: "Student-centered", d: "Small batches and patient mentors mean nobody gets left behind." },
      { icon: "shield", t: "Integrity", d: "Honest guidance, transparent fees, and certificates you can trust and verify." },
      { icon: "rocket", t: "Always evolving", d: "Our curriculum keeps pace with the tools and trends of the industry." },
    ];
    const steps = [
      { t: "Founded in Lalamusa", y: "2017", d: "INFOTECH opens its doors in Nizampura with a handful of courses and a big mission." },
      { t: "Modern lab expansion", y: "2020", d: "New computer labs and 3D/CAD workstations to support creative and engineering programs." },
      { t: "3,500+ graduates", y: "2024", d: "Thousands of students trained, many now freelancing or employed across Pakistan." },
      { t: "Online verification", y: "2025", d: "Launched instant, secure online certificate verification for students and employers." },
    ];
    return (
      <main>
        <PageHero eyebrow="About Us" title="Empowering Lalamusa, one skill at a time"
          sub="For eight years, INFOTECH Institute of Computer Education has been helping students build practical digital skills and real careers."
          crumb={[{ label: "About" }]} navigate={navigate} />

        <section className="section">
          <div className="wrap intro-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
            <div style={{ position: "relative" }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <image-slot id="about-1" shape="rounded" radius="20" placeholder="Campus photo" style={{ width: "100%", height: 200, display: "block" }}></image-slot>
                <image-slot id="about-2" shape="rounded" radius="20" placeholder="Class photo" style={{ width: "100%", height: 200, display: "block", marginTop: 28 }}></image-slot>
                <image-slot id="about-3" shape="rounded" radius="20" placeholder="Lab photo" style={{ width: "100%", height: 200, display: "block" }}></image-slot>
                <image-slot id="about-4" shape="rounded" radius="20" placeholder="Event photo" style={{ width: "100%", height: 200, display: "block", marginTop: 28 }}></image-slot>
              </div>
            </div>
            <div>
              <span className="eyebrow">Our Story</span>
              <h2 style={{ fontSize: "clamp(1.8rem,3.2vw,2.6rem)", marginTop: 16 }}>A local institute with national-standard training</h2>
              <p className="muted" style={{ marginTop: 18, fontSize: "1.06rem" }}>
                INFOTECH was founded on a simple belief: world-class digital skills shouldn't require leaving your hometown. From our campus on GT Road in Nizampura, we've trained thousands of students in design, marketing, CAD and IT — many of whom now freelance internationally or work at leading firms.
              </p>
              <p className="muted" style={{ marginTop: 14, fontSize: "1.06rem" }}>
                Our approach is hands-on and personal. Modern labs, working-professional instructors, and project-based learning ensure every student finishes with a portfolio and the confidence to use it.
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 28, flexWrap: "wrap" }}>
                <button className="btn btn-accent" onClick={() => navigate("courses")}><Icon name="book" size={18} /> Explore courses</button>
                <button className="btn btn-outline" onClick={() => navigate("contact")}><Icon name="pin" size={18} /> Visit campus</button>
              </div>
            </div>
          </div>
        </section>

        {/* mission / vision */}
        <section className="section" style={{ background: "var(--cream-2)", paddingTop: 0 }}>
          <div className="wrap" style={{ paddingTop: "clamp(56px,7vw,104px)" }}>
            <div className="mv-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
              {[["target", "Our Mission", "To make high-quality, career-focused computer education affordable and accessible for every student in Lalamusa and beyond."],
                ["globe", "Our Vision", "To be the region's most trusted institute — where students gain the skills, portfolio and confidence to compete anywhere in the world."]].map(([ic, t, d]) => (
                <div key={t} className="card" style={{ padding: 34 }}>
                  <span style={{ width: 56, height: 56, borderRadius: 16, background: "var(--brand)", color: "#fff", display: "grid", placeItems: "center" }}><Icon name={ic} size={28} /></span>
                  <h3 style={{ fontSize: "1.4rem", marginTop: 18 }}>{t}</h3>
                  <p className="muted" style={{ marginTop: 10, fontSize: "1.02rem" }}>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* values */}
        <section className="section">
          <div className="wrap">
            <div className="head center"><span className="eyebrow" style={{ justifyContent: "center" }}>What We Stand For</span><h2>Our core values</h2></div>
            <div className="why-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 22, marginTop: 44 }}>
              {values.map((v, i) => (
                <div key={v.t} className="card" style={{ padding: 26, textAlign: "center" }}>
                  <span style={{ width: 56, height: 56, borderRadius: 16, display: "inline-grid", placeItems: "center", background: i % 2 ? "rgba(10,63,90,.08)" : "var(--accent-soft)", color: i % 2 ? "var(--brand)" : "var(--accent-700)" }}><Icon name={v.icon} size={28} /></span>
                  <h3 style={{ fontSize: "1.18rem", marginTop: 16 }}>{v.t}</h3>
                  <p className="muted" style={{ marginTop: 8, fontSize: ".95rem" }}>{v.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* timeline */}
        <section className="section" style={{ background: "var(--cream-2)" }}>
          <div className="wrap">
            <div className="head center"><span className="eyebrow" style={{ justifyContent: "center" }}>Our Journey</span><h2>Milestones along the way</h2></div>
            <div className="timeline" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24, marginTop: 50, position: "relative" }}>
              {steps.map((s, i) => (
                <div key={i} style={{ position: "relative" }}>
                  <div style={{ width: 18, height: 18, borderRadius: "50%", background: "var(--accent)", border: "4px solid var(--cream-2)", boxShadow: "0 0 0 2px var(--accent)", marginBottom: 22 }} />
                  <div style={{ fontWeight: 800, color: "var(--brand)", fontSize: "1.4rem" }}>{s.y}</div>
                  <h4 style={{ fontSize: "1.08rem", marginTop: 6 }}>{s.t}</h4>
                  <p className="muted" style={{ marginTop: 8, fontSize: ".94rem" }}>{s.d}</p>
                </div>
              ))}
              <div className="timeline-line" style={{ position: "absolute", top: 9, left: "12%", right: "12%", height: 2, background: "var(--line)", zIndex: 0 }} />
            </div>
          </div>
        </section>
      </main>
    );
  }

  /* ===================== GALLERY ===================== */
  function Gallery({ navigate }) {
    const cats = ["All", "Campus", "Classes", "Events"];
    const [f, setF] = useState("All");
    const items = D.GALLERY.filter((g) => f === "All" || g.cat === f);
    return (
      <main>
        <PageHero eyebrow="Gallery" title="Life at INFOTECH"
          sub="A look inside our campus, classes and events. Drop your own photos into any frame below."
          crumb={[{ label: "Gallery" }]} navigate={navigate} />
        <section className="section">
          <div className="wrap">
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 32 }}>
              {cats.map((c) => (
                <button key={c} onClick={() => setF(c)} style={{ padding: "10px 20px", borderRadius: 999, fontWeight: 700, fontSize: ".92rem", border: "1.5px solid", cursor: "pointer", transition: "all .15s ease",
                  borderColor: f === c ? "var(--brand)" : "var(--line)", background: f === c ? "var(--brand)" : "var(--surface)", color: f === c ? "#fff" : "var(--ink-2)" }}>{c}</button>
              ))}
            </div>
            <div className="gallery-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gridAutoRows: "220px", gap: 18 }}>
              {items.map((g) => (
                <div key={g.id} style={{ gridColumn: g.span === "wide" ? "span 2" : "span 1", gridRow: g.span === "tall" ? "span 2" : "span 1", position: "relative", borderRadius: "var(--r-lg)", overflow: "hidden", boxShadow: "var(--sh-sm)" }}>
                  <image-slot id={"gal-" + g.id} src={g.image} shape="rect" placeholder={"Drop: " + g.label} fit="cover" style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
                  <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "30px 18px 16px", background: "linear-gradient(transparent, rgba(6,44,63,.82))", pointerEvents: "none" }}>
                    <span style={{ fontSize: ".72rem", fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--accent)" }}>{g.cat}</span>
                    <div style={{ color: "#fff", fontWeight: 700, marginTop: 3 }}>{g.label}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
    );
  }

  /* ===================== TESTIMONIALS ===================== */
  function Testimonials({ navigate }) {
    return (
      <main>
        <PageHero eyebrow="Testimonials" title="What our students say"
          sub="Don't just take our word for it — hear from graduates who turned their training into real opportunities."
          crumb={[{ label: "Testimonials" }]} navigate={navigate} />
        <section className="section">
          <div className="wrap">
            <div className="stat-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20, marginBottom: 56 }}>
              {[["4.9", "Average rating", "star"], ["3,500+", "Happy graduates", "users"], ["95%", "Would recommend", "heart"], ["12+", "Courses offered", "book"]].map(([v, l, ic]) => (
                <div key={l} className="card" style={{ padding: 24, textAlign: "center" }}>
                  <span style={{ color: "var(--accent-700)" }}><Icon name={ic} size={26} /></span>
                  <div style={{ fontSize: "1.9rem", fontWeight: 800, color: "var(--brand)", marginTop: 8 }}><CountUp value={v} /></div>
                  <div className="muted" style={{ fontSize: ".9rem", fontWeight: 600 }}>{l}</div>
                </div>
              ))}
            </div>
            <div className="masonry" style={{ columnCount: 3, columnGap: 24 }}>
              {D.TESTIMONIALS.map((t) => (
                <div key={t.name} style={{ breakInside: "avoid", marginBottom: 24 }}>
                  <TestimonialCard t={t} />
                </div>
              ))}
            </div>
            <div style={{ marginTop: 48, textAlign: "center", background: "var(--cream-2)", borderRadius: "var(--r-xl)", padding: "clamp(32px,5vw,56px)" }}>
              <h2 style={{ fontSize: "clamp(1.6rem,3vw,2.2rem)" }}>Ready to write your own success story?</h2>
              <p className="muted" style={{ marginTop: 12, maxWidth: 480, marginInline: "auto" }}>Join thousands of students who started right here.</p>
              <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 24, flexWrap: "wrap" }}>
                <button className="btn btn-accent" onClick={() => navigate("courses")}><Icon name="book" size={18} /> Browse courses</button>
                <button className="btn btn-brand" onClick={() => navigate("contact")}><Icon name="rocket" size={18} /> Enroll today</button>
              </div>
            </div>
          </div>
        </section>
      </main>
    );
  }

  /* ===================== CONTACT ===================== */
  function Contact({ navigate }) {
    const I = D.INSTITUTE;
    const [form, setForm] = useState({ name: "", email: "", phone: "", course: "", message: "", company: "" });
    const [errors, setErrors] = useState({});
    const [sent, setSent] = useState(false);
    const [sending, setSending] = useState(false);

    const set = (k, v) => { setForm((f) => ({ ...f, [k]: v })); if (errors[k]) setErrors((e) => ({ ...e, [k]: null })); };
    const validate = () => {
      const e = {};
      if (!form.name.trim()) e.name = "Please enter your name.";
      if (!form.email.trim()) e.email = "Please enter your email.";
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Please enter a valid email address.";
      if (!form.phone.trim()) e.phone = "Please enter your phone number.";
      else if (!/^[\d\s+\-()]{7,}$/.test(form.phone)) e.phone = "Please enter a valid phone number.";
      if (!form.message.trim()) e.message = "Please write a short message.";
      return e;
    };
    const submit = (ev) => {
      ev.preventDefault();
      const e = validate(); setErrors(e);
      if (Object.keys(e).length) return;
      setSending(true);
      window.api("contact", { method: "POST", body: form }).then((res) => {
        setSending(false);
        if (res.ok && res.data && res.data.ok) {
          setSent(true);
        } else if (res.data && res.data.errors) {
          setErrors(res.data.errors);
        } else {
          setErrors({ message: (res.data && res.data.message) || "Sorry, we couldn't send your message. Please try again or call us." });
        }
      });
    };

    return (
      <main>
        <PageHero eyebrow="Contact Us" title="Let's talk about your future"
          sub="Questions about a course, fees or admissions? Send us a message or visit our campus — we'd love to help."
          crumb={[{ label: "Contact" }]} navigate={navigate} />

        <section className="section">
          <div className="wrap contact-page" style={{ display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: 44, alignItems: "start" }}>
            {/* info column */}
            <div style={{ display: "grid", gap: 16 }}>
              {[["pin", "Visit us", I.address, "Get directions", "https://www.google.com/maps?q=Lalamusa+GT+Road"],
                ["phone", "Call us", I.phone, "Call now", "tel:" + I.phoneHref],
                ["mail", "Email us", I.email, "Send email", "mailto:" + I.email],
                ["clock", "Opening hours", I.hours, null, null]].map(([ic, t, v, cta, href]) => (
                <div key={t} className="card" style={{ padding: 22, display: "flex", gap: 16, alignItems: "flex-start" }}>
                  <span style={{ width: 48, height: 48, borderRadius: 13, background: "var(--accent-soft)", color: "var(--accent-700)", display: "grid", placeItems: "center", flex: "0 0 auto" }}><Icon name={ic} size={22} /></span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 800 }}>{t}</div>
                    <div className="muted" style={{ fontSize: ".95rem", marginTop: 3 }}>{v}</div>
                    {cta && <a href={href} style={{ display: "inline-flex", alignItems: "center", gap: 5, marginTop: 8, fontWeight: 700, fontSize: ".88rem", color: "var(--brand)" }}>{cta} <Icon name="arrowRight" size={15} /></a>}
                  </div>
                </div>
              ))}
              <div className="card" style={{ padding: 0, overflow: "hidden", height: 220 }}>
                <iframe title="map" src="https://www.google.com/maps?q=Lalamusa,GT+Road&output=embed" style={{ width: "100%", height: "100%", border: 0 }} loading="lazy"></iframe>
              </div>
            </div>

            {/* form column */}
            <div className="card" style={{ padding: "clamp(24px,4vw,40px)" }}>
              {sent ? (
                <div style={{ textAlign: "center", padding: "30px 10px" }}>
                  <span style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--ok-bg)", color: "var(--ok)", display: "inline-grid", placeItems: "center" }}><Icon name="check" size={38} stroke={2.4} /></span>
                  <h3 style={{ marginTop: 18, fontSize: "1.5rem" }}>Message sent!</h3>
                  <p className="muted" style={{ marginTop: 10, maxWidth: 380, marginInline: "auto" }}>Thank you, {form.name.split(" ")[0]}. Our team will get back to you within one working day.</p>
                  <button className="btn btn-outline" style={{ marginTop: 22 }} onClick={() => { setSent(false); setForm({ name: "", email: "", phone: "", course: "", message: "", company: "" }); }}>Send another message</button>
                </div>
              ) : (
                <form onSubmit={submit} noValidate>
                  <h2 style={{ fontSize: "1.5rem" }}>Send us a message</h2>
                  <p className="muted" style={{ fontSize: ".95rem", marginTop: 6, marginBottom: 24 }}>Fill out the form and we'll respond as soon as we can.</p>
                  {/* honeypot — hidden from humans, bots fill it */}
                  <input type="text" tabIndex={-1} autoComplete="off" value={form.company}
                    onChange={(e) => set("company", e.target.value)}
                    style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true" />
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                    <div className="field">
                      <label>Full name <span className="req">*</span></label>
                      <input className={"input" + (errors.name ? " err" : "")} value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="Your name" />
                      {errors.name && <span className="errmsg">{errors.name}</span>}
                    </div>
                    <div className="field">
                      <label>Phone <span className="req">*</span></label>
                      <input className={"input" + (errors.phone ? " err" : "")} value={form.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+92 3xx xxxxxxx" />
                      {errors.phone && <span className="errmsg">{errors.phone}</span>}
                    </div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 18 }}>
                    <div className="field">
                      <label>Email <span className="req">*</span></label>
                      <input className={"input" + (errors.email ? " err" : "")} value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="you@email.com" />
                      {errors.email && <span className="errmsg">{errors.email}</span>}
                    </div>
                    <div className="field">
                      <label>Interested course</label>
                      <select className="input" value={form.course} onChange={(e) => set("course", e.target.value)}>
                        <option value="">Select a course…</option>
                        {D.COURSES.map((c) => <option key={c.slug} value={c.title}>{c.title}</option>)}
                      </select>
                    </div>
                  </div>
                  <div className="field" style={{ marginTop: 18 }}>
                    <label>Message <span className="req">*</span></label>
                    <textarea className={"input" + (errors.message ? " err" : "")} rows={5} value={form.message} onChange={(e) => set("message", e.target.value)} placeholder="How can we help you?" style={{ resize: "vertical" }} />
                    {errors.message && <span className="errmsg">{errors.message}</span>}
                  </div>
                  <button type="submit" className="btn btn-accent btn-lg" disabled={sending} style={{ marginTop: 22, width: "100%", opacity: sending ? .8 : 1 }}>
                    {sending ? (<><span className="spinner" /> Sending…</>) : (<><Icon name="mail" size={19} /> Send message</>)}
                  </button>
                </form>
              )}
            </div>
          </div>
        </section>
      </main>
    );
  }

  Object.assign(window, { About, Gallery, Testimonials, Contact });
})();