'use client';

import { useState } from 'react';
import { CircleCheck } from 'lucide-react';

const days = [
  [
    "Introduction to Business English and corporate communication",
    "Difference between General English and Professional English",
    "Understanding the role of a certified corporate trainer",
    "Trainer introduction, learner motivation and programme expectations"
  ],
  [
    "Teaching learners to describe their job, company and responsibilities",
    "Present simple and present continuous in workplace contexts",
    "Work-related verb phrases and key prepositions",
    "Writing and presenting a short professional profile"
  ],
  [
    "Showing interest in business conversations",
    "Asking follow-up questions and finding professional connections",
    "Speed networking and exchanging contact details",
    "Error correction for real workplace speaking"
  ],
  [
    "Business English students vs General English students",
    "Identifying real workplace language needs",
    "Treating adult learners as professional clients",
    "Using appropriate trainer language for corporate learners"
  ],
  [
    "Conducting needs analysis with learners, managers and coordinators",
    "Asking the right questions before designing a course",
    "Identifying priorities, urgency and workplace situations",
    "First-meeting simulations with corporate learners"
  ],
  [
    "Conducting pre-course checks before training begins",
    "Designing realistic Business English course outlines",
    "Linking needs analysis to course content and timing",
    "Creating placement tests for workplace English learners"
  ],
  [
    "Planning lessons around real workplace performance",
    "Selecting suitable teaching methods and activities",
    "Designing effective warmers for corporate classes",
    "Contextualised practice instead of isolated grammar tasks"
  ],
  [
    "Giving clear instructions for business role-plays and tasks",
    "Managing timing, monitoring, ICQs and classroom flow",
    "Using boardwork for functional language and feedback",
    "Linking activities to final business communication outcomes"
  ],
  [
    "Presentations, factual information and persuasive speaking",
    "Meetings, questions, compliments and feedback language",
    "Conflict management and diplomatic communication",
    "Discourse markers, emphasis and professional speaking strategies"
  ],
  [
    "Delivering a final micro-teaching session",
    "Demonstrating Business English trainer skills",
    "Receiving trainer feedback and improvement guidance",
    "Portfolio review, final reflection and certification award"
  ]
];

