"use client";

import { BookOpen, Target, Users, FileText, Globe, Shield, Award } from "lucide-react";
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { useAuthStore } from "@/lib/store/auth-store";

export default function AboutPage() {
  const language = useAuthStore((s) => s.language);
  const hi = language === "hi";

  return (
    <div className="min-h-[60vh] bg-gray-50">
      {/* Hero */}
      <section className="bg-indigo-600 py-16 text-white">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <Breadcrumb
            items={[
              { label: hi ? "होम" : "Home", href: "/" },
              { label: hi ? "हमारे बारे में" : "About Us" },
            ]}
          />
          <div className="mt-6 text-center">
          <BookOpen className="mx-auto h-12 w-12 mb-4" />
          <h1 className="text-3xl font-bold sm:text-4xl">
            {hi ? "शोध संचयन के बारे में" : "About Shodh Sanchayan"}
          </h1>
          <p className="mt-4 text-lg text-indigo-100">
            {hi
              ? "शोधपत्र जमा, समीक्षा एवं प्रकाशन का द्विभाषी शैक्षणिक मंच"
              : "A bilingual academic platform for paper submission, review & publication"}
          </p>
        </div>
        </div>

      </section>

      <div className="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8 space-y-16">
        {/* Platform Description */}
        <section>
          <h2 className="text-2xl font-bold text-gray-900 mb-4">
            {hi ? "मंच परिचय" : "Platform Overview"}
          </h2>
          <div className="rounded-lg bg-white p-6 shadow-sm border border-gray-200 space-y-4 text-gray-700 leading-relaxed">
            <p>
              {hi
                ? "शोध संचयन एक आधुनिक द्विभाषी (हिन्दी एवं अंग्रेज़ी) शैक्षणिक मंच है जो शोधपत्रों के जमा करने, समीक्षा करने और प्रकाशन की पूरी प्रक्रिया को सुगम बनाता है। यह मंच भारतीय शैक्षणिक समुदाय की आवश्यकताओं को ध्यान में रखकर विकसित किया गया है।"
                : "Shodh Sanchayan is a modern bilingual (Hindi & English) academic platform that streamlines the entire process of paper submission, peer review, and publication. It has been designed keeping in mind the needs of the Indian academic community."}
            </p>
            <p>
              {hi
                ? "हमारा उद्देश्य हिन्दी माध्यम के शोधकर्ताओं को एक ऐसा मंच प्रदान करना है जहाँ वे अपनी भाषा में शोधपत्र प्रस्तुत कर सकें और गुणवत्तापूर्ण समीक्षा प्रक्रिया का लाभ उठा सकें।"
                : "Our goal is to provide Hindi-medium researchers a platform where they can submit papers in their language and benefit from a quality peer-review process."}
            </p>
          </div>
        </section>

        {/* Mission */}
        <section>
          <div className="flex items-center gap-3 mb-4">
            <Target className="h-6 w-6 text-indigo-600" />
            <h2 className="text-2xl font-bold text-gray-900">
              {hi ? "हमारा लक्ष्य" : "Our Mission"}
            </h2>
          </div>
          <div className="rounded-lg bg-indigo-50 border border-indigo-100 p-6 text-gray-800 leading-relaxed">
            <p>
              {hi
                ? "भारतीय भाषाओं में शैक्षणिक शोध को बढ़ावा देना और एक पारदर्शी, सुलभ एवं विश्वसनीय समीक्षा प्रक्रिया के माध्यम से गुणवत्तापूर्ण शोधपत्रों का प्रकाशन सुनिश्चित करना।"
                : "To promote academic research in Indian languages and ensure the publication of quality research papers through a transparent, accessible, and reliable peer-review process."}
            </p>
          </div>
        </section>

        {/* Key Features */}
        <section>
          <h2 className="text-2xl font-bold text-gray-900 mb-6">
            {hi ? "प्रमुख विशेषताएँ" : "Key Features"}
          </h2>
          <div className="grid gap-4 sm:grid-cols-2">
            {[
              {
                icon: Globe,
                titleHi: "द्विभाषी समर्थन",
                titleEn: "Bilingual Support",
                descHi: "हिन्दी एवं अंग्रेज़ी दोनों भाषाओं में पूर्ण समर्थन",
                descEn: "Full support in both Hindi and English languages",
              },
              {
                icon: FileText,
                titleHi: "शोधपत्र प्रबंधन",
                titleEn: "Paper Management",
                descHi: "शोधपत्र जमा करने से प्रकाशन तक सम्पूर्ण प्रक्रिया",
                descEn: "Complete workflow from submission to publication",
              },
              {
                icon: Users,
                titleHi: "समकक्ष समीक्षा",
                titleEn: "Peer Review",
                descHi: "विशेषज्ञों द्वारा पारदर्शी एवं गुणवत्तापूर्ण समीक्षा",
                descEn: "Transparent, quality review by domain experts",
              },
              {
                icon: Shield,
                titleHi: "सुरक्षित मंच",
                titleEn: "Secure Platform",
                descHi: "डेटा सुरक्षा और गोपनीयता का पूरा ध्यान",
                descEn: "Complete attention to data security and privacy",
              },
              {
                icon: Award,
                titleHi: "गुणवत्ता आश्वासन",
                titleEn: "Quality Assurance",
                descHi: "उच्च शैक्षणिक मानकों का पालन",
                descEn: "Adherence to high academic standards",
              },
              {
                icon: BookOpen,
                titleHi: "पत्रिका प्रकाशन",
                titleEn: "Journal Publishing",
                descHi: "विभिन्न विषयों की शैक्षणिक पत्रिकाओं का प्रकाशन",
                descEn: "Publishing academic journals across various disciplines",
              },
            ].map((feature, i) => (
              <div
                key={i}
                className="flex gap-4 rounded-lg bg-white p-5 shadow-sm border border-gray-200"
              >
                <feature.icon className="h-6 w-6 shrink-0 text-indigo-600 mt-0.5" />
                <div>
                  <h3 className="font-semibold text-gray-900">
                    {hi ? feature.titleHi : feature.titleEn}
                  </h3>
                  <p className="mt-1 text-sm text-gray-600">
                    {hi ? feature.descHi : feature.descEn}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Team / Contact */}
        <section>
          <div className="flex items-center gap-3 mb-4">
            <Users className="h-6 w-6 text-indigo-600" />
            <h2 className="text-2xl font-bold text-gray-900">
              {hi ? "टीम एवं संपर्क" : "Team & Contact"}
            </h2>
          </div>
          <div className="rounded-lg bg-white p-6 shadow-sm border border-gray-200 text-gray-700 leading-relaxed space-y-3">
            <p>
              {hi
                ? "शोध संचयन का विकास शैक्षणिक विशेषज्ञों और तकनीकी पेशेवरों की एक समर्पित टीम द्वारा किया जा रहा है।"
                : "Shodh Sanchayan is being developed by a dedicated team of academic experts and technology professionals."}
            </p>
            <p>
              {hi
                ? "अधिक जानकारी या सहयोग के लिए कृपया हमारे संपर्क पृष्ठ पर जाएँ।"
                : "For more information or collaboration, please visit our contact page."}
            </p>
            <p className="text-sm text-gray-500">
              {hi ? "ईमेल: contact@shodhsanchayan.org" : "Email: contact@shodhsanchayan.org"}
            </p>
          </div>
        </section>
      </div>
    </div>
  );
}