'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import {
  Phone, Mail, MapPin, ArrowRight, CheckCircle,
  AlertCircle, Loader2, MessageSquare, Building2, Send,
  ShieldCheck, GraduationCap, Users, BadgeCheck,
} from 'lucide-react';
import SiteHeader from '@/components/layout/CVHeader';
import SiteFooter from '@/components/layout/CVFooter';
import { CountryCodeDropdown } from '@/components/ui/CountryCodeDropdown';
import TurnstileWidget from '@/components/ui/TurnstileWidget';

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

const contactCards = [
  {
    label: 'Prospective learners',
    title: 'TESOL & Certification Admissions',
    text: 'Ask about CVTE® eligibility, programme format, fees, start dates, teaching practice or enrolment.',
    primary: '+91 92205 91873',
    href: 'tel:+919220591873',
    icon: Phone,
    color: '#4A141E',
    bg: '#FDF2F8',
  },
  {
    label: 'Student support',
    title: 'Existing Student Support',
    text: 'For existing learners who need help with classes, schedules, access, or course support.',
    primary: '+918068212576',
    href: 'tel:+918068212576',
    icon: Phone,
    color: '#1A5C3A',
    bg: '#ECFDF5',
  },
  {
    label: 'Organisations',
    title: 'Corporate & Institutional Training',
    text: 'Discuss English communication, teacher development and tailored training for your organisation.',
    primary: 'Email corporate training',
    href: 'mailto:krishnatrya@cambridgeveritas.com',
    icon: Building2,
    color: '#1E3A5F',
    bg: '#EFF6FF',
  },
];

const emailRoutes = [
  { title: 'Corporate training enquiries', email: 'krishnatrya@cambridgeveritas.com' },
  { title: 'Teacher training enquiries',   email: 'aisha@cambridgeveritas.com' },
  { title: 'Student support',              email: 'contact@cambridgeveritas.com' },
];

const WHATSAPP_URL = 'https://wa.me/918068212576?text=Hello%2C%20I%20would%20like%20to%20enquire%20about%20one%20of%20your%20courses.%20Could%20you%20give%20me%20a%20call%20back%3F';

const courseOptions = [
  'CVTE® — TESOL Certification',
  'CVIM® — IELTS Trainer',
  'CVAT® — Voice & Accent Trainer',
  'Other programme',
  'Corporate training',
  'Existing student support',
];

const enquiryOptions = [
  'Course eligibility',
  'Fees and payment',
  'Upcoming start date',
  'Course content',
  'Certification',
  'Enrolment',
  'Existing student support',
  'Corporate or institutional training',
];

const admissionFaqs = [
  {
    question: 'How do I contact Cambridge Veritas about the CVTE TESOL certification?',
    answer: 'Contact the Cambridge Veritas admissions team by WhatsApp, phone, email or this course enquiry form. Select CVTE® — TESOL Certification so your enquiry can be routed correctly.',
  },
  {
    question: 'Can I speak with an advisor before enrolling?',
    answer: 'Yes. Prospective learners can discuss programme suitability, eligibility, structure, upcoming start dates and the enrolment process before making a decision.',
  },
  {
    question: 'Can I ask about TESOL fees, eligibility and upcoming start dates?',
    answer: 'Yes. Select CVTE® TESOL in the form and choose the relevant enquiry type. Admissions can confirm current information for the cohort you are considering.',
  },
  {
    question: 'How quickly will Cambridge Veritas respond?',
    answer: 'Cambridge Veritas aims to respond to enquiries within 24 hours during normal operating periods. Complex academic, payment or verification questions may require additional review.',
  },
  {
    question: 'I am already enrolled. Where should I contact Cambridge Veritas?',
    answer: 'Choose Existing student support in both selectors for help with classes, schedules, platform access or course support. You can also use the dedicated student-support phone route above.',
  },
];

// ─── Contact Form ─────────────────────────────────────────────────────────────

