import { createFileRoute } from "@tanstack/react-router";
import edunextLogo from "@/assets/edunext-logo.png.asset.json";
import { Award, ShieldCheck, BookOpen, FileText, Download, Building2, Phone, User, AlertCircle } from "lucide-react";
import { PageHero } from "@/components/layout/PageHero";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export const Route = createFileRoute("/bosse-affiliation")({
  head: () => ({
    meta: [
      { title: "BOSSE Affiliation | Nasheman Urdu Secondary School" },
      {
        name: "description",
        content:
          "Nasheman Urdu Secondary School is a BOSSE Accredited Institute offering BOSSE admission support, BOSSE student assistance, and BOSSE academic coordination through Edunext Educational Institute.",
      },
      { property: "og:title", content: "BOSSE Affiliation | Nasheman Urdu Secondary School" },
      {
        property: "og:description",
        content: "Our affiliation with the Board of Open Schooling and Skill Education (BOSSE).",
      },
    ],
  }),
  component: BossePage,
});

const cards = [
  { icon: ShieldCheck, title: "Certification Value", desc: "BOSSE certificates are widely recognised for higher education and employment, offering a credible and flexible pathway." },
  { icon: BookOpen, title: "Curriculum Details", desc: "A balanced, skill-oriented curriculum aligned with national standards, supporting both academic and vocational growth." },
  { icon: Award, title: "Eligibility Criteria", desc: "Open and inclusive admission norms designed to give every learner a fair opportunity to succeed." },
  { icon: Building2, title: "Academic Management", desc: "BOSSE admissions, student support, examination guidance, and administrative coordination are managed by Edunext Educational Institute. Contact: Javed Siddiqui – 9076717764." },
];

const faqs = [
  {
    q: "What is BOSSE?",
    a: "BOSSE (Board of Open Schooling and Skill Education) is an autonomous board offering open and flexible schooling along with skill-based education, enabling learners to study at their own pace with recognised certification.",
  },
  {
    q: "Is the BOSSE certificate valid for higher studies?",
    a: "Yes. BOSSE certificates are recognised for admission to higher education and for employment purposes, providing learners a legitimate and accepted academic pathway.",
  },
  {
    q: "What curriculum does BOSSE follow?",
    a: "BOSSE follows a comprehensive curriculum aligned with national educational standards, blending core academic subjects with skill-oriented and vocational components for holistic development.",
  },
  {
    q: "Who is eligible for admission under BOSSE?",
    a: "BOSSE adopts inclusive eligibility norms, welcoming learners of varied backgrounds and ages. Specific grade-level requirements are guided by board regulations and assessed at the time of admission.",
  },
  {
    q: "What subjects are offered?",
    a: "A wide range of subjects across languages, sciences, social sciences, mathematics, and skill modules are offered, allowing students to choose combinations suited to their goals.",
  },
];

