// Simple page shells for secondary routes — realistic content so links feel live.

function PageHeader({ eyebrow, title, sub }) {
  return (
    <section className="page-head">
      <div className="container">
        <FadeUp>
          <div className="page-eyebrow">{eyebrow}</div>
          <h1 className="page-title">{title}</h1>
          <p className="page-sub" style={{ fontFamily: "Inter" }}>{sub}</p>
        </FadeUp>
      </div>
    </section>);

}

function CoursesPage() {
  return (
    <>
      <PageHeader
        eyebrow="Programs"
        title={<>Browse every program, <span className="serif">by the outcome you want.</span></>}
        sub="UG, PG, diploma and professional — filterable by field, duration, mode and fee." />
      
      <Courses />
      <CTA />
    </>);

}

function UniversitiesPage() {
  return (
    <>
      <PageHeader
        eyebrow="Partners"
        title={<>25 universities. <span className="serif">One curated network.</span></>}
        sub="Every partner vetted on recognition, course quality, placement record and student experience." />
      
      <UniversitiesAllGrid />
      <Compare />
    </>);

}

function ServicesPage() {
  return (
    <>
      <PageHeader
        eyebrow="Student services"
        title={<>From first call to <span className="serif">first promotion.</span></>}
        sub="Career counseling, admission support, mentorship, placement, scholarships — in one place." />
      
      <Services />
      <Outcomes />
    </>);

}

function AdmissionPage() {
  return (
    <>
      <PageHeader
        eyebrow="How it works"
        title={<>Five steps from <span className="serif">curiosity to classroom.</span></>}
        sub="Transparent, supported, and usually done in under a week." />
      
      <Process />
      <FAQ />
      <CTA />
    </>);

}

function AboutPage() {
  return (
    <>
      <PageHeader
        eyebrow="About"
        title={<>Empowering education, <span className="serif">elevating careers.</span></>}
        sub="MentVecity is an online-degree platform helping Indian students enrol in recognized programs, with advisors and mentors that stay the whole way." />
      
      <div className="container about-grid">
        <FadeUp>
          <div className="about-card">
            <div className="about-num">01</div>
            <h3>Student-first, always</h3>
            <p>We rank programs by fit and outcome — never by commissions. If a course isn't right for you, our advisor says so.</p>
          </div>
        </FadeUp>
        <FadeUp delay={1}>
          <div className="about-card">
            <div className="about-num">02</div>
            <h3>Recognized credentials</h3>
            <p>Every partner program is UGC-entitled or approved by the relevant statutory body, and recognized for jobs, higher studies and abroad.</p>
          </div>
        </FadeUp>
        <FadeUp delay={2}>
          <div className="about-card">
            <div className="about-num">03</div>
            <h3>Mentors that matter</h3>
            <p>Practitioners from product, finance, tech, design and ops — matched to your track, available monthly.</p>
          </div>
        </FadeUp>
      </div>
      <Stats />
      <Testimonials />
      <CTA />
    </>);

}

function ContactPage() {
  return (
    <>
      <PageHeader
        eyebrow="Contact"
        title={<>Book a call. <span className="serif">We'll take it from there.</span></>}
        sub="Free 30-minute advisor call. No commitment. We'll map a clear shortlist for you." />
      
      <div className="container contact-grid">
        <FadeUp>
          <div className="contact-card">
            <div className="contact-label">Advisor desk</div>
            <div className="contact-val">+91 79947 38868</div>
            <div className="contact-sub">Mon–Sat · 9:00 – 21:00 IST</div>
          </div>
        </FadeUp>
        <FadeUp delay={1}>
          <div className="contact-card">
            <div className="contact-label">Email</div>
            <div className="contact-val">mentvecity@gmail.com</div>
            <div className="contact-sub">Replies within 4 hours</div>
          </div>
        </FadeUp>
        <FadeUp delay={2}>
          <div className="contact-card">
            <div className="contact-label">Office</div>
            <div className="contact-val">Bengaluru, India</div>
            <div className="contact-sub">Koramangala · by appointment</div>
          </div>
        </FadeUp>
      </div>
      <CTA />
    </>);

}

function HomePage() {
  return (
    <>
      <Hero />
      <TrustStrip />
      <Pillars />
      <Courses />
      <Counseling />
      <Universities />
      <Services />
      <Process />
      <Outcomes />
      <Stats />
      <Testimonials />
      <Compare />
      <AppSection />
      <FAQ />
      <CTA />
    </>);

}

Object.assign(window, { HomePage, CoursesPage, UniversitiesPage, ServicesPage, AdmissionPage, AboutPage, ContactPage });