function ContactForm() {
  const initialForm = {
    firstName: '',
    lastName: '',
    email: '',
    countryCode: '+91',
    phone: '',
    courseOfInterest: '',
    enquiryType: '',
    message: '',
  };
  const [form, setForm] = useState(initialForm);
  const [status, setStatus] = useState('idle'); // idle | loading | success | error
  const [errorMsg, setErrorMsg] = useState('');
  const [turnstileToken, setTurnstileToken] = useState('');
  const [turnstileResetKey, setTurnstileResetKey] = useState(0);

  const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }));
  const setPhone = (e) => {
    const phone = e.target.value.replace(/\D/g, '').slice(0, 14);
    setForm((f) => ({ ...f, phone }));
  };
  const getSubmissionSource = () => {
    if (typeof window === 'undefined') return {};

    const url = new URL(window.location.href);
    const trackingFields = [
      'utm_source',
      'utm_medium',
      'utm_campaign',
      'utm_term',
      'utm_content',
      'utm_id',
      'gclid',
      'fbclid',
      'msclkid',
    ];

    return {
      path: window.location.pathname,
      pageUrl: window.location.href,
      ...Object.fromEntries(
        trackingFields
          .map((field) => [field, url.searchParams.get(field) || ''])
          .filter(([, value]) => value),
      ),
    };
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const phoneDigits = form.phone.trim();
    const hasValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim());
    const hasValidPhone = form.countryCode.trim() && /^\d{6,14}$/.test(phoneDigits);

    if (!form.firstName.trim() || !form.lastName.trim() || !hasValidEmail || !hasValidPhone || !form.courseOfInterest || !form.enquiryType || !form.message.trim()) {
      setErrorMsg('Please complete your contact details, course of interest, enquiry type, and message.');
      setStatus('error');
      return;
    }
    if (!turnstileToken) {
      setErrorMsg('Please complete the security verification.');
      setStatus('error');
      return;
    }
    setStatus('loading');
    setErrorMsg('');
    try {
      const response = await fetch('/api/contact-us', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...form,
          turnstileToken,
          source: getSubmissionSource(),
        }),
      });
      const data = await response.json().catch(() => ({}));

      if (!response.ok || !data?.ok) {
        if (data?.code === 'TURNSTILE_INVALID') {
          setTurnstileToken('');
          setTurnstileResetKey((key) => key + 1);
        }
        throw new Error(data?.message || 'Unable to submit your enquiry. Please try again.');
      }

      setStatus('success');
      setForm(initialForm);
      setTurnstileToken('');
    } catch (error) {
      setErrorMsg(error?.message || 'Something went wrong. Please try again or email us directly.');
      setStatus('error');
    }
  };

  const inputClass =
    'w-full border border-[#E6D3B1] rounded-xl px-4 py-3 text-sm text-[#4A141E] placeholder-[#4A141E]/35 focus:outline-none focus:border-[#D4AF37] focus:ring-2 focus:ring-[#D4AF37]/20 transition-all bg-white';
  const phoneWrapClass =
    'relative flex h-12 w-full items-stretch rounded-xl border border-[#E6D3B1] bg-white transition-all focus-within:border-[#D4AF37] focus-within:ring-2 focus-within:ring-[#D4AF37]/20';

  if (status === 'success') {
    return (
      <div className="rounded-2xl border border-[#D4AF37]/40 bg-[#D4AF37]/8 p-8 text-center">
        <div className="w-16 h-16 rounded-full bg-[#D4AF37]/15 flex items-center justify-center mx-auto mb-4">
          <CheckCircle className="w-8 h-8 text-[#D4AF37]" />
        </div>
        <h3 className="text-xl font-black text-[#4A141E] mb-2">Message sent successfully</h3>
        <p className="text-sm text-[#4A141E]/65 leading-relaxed">
          Our team will review it and respond promptly with the necessary information.
        </p>
        <button
          onClick={() => {
            setStatus('idle');
            setTurnstileResetKey((key) => key + 1);
          }}
          className="mt-5 text-sm font-black text-[#8B1C1C] hover:text-[#4A141E] transition-colors"
        >
          Send another message →
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="grid gap-4">
      {status === 'error' && errorMsg && (
        <div className="flex items-start gap-3 rounded-xl border border-[#8B1C1C]/20 bg-[#8B1C1C]/5 px-4 py-3">
          <AlertCircle className="w-4 h-4 text-[#8B1C1C] flex-shrink-0 mt-0.5" />
          <p className="text-sm text-[#8B1C1C]">{errorMsg}</p>
        </div>
      )}

      <div className="grid sm:grid-cols-2 gap-4">
        <div>
          <label className="mb-1.5 block text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
            First name <span aria-hidden="true">*</span>
          </label>
          <input
            type="text"
            required
            placeholder="Enter your first name"
            value={form.firstName}
            onChange={set('firstName')}
            className={inputClass}
            autoComplete="given-name"
          />
        </div>
        <div>
          <label className="mb-1.5 block text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
            Last name <span aria-hidden="true">*</span>
          </label>
          <input
            type="text"
            required
            placeholder="Enter your last name"
            value={form.lastName}
            onChange={set('lastName')}
            className={inputClass}
            autoComplete="family-name"
          />
        </div>
      </div>

      <div className="grid sm:grid-cols-2 gap-4">
        <div>
          <label className="mb-1.5 block text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
            Email <span aria-hidden="true">*</span>
          </label>
          <input
            type="email"
            required
            placeholder="Enter your email"
            value={form.email}
            onChange={set('email')}
            className={inputClass}
            autoComplete="email"
          />
        </div>
        <div>
          <label className="mb-1.5 block text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
            Phone number <span aria-hidden="true">*</span>
          </label>
          <div className={phoneWrapClass}>
            <CountryCodeDropdown
              value={form.countryCode}
              onChange={(countryCode) => setForm((f) => ({ ...f, countryCode }))}
              fitMenuToField
            />
            <input
              type="tel"
              required
              inputMode="numeric"
              pattern="\d{6,14}"
              minLength={6}
              maxLength={14}
              placeholder="Enter phone"
              value={form.phone}
              onChange={setPhone}
              className="min-w-0 flex-1 rounded-r-xl border-0 bg-white px-4 py-3 text-sm text-[#4A141E] outline-none placeholder-[#4A141E]/35"
              autoComplete="tel-national"
            />
          </div>
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="course-of-interest" className="mb-1.5 block text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
            Course of interest <span aria-hidden="true">*</span>
          </label>
          <select
            id="course-of-interest"
            required
            value={form.courseOfInterest}
            onChange={set('courseOfInterest')}
            className={inputClass}
          >
            <option value="">Choose a programme</option>
            {courseOptions.map((option) => <option key={option} value={option}>{option}</option>)}
          </select>
        </div>
        <div>
          <label htmlFor="enquiry-type" className="mb-1.5 block text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
            Enquiry type <span aria-hidden="true">*</span>
          </label>
          <select
            id="enquiry-type"
            required
            value={form.enquiryType}
            onChange={set('enquiryType')}
            className={inputClass}
          >
            <option value="">What can we help with?</option>
            {enquiryOptions.map((option) => <option key={option} value={option}>{option}</option>)}
          </select>
        </div>
      </div>

      <div>
        <label htmlFor="contact-message" className="mb-1.5 block text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
          Message <span aria-hidden="true">*</span>
        </label>
        <textarea
          id="contact-message"
          required
          rows={5}
          placeholder="Tell us what you need help with"
          value={form.message}
          onChange={set('message')}
          className={`${inputClass} resize-none`}
        />
      </div>

      <div className="rounded-2xl border border-[#E6D3B1] bg-white p-4">
        <div className="mb-3">
          <div className="flex items-center gap-2 text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
            <ShieldCheck className="h-4 w-4" aria-hidden="true" /> Security verification <span aria-hidden="true">*</span>
          </div>
          <p className="mt-1 text-xs text-[#4A141E]/55">Protected by Cloudflare Turnstile.</p>
        </div>
        <TurnstileWidget
          resetKey={turnstileResetKey}
          onVerify={(token) => {
            setTurnstileToken(token);
            if (status === 'error' && errorMsg.includes('security verification')) {
              setStatus('idle');
              setErrorMsg('');
            }
          }}
          onExpire={() => setTurnstileToken('')}
          onError={() => {
            setTurnstileToken('');
            setErrorMsg('Security verification could not load. Please refresh the page.');
            setStatus('error');
          }}
        />
      </div>

      <button
        type="submit"
        disabled={status === 'loading' || !turnstileToken}
        className="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-[#4A141E] px-6 py-4 text-sm font-black text-white transition hover:bg-[#8B1C1C] disabled:opacity-60 disabled:cursor-not-allowed"
      >
        {status === 'loading' ? (
          <><Loader2 className="w-4 h-4 animate-spin" /> Sending…</>
        ) : (
          <><Send className="w-4 h-4" /> Submit Enquiry</>
        )}
      </button>
    </form>
  );
}

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