function BossePage() {
  return (
    <>
      <PageHero
        title="BOSSE Affiliation"
        subtitle="Affiliated with the Board of Open Schooling and Skill Education for credible, flexible learning."
      />

      {/* Intro */}
      <section className="bg-background py-16 sm:py-20">
        <div className="mx-auto max-w-4xl px-4 text-center sm:px-6">
          <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
            Recognised Affiliation You Can Trust
          </h2>
          <p className="mt-4 text-base leading-relaxed text-muted-foreground">
            Nasheman Urdu Secondary School is a proud BOSSE Accredited Institute affiliated with the Board of Open
            Schooling and Skill Education. This affiliation ensures our students receive a
            recognised, flexible, and skill-focused education that opens doors to higher studies and
            careers, backed by dedicated BOSSE admission support and BOSSE student assistance.
          </p>
        </div>

        <div className="mx-auto mt-12 grid max-w-7xl grid-cols-1 gap-6 px-4 sm:px-6 md:grid-cols-2 lg:grid-cols-4">
          {cards.map((c) => (
            <Card key={c.title} className="border-border text-center transition-shadow hover:shadow-elegant">
              <CardContent className="p-8">
                <span className="mx-auto grid h-14 w-14 place-items-center rounded-full bg-accent text-primary">
                  <c.icon className="h-7 w-7" />
                </span>
                <h3 className="mt-5 text-lg font-bold text-foreground">{c.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{c.desc}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* BOSSE Academic Facilitation & Management */}
      <section className="bg-blue-50 py-16 sm:py-20">
        <div className="mx-auto max-w-5xl px-4 sm:px-6">
          <div className="mb-3 text-center">
            <span className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-primary">
              Managed By
            </span>
          </div>
          <h2 className="text-center text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
            BOSSE Academic Facilitation & Management
          </h2>
          <p className="mt-4 text-center text-base leading-relaxed text-muted-foreground">
            Nasheman Urdu Secondary School is a BOSSE Accredited Institute affiliated with BOSSE (Board of Open Schooling and Skill Education). All BOSSE-related academic processes, admissions guidance, student support, documentation, examination coordination, and administrative management are handled by Edunext Educational Institute.
          </p>
          <p className="mt-3 text-center text-sm text-muted-foreground">
            Students and parents seeking information regarding BOSSE admissions, eligibility, examinations, certification, and academic support may directly contact the BOSSE coordinator for BOSSE academic coordination.
          </p>

          {/* Edunext Logo */}
          <div className="mt-10 flex justify-center">
            <div className="flex items-center justify-center rounded-xl border border-border bg-card px-8 py-6 shadow-sm">
              <img
                src={edunextLogo.url}
                alt="Edunext Educational Services logo"
                className="h-20 w-auto object-contain"
              />
            </div>
          </div>

          {/* Emphasized Disclaimer */}
          <div className="mt-10 rounded-xl border-2 border-gold/40 bg-card p-6 sm:p-10 shadow">
            <p className="text-center text-lg font-bold leading-relaxed text-foreground sm:text-2xl">
              While Nasheman Urdu Secondary School is affiliated with BOSSE as an Accredited Institute,{" "}
              <span className="text-primary">ALL aspects of BOSSE</span> (including admissions, examinations, and student support) are{" "}
              <span className="text-primary">strictly handled and managed</span> by{" "}
              <span className="text-primary">Edunext Educational Institute</span>.
            </p>
          </div>

          {/* Upgraded Contact Card */}
          <Card className="mt-12 border-2 border-primary/20 shadow-elegant">
            <CardContent className="p-8 sm:p-12">
              <div className="flex flex-col items-center gap-8 sm:flex-row sm:items-center">
                <span className="grid h-24 w-24 shrink-0 place-items-center rounded-full bg-accent text-primary">
                  <User className="h-12 w-12" />
                </span>
                <div className="flex-1 text-center sm:text-left">
                  <h3 className="text-2xl font-bold text-foreground sm:text-3xl">BOSSE Coordinator</h3>
                  <div className="mt-5 space-y-3">
                    <p className="text-lg text-muted-foreground">
                      <span className="font-semibold text-foreground">Contact Person:</span> Javed Siddiqui
                    </p>
                    <div>
                      <a
                        href="tel:9076717764"
                        className="inline-flex items-center gap-3 rounded-lg bg-primary px-8 py-4 text-lg font-bold text-primary-foreground shadow-md transition-colors hover:bg-primary-dark"
                      >
                        <Phone className="h-6 w-6" />
                        9076717764
                      </a>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      <span className="font-semibold text-foreground">Role:</span> BOSSE Academic Coordinator & Student Support
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Important Notice Box */}
          <div className="mt-8 flex items-start gap-4 rounded-lg border-2 border-primary bg-card p-6 sm:p-8">
            <AlertCircle className="mt-0.5 h-6 w-6 shrink-0 text-primary" />
            <p className="text-sm leading-relaxed text-foreground sm:text-base">
              <span className="font-semibold">Important:</span> While Nasheman Urdu Secondary School is affiliated with BOSSE as an Accredited Institute, all BOSSE academic operations, student assistance, admissions guidance, and administrative coordination are managed by Edunext Educational Institute.
            </p>
          </div>
        </div>
      </section>

      {/* FAQ accordion */}
      <section className="bg-background py-16 sm:py-20">
        <div className="mx-auto max-w-3xl px-4 sm:px-6">
          <h2 className="text-center text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
            Frequently Asked Questions
          </h2>
          <p className="mt-3 text-center text-muted-foreground">
            Everything you need to know about our BOSSE affiliation.
          </p>
          <Accordion type="single" collapsible className="mt-10 rounded-lg border border-border bg-card px-6">
            {faqs.map((f, i) => (
              <AccordionItem key={i} value={`item-${i}`} className="last:border-b-0">
                <AccordionTrigger className="text-base font-semibold text-foreground hover:no-underline">
                  {f.q}
                </AccordionTrigger>
                <AccordionContent className="text-sm leading-relaxed text-muted-foreground">
                  {f.a}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </section>

      {/* Download */}
      <section className="bg-surface py-16 sm:py-20">
        <div className="mx-auto max-w-3xl px-4 text-center sm:px-6">
          <span className="mx-auto grid h-16 w-16 place-items-center rounded-full bg-accent text-primary">
            <FileText className="h-8 w-8" />
          </span>
          <h2 className="mt-6 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            Download BOSSE Guidelines
          </h2>
          <p className="mt-3 text-muted-foreground">
            Access the complete affiliation guidelines and curriculum framework document.
          </p>
          <Button size="xl" variant="gold" className="mt-8">
            <Download className="h-5 w-5" /> Download BOSSE Guidelines PDF
          </Button>
        </div>
      </section>
    </>
  );
}