'use client';

import React, { useState, useEffect } from 'react';
import {
  BookOpen, FileText, Mic, Users, Volume2, MessageCircle,
  Repeat, Briefcase, ArrowRight, ChevronRight, Download,
  CheckCircle, Shield, Sparkles, Target, ChevronDown, ChevronUp,
} from 'lucide-react';
import { useNavigate } from '@/lib/nextRouterAdapter';
import CVHeader from '@/components/layout/CVHeader';
import CVFooter from '@/components/layout/CVFooter';

// ─── Data ─────────────────────────────────────────────────────────────────────

const CLASSROOM_URL = 'https://classroom.google.com/c/ODYzODY4Mjk3NTU2?cjc=wcdsi5lo';

const resourceCategories = [
  { icon: BookOpen,      title: 'Interactive Lessons',  text: 'Engage with practical English lessons designed for self-study and steady improvement.' },
  { icon: FileText,      title: 'Daily PDFs',           text: 'Download fresh PDF resources from Google Classroom when new posts are shared.' },
  { icon: Mic,           title: 'Speaking Practice',    text: 'Use prompts and tasks to build fluency, vocabulary, pronunciation, and confidence.' },
  { icon: Users,         title: 'Group Discussion',     text: 'Share thoughts in comments and learn through community discussion and reflection.' },
  { icon: Volume2,       title: 'Accent Reduction',     text: 'Practise clearer pronunciation and more confident spoken English through focused tasks.' },
  { icon: MessageCircle, title: 'Role Play',            text: 'Prepare for real-life situations through practical role-play activities and prompts.' },
  { icon: Repeat,        title: 'Peer Correction',      text: 'Learn from other students and improve through shared responses and community learning.' },
  { icon: Briefcase,     title: 'Business English',     text: 'Build communication skills for writing, presentations, negotiations, networking, and career growth.' },
];

const whatYouGet = [
  'Expert-crafted content by experienced teachers',
  'CEFR-aligned learning support',
  'Complimentary access to student-friendly resources',
  'Daily monitoring and practical learning momentum',
  'Support for listening, reading, speaking, and writing',
];

const classroomFeatures = ['Daily PDFs', 'Interactive lessons', 'Practice exercises', 'Audio materials'];

const howSteps = [
  { n: 1, title: 'Join using the link',  text: 'Join the Google Classroom using the access button on this page.' },
  { n: 2, title: 'Get a PDF daily',      text: 'Download the Google Classroom app and download a PDF when notified.' },
  { n: 3, title: 'Comment on posts',     text: 'Read the post, download the task, and comment with your thoughts.' },
  { n: 4, title: 'Keep learning',        text: 'Make it a daily habit and share your learning with people around you.' },
];

const skills = [
  { title: 'Speaking fluency',           text: 'Use prompts, comments, role-play, and conversation tasks to speak more naturally.' },
  { title: 'Vocabulary growth',          text: 'Learn useful English for daily communication, professional contexts, and real-life situations.' },
  { title: 'Pronunciation and accent',   text: 'Practise clearer speech and reduce common pronunciation problems.' },
  { title: 'Writing confidence',         text: 'Improve sentence clarity, comments, responses, and business communication.' },
  { title: 'Listening practice',         text: 'Use audio materials and guided resources to improve comprehension.' },
  { title: 'Business communication',     text: 'Build practical language for presentations, negotiations, and cross-cultural interaction.' },
];

const communityFeatures = ['Moderated posts', 'Community comments', 'Teacher-created resources', 'Conversation club support'];

const faqs = [
  { q: 'Are there any hidden charges?',                               a: 'No hidden charges. The resources are free of cost and designed to help students who need the right tools for English practice.' },
  { q: 'Is it safe to join the Google Classroom community page?',     a: 'Yes. The classroom is moderated by Cambridge Veritas staff and is a safe, supportive environment for learners of all levels.' },
  { q: 'Are there any moderators?',                                   a: 'Yes. Cambridge Veritas moderators manage the community, upload new resources, and ensure the classroom remains a productive learning space.' },
  { q: 'What is CEFR?',                                               a: 'CEFR (Common European Framework of Reference) is an international standard for language learning that categorises ability from A1 (beginner) to C2 (proficient).' },
  { q: 'How long will it take to master English?',                    a: 'Progress depends on how consistently you practise. Daily use of resources alongside live coaching significantly accelerates improvement.' },
  { q: 'Will I get a certificate if I use the resources regularly?',  a: 'The free resources are for practice. Certificates are issued through enrolled courses. Contact us to learn more about certification pathways.' },
  { q: 'How valuable are these resources?',                           a: 'These resources are curated by experienced English educators and aligned with CEFR standards — giving you the kind of quality usually found in paid programmes.' },
];

