@extends('layouts.repository')

@section('title', 'About MTU-Repo')

@section('styles')
<style>
    .item-thumbnail {
        background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
    }
    details summary::-webkit-details-marker {
        display: none;
    }
    details[open] summary span.arrow {
        transform: rotate(180deg);
    }
</style>
@endsection

@section('content')
<!-- Hero -->
<div class="bg-primary py-24 relative overflow-hidden text-white">
    <div class="absolute inset-0 opacity-10" style="background-image:url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&q=80&w=1200'); background-size:cover; background-position:center;"></div>
    <div class="container mx-auto px-4 relative z-10 text-center">
        <span class="inline-block text-[10px] font-black tracking-[0.4em] uppercase bg-white/10 px-4 py-2 rounded-full mb-6">About Us</span>
        <h1 class="text-5xl font-black tracking-tight mb-6">MTU-Repo</h1>
        <p class="text-xl text-white/80 font-light max-w-2xl mx-auto leading-relaxed">
            The official institutional repository of Mountain Top University, preserving and making accessible the intellectual output of the MTU community.
        </p>
    </div>
</div>

<div class="container mx-auto px-4 py-20 max-w-5xl">
    <!-- What is MTU-Repo -->
    <div class="grid lg:grid-cols-2 gap-20 items-center mb-24">
        <div>
            <h2 class="text-3xl font-black text-slate-800 mb-6 leading-tight">What is MTU-Repo?</h2>
            <div class="space-y-4 text-slate-600 leading-relaxed font-medium">
                <p>MTU-Repo is the institutional digital repository for Mountain Top University, designed to collect, organise, preserve, and disseminate the research and scholarly output produced by MTU students, faculty, and staff.</p>
                <p>It provides long-term, free, and open access to theses, dissertations, journal articles, book chapters, conference proceedings, and other academic works created at or in partnership with Mountain Top University.</p>
                <p>The platform is built on modern open-source principles and complies with international standards for digital preservation and metadata management, including the Dublin Core metadata schema.</p>
            </div>
        </div>
        <div class="grid grid-cols-2 gap-6">
            @php
                $features = [
                    ['icon' => 'verified', 'color' => 'text-primary bg-primary/10', 'title' => 'Persistent URLs', 'desc' => 'Stable, permanent links ensure items are always findable.'],
                    ['icon' => 'public', 'color' => 'text-emerald-500 bg-emerald-500/10', 'title' => 'Open Access', 'desc' => 'Free and immediate access to all published research.'],
                    ['icon' => 'travel_explore', 'color' => 'text-amber-500 bg-amber-500/10', 'title' => 'Discoverability', 'desc' => 'Indexed by Google Scholar and major academic aggregators.'],
                    ['icon' => 'archive', 'color' => 'text-indigo-500 bg-indigo-500/10', 'title' => 'Long-term Preservation', 'desc' => 'Checksum-verified storage guards against data corruption.'],
                ];
            @endphp
            @foreach($features as $f)
                <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 transition-all hover:scale-105">
                    <span class="material-icons {{ $f['color'] }} p-3 rounded-xl mb-3 inline-block">{{ $f['icon'] }}</span>
                    <h4 class="font-black text-slate-800 mb-1 text-sm">{{ $f['title'] }}</h4>
                    <p class="text-xs text-slate-500 font-medium leading-relaxed">{{ $f['desc'] }}</p>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Advantage Showcase (OAI-PMH & Google Scholar) -->
    <div class="mb-24">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <span class="text-[10px] font-black tracking-widest text-primary uppercase">Advantage Showcase</span>
            <h2 class="text-3xl font-black text-slate-800 tracking-tight mt-2">Visibility, Searchability & Integrity</h2>
            <p class="text-slate-500 font-medium text-sm mt-1">Discover how MTU-Repo scales the reach and impact of research output worldwide.</p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
            <!-- Google Scholar -->
            <div class="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm space-y-4">
                <div class="w-12 h-12 bg-blue-50 text-blue-500 rounded-2xl flex items-center justify-center">
                    <span class="material-icons">find_in_page</span>
                </div>
                <h3 class="font-black text-slate-800 text-lg">Google Scholar Indexing</h3>
                <p class="text-slate-500 text-xs font-medium leading-relaxed">
                    By embedding HighWire Press and Dublin Core meta tags directly into item views, MTU-Repo allows Google Scholar crawlers to seamlessly scrape, index, and list deposit articles, maximizing global citations.
                </p>
            </div>

            <!-- OAI-PMH -->
            <div class="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm space-y-4">
                <div class="w-12 h-12 bg-emerald-50 text-emerald-500 rounded-2xl flex items-center justify-center">
                    <span class="material-icons">sync</span>
                </div>
                <h3 class="font-black text-slate-800 text-lg">OAI-PMH Harvester Ready</h3>
                <p class="text-slate-500 text-xs font-medium leading-relaxed">
                    Complies with the Open Archives Initiative Protocol for Metadata Harvesting (OAI-PMH). Enables remote institutional databases to harvest catalog XMLs automatically, placing MTU research on international aggregate maps.
                </p>
            </div>

            <!-- Persistent Identifier -->
            <div class="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm space-y-4">
                <div class="w-12 h-12 bg-indigo-50 text-indigo-500 rounded-2xl flex items-center justify-center">
                    <span class="material-icons">link</span>
                </div>
                <h3 class="font-black text-slate-800 text-lg">Static Permalinks (UUID)</h3>
                <p class="text-slate-500 text-xs font-medium leading-relaxed">
                    Every uploaded object receives a unique, unalterable UUID. If files or collections migrate, the URI link remains static, ensuring citations in scholarly references never break due to dead URLs.
                </p>
            </div>
        </div>
    </div>

    <!-- FAQ Q&A Section -->
    <div class="mb-24">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <span class="text-[10px] font-black tracking-widest text-primary uppercase">Frequently Asked Questions</span>
            <h2 class="text-3xl font-black text-slate-800 tracking-tight mt-2">Interactive Q&A Section</h2>
            <p class="text-slate-500 font-medium text-sm mt-1">Find quick answers about repository guidelines, copyright compliance, and submissions.</p>
        </div>

        <div class="space-y-4 max-w-3xl mx-auto">
            @php
                $faqs = [
                    [
                        'q' => 'Who can submit work to MTU-Repo?',
                        'a' => 'All current Mountain Top University faculty, staff, researchers, and postgraduate students are eligible to submit work to the repository. Undergraduate submissions are permitted when sponsored by a department or faculty advisor.'
                    ],
                    [
                        'q' => 'What types of documents can be uploaded?',
                        'a' => 'You can deposit academic journal articles (preprints or postprints), conference proceedings, monographs, book chapters, doctoral dissertations, masters theses, and academic datasets.'
                    ],
                    [
                        'q' => 'Is depositing in the repository legally safe regarding publisher copyrights?',
                        'a' => 'Yes. Most publishers allow authors to archive either preprints or postprints in their institutional repositories. MTU-Repo respects publisher copyright policies. The administration checks compliance before releasing items publicly.'
                    ],
                    [
                        'q' => 'How long does it take for a submission to go live?',
                        'a' => 'After filling the Submission Wizard, items are published immediately as drafts. Once reviewed by the collection librarians, the item is approved and visible publicly (typically within 24–48 hours).'
                    ]
                ];
            @endphp

            @foreach($faqs as $faq)
                <details class="bg-white border border-slate-100 rounded-2xl overflow-hidden transition-all shadow-sm group">
                    <summary class="flex justify-between items-center p-6 cursor-pointer select-none font-bold text-slate-800 text-sm">
                        {{ $faq['q'] }}
                        <span class="material-icons text-slate-400 group-hover:text-primary transition-all arrow text-base">expand_more</span>
                    </summary>
                    <div class="px-6 pb-6 pt-1 text-slate-500 text-xs font-medium leading-relaxed border-t border-slate-50/50">
                        {{ $faq['a'] }}
                    </div>
                </details>
            @endforeach
        </div>
    </div>

    <!-- Contact -->
    <div class="bg-slate-900 rounded-3xl p-12 text-center text-white">
        <h2 class="text-2xl font-black mb-4">Contact the Repository Team</h2>
        <p class="text-slate-400 font-medium mb-8">For submission inquiries, policy questions, or technical support, reach out to the MTU Library.</p>
        <div class="flex flex-wrap justify-center gap-6">
            <a href="mailto:librarian@mtu.edu.ng" class="flex items-center gap-3 bg-white/10 hover:bg-primary rounded-2xl px-8 py-4 font-bold text-sm transition-all">
                <span class="material-icons">email</span> librarian@mtu.edu.ng
            </a>
            <a href="tel:+2340000000000" class="flex items-center gap-3 bg-white/10 hover:bg-primary rounded-2xl px-8 py-4 font-bold text-sm transition-all">
                <span class="material-icons">phone</span> +234 000 000 0000
            </a>
        </div>
    </div>
</div>
@endsection