function DayPanel({ index, open }) {
  const finalDay = index === 9;
  return (
    <div id={`day-${index + 1}-panel`} role="region" aria-labelledby={`day-${index + 1}-trigger`} hidden={!open} className={`ttt-day-panel px-4 pb-4 border-t ${finalDay ? 'border-[#D4AF37]/30' : 'border-[#E6D3B1]/40'}`}>
      <div className="pt-3 grid gap-2">
        {days[index].map(item => (
          <div key={item} className={`flex items-start gap-2 text-sm ${finalDay ? 'text-[#F6EFE9]/85' : 'text-[#4A141E]/75'}`}>
            <CircleCheck aria-hidden="true" className={`w-4 h-4 shrink-0 mt-0.5 ${finalDay ? 'text-[#D4AF37]' : 'text-[#8B1C1C]'}`} />
            <span>{item}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function Syllabus() {
  const [openDay, setOpenDay] = useState(0);
  return (
    <div className="business-ttt-syllabus">
<div className="min-h-screen bg-[#F6EFE9] flex flex-col text-[#2B0A11]">
        <header className="bg-gradient-to-r from-[#4A141E] to-[#3B0F18] border-b-2 border-[#D4AF37] px-4 sm:px-6 py-3 flex items-center justify-between flex-wrap gap-3 flex-shrink-0">
            <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-lg bg-[#D4AF37] flex items-center justify-center font-black text-[#4A141E] text-sm">CV</div>
                <div>
                    <p className="text-white font-black text-sm leading-tight">Cambridge Veritas®</p><a href="https://www.cambridgeveritas.com" target="_blank" rel="noopener noreferrer" className="text-[#D4AF37]/80 text-[10px] hover:text-[#D4AF37] flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-globe w-2.5 h-2.5" aria-hidden="true">
                            <circle cx="12" cy="12" r="10"></circle>
                            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
                            <path d="M2 12h20"></path>
                        </svg>www.cambridgeveritas.com</a>
                </div>
            </div>
            <div className="flex items-center gap-2 flex-wrap"><span className="hidden lg:block px-3 py-1 rounded-full bg-[#D4AF37]/20 border border-[#D4AF37]/40 text-[10px] font-black text-[#D4AF37] uppercase tracking-widest">Cambridge Veritas® · Business English TTT · Course Code: CVBE-TTT-001</span><a href="https://wa.me/message/B5KYXJN6WGMEN1" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#25D366] text-white text-xs font-bold hover:bg-[#1fb855] transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-message-circle w-3.5 h-3.5" aria-hidden="true">
                        <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path>
                    </svg>WhatsApp</a><a href="https://wa.me/message/B5KYXJN6WGMEN1" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#D4AF37] text-[#4A141E] text-xs font-black hover:bg-[#C9A96E] transition-all">Request Team Enrolment<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-arrow-right w-3.5 h-3.5" aria-hidden="true">
                        <path d="M5 12h14"></path>
                        <path d="m12 5 7 7-7 7"></path>
                    </svg></a></div>
        </header>
        <section className="bg-gradient-to-r from-[#4A141E] to-[#3B0F18] px-4 sm:px-6 py-5 border-b-4 border-[#D4AF37] flex-shrink-0">
            <div className="max-w-6xl mx-auto flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <p className="text-[10px] font-black text-[#C9A96E] uppercase tracking-[0.2em] mb-1">Cambridge Veritas® Business English Train the Trainer</p>
                    <h1 className="text-2xl md:text-3xl font-black text-white leading-tight">Business English TTT<span className="text-[#D4AF37]">®</span> — Programme Syllabus</h1>
                    <p className="text-[#E6D3B1]/70 text-sm mt-1">10 Days · Corporate Trainer Pathway · Micro-Teaching &amp; Certification</p>
                </div>
                <div className="grid grid-cols-4 gap-3 sm:gap-4 flex-shrink-0">
                    <div className="text-center">
                        <div className="text-lg font-black text-[#D4AF37]">10</div>
                        <div className="text-[10px] text-[#E6D3B1]/60">Days</div>
                    </div>
                    <div className="text-center">
                        <div className="text-lg font-black text-[#D4AF37]">TTT</div>
                        <div className="text-[10px] text-[#E6D3B1]/60">Pathway</div>
                    </div>
                    <div className="text-center">
                        <div className="text-lg font-black text-[#D4AF37]">10</div>
                        <div className="text-[10px] text-[#E6D3B1]/60">Max cohort</div>
                    </div>
                    <div className="text-center">
                        <div className="text-lg font-black text-[#D4AF37]">Final</div>
                        <div className="text-[10px] text-[#E6D3B1]/60">Micro-teach</div>
                    </div>
                </div>
            </div>
        </section>
        <main className="flex-1 max-w-6xl mx-auto w-full px-4 sm:px-6 py-6">
            <div className="grid lg:grid-cols-[0.85fr_1.15fr] gap-5 mb-5">
                <div className="rounded-2xl bg-white border-2 border-[#E6D3B1]/50 shadow-sm p-5">
                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#8B1C1C]/10 text-[#8B1C1C] text-[10px] font-black uppercase tracking-widest mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-sparkles w-3.5 h-3.5" aria-hidden="true">
                            <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path>
                            <path d="M20 2v4"></path>
                            <path d="M22 4h-4"></path>
                            <circle cx="4" cy="20" r="2"></circle>
                        </svg>Purpose</div>
                    <h2 className="text-2xl font-black text-[#4A141E] mb-3">Become a certified corporate Business English trainer.</h2>
                    <p className="text-sm text-[#4A141E]/70 leading-relaxed">This syllabus is for trainers who want to work with MNCs, corporate teams and professional learners. It builds the confidence, methodology and certification needed to teach Business English in the corporate world.</p>
                </div>
                <div className="grid sm:grid-cols-3 gap-3">
                    <div className="rounded-2xl bg-white border-2 border-[#E6D3B1]/50 shadow-sm p-5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-users w-6 h-6 text-[#8B1C1C] mb-3" aria-hidden="true">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                            <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
                            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                        </svg>
                        <h3 className="font-black text-[#4A141E] mb-2">Corporate Trainer Career</h3>
                        <p className="text-xs text-[#4A141E]/65 leading-relaxed">Become certified to train Business English for MNCs, corporate teams and professional learners.</p>
                    </div>
                    <div className="rounded-2xl bg-white border-2 border-[#E6D3B1]/50 shadow-sm p-5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-users w-6 h-6 text-[#8B1C1C] mb-3" aria-hidden="true">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                            <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
                            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                        </svg>
                        <h3 className="font-black text-[#4A141E] mb-2">Company Training Teams</h3>
                        <p className="text-xs text-[#4A141E]/65 leading-relaxed">Develop in-house trainers who can improve meetings, emails, presentations and workplace communication.</p>
                    </div>
                    <div className="rounded-2xl bg-white border-2 border-[#E6D3B1]/50 shadow-sm p-5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-users w-6 h-6 text-[#8B1C1C] mb-3" aria-hidden="true">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                            <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
                            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                        </svg>
                        <h3 className="font-black text-[#4A141E] mb-2">Individual Trainers</h3>
                        <p className="text-xs text-[#4A141E]/65 leading-relaxed">Move from general English teaching into higher-value corporate training with Cambridge Veritas® certification.</p>
                    </div>
                </div>
            </div>
            <p className="text-xs text-[#4A141E]/50 italic mb-4 text-center">Each day includes trainer methodology and practical classroom application. Click any day to expand the content.</p>
            <div className="ttt-days-grid grid md:grid-cols-2 items-start gap-3">
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-1-trigger" aria-controls="day-1-panel" aria-expanded={openDay === 0} onClick={() => setOpenDay(openDay === 0 ? null : 0)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-gradient-to-br from-[#4A141E] to-[#3B0F18] text-[#D4AF37]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">1</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-[#4A141E]">Foundations of Business English Training</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={0} open={openDay === 0} />
                </div>
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-2-trigger" aria-controls="day-2-panel" aria-expanded={openDay === 1} onClick={() => setOpenDay(openDay === 1 ? null : 1)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-gradient-to-br from-[#4A141E] to-[#3B0F18] text-[#D4AF37]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">2</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-[#4A141E]">Describing Work &amp; Professional Identity</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={1} open={openDay === 1} /></div>
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-3-trigger" aria-controls="day-3-panel" aria-expanded={openDay === 2} onClick={() => setOpenDay(openDay === 2 ? null : 2)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-gradient-to-br from-[#4A141E] to-[#3B0F18] text-[#D4AF37]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">3</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-[#4A141E]">Networking &amp; Showing Professional Interest</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={2} open={openDay === 2} /></div>
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-4-trigger" aria-controls="day-4-panel" aria-expanded={openDay === 3} onClick={() => setOpenDay(openDay === 3 ? null : 3)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-gradient-to-br from-[#4A141E] to-[#3B0F18] text-[#D4AF37]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">4</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-[#4A141E]">Understanding Corporate Learners</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={3} open={openDay === 3} /></div>
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-5-trigger" aria-controls="day-5-panel" aria-expanded={openDay === 4} onClick={() => setOpenDay(openDay === 4 ? null : 4)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-gradient-to-br from-[#4A141E] to-[#3B0F18] text-[#D4AF37]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">5</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-[#4A141E]">Needs Analysis &amp; First Client Meeting</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={4} open={openDay === 4} /></div>
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-6-trigger" aria-controls="day-6-panel" aria-expanded={openDay === 5} onClick={() => setOpenDay(openDay === 5 ? null : 5)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-gradient-to-br from-[#4A141E] to-[#3B0F18] text-[#D4AF37]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">6</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-[#4A141E]">Course Planning &amp; Pre-Course Setup</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={5} open={openDay === 5} /></div>
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-7-trigger" aria-controls="day-7-panel" aria-expanded={openDay === 6} onClick={() => setOpenDay(openDay === 6 ? null : 6)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-gradient-to-br from-[#4A141E] to-[#3B0F18] text-[#D4AF37]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">7</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-[#4A141E]">Business English Lesson Planning Methodology</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={6} open={openDay === 6} /></div>
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-8-trigger" aria-controls="day-8-panel" aria-expanded={openDay === 7} onClick={() => setOpenDay(openDay === 7 ? null : 7)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-gradient-to-br from-[#4A141E] to-[#3B0F18] text-[#D4AF37]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">8</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-[#4A141E]">Classroom Procedures &amp; Trainer Delivery Skills</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={7} open={openDay === 7} /></div>
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-9-trigger" aria-controls="day-9-panel" aria-expanded={openDay === 8} onClick={() => setOpenDay(openDay === 8 ? null : 8)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-gradient-to-br from-[#4A141E] to-[#3B0F18] text-[#D4AF37]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">9</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-[#4A141E]">Teaching Core Business Communication Skills</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={8} open={openDay === 8} /></div>
                <div className="rounded-xl overflow-hidden border-2 transition-all border-[#D4AF37] bg-gradient-to-br from-[#4A141E] to-[#3B0F18]"><button type="button" className="w-full px-4 py-3.5 flex items-center gap-4 text-left" id="day-10-trigger" aria-controls="day-10-panel" aria-expanded={openDay === 9} onClick={() => setOpenDay(openDay === 9 ? null : 9)}>
                        <div className="w-11 h-11 rounded-xl flex flex-col items-center justify-center flex-shrink-0 font-black leading-tight bg-[#D4AF37] text-[#4A141E]"><span className="text-[9px] uppercase tracking-wide opacity-70">Day</span><span className="text-base leading-none">10</span></div>
                        <h3 className="font-black text-sm sm:text-base flex-1 leading-snug text-white">Assessment, Micro-Teaching &amp; Certification</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-award hidden sm:block w-4 h-4 text-[#D4AF37] flex-shrink-0" aria-hidden="true">
                            <path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path>
                            <circle cx="12" cy="8" r="6"></circle>
                        </svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right w-4 h-4 flex-shrink-0 text-[#D4AF37] transition-transform duration-200" aria-hidden="true">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
<DayPanel index={9} open={openDay === 9} /></div>
            </div>
        </main>
        <footer className="bg-gradient-to-r from-[#4A141E] to-[#3B0F18] border-t-4 border-[#D4AF37] px-4 sm:px-6 py-5 flex-shrink-0">
            <div className="max-w-6xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-5">
                <div>
                    <p className="text-white font-black text-base">Ready to train Business English?</p>
                    <p className="text-[#E6D3B1]/60 text-xs mt-0.5">Become a certified corporate trainer for workplace English and professional communication.</p>
                </div>
                <div className="flex flex-wrap gap-3 items-center justify-center"><a href="https://wa.me/message/B5KYXJN6WGMEN1" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-5 py-2.5 rounded-xl font-black text-sm bg-[#D4AF37] text-[#4A141E] hover:bg-[#C9A96E] transition-all hover:scale-105 shadow-lg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-building2 lucide-building-2 w-4 h-4" aria-hidden="true">
                            <path d="M10 12h4"></path>
                            <path d="M10 8h4"></path>
                            <path d="M14 21v-3a2 2 0 0 0-4 0v3"></path>
                            <path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"></path>
                            <path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"></path>
                        </svg>Request Team Enrolment</a><a href="https://wa.me/message/B5KYXJN6WGMEN1" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-sm bg-[#25D366] text-white hover:bg-[#1fb855] transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-message-circle w-4 h-4" aria-hidden="true">
                            <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path>
                        </svg>WhatsApp Our Team</a></div>
                <p className="text-[#E6D3B1]/30 text-[10px] text-center lg:text-right">© Cambridge Veritas® 2026<br />Business English TTT · CVBE-TTT-001</p>
            </div>
        </footer>
    </div>
    </div>
  );
}