const navLinks = [
  { href: '#overview',  label: 'Overview' },
  { href: '#resources', label: 'Resources' },
  { href: '#classroom', label: 'Classroom' },
  { href: '#how',       label: 'How It Works' },
  { href: '#skills',    label: 'Skills' },
  { href: '#faq',       label: 'FAQ' },
];

// ─── Small Components ─────────────────────────────────────────────────────────

function SectionLabel({ children }) {
  return <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">{children}</p>;
}

function CheckItem({ text, light = false }) {
  return (
    <div className={`flex items-center gap-3 p-4 rounded-xl border ${light ? 'text-[#F6EFE9]/90 border-white/10' : 'bg-white border-[#E6D3B1]/40'}`}>
      <CheckCircle className={`w-5 h-5 flex-shrink-0 ${light ? 'text-[#D4AF37]' : 'text-[#8B1C1C]'}`} />
      <span className={`${light ? 'text-sm' : 'font-semibold text-[#4A141E]/80'}`}>{text}</span>
    </div>
  );
}

function FaqItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={`rounded-2xl bg-white border-2 overflow-hidden transition-colors duration-300 ${open ? 'border-[#D4AF37]' : 'border-[#E6D3B1]/40 hover:border-[#D4AF37]'}`}>
      <button
        onClick={() => setOpen((v) => !v)}
        className="w-full px-6 py-5 flex items-center justify-between text-left gap-4"
        aria-expanded={open}
      >
        <span className="font-bold text-[#4A141E] pr-2">{q}</span>
        {open
          ? <ChevronUp className="w-5 h-5 text-[#D4AF37] flex-shrink-0" />
          : <ChevronDown className="w-5 h-5 text-[#D4AF37] flex-shrink-0" />
        }
      </button>
      {open && (
        <p className="px-6 pb-5 border-t border-[#E6D3B1]/30 pt-4 text-[#4A141E]/70 leading-relaxed">
          {a}
        </p>
      )}
    </div>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────

