// home.jsx — Home page
(function () {
  const { useState } = React;
  const Icon = window.Icon;
  const D = window.DATA;
  const { Placeholder, Stars, useReveal, CountUp, CourseCard, TestimonialCard } = window;

  function Hero({ navigate }) {
    return (
      <section style={{ position: "relative", overflow: "hidden", background: "var(--cream)" }}>
        {/* warm decorative blobs */}
        <div style={{ position: "absolute", top: -120, right: -80, width: 460, height: 460, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(248,181,24,.18), transparent 70%)", filter: "blur(8px)" }} />
        <div style={{ position: "absolute", bottom: -160, left: -120, width: 420, height: 420, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(10,63,90,.08), transparent 70%)" }} />
        <div className="wrap hero-grid" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: 56, alignItems: "center", paddingBlock: "clamp(40px,6vw,84px)" }}>
          <div>
            <span className="chip"><Icon name="sparkle" size={14} fill /> Lalamusa's trusted IT institute since 2017</span>
            <h1 style={{ fontSize: "clamp(2.4rem, 5vw, 4rem)", marginTop: 20, lineHeight: 1.04 }}>
              Building digital skills for a <span style={{ position: "relative", color: "var(--brand)", whiteSpace: "nowrap" }}>
                smarter
                <svg viewBox="0 0 200 16" preserveAspectRatio="none" style={{ position: "absolute", left: 0, bottom: -6, width: "100%", height: 12 }}>
                  <path d="M2 11 C50 4, 150 4, 198 9" fill="none" stroke="var(--accent)" strokeWidth="5" strokeLinecap="round" />
                </svg>
              </span> tomorrow.
            </h1>
            <p style={{ fontSize: "1.16rem", color: "var(--ink-2)", marginTop: 22, maxWidth: 520 }}>
              Hands-on, career-focused courses in design, marketing, CAD & IT — taught by industry professionals in modern labs, right here in Nizampura, Lalamusa.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
              <button className="btn btn-accent btn-lg" onClick={() => navigate("courses")}>
                <Icon name="book" size={19} /> View Courses
              </button>
              <button className="btn btn-brand btn-lg" onClick={() => navigate("verify")}>
                <Icon name="shield" size={19} /> Verify Certificate
              </button>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 26, marginTop: 36, flexWrap: "wrap" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{ display: "flex" }}>
                  {["test-ayesha", "test-hamza", "test-usman", "test-maryam"].map((id, i) => (
                    <image-slot key={id} id={"hero-av-" + i} shape="circle" placeholder=" "
                      style={{ width: 40, height: 40, marginLeft: i ? -12 : 0, border: "3px solid var(--cream)", borderRadius: "50%" }}></image-slot>
                  ))}
                </div>
                <div style={{ lineHeight: 1.2 }}>
                  <div style={{ fontWeight: 800, color: "var(--ink)" }}>3,500+ students</div>
                  <div style={{ fontSize: ".82rem", color: "var(--ink-2)" }}>trained & certified</div>
                </div>
              </div>
              <div style={{ width: 1, height: 38, background: "var(--line)" }} />
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <Stars n={5} size={18} />
                <div style={{ lineHeight: 1.2 }}>
                  <div style={{ fontWeight: 800, color: "var(--ink)" }}>4.9 / 5</div>
                  <div style={{ fontSize: ".82rem", color: "var(--ink-2)" }}>student rating</div>
                </div>
              </div>
            </div>
          </div>

          {/* image collage */}
          <div className="hero-art" style={{ position: "relative" }}>
            <image-slot id="hero-main" shape="rounded" radius="26" placeholder="Drop a campus / class photo"
              style={{ width: "100%", height: 440, display: "block", boxShadow: "var(--sh-lg)" }}></image-slot>
            <div className="card" style={{ position: "absolute", left: -22, bottom: 38, padding: "16px 18px", display: "flex", alignItems: "center", gap: 13, boxShadow: "var(--sh-lg)" }}>
              <span style={{ width: 46, height: 46, borderRadius: 13, background: "var(--ok-bg)", display: "grid", placeItems: "center", color: "var(--ok)" }}>
                <Icon name="certificate" size={24} />
              </span>
              <div style={{ lineHeight: 1.25 }}>
                <div style={{ fontWeight: 800, fontSize: ".96rem" }}>Verified Certificate</div>
                <div style={{ fontSize: ".8rem", color: "var(--ink-2)" }}>Check authenticity online</div>
              </div>
            </div>
            <div className="card" style={{ position: "absolute", right: -18, top: 30, padding: "14px 18px", display: "flex", alignItems: "center", gap: 12, boxShadow: "var(--sh-lg)" }}>
              <span style={{ width: 44, height: 44, borderRadius: 12, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent-700)" }}>
                <Icon name="trophy" size={22} />
              </span>
              <div style={{ lineHeight: 1.2 }}>
                <div style={{ fontWeight: 800 }}>12+ courses</div>
                <div style={{ fontSize: ".8rem", color: "var(--ink-2)" }}>industry-ready</div>
              </div>
            </div>
          </div>
        </div>

        {/* marquee strip */}
        <div style={{ background: "var(--brand)", color: "rgba(255,255,255,.85)", overflow: "hidden", padding: "14px 0" }}>
          <div className="marquee" style={{ display: "flex", gap: 48, whiteSpace: "nowrap", fontWeight: 700, letterSpacing: ".02em" }}>
            {Array.from({ length: 2 }).flatMap((_, k) =>
              ["Adobe Photoshop", "Illustrator", "AutoCAD", "3ds Max", "Digital Marketing", "Blender", "Lumion", "CorelDraw", "Graphic Design"].map((s, i) => (
                <span key={k + "-" + i} style={{ display: "inline-flex", alignItems: "center", gap: 48 }}>
                  {s} <span style={{ color: "var(--accent)" }}>◆</span>
                </span>
              ))
            )}
          </div>
        </div>
      </section>
    );
  }

  function Intro({ navigate }) {
    const ref = useReveal();
    return (
      <section className="section" ref={ref}>
        <div className="wrap intro-grid" style={{ display: "grid", gridTemplateColumns: ".9fr 1.1fr", gap: 60, alignItems: "center" }}>
          <div className="fade-up" style={{ position: "relative" }}>
            <image-slot id="intro-1" shape="rounded" radius="22" placeholder="Drop a lab / students photo"
              style={{ width: "100%", height: 380, display: "block", boxShadow: "var(--sh-md)" }}></image-slot>
            <div style={{ position: "absolute", right: -16, bottom: -16, width: 140, height: 140, borderRadius: 22,
              background: "var(--accent)", display: "grid", placeItems: "center", textAlign: "center", color: "var(--brand-ink)", boxShadow: "var(--sh-lg)", padding: 14 }}>
              <div>
                <div style={{ fontSize: "2.1rem", fontWeight: 800, lineHeight: 1 }}>8</div>
                <div style={{ fontSize: ".78rem", fontWeight: 700, marginTop: 4 }}>years of excellence</div>
              </div>
            </div>
          </div>
          <div className="fade-up">
            <span className="eyebrow">Welcome to INFOTECH</span>
            <h2 style={{ fontSize: "clamp(1.9rem,3.4vw,2.8rem)", marginTop: 16 }}>Where ambition meets the right skills.</h2>
            <p className="muted" style={{ marginTop: 18, fontSize: "1.08rem" }}>
              INFOTECH Institute of Computer Education is a professional training center in Lalamusa dedicated to making real, job-ready digital skills accessible and affordable. From creative design to engineering CAD and digital marketing, we help students turn curiosity into a career.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 28 }}>
              {[["target", "Practical, project-based learning"], ["users", "Small batches, personal attention"], ["certificate", "Verifiable certification"], ["briefcase", "Freelance & job guidance"]].map(([ic, t]) => (
                <div key={t} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ width: 40, height: 40, borderRadius: 11, background: "rgba(10,63,90,.07)", display: "grid", placeItems: "center", color: "var(--brand)", flex: "0 0 auto" }}>
                    <Icon name={ic} size={20} />
                  </span>
                  <span style={{ fontWeight: 600, fontSize: ".98rem", paddingTop: 2 }}>{t}</span>
                </div>
              ))}
            </div>
            <button className="btn btn-brand" style={{ marginTop: 30 }} onClick={() => navigate("about")}>
              More about us <Icon name="arrowRight" size={18} />
            </button>
          </div>
        </div>
      </section>
    );
  }

  function Featured({ navigate }) {
    const ref = useReveal();
    const featured = D.COURSES.filter((c) => c.featured);
    return (
      <section className="section" ref={ref} style={{ background: "var(--cream-2)" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <div className="head fade-up">
              <span className="eyebrow">Featured Courses</span>
              <h2>Popular programs students love</h2>
            </div>
            <button className="btn btn-outline fade-up" onClick={() => navigate("courses")}>
              Browse all 12 courses <Icon name="arrowRight" size={18} />
            </button>
          </div>
          <div className="card-grid fade-up" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 26, marginTop: 44 }}>
            {featured.slice(0, 3).map((c) => <CourseCard key={c.slug} course={c} navigate={navigate} />)}
          </div>
          <div className="card-grid fade-up" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 26, marginTop: 26 }}>
            {featured.slice(3, 5).map((c) => <CourseCard key={c.slug} course={c} navigate={navigate} />)}
          </div>
        </div>
      </section>
    );
  }

  function Why() {
    const ref = useReveal();
    return (
      <section className="section" ref={ref}>
        <div className="wrap">
          <div className="head center fade-up">
            <span className="eyebrow" style={{ justifyContent: "center" }}>Why Choose Us</span>
            <h2>A learning experience built around you</h2>
            <p>Everything we do is designed to help you finish with real skills, a portfolio, and the confidence to use them.</p>
          </div>
          <div className="why-grid fade-up" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22, marginTop: 48 }}>
            {D.WHY.map((w, i) => (
              <div key={w.t} className="why-card card" style={{ padding: 28, transition: "transform .2s ease, box-shadow .2s ease" }}>
                <span style={{ width: 56, height: 56, borderRadius: 16, display: "grid", placeItems: "center",
                  background: i % 2 ? "rgba(10,63,90,.08)" : "var(--accent-soft)", color: i % 2 ? "var(--brand)" : "var(--accent-700)" }}>
                  <Icon name={w.icon} size={28} />
                </span>
                <h3 style={{ fontSize: "1.22rem", marginTop: 20 }}>{w.t}</h3>
                <p className="muted" style={{ marginTop: 10, fontSize: ".98rem" }}>{w.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function StatsBand() {
    const ref = useReveal();
    return (
      <section ref={ref} style={{ position: "relative", overflow: "hidden", background: "linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 100%)", color: "#fff" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.6px)", backgroundSize: "22px 22px", opacity: .5 }} />
        <div style={{ position: "absolute", top: -100, right: -60, width: 380, height: 380, borderRadius: "50%", background: "radial-gradient(circle, rgba(248,181,24,.22), transparent 70%)" }} />
        <div className="wrap section" style={{ position: "relative" }}>
          <div className="stat-grid fade-up" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 30 }}>
            {D.STATS.map((s) => (
              <div key={s.label} style={{ textAlign: "center" }}>
                <span style={{ width: 60, height: 60, borderRadius: 16, display: "inline-grid", placeItems: "center", background: "rgba(255,255,255,.1)", color: "var(--accent)", marginBottom: 16 }}>
                  <Icon name={s.icon} size={30} />
                </span>
                <div style={{ fontSize: "clamp(2.2rem,4vw,3.2rem)", fontWeight: 800, lineHeight: 1, letterSpacing: "-.02em" }}><CountUp value={s.value} /></div>
                <div style={{ marginTop: 10, color: "rgba(255,255,255,.78)", fontWeight: 600 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function HomeTestimonials({ navigate }) {
    const ref = useReveal();
    return (
      <section className="section" ref={ref} style={{ background: "var(--cream-2)" }}>
        <div className="wrap">
          <div className="head center fade-up">
            <span className="eyebrow" style={{ justifyContent: "center" }}>Student Stories</span>
            <h2>Real results from real students</h2>
          </div>
          <div className="card-grid fade-up" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24, marginTop: 46 }}>
            {D.TESTIMONIALS.slice(0, 3).map((t) => <TestimonialCard key={t.name} t={t} />)}
          </div>
          <div style={{ textAlign: "center", marginTop: 36 }}>
            <button className="btn btn-outline fade-up" onClick={() => navigate("testimonials")}>Read more stories <Icon name="arrowRight" size={18} /></button>
          </div>
        </div>
      </section>
    );
  }

  function VerifyCTA({ navigate }) {
    const ref = useReveal();
    const [val, setVal] = useState("");
    return (
      <section className="section" ref={ref}>
        <div className="wrap">
          <div className="verify-cta fade-up" style={{ position: "relative", overflow: "hidden", borderRadius: "var(--r-xl)",
            background: "linear-gradient(120deg, var(--brand-ink), var(--brand-700))", color: "#fff", padding: "clamp(32px,5vw,64px)" }}>
            <div style={{ position: "absolute", right: -60, bottom: -80, width: 360, height: 360, borderRadius: "50%", background: "radial-gradient(circle, rgba(248,181,24,.2), transparent 70%)" }} />
            <div className="verify-cta-grid" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 44, alignItems: "center" }}>
              <div>
                <span className="chip" style={{ background: "rgba(255,255,255,.14)", color: "#fff" }}><Icon name="shield" size={14} /> Secure & instant</span>
                <h2 style={{ color: "#fff", fontSize: "clamp(1.8rem,3.2vw,2.6rem)", marginTop: 18 }}>Verify a certificate in seconds</h2>
                <p style={{ color: "rgba(255,255,255,.8)", marginTop: 14, fontSize: "1.05rem", maxWidth: 440 }}>
                  Employers and students can confirm any INFOTECH certificate is authentic. Just enter the Certificate ID or Registration Number.
                </p>
              </div>
              <form onSubmit={(e) => { e.preventDefault(); navigate("verify", null, val); }}
                className="card" style={{ padding: 22, display: "grid", gap: 12 }}>
                <label style={{ fontWeight: 700, color: "var(--ink)", fontSize: ".92rem" }}>Certificate ID or Registration #</label>
                <input className="input" placeholder="e.g. INFO-2025-GD-0142" value={val} onChange={(e) => setVal(e.target.value)} />
                <button type="submit" className="btn btn-accent" style={{ width: "100%" }}><Icon name="search" size={18} /> Verify now</button>
                <p style={{ fontSize: ".8rem", color: "var(--ink-3)", textAlign: "center", margin: 0 }}>Read-only & public — no login required</p>
              </form>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function ContactStrip({ navigate }) {
    const ref = useReveal();
    const I = D.INSTITUTE;
    return (
      <section className="section" ref={ref} style={{ paddingTop: 0 }}>
        <div className="wrap contact-strip" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "stretch" }}>
          <div className="fade-up">
            <span className="eyebrow">Visit Us</span>
            <h2 style={{ fontSize: "clamp(1.7rem,3vw,2.4rem)", marginTop: 14 }}>Come say hello in Nizampura</h2>
            <p className="muted" style={{ marginTop: 14 }}>Our doors are open six days a week. Drop by for a free consultation, a campus tour, or to enroll in your next course.</p>
            <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0", display: "grid", gap: 18 }}>
              {[["pin", "Address", I.address], ["phone", "Phone", I.phone], ["mail", "Email", I.email], ["clock", "Opening Hours", I.hours]].map(([ic, t, v]) => (
                <li key={t} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                  <span style={{ width: 48, height: 48, borderRadius: 13, background: "var(--surface)", boxShadow: "var(--sh-sm)", border: "1px solid var(--line-2)", display: "grid", placeItems: "center", color: "var(--brand)", flex: "0 0 auto" }}>
                    <Icon name={ic} size={22} />
                  </span>
                  <div>
                    <div style={{ fontWeight: 800, fontSize: ".95rem" }}>{t}</div>
                    <div className="muted" style={{ fontSize: ".96rem", marginTop: 2 }}>{v}</div>
                  </div>
                </li>
              ))}
            </ul>
            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              <button className="btn btn-brand" onClick={() => navigate("contact")}><Icon name="mail" size={18} /> Contact us</button>
              <a className="btn btn-outline" href={"tel:" + I.phoneHref}><Icon name="phone" size={18} /> Call now</a>
            </div>
          </div>
          <div className="fade-up" style={{ minHeight: 420, borderRadius: "var(--r-lg)", overflow: "hidden", boxShadow: "var(--sh-md)", border: "1px solid var(--line-2)" }}>
            <iframe title="INFOTECH location"
              src="https://www.google.com/maps?q=Lalamusa,GT+Road&output=embed"
              style={{ width: "100%", height: "100%", border: 0, filter: "saturate(1.05)" }} loading="lazy"></iframe>
          </div>
        </div>
      </section>
    );
  }

  function Home({ navigate }) {
    return (
      <main>
        <Hero navigate={navigate} />
        <Intro navigate={navigate} />
        <Featured navigate={navigate} />
        <Why />
        <StatsBand />
        <HomeTestimonials navigate={navigate} />
        <VerifyCTA navigate={navigate} />
        <ContactStrip navigate={navigate} />
      </main>
    );
  }

  window.Home = Home;
})();