import { createFileRoute, Link } from "@tanstack/react-router";
import {
  BookOpen,
  GraduationCap,
  Headphones,
  Languages,
  MessageCircle,
  PenLine,
  Sparkles,
  Target,
} from "lucide-react";
import heroImage from "@/assets/hero-study.jpg";
import { levels } from "@/data/curriculum";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Learn English from Beginner to Advanced — EnglishPath" },
      {
        name: "description",
        content:
          "A complete English learning platform for Arabic speakers: three levels, a full grammar course, vocabulary, conversation, listening, reading, writing and quizzes.",
      },
      { property: "og:title", content: "Learn English from Beginner to Advanced" },
      {
        property: "og:description",
        content:
          "Study English step by step with Arabic explanations, practical examples, exercises and progress tracking.",
      },
    ],
  }),
  component: Index,
});

const pillars = [
  { icon: BookOpen, title: "Complete grammar course", desc: "From parts of speech to advanced structures, with Arabic explanations.", to: "/grammar" as const },
  { icon: Languages, title: "Vocabulary by topic", desc: "Words with Arabic meanings, pronunciation and example sentences.", to: "/vocabulary" as const },
  { icon: MessageCircle, title: "Speaking & conversation", desc: "Real-life dialogues for travel, work, shopping and social life.", to: "/speaking" as const },
  { icon: Headphones, title: "Listening & video lessons", desc: "Graded audio and short videos to train your ear.", to: "/listening" as const },
  { icon: PenLine, title: "Reading & writing", desc: "Graded texts, comprehension questions and writing assignments.", to: "/reading-writing" as const },
  { icon: Target, title: "Interactive practice", desc: "Quizzes, fill-in-the-blank and level assessments after each lesson.", to: "/practice" as const },
];

function Index() {
  return (
    <>
      <section className="bg-hero text-primary-foreground">
        <div className="mx-auto grid max-w-6xl gap-10 px-4 py-16 md:grid-cols-[1.1fr_1fr] md:items-center md:py-24">
          <div>
            <span className="inline-flex items-center gap-2 rounded-full bg-primary-foreground/10 px-3 py-1 text-xs font-semibold uppercase tracking-widest">
              <Sparkles className="size-3.5" /> For Arabic speakers
            </span>
            <h1 className="mt-5 text-4xl font-extrabold leading-tight sm:text-5xl">
              Learn English from beginner to advanced
            </h1>
            <p className="text-arabic mt-4 text-xl opacity-90">تعلّم الإنجليزية من الصفر إلى الاحتراف</p>
            <p className="mt-5 max-w-xl text-lg opacity-90">
              A complete learning platform built for Arabic-speaking learners. Grammar, vocabulary, speaking,
              listening, reading and writing — explained clearly, step by step.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Link
                to="/levels"
                className="rounded-xl bg-gold px-6 py-3 font-semibold text-accent-foreground shadow-lift transition-opacity hover:opacity-90"
              >
                Choose your level
              </Link>
              <Link
                to="/practice"
                className="rounded-xl border border-primary-foreground/30 px-6 py-3 font-semibold transition-colors hover:bg-primary-foreground/10"
              >
                Test your level
              </Link>
            </div>
          </div>
          <img
            src={heroImage}
            width={1280}
            height={960}
            alt="Notebook with English vocabulary and Arabic translations beside a cup of tea"
            className="rounded-3xl shadow-lift"
          />
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 py-16">
        <div className="flex items-end justify-between gap-4">
          <div>
            <h2 className="text-3xl font-bold">Three learning levels</h2>
            <p className="text-arabic mt-1 text-muted-foreground">ثلاثة مستويات تعليمية</p>
          </div>
          <Link to="/levels" className="hidden text-sm font-semibold text-primary hover:underline sm:block">
            See full path →
          </Link>
        </div>
        <div className="mt-8 grid gap-5 md:grid-cols-3">
          {levels.map((level) => (
            <Link
              key={level.id}
              to="/levels"
              className="group overflow-hidden rounded-3xl border border-border bg-card shadow-soft transition-shadow hover:shadow-lift"
            >
              <div className={`h-1.5 ${level.colorClass}`} />
              <div className="p-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-xl font-bold group-hover:text-primary">{level.name}</h3>
                  <span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-semibold">{level.tag}</span>
                </div>
                <p className="text-arabic mt-1 text-sm text-muted-foreground">{level.nameAr}</p>
                <p className="mt-4 text-sm text-muted-foreground">{level.description}</p>
              </div>
            </Link>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 pb-16">
        <h2 className="text-3xl font-bold">Everything you need in one place</h2>
        <p className="text-arabic mt-1 text-muted-foreground">كل ما تحتاجه في مكان واحد</p>
        <div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {pillars.map((p) => (
            <Link
              key={p.title}
              to={p.to}
              className="group rounded-3xl border border-border bg-card p-6 shadow-soft transition-shadow hover:shadow-lift"
            >
              <span className="grid size-11 place-items-center rounded-xl bg-secondary text-primary">
                <p.icon className="size-5" />
              </span>
              <h3 className="mt-4 font-bold group-hover:text-primary">{p.title}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{p.desc}</p>
            </Link>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 pb-4">
        <div className="grid gap-6 rounded-3xl border border-border bg-secondary/50 p-8 md:grid-cols-2 md:p-12">
          <div>
            <span className="grid size-11 place-items-center rounded-xl bg-hero text-primary-foreground">
              <GraduationCap className="size-5" />
            </span>
            <h2 className="mt-4 text-2xl font-bold">Learn at your own pace</h2>
            <p className="mt-3 text-muted-foreground">
              Mark lessons as completed, save your quiz scores and watch your level grow. Difficult grammar and
              pronunciation are always supported by Arabic explanations.
            </p>
            <Link
              to="/progress"
              className="mt-6 inline-flex rounded-xl bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground hover:opacity-90"
            >
              View my progress
            </Link>
          </div>
          <div className="text-arabic rounded-2xl bg-card p-6 leading-loose text-muted-foreground">
            سواء بدأت للتو أو كنت ترغب في الوصول إلى مستوى متقدم، توفر المنصة مسارًا تعليميًا منظمًا يتيح لك التقدم
            خطوة بخطوة، مع شرح بالعربية للقواعد والمفردات والنطق.
          </div>
        </div>
      </section>
    </>
  );
}