export default function FreeResourcesPage() {
  const navigate = useNavigate();
  const [activeSection, setActiveSection] = useState('overview');

  // Highlight active nav link on scroll
  useEffect(() => {
    const ids = navLinks.map((l) => l.href.slice(1));
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) setActiveSection(entry.target.id);
        });
      },
      { rootMargin: '-40% 0px -55% 0px' }
    );
    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, []);

  return (
    <div className="min-h-screen bg-[#FDFAF7]">
      <CVHeader />

      <main className="overflow-x-hidden bg-[#FDFAF7] text-[#4A141E]">

      {/* ── Sticky Nav ──────────────────────────────────────────────── */}
      <div className="sticky top-0 z-40 bg-white border-b border-[#E6D3B1]/40 shadow-sm">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex gap-1 overflow-x-auto py-3 text-sm font-semibold whitespace-nowrap scrollbar-none">
            {navLinks.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className={`px-4 py-2 rounded-lg transition-colors ${
                  activeSection === link.href.slice(1)
                    ? 'bg-[#4A141E] text-white'
                    : 'text-[#4A141E] hover:bg-[#F6EFE9]'
                }`}
              >
                {link.label}
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* ── Hero ────────────────────────────────────────────────────── */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[#4A141E] via-[#3B0F18] to-[#2B0A11] border-b-4 border-[#D4AF37]">
        <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_20%_20%,#D4AF37_0,transparent_24%),radial-gradient(circle_at_80%_15%,#8B1C1C_0,transparent_22%)]" />
        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
          <div className="grid lg:grid-cols-2 gap-10 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#D4AF37]/20 border border-[#D4AF37]/40 mb-5 text-[#E6D3B1] text-sm font-bold">
                <BookOpen className="w-4 h-4 text-[#D4AF37]" />
                Free English Learning Resources
              </div>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-[#F6EFE9] mb-6 leading-tight">
                Practise English daily.
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#D4AF37] to-[#E6D3B1]"> Start free.</span>
              </h1>
              <p className="text-xl text-[#E6D3B1] mb-8 leading-relaxed">
                Access expert-designed resources, daily PDFs, interactive lessons, speaking tasks, audio materials, and practical English support through Cambridge Veritas Google Classroom.
              </p>
              <div className="flex flex-wrap gap-4">
                <a href={CLASSROOM_URL} target="_blank" rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 rounded-2xl font-black transition-all hover:scale-105 bg-[#8B1C1C] text-white border-2 border-[#8B1C1C] hover:border-[#D4AF37] shadow-xl px-8 py-4 text-lg">
                  Access Free Resources <ArrowRight className="w-5 h-5" />
                </a>
                <a href="#how"
                  className="inline-flex items-center gap-2 px-8 py-4 rounded-2xl font-black text-lg bg-white/10 text-[#F6EFE9] hover:bg-white/20 border-2 border-[#E6D3B1]/30 transition-all">
                  How It Works <ChevronRight className="w-5 h-5" />
                </a>
              </div>
            </div>

            {/* Hero card */}
            <div className="rounded-3xl bg-white border-2 border-[#D4AF37]/50 shadow-2xl p-6 md:p-8">
              <div className="relative aspect-[4/3] rounded-2xl overflow-hidden bg-[#4A141E] mb-6">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=2200&auto=format&fit=crop"
                  alt="Student using online English learning resources"
                  className="absolute inset-0 w-full h-full object-cover opacity-80"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#2B0A11]/80 to-transparent" />
                <div className="absolute bottom-4 left-4 right-4">
                  <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/70 text-white text-sm font-bold mb-3">
                    <span className="w-2 h-2 rounded-full bg-green-400" />
                    Google Classroom learning hub
                  </div>
                  <h2 className="text-2xl font-black text-white">Daily practice for real improvement</h2>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                {[['Daily PDFs', 'New resources'], ['CEFR', 'Aligned support'], ['Speaking', 'Practice tasks'], ['Free', 'No hidden charges']].map(([title, sub]) => (
                  <div key={title} className="p-4 rounded-xl bg-[#F6EFE9] border border-[#E6D3B1]/40">
                    <div className="font-black text-[#4A141E]">{title}</div>
                    <div className="text-sm text-[#4A141E]/65">{sub}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Overview stats ──────────────────────────────────────────── */}
      <section id="overview" className="py-10 bg-gradient-to-r from-[#4A141E] to-[#3B0F18]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
            {[['Free', 'Resource access'], ['Daily', 'PDF practice'], ['CEFR', 'Aligned support'], ['Community', 'Moderated learning']].map(([val, label]) => (
              <div key={val}>
                <div className="text-3xl sm:text-4xl md:text-5xl font-black text-[#D4AF37] mb-2">{val}</div>
                <div className="text-sm text-[#E6D3B1]/80">{label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Quote banner ─────────────────────────────────────────────── */}
      <section className="py-10 bg-[#8B1C1C]">
        <div className="max-w-5xl mx-auto px-4 text-center">
          <p className="text-xl md:text-2xl font-black text-white leading-relaxed">
            💬 Make English practice a daily habit: download, respond, reflect, and keep learning with Cambridge Veritas.
          </p>
        </div>
      </section>

      {/* ── Resource categories ─────────────────────────────────────── */}
      <section id="resources" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4">
          <div className="text-center mb-12">
            <SectionLabel>Resource Categories</SectionLabel>
            <h2 className="mt-3 text-3xl sm:text-4xl md:text-5xl font-black mb-4 text-[#4A141E]">
              Everything You Need for Daily English Practice
            </h2>
            <p className="text-lg md:text-xl max-w-3xl mx-auto text-[#4A141E]/70">
              A clean learning library for self-study, speaking confidence, pronunciation, comments, role-play, and professional communication.
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {resourceCategories.map((cat) => {
              const Icon = cat.icon;
              return (
                <div key={cat.title} className="p-7 rounded-2xl bg-white border-2 border-[#E6D3B1]/40 hover:border-[#D4AF37] transition-all shadow-lg">
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] flex items-center justify-center mb-4">
                    <Icon className="w-6 h-6 text-[#D4AF37]" />
                  </div>
                  <h3 className="font-black text-[#4A141E] text-lg mb-3">{cat.title}</h3>
                  <p className="text-sm text-[#4A141E]/70 leading-relaxed">{cat.text}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ── What you get + Classroom ────────────────────────────────── */}
      <section className="py-20 bg-[#F6EFE9]">
        <div className="max-w-6xl mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-8 items-start">
            {/* Left */}
            <div>
              <div className="mb-8">
                <SectionLabel>What You Get for Free</SectionLabel>
                <h2 className="mt-3 text-3xl sm:text-4xl font-black mb-4 text-[#4A141E]">Expert-Designed, Practical, Student-Friendly</h2>
                <p className="text-lg text-[#4A141E]/70">
                  Resources are created to support real improvement in listening, reading, speaking, writing, vocabulary, pronunciation, and confidence.
                </p>
              </div>
              <div className="space-y-3">
                {whatYouGet.map((item) => <CheckItem key={item} text={item} />)}
              </div>
            </div>

            {/* Right: Classroom card */}
            <div id="classroom" className="p-8 rounded-3xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] border-2 border-[#D4AF37] shadow-xl">
              <Download className="w-12 h-12 text-[#D4AF37] mb-5" />
              <h3 className="text-3xl font-black text-[#E6D3B1] mb-4">Google Classroom Access</h3>
              <p className="text-[#F6EFE9]/80 leading-relaxed mb-6">
                Join the Cambridge Veritas resource classroom, download daily PDFs, comment on posts, ask questions, and build a steady English practice routine.
              </p>
              <div className="grid sm:grid-cols-2 gap-3 mb-8">
                {classroomFeatures.map((f) => <CheckItem key={f} text={f} light />)}
              </div>
              <a href={CLASSROOM_URL} target="_blank" rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-2xl font-black transition-all hover:scale-105 bg-[#D4AF37] text-[#4A141E] border-2 border-[#D4AF37] hover:bg-[#E6D3B1] shadow-xl px-8 py-4 text-lg">
                Access Now <ArrowRight className="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ── How it works ─────────────────────────────────────────────── */}
      <section id="how" className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-4">
          <div className="text-center mb-12">
            <SectionLabel>How Does It Work?</SectionLabel>
            <h2 className="mt-3 text-3xl sm:text-4xl md:text-5xl font-black mb-4 text-[#4A141E]">Four Simple Steps</h2>
            <p className="text-lg md:text-xl max-w-3xl mx-auto text-[#4A141E]/70">
              The resource system is simple: join once, practise daily, and keep building your English habit.
            </p>
          </div>
          <div className="grid md:grid-cols-4 gap-5">
            {howSteps.map((step) => (
              <div key={step.n} className="p-6 rounded-2xl bg-[#F6EFE9] border-2 border-[#E6D3B1]/50 shadow-sm">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] border-2 border-[#D4AF37]/60 text-[#D4AF37] flex items-center justify-center font-black text-xl mb-4">
                  {step.n}
                </div>
                <h3 className="font-black text-[#4A141E] text-lg mb-3">{step.title}</h3>
                <p className="text-sm text-[#4A141E]/70 leading-relaxed">{step.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Skills ───────────────────────────────────────────────────── */}
      <section id="skills" className="py-20 bg-gradient-to-br from-[#F6EFE9] to-white">
        <div className="max-w-6xl mx-auto px-4">
          <div className="text-center mb-12">
            <SectionLabel>Skills You Can Improve</SectionLabel>
            <h2 className="mt-3 text-3xl sm:text-4xl md:text-5xl font-black mb-4 text-[#4A141E]">
              Practice Across the Full English Skill Set
            </h2>
            <p className="text-lg md:text-xl max-w-3xl mx-auto text-[#4A141E]/70">
              Use the free resources to support everyday English, professional English, speaking confidence, and CEFR-level growth.
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {skills.map((skill) => (
              <div key={skill.title} className="p-7 rounded-2xl bg-white border-2 border-[#E6D3B1]/40 shadow-lg">
                <Target className="w-8 h-8 text-[#D4AF37] mb-4" />
                <h3 className="font-black text-[#4A141E] text-xl mb-3">{skill.title}</h3>
                <p className="text-[#4A141E]/70 leading-relaxed">{skill.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CEFR + Community ─────────────────────────────────────────── */}
      <section className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-8 items-center">
            {/* CEFR card */}
            <div className="p-8 rounded-3xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] border-2 border-[#D4AF37] shadow-xl">
              <Shield className="w-12 h-12 text-[#D4AF37] mb-5" />
              <h3 className="text-3xl font-black text-[#E6D3B1] mb-4">CEFR-Aligned Learning Support</h3>
              <p className="text-[#F6EFE9]/80 leading-relaxed mb-6">
                The resources support the CEFR framework, helping learners improve listening, reading, speaking, and writing skills through a clear path of practice.
              </p>
              <button onClick={() => navigate('/how-to-start')}
                className="inline-flex items-center gap-2 text-[#D4AF37] font-black hover:underline">
                Understand CEFR levels <ArrowRight className="w-4 h-4" />
              </button>
            </div>

            {/* Community card */}
            <div className="p-8 rounded-3xl bg-[#F6EFE9] border-2 border-[#D4AF37]/40 shadow-lg">
              <Users className="w-12 h-12 text-[#8B1C1C] mb-5" />
              <h3 className="text-3xl font-black text-[#4A141E] mb-4">Community and Moderation</h3>
              <p className="text-[#4A141E]/75 leading-relaxed mb-5">
                Cambridge Veritas moderators upload new resources, manage the community page, and support conversation club activities. The classroom is designed as a safe place to practise and learn with others.
              </p>
              <div className="grid sm:grid-cols-2 gap-3">
                {communityFeatures.map((f) => (
                  <div key={f} className="flex items-center gap-2 text-sm text-[#4A141E]/75">
                    <CheckCircle className="w-4 h-4 text-[#8B1C1C] flex-shrink-0" />
                    {f}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── FAQ ──────────────────────────────────────────────────────── */}
      <section id="faq" className="py-20 bg-[#F6EFE9]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl md:text-5xl font-black mb-4 text-[#4A141E]">Free Resources FAQ</h2>
            <p className="text-lg md:text-xl max-w-3xl mx-auto text-[#4A141E]/70">
              Everything you need to know before joining the resource hub.
            </p>
          </div>
          <div className="space-y-4">
            {faqs.map((faq, i) => (
              <FaqItem key={faq.q} q={faq.q} a={faq.a} defaultOpen={i === 0} />
            ))}
          </div>
        </div>
      </section>

      {/* ── Final CTA ────────────────────────────────────────────────── */}
      <section className="py-20 bg-gradient-to-br from-[#4A141E] via-[#3B0F18] to-[#2B0A11]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <Sparkles className="w-16 h-16 text-[#D4AF37] mx-auto mb-6" />
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-black text-[#F6EFE9] mb-6">Ready to Start Learning?</h2>
          <p className="text-xl text-[#E6D3B1] mb-10">
            Join the Cambridge Veritas free resource classroom and build a daily English practice routine with PDFs, lessons, comments, and community support.
          </p>
          <div className="flex flex-wrap gap-4 justify-center">
            <a href={CLASSROOM_URL} target="_blank" rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-2xl font-black transition-all hover:scale-105 bg-[#8B1C1C] text-white border-2 border-[#8B1C1C] hover:border-[#D4AF37] shadow-xl px-8 sm:px-10 py-5 text-base sm:text-lg">
              Access Free Resources <ArrowRight className="w-6 h-6" />
            </a>
            <button onClick={() => navigate('/conversation-clubs')}
              className="inline-flex items-center gap-2 px-8 sm:px-10 py-5 rounded-2xl font-black text-base sm:text-lg bg-white/10 text-[#F6EFE9] hover:bg-white/20 border-2 border-[#E6D3B1]/30 transition-all">
              Join Conversation Clubs <ChevronRight className="w-6 h-6" />
            </button>
          </div>
          <div className="mt-12 pt-8 border-t border-[#E6D3B1]/20 flex flex-wrap items-center justify-center gap-5 text-sm text-[#E6D3B1]/65">
            {[
              { label: 'Level Test',       path: '/tools/speech-analyser' },
              { label: 'CEFR Levels',      path: '/how-to-start' },
              { label: 'Grammar Lessons',  path: '/tools' },
              { label: 'Veritas Tools',    path: '/tools' },
            ].map((link) => (
              <button key={link.label} onClick={() => navigate(link.path)}
                className="hover:text-[#E6D3B1] transition-colors">
                {link.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      </main>

      <CVFooter />
    </div>
  );
}