export default function ContactUsPage() {
  return (
    <>
      <SiteHeader />
      <main className="overflow-x-hidden bg-[#FDFAF7] text-[#4A141E]">

      {/* ── Hero ────────────────────────────────────────────────────── */}
      <header className="border-b-4 border-[#D4AF37] bg-gradient-to-r from-[#4A141E] via-[#3B0F18] to-[#4A141E]">
        <div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8 lg:py-16">
          <div>
            <div className="inline-flex items-center gap-2 rounded-full border border-[#D4AF37]/35 bg-[#D4AF37]/8 px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-[#E6D3B1]">
              <span className="h-2 w-2 rounded-full bg-[#D4AF37]" />
              Contact Cambridge Veritas
            </div>
            <h1 className="mt-5 text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">
              Contact Cambridge Veritas for TESOL Admissions &amp; Course Support
            </h1>
            <p className="mt-5 max-w-2xl text-base leading-relaxed text-[#E6D3B1]/80 sm:text-lg">
              Questions about the Cambridge Veritas Certificate in TESOL (CVTE®), professional certifications, course fees, eligibility, start dates or enrolment? Speak with our admissions team for guidance. Existing learners can also reach student support here.
            </p>
            <div className="mt-7 flex flex-col gap-3 sm:flex-row">
              <a href="#contact-form"
                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-[#D4AF37] px-6 py-4 text-sm font-black text-[#3B0F18] shadow-lg transition hover:bg-[#E6D3B1]">
                Talk to a TESOL Admissions Advisor <ArrowRight className="w-4 h-4" />
              </a>
              <a href="tel:+918068212576"
                className="inline-flex items-center justify-center gap-2 rounded-2xl border border-[#D4AF37]/50 bg-white/10 px-6 py-4 text-sm font-black text-[#E6D3B1] transition hover:bg-white/15">
                <Phone className="w-4 h-4" /> Existing Student Support
              </a>
            </div>
          </div>

          {/* Stats / info card */}
          <div className="rounded-3xl bg-white border-2 border-[#D4AF37]/40 shadow-2xl p-6 md:p-8">
            <div className="grid grid-cols-2 gap-4 mb-6">
              {[
                { val: '3', label: 'Contact channels' },
                { val: '24h', label: 'Response time' },
                { val: 'Live', label: 'Expert advisors' },
                { val: 'Free', label: 'Initial consultation' },
              ].map(({ val, label }) => (
                <div key={label} className="p-4 rounded-xl bg-[#F6EFE9] border border-[#E6D3B1]/40 text-center">
                  <div className="text-2xl font-black text-[#4A141E]">{val}</div>
                  <div className="text-xs text-[#4A141E]/60 mt-0.5">{label}</div>
                </div>
              ))}
            </div>
            <div className="space-y-3">
              {[
                { icon: Phone, text: '+91 92205 91873', sub: 'General enquiries', href: 'tel:+919220591873' },
                { icon: Mail,  text: 'contact@cambridgeveritas.com', sub: 'Email support', href: 'mailto:contact@cambridgeveritas.com' },
                { icon: MapPin, text: 'Delhi-110032, India', sub: 'Corporate office', href: null },
              ].map(({ icon: Icon, text, sub, href }) => (
                <div key={sub} className="flex items-center gap-3 p-3 rounded-xl bg-[#FDFAF7] border border-[#E6D3B1]/40">
                  <div className="w-9 h-9 rounded-xl bg-[#4A141E] flex items-center justify-center flex-shrink-0">
                    <Icon className="w-4 h-4 text-[#D4AF37]" />
                  </div>
                  <div className="min-w-0">
                    {href ? (
                      <a href={href} className="text-sm font-black text-[#4A141E] hover:text-[#8B1C1C] truncate block transition-colors">{text}</a>
                    ) : (
                      <p className="text-sm font-black text-[#4A141E] truncate">{text}</p>
                    )}
                    <p className="text-xs text-[#4A141E]/50">{sub}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </header>

      <section className="border-b border-[#E6D3B1]/60 bg-white">
        <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 sm:px-6 lg:grid-cols-[1.15fr_.85fr] lg:items-center lg:px-8 lg:py-16">
          <div>
            <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">CVTE® course enquiries</p>
            <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">Talk to a TESOL Admissions Advisor</h2>
            <p className="mt-4 max-w-3xl text-base leading-7 text-[#4A141E]/70">
              Considering the Cambridge Veritas Certificate in TESOL (CVTE®)? Ask our admissions team about eligibility, live course format, upcoming start dates, fees, observed teaching practice and the enrolment process.
            </p>
            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
              <a href="#contact-form" className="inline-flex min-h-12 items-center justify-center gap-2 rounded-2xl bg-[#4A141E] px-5 py-3 text-sm font-black text-white transition hover:bg-[#8B1C1C]">Talk to a TESOL Advisor <ArrowRight className="h-4 w-4" aria-hidden="true" /></a>
              <Link href="/certifications/cambridge-veritas-certificate-in-TESOL" className="inline-flex min-h-12 items-center justify-center rounded-2xl border border-[#D4AF37] bg-[#FFF9E8] px-5 py-3 text-sm font-black text-[#8B1C1C]">View the CVTE® TESOL Programme</Link>
            </div>
          </div>
          <div className="rounded-3xl border border-[#E6D3B1] bg-[#F6EFE9] p-6">
            <GraduationCap className="h-9 w-9 text-[#8B1C1C]" aria-hidden="true" />
            <h3 className="mt-5 text-lg font-black text-[#4A141E]">Useful before you enquire</h3>
            <ul className="mt-4 grid gap-3 text-sm leading-6 text-[#4A141E]/70">
              {['Your teaching or career goal', 'Your current English proficiency', 'Preferred timetable or start period', 'Questions about eligibility, fees or assessment'].map((item) => <li key={item} className="flex gap-3"><CheckCircle className="mt-0.5 h-5 w-5 shrink-0 text-[#8B1C1C]" aria-hidden="true" />{item}</li>)}
            </ul>
          </div>
        </div>
      </section>

      {/* ── Contact cards ────────────────────────────────────────────── */}
      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
        <div className="mb-10 max-w-3xl">
          <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Prospective learners, students and organisations</p>
          <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">Choose the Right Contact Route</h2>
          <p className="mt-3 text-base leading-relaxed text-[#4A141E]/65">
            Use the right channel and our admissions or support team will help you with the next step.
          </p>
        </div>
        <div className="grid gap-5 md:grid-cols-3">
          {contactCards.map((card) => {
            const Icon = card.icon;
            return (
              <article key={card.title} className="group rounded-2xl border border-[#E6D3B1] bg-white p-6 shadow-sm hover:shadow-md hover:border-[#D4AF37] transition-all">
                <div className="flex items-start justify-between mb-4">
                  <div className="inline-flex rounded-full bg-[#F6EFE9] px-3 py-1 text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
                    {card.label}
                  </div>
                  <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: card.bg }}>
                    <Icon className="w-5 h-5" style={{ color: card.color }} />
                  </div>
                </div>
                <h3 className="text-xl font-black text-[#4A141E]">{card.title}</h3>
                <p className="mt-3 text-sm leading-relaxed text-[#4A141E]/65">{card.text}</p>
                <a href={card.href}
                  className="mt-5 inline-flex items-center gap-1.5 text-sm font-black text-[#8B1C1C] hover:text-[#4A141E] transition-colors group-hover:gap-2.5">
                  {card.primary} <ArrowRight className="w-3.5 h-3.5 transition-all" />
                </a>
              </article>
            );
          })}
        </div>
      </section>

      {/* ── Contact form + address ───────────────────────────────────── */}
      <section id="contact-form" className="border-y border-[#E6D3B1]/60 bg-white">
        <div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-2 lg:items-start lg:px-8 lg:py-16">

          {/* Left: address + office details */}
          <div className="space-y-5">
            <div className="rounded-2xl border border-[#E6D3B1] bg-[#FFF9E8] p-6 shadow-sm">
              <div className="flex flex-col gap-5 sm:flex-row sm:items-center">
                <Image
                  src="https://media.base44.com/images/public/696e1487f2af597b5cda1da7/07ddc52bf_image.png"
                  alt="Aisha Vats, Admissions Manager at Cambridge Veritas"
                  width={112}
                  height={140}
                  className="h-32 w-28 shrink-0 rounded-2xl border-2 border-[#D4AF37] object-cover object-top shadow-sm"
                />
                <div>
                  <p className="text-xs font-black uppercase tracking-[0.18em] text-[#8B1C1C]">Speak with our Admissions Team</p>
                  <h2 className="mt-2 text-xl font-black text-[#4A141E]">Aisha Vats — Admissions Manager</h2>
                  <p className="mt-2 text-sm leading-6 text-[#4A141E]/68">Guidance for CVTE®, CVIM®, CVAT® and Cambridge Veritas professional certifications, including programme fit, entry guidance, schedules and enrolment steps.</p>
                </div>
              </div>
              <div className="mt-5 flex flex-col gap-3 border-t border-[#E6D3B1] pt-5 sm:flex-row">
                <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-[#4A141E] px-4 py-3 text-xs font-black text-white"><MessageSquare className="h-4 w-4" aria-hidden="true" />WhatsApp admissions</a>
                <a href="mailto:aisha@cambridgeveritas.com" className="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-[#D4AF37] bg-white px-4 py-3 text-xs font-black text-[#8B1C1C]"><Mail className="h-4 w-4" aria-hidden="true" />Email Aisha</a>
              </div>
              <p className="mt-3 text-xs leading-5 text-[#4A141E]/55">Response target: within 24 hours during normal operating periods.</p>
            </div>

            <div className="relative overflow-hidden rounded-2xl border-2 border-[#D4AF37]/30 bg-gradient-to-br from-[#4A141E] via-[#3B0F18] to-[#4A141E] p-6 shadow-lg md:p-8">
              <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-[#D4AF37]/10" aria-hidden="true" />
              <div className="absolute -bottom-12 -left-12 h-40 w-40 rounded-full bg-[#D4AF37]/10" aria-hidden="true" />

              <div className="relative flex items-center gap-3">
                <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl bg-[#D4AF37]/15">
                  <Building2 className="h-6 w-6 text-[#D4AF37]" />
                </div>
                <div>
                  <p className="text-xs font-black uppercase tracking-[0.22em] text-[#D4AF37]">Corporate office</p>
                  <h2 className="text-lg font-black text-white">Cambridge Veritas Corporate Office</h2>
                </div>
              </div>

              <div className="relative mt-6 rounded-2xl border border-white/10 bg-white/5 p-4">
                <h4 className="text-sm font-black text-white">VERITASBRIDGE LEARN PRIVATE LIMITED</h4>
                <address className="mt-2 flex items-start gap-2 not-italic text-sm leading-relaxed text-[#E6D3B1]/80">
                  <MapPin className="mt-0.5 h-4 w-4 flex-shrink-0 text-[#D4AF37]" />
                  <span>
                    Building number: 1-3064<br />
                    Janta Block, Ram Nagar<br />
                    Delhi-110032, India
                  </span>
                </address>
              </div>

              <div className="relative mt-4 grid grid-cols-2 gap-3">
                <div className="rounded-xl border border-white/10 bg-white/5 p-3">
                  <p className="text-xs font-bold text-[#E6D3B1]/60">Mon – Sat</p>
                  <p className="text-sm font-black text-white">9 AM – 7 PM</p>
                </div>
                <div className="rounded-xl border border-white/10 bg-white/5 p-3">
                  <p className="text-xs font-bold text-[#E6D3B1]/60">Sunday</p>
                  <p className="text-sm font-black text-white">Closed</p>
                </div>
              </div>
            </div>

            <div className="rounded-2xl border border-[#E6D3B1] bg-[#FDFAF7] p-6">
              <p className="mb-4 text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Direct contact</p>
              <div className="space-y-2">
                <a href="tel:+919220591873" className="flex items-center gap-3 rounded-xl border border-[#E6D3B1]/40 bg-white p-3 transition-colors hover:border-[#D4AF37]">
                  <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-[#4A141E]">
                    <Phone className="h-4 w-4 text-[#D4AF37]" />
                  </div>
                  <div className="min-w-0">
                    <p className="truncate text-sm font-black text-[#4A141E]">+91 92205 91873</p>
                    <p className="text-xs text-[#4A141E]/50">General enquiries</p>
                  </div>
                </a>
                <a href="mailto:contact@cambridgeveritas.com" className="flex items-center gap-3 rounded-xl border border-[#E6D3B1]/40 bg-white p-3 transition-colors hover:border-[#D4AF37]">
                  <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-[#4A141E]">
                    <Mail className="h-4 w-4 text-[#D4AF37]" />
                  </div>
                  <div className="min-w-0">
                    <p className="truncate text-sm font-black text-[#4A141E]">contact@cambridgeveritas.com</p>
                    <p className="text-xs text-[#4A141E]/50">Email support</p>
                  </div>
                </a>
              </div>
            </div>
          </div>

          {/* Right: form */}
          <div className="rounded-2xl border border-[#E6D3B1] bg-[#FDFAF7] p-6 shadow-sm">
            <div className="mb-6">
              <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Send enquiry</p>
              <h2 className="mt-3 text-2xl font-black text-[#4A141E]">Send a Course Enquiry</h2>
              <p className="mt-2 text-sm leading-relaxed text-[#4A141E]/65">
                Select a programme and enquiry type so we can connect you with the right admissions or support team.
              </p>
            </div>
            <ContactForm />
          </div>
        </div>
      </section>

      <section className="border-b border-[#E6D3B1]/60 bg-[#F6EFE9]">
        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Evidence before enrolment</p>
            <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">Why Speak With Cambridge Veritas Admissions?</h2>
            <p className="mt-3 text-base leading-7 text-[#4A141E]/68">Get current programme information in writing and review the learner, graduate and policy evidence already published across the website.</p>
          </div>
          <div className="mt-8 grid gap-5 md:grid-cols-2 lg:grid-cols-4">
            {[
              { icon: Users, title: 'Live expert-led training', text: 'Discuss the delivery format, participation expectations and support available for the programme you are considering.' },
              { icon: BadgeCheck, title: 'Verifiable certificates', text: 'Ask how certification and graduate records can be checked before relying on a credential claim.' },
              { icon: GraduationCap, title: 'Teacher-training pathways', text: 'Compare CVTE® TESOL with other professional certification pathways without duplicating the course page.' },
              { icon: ShieldCheck, title: 'Admissions and student support', text: 'Prospective learners and existing students use distinct routes so questions reach the appropriate team.' },
            ].map(({ icon: Icon, title, text }) => (
              <article key={title} className="rounded-2xl border border-[#E6D3B1] bg-white p-6 shadow-sm">
                <Icon className="h-8 w-8 text-[#8B1C1C]" aria-hidden="true" />
                <h3 className="mt-5 text-lg font-black text-[#4A141E]">{title}</h3>
                <p className="mt-3 text-sm leading-6 text-[#4A141E]/65">{text}</p>
              </article>
            ))}
          </div>
          <nav aria-label="Admissions evidence and programme links" className="mt-8 flex flex-wrap justify-center gap-x-6 gap-y-3 text-sm font-black text-[#8B1C1C]">
            <Link href="/certifications/cambridge-veritas-certificate-in-TESOL" className="underline decoration-[#D4AF37] underline-offset-4">CVTE® 120-Hour TESOL</Link>
            <Link href="/introduction-class/tesol" className="underline decoration-[#D4AF37] underline-offset-4">Free TESOL introduction class</Link>
            <Link href="/reviews#tesol-reviews" className="underline decoration-[#D4AF37] underline-offset-4">Verified learner reviews</Link>
            <Link href="/hall-of-fame" className="underline decoration-[#D4AF37] underline-offset-4">Certified professionals</Link>
            <Link href="/certifications" className="underline decoration-[#D4AF37] underline-offset-4">All certifications</Link>
            <Link href="/enrol-risk-free" className="underline decoration-[#D4AF37] underline-offset-4">Enrol risk-free policy</Link>
            <Link href="/about-us" className="underline decoration-[#D4AF37] underline-offset-4">About Cambridge Veritas</Link>
          </nav>
        </div>
      </section>

      {/* ── Department emails ────────────────────────────────────────── */}
      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
        <div>
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Department emails</p>
            <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">
              Route your enquiry to the right team
            </h2>
            <p className="mt-3 text-base leading-relaxed text-[#4A141E]/65">
              For specialist questions, use the direct department email listed here.
            </p>
          </div>
          <div className="mt-8 grid gap-5 md:grid-cols-3">
            {emailRoutes.map((route) => (
              <a
                key={route.title}
                href={`mailto:${route.email}`}
                aria-label={`Email ${route.title} at ${route.email}`}
                className="group min-w-0 rounded-2xl border border-[#E6D3B1] bg-white p-6 shadow-sm transition-all hover:-translate-y-0.5 hover:border-[#D4AF37] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D4AF37]/60"
              >
                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[#F6EFE9]">
                  <Mail className="w-4 h-4 text-[#8B1C1C]" />
                </div>
                <p className="mb-2 text-sm font-black text-[#4A141E]">{route.title}</p>
                <span className="block whitespace-nowrap text-xs font-black leading-relaxed text-[#8B1C1C] transition-colors group-hover:text-[#4A141E] xl:text-sm">
                  {route.email}
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ── Final CTA ────────────────────────────────────────────────── */}
      <section className="border-y border-[#E6D3B1]/60 bg-white">
        <div className="mx-auto max-w-5xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
          <div className="text-center">
            <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Clear answers before you contact us</p>
            <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">Frequently Asked Questions About TESOL Admissions</h2>
          </div>
          <div className="mt-8 grid gap-4">
            {admissionFaqs.map((faq) => (
              <details key={faq.question} className="group rounded-2xl border border-[#E6D3B1] bg-[#FDFAF7] p-5 open:border-[#D4AF37]">
                <summary className="cursor-pointer list-none pr-8 text-base font-black text-[#4A141E] marker:hidden">{faq.question}</summary>
                <p className="mt-3 border-t border-[#E6D3B1]/70 pt-3 text-sm leading-7 text-[#4A141E]/68">{faq.answer}</p>
              </details>
            ))}
          </div>
          <p className="mt-7 text-center text-sm leading-6 text-[#4A141E]/65">For broader questions about delivery, assessment, employment claims and policies, read the <Link href="/faq" className="font-black text-[#8B1C1C] underline decoration-[#D4AF37] underline-offset-4">Cambridge Veritas FAQ</Link>.</p>
        </div>
      </section>

      <section className="border-t border-[#E6D3B1]/60 bg-gradient-to-r from-[#4A141E] via-[#3B0F18] to-[#4A141E]">
        <div className="max-w-4xl mx-auto px-4 py-12 sm:px-6 lg:px-8 text-center">
          <h2 className="text-2xl sm:text-3xl font-black text-white mb-3">Still Need Help?</h2>
          <p className="text-[#E6D3B1]/75 text-base mb-8 leading-relaxed">
            Our advisors are ready to help with enrolment, course selection, corporate partnerships, and teacher training programmes.
          </p>
          <div className="flex flex-wrap gap-4 justify-center">
            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-2xl bg-[#D4AF37] px-6 py-4 text-sm font-black text-[#3B0F18] shadow-lg transition hover:bg-[#E6D3B1] hover:scale-105">
              <MessageSquare className="w-4 h-4" /> Chat on WhatsApp
            </a>
            <a href="mailto:contact@cambridgeveritas.com"
              className="inline-flex items-center gap-2 rounded-2xl border border-[#D4AF37]/50 bg-white/10 px-6 py-4 text-sm font-black text-[#E6D3B1] transition hover:bg-white/15">
              <Mail className="w-4 h-4" /> Email us directly
            </a>
          </div>
        </div>
      </section>

    </main>
    <SiteFooter />
    </>
  );
}