import Link from 'next/link';
import {
  ArrowRight,
  BarChart3,
  BookOpenCheck,
  Check,
  CheckCircle2,
  FileText,
  GraduationCap,
  Lightbulb,
  ListChecks,
  MessageSquareText,
  PenLine,
  ShieldCheck,
  Sparkles,
  Target,
  Users,
} from 'lucide-react';
import { MAIN_SITE_URL } from '@/lib/mainSiteUrl';
import PublicToolLaunchCard from '@/components/tools/PublicToolLaunchCard';
import {
  WRITING_ANALYSER_DESCRIPTION,
  WRITING_ANALYSER_FAQS,
  WRITING_ANALYSER_URL,
} from './writingAnalyserSeoData';

const criteria = [
  {
    icon: Target,
    number: '01',
    title: 'Task Response / Achievement',
    description:
      'See whether you address the question, cover the required points and develop your ideas with relevant support.',
    detail: 'Task Achievement for Task 1 · Task Response for Task 2',
  },
  {
    icon: ListChecks,
    number: '02',
    title: 'Coherence & Cohesion',
    description:
      'Review paragraph structure, logical progression, referencing, linking and the flow between ideas.',
    detail: 'Organisation · Progression · Linking devices',
  },
  {
    icon: MessageSquareText,
    number: '03',
    title: 'Lexical Resource',
    description:
      'Identify repeated words, imprecise choices and opportunities to use vocabulary more naturally and effectively.',
    detail: 'Range · Word choice · Collocations',
  },
  {
    icon: PenLine,
    number: '04',
    title: 'Grammatical Range & Accuracy',
    description:
      'Find grammar and punctuation issues while checking the variety and clarity of your sentence structures.',
    detail: 'Accuracy · Complex sentences · Clarity',
  },
];

const steps = [
  ['01', 'Choose an IELTS topic', 'Select a practice question for the type of writing you want to develop.'],
  ['02', 'Write your response', 'Complete your answer in the analyser as you would during IELTS preparation.'],
  ['03', 'Receive your report', 'Review an estimated band and criterion-by-criterion AI feedback.'],
  ['04', 'Improve the next draft', 'Use the priority actions and key mistakes to guide your next practice session.'],
];

const audiences = [
  ['IELTS candidates', 'Practise before your test and identify the areas that need focused work.'],
  ['Students', 'Develop clearer academic writing, organisation, vocabulary and grammar.'],
  ['IELTS trainers', 'Use the report as a starting point for revision and classroom discussion.'],
  ['English teachers', 'Help learners notice patterns in language and written communication.'],
];

const glossary = [
  ['Task Response', 'How effectively a Task 2 answer addresses the question, develops a position and supports its main ideas.'],
  ['Task Achievement', 'How effectively a Task 1 answer completes the requirements of the question.'],
  ['Coherence & Cohesion', 'How clearly ideas are organised and how effectively sentences and paragraphs connect.'],
  ['Lexical Resource', 'The range, accuracy and appropriateness of the vocabulary used in a response.'],
];

const relatedResources = [
  {
    eyebrow: 'Guided preparation',
    title: 'IELTS preparation course',
    text: 'Combine independent practice with live classes, structured Task 1 and Task 2 development, and trainer guidance.',
    href: '/certifications/cambridge-veritas-certificate-for-ielts-preparation',
    label: 'Explore IELTS preparation',
  },
  {
    eyebrow: 'Check your level',
    title: 'IELTS writing level test',
    text: 'Take a focused level test to understand your current writing strengths and development priorities.',
    href: '/ielts-writing-level-test',
    label: 'Take the writing level test',
  },
  {
    eyebrow: 'Learn the essentials',
    title: 'IELTS guides and strategies',
    text: 'Read practical Cambridge Veritas guides about IELTS preparation, assessment and stronger writing habits.',
    href: '/blog/ielts',
    label: 'Browse IELTS guides',
  },
];

const writingAnalyserJsonLd = {
  '@context': 'https://schema.org',
  '@graph': [
    {
      '@type': 'WebPage',
      '@id': `${WRITING_ANALYSER_URL}#webpage`,
      url: WRITING_ANALYSER_URL,
      name: 'AI IELTS Writing Checker & Band Feedback',
      description: WRITING_ANALYSER_DESCRIPTION,
      isPartOf: { '@id': `${MAIN_SITE_URL}/#website` },
      about: { '@id': `${WRITING_ANALYSER_URL}#app` },
      breadcrumb: { '@id': `${WRITING_ANALYSER_URL}#breadcrumb` },
    },
    {
      '@type': ['SoftwareApplication', 'WebApplication'],
      '@id': `${WRITING_ANALYSER_URL}#app`,
      name: 'Cambridge Veritas AI IELTS Writing Analyser',
      alternateName: 'Cambridge Veritas IELTS Writing Checker',
      url: WRITING_ANALYSER_URL,
      applicationCategory: 'EducationalApplication',
      applicationSubCategory: 'IELTS writing practice',
      operatingSystem: 'Web',
      browserRequirements: 'Requires JavaScript and a modern web browser.',
      description: WRITING_ANALYSER_DESCRIPTION,
      featureList: [
        'Estimated IELTS Writing band',
        'Task Response or Task Achievement feedback',
        'Coherence and Cohesion feedback',
        'Lexical Resource feedback',
        'Grammatical Range and Accuracy feedback',
        'Priority improvement suggestions',
      ],
      provider: { '@id': `${MAIN_SITE_URL}/#organization` },
    },
    {
      '@type': 'BreadcrumbList',
      '@id': `${WRITING_ANALYSER_URL}#breadcrumb`,
      itemListElement: [
        { '@type': 'ListItem', position: 1, name: 'Home', item: `${MAIN_SITE_URL}/` },
        { '@type': 'ListItem', position: 2, name: 'Tools', item: `${MAIN_SITE_URL}/tools` },
        { '@type': 'ListItem', position: 3, name: 'IELTS Writing Analyser', item: WRITING_ANALYSER_URL },
      ],
    },
    {
      '@type': 'FAQPage',
      '@id': `${WRITING_ANALYSER_URL}#faq`,
      mainEntity: WRITING_ANALYSER_FAQS.map(({ question, answer }) => ({
        '@type': 'Question',
        name: question,
        acceptedAnswer: { '@type': 'Answer', text: answer },
      })),
    },
  ],
};

function StructuredData() {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(writingAnalyserJsonLd).replace(/</g, '\\u003c') }}
    />
  );
}

function ReportPreview() {
  return (
    <div className="relative mx-auto w-full max-w-[540px] lg:mr-0">
      <div className="absolute -left-5 top-12 hidden h-28 w-28 rounded-full bg-[#D4B038]/20 blur-2xl sm:block" />
      <div className="absolute -right-6 bottom-10 h-36 w-36 rounded-full bg-[#8B1C1C]/20 blur-3xl" />
      <div className="relative overflow-hidden rounded-[2rem] border border-white/15 bg-white p-4 shadow-[0_30px_80px_rgba(20,2,9,0.36)] sm:p-5">
        <div className="rounded-[1.45rem] border border-[#E8DDD7] bg-[#FCF8F5] p-5 sm:p-6">
          <div className="mb-6 flex items-center justify-between border-b border-[#E8DDD7] pb-4">
            <div>
              <p className="text-[10px] font-extrabold uppercase tracking-[0.22em] text-[#9A7A36]">Personal writing report</p>
              <p className="mt-1 text-sm font-bold text-[#4A1429]">IELTS Writing Task 2</p>
            </div>
            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#4A1429] text-white">
              <FileText className="h-5 w-5" aria-hidden="true" />
            </div>
          </div>
          <div className="grid gap-4 sm:grid-cols-[130px_1fr]">
            <div className="flex min-h-32 flex-col items-center justify-center rounded-2xl bg-[#4A1429] p-4 text-center text-white">
              <span className="text-[10px] font-bold uppercase tracking-[0.18em] text-[#E6D3B1]">Estimated band</span>
              <strong className="mt-1 text-5xl font-black leading-none">6.5</strong>
              <span className="mt-2 text-[10px] text-white/60">Practice estimate</span>
            </div>
            <div className="space-y-3 rounded-2xl bg-white p-4 shadow-sm">
              {[
                ['Task response', '67%'],
                ['Coherence', '74%'],
                ['Vocabulary', '70%'],
                ['Grammar', '63%'],
              ].map(([label, width]) => (
                <div key={label}>
                  <div className="mb-1.5 flex justify-between text-[10px] font-bold text-[#6B4455]"><span>{label}</span><span>{width}</span></div>
                  <div className="h-1.5 overflow-hidden rounded-full bg-[#F0E8E3]"><div className="h-full rounded-full bg-gradient-to-r from-[#4A1429] to-[#D4B038]" style={{ width }} /></div>
                </div>
              ))}
            </div>
          </div>
          <div className="mt-4 grid grid-cols-2 gap-3">
            <div className="rounded-2xl border border-[#E8DDD7] bg-white p-4">
              <div className="flex items-center gap-2 text-[#2E7D5E]"><CheckCircle2 className="h-4 w-4" aria-hidden="true" /><span className="text-[10px] font-extrabold uppercase tracking-wider">Strongest area</span></div>
              <p className="mt-2 text-xs font-bold text-[#4A1429]">Clear paragraph progression</p>
            </div>
            <div className="rounded-2xl border border-[#E8DDD7] bg-white p-4">
              <div className="flex items-center gap-2 text-[#A66717]"><Lightbulb className="h-4 w-4" aria-hidden="true" /><span className="text-[10px] font-extrabold uppercase tracking-wider">Focus next</span></div>
              <p className="mt-2 text-xs font-bold text-[#4A1429]">Sentence variety and accuracy</p>
            </div>
          </div>
        </div>
      </div>
      <div className="absolute -bottom-4 -left-3 hidden items-center gap-2 rounded-2xl border border-[#E8DDD7] bg-white px-4 py-3 text-xs font-bold text-[#4A1429] shadow-xl sm:flex">
        <Sparkles className="h-4 w-4 text-[#D4B038]" aria-hidden="true" /> Clear priorities for your next attempt
      </div>
    </div>
  );
}

export default function WritingAnalyserPage() {
  return (
    <>
      <StructuredData />
      <div className="overflow-hidden bg-[#FAF5F0] text-[#38111F]">
        <section className="relative isolate overflow-hidden bg-[#3A101C] text-white">
          <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_15%_20%,rgba(212,176,56,0.18),transparent_28%),radial-gradient(circle_at_85%_70%,rgba(139,28,28,0.35),transparent_34%)]" />
          <div className="absolute inset-x-0 bottom-0 -z-10 h-28 bg-gradient-to-t from-black/15 to-transparent" />
          <div className="mx-auto max-w-7xl px-5 pb-20 pt-6 sm:px-8 lg:px-10 lg:pb-28">
            <nav aria-label="Breadcrumb" className="mb-12 flex items-center gap-2 text-xs font-semibold text-white/55">
              <Link href="/" className="transition-colors hover:text-white">Home</Link><span aria-hidden="true">/</span>
              <Link href="/tools" className="transition-colors hover:text-white">Tools</Link><span aria-hidden="true">/</span>
              <span className="text-[#E6D3B1]">Writing Analyser</span>
            </nav>
            <div className="grid items-center gap-14 lg:grid-cols-[1.02fr_.98fr] lg:gap-16">
              <div>
                <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-[#D4B038]/35 bg-[#D4B038]/10 px-4 py-2 text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#E8CE78]">
                  <Sparkles className="h-3.5 w-3.5" aria-hidden="true" /> AI-powered IELTS writing practice
                </div>
                <h1 className="max-w-3xl text-4xl font-black leading-[1.08] tracking-[-0.035em] sm:text-5xl lg:text-[4rem]">
                  IELTS writing feedback that shows you <span className="text-[#E2BE4A]">what to improve next.</span>
                </h1>
                <p className="mt-6 max-w-2xl text-base leading-8 text-white/72 sm:text-lg">Choose a topic, write your response and receive a personalised AI IELTS writing report with an estimated band and feedback across the key assessment criteria.</p>
                <div className="mt-7 flex flex-wrap gap-x-5 gap-y-3 text-sm font-semibold text-white/82">
                  {['Estimated writing band', 'Criterion-by-criterion feedback', 'Priority improvements'].map((item) => (
                    <span key={item} className="flex items-center gap-2"><Check className="h-4 w-4 rounded-full bg-[#D4B038] p-0.5 text-[#3A101C]" aria-hidden="true" />{item}</span>
                  ))}
                </div>
                <div className="mt-9 flex flex-col gap-3 sm:flex-row">
                  <Link href="/tools-dashboard/writing-analyser" className="inline-flex min-h-13 items-center justify-center gap-2 rounded-xl bg-[#D4B038] px-7 py-3.5 text-sm font-extrabold text-[#2B0B14] shadow-[0_14px_30px_rgba(212,176,56,0.22)] transition-transform hover:-translate-y-0.5">Analyse my IELTS writing <ArrowRight className="h-4 w-4" aria-hidden="true" /></Link>
                  <Link href="#how-it-works" className="inline-flex min-h-13 items-center justify-center rounded-xl border border-white/25 bg-white/5 px-7 py-3.5 text-sm font-extrabold text-white transition-colors hover:bg-white/10">See how it works</Link>
                </div>
                <p className="mt-4 text-xs leading-5 text-white/48">AI-generated practice estimates only. Not an official IELTS result.</p>
              </div>
              <ReportPreview />
            </div>
          </div>
        </section>

        <section aria-label="Tool highlights" className="relative z-10 mx-auto -mt-8 max-w-6xl px-5 sm:px-8">
          <div className="grid overflow-hidden rounded-2xl border border-[#E5D9D2] bg-white shadow-[0_18px_55px_rgba(74,20,41,0.1)] sm:grid-cols-3">
            {[[BarChart3, 'An actionable report', 'More than a single band estimate'], [BookOpenCheck, 'Task 1 & Task 2', 'Practice across IELTS writing formats'], [ShieldCheck, 'Clear limitations', 'AI guidance, never an official score']].map(([Icon, title, text], index) => (
              <div key={title} className={`flex gap-4 p-6 ${index < 2 ? 'border-b border-[#EDE3DD] sm:border-b-0 sm:border-r' : ''}`}>
                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#4A1429] text-[#E2BE4A]"><Icon className="h-5 w-5" aria-hidden="true" /></div>
                <div><p className="text-sm font-extrabold text-[#4A1429]">{title}</p><p className="mt-1 text-xs leading-5 text-[#7A5C65]">{text}</p></div>
              </div>
            ))}
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-5 py-24 sm:px-8 lg:px-10">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-xs font-extrabold uppercase tracking-[0.2em] text-[#9A7417]">Your personal IELTS writing report</p>
            <h2 className="mt-4 text-3xl font-black tracking-[-0.025em] text-[#4A1429] sm:text-4xl">Understand the criteria behind your writing</h2>
            <p className="mt-5 text-base leading-7 text-[#735763]">Use your result as a practice benchmark, then look beyond the number to understand the language and organisation affecting your response.</p>
          </div>
          <div className="mt-12 grid gap-5 md:grid-cols-2">
            {criteria.map(({ icon: Icon, number, title, description, detail }) => (
              <article key={title} className="group rounded-3xl border border-[#E6DAD3] bg-white p-7 shadow-[0_10px_35px_rgba(74,20,41,0.05)] transition-all hover:-translate-y-1 hover:border-[#D4B038]/60 hover:shadow-[0_18px_45px_rgba(74,20,41,0.09)]">
                <div className="flex items-start justify-between gap-4"><div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5ECE7] text-[#4A1429]"><Icon className="h-5 w-5" aria-hidden="true" /></div><span className="text-2xl font-black text-[#E8DDD7]">{number}</span></div>
                <h3 className="mt-6 text-xl font-extrabold text-[#4A1429]">{title}</h3>
                <p className="mt-3 text-sm leading-6 text-[#735763]">{description}</p>
                <p className="mt-5 border-t border-[#EEE5E0] pt-4 text-[11px] font-bold uppercase tracking-[0.08em] text-[#9A7417]">{detail}</p>
              </article>
            ))}
          </div>
        </section>

        <section className="border-y border-[#E4D7D0] bg-[#F2E9E3] px-5 py-16 sm:px-8">
          <div className="mx-auto max-w-5xl">
            <PublicToolLaunchCard
              href="/tools-dashboard/writing-analyser"
              title="Start your IELTS writing analysis"
              description="The topic selector, writing workspace and saved reports now open inside your private tools dashboard."
              buttonLabel="Open Writing Analyser"
            />
          </div>
        </section>

        <section id="how-it-works" className="scroll-mt-24 border-y border-[#E4D7D0] bg-white">
          <div className="mx-auto max-w-7xl px-5 py-24 sm:px-8 lg:px-10">
            <div className="grid gap-14 lg:grid-cols-[.78fr_1.22fr] lg:items-start">
              <div className="lg:sticky lg:top-24">
                <p className="text-xs font-extrabold uppercase tracking-[0.2em] text-[#9A7417]">How it works</p>
                <h2 className="mt-4 text-3xl font-black tracking-[-0.025em] text-[#4A1429] sm:text-4xl">From blank page to a clearer next step</h2>
                <p className="mt-5 text-base leading-7 text-[#735763]">Practise, analyse and improve without losing sight of the reason for the score.</p>
                <Link href="/tools-dashboard/writing-analyser" className="mt-7 inline-flex items-center gap-2 text-sm font-extrabold text-[#7C1728] hover:underline">Choose a practice topic <ArrowRight className="h-4 w-4" aria-hidden="true" /></Link>
              </div>
              <ol className="grid gap-4 sm:grid-cols-2">
                {steps.map(([number, title, description]) => (
                  <li key={number} className="min-h-52 rounded-3xl border border-[#E7DBD5] bg-[#FCF9F7] p-7">
                    <span className="text-xs font-black tracking-[0.16em] text-[#B48E2D]">STEP {number}</span>
                    <h3 className="mt-8 text-xl font-extrabold text-[#4A1429]">{title}</h3><p className="mt-3 text-sm leading-6 text-[#735763]">{description}</p>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </section>

        <section className="bg-[#4A1429] text-white">
          <div className="mx-auto grid max-w-7xl gap-12 px-5 py-24 sm:px-8 lg:grid-cols-2 lg:items-center lg:px-10">
            <div>
              <p className="text-xs font-extrabold uppercase tracking-[0.2em] text-[#E2BE4A]">Result summary</p>
              <h2 className="mt-4 text-3xl font-black tracking-[-0.025em] sm:text-4xl">Know what to practise next</h2>
              <p className="mt-5 max-w-xl text-base leading-7 text-white/68">You should not have to read a long report and still wonder where to begin. The result summary brings the most useful signals together in one place.</p>
              <div className="mt-8 grid gap-3 sm:grid-cols-2">
                {['Estimated overall performance', 'Strongest assessment area', 'Weakest assessment area', 'Highest-priority improvements', 'Important recurring mistakes', 'Focus for your next response'].map((item) => (
                  <div key={item} className="flex items-start gap-3 rounded-xl border border-white/10 bg-white/[0.04] p-4 text-sm font-semibold text-white/82"><CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-[#E2BE4A]" aria-hidden="true" />{item}</div>
                ))}
              </div>
            </div>
            <div className="rounded-[2rem] border border-white/12 bg-[#2C0B14] p-6 shadow-2xl sm:p-8">
              <div className="flex items-center justify-between border-b border-white/10 pb-5"><div><p className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#E2BE4A]">Next-practice plan</p><p className="mt-1 text-lg font-extrabold">Your three priorities</p></div><span className="rounded-full bg-[#E2BE4A] px-3 py-1 text-[10px] font-black uppercase tracking-wider text-[#2C0B14]">Example</span></div>
              <div className="mt-5 space-y-3">
                {[
                  ['1', 'Answer every part of the prompt', 'Make your position clear in the introduction and conclusion.'],
                  ['2', 'Vary sentence structures', 'Balance accurate simple sentences with controlled complex forms.'],
                  ['3', 'Replace repeated vocabulary', 'Use precise alternatives only when they fit the context naturally.'],
                ].map(([number, title, text]) => (
                  <div key={number} className="flex gap-4 rounded-2xl bg-white/[0.06] p-4"><span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#E2BE4A] text-xs font-black text-[#2C0B14]">{number}</span><div><p className="text-sm font-extrabold">{title}</p><p className="mt-1 text-xs leading-5 text-white/55">{text}</p></div></div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-5 py-24 sm:px-8 lg:px-10">
          <div className="grid gap-12 lg:grid-cols-[1.15fr_.85fr]">
            <div>
              <p className="text-xs font-extrabold uppercase tracking-[0.2em] text-[#9A7417]">Built for purposeful practice</p>
              <h2 className="mt-4 text-3xl font-black tracking-[-0.025em] text-[#4A1429] sm:text-4xl">Who can use the IELTS Writing Analyser?</h2>
              <div className="mt-8 grid gap-4 sm:grid-cols-2">
                {audiences.map(([title, text], index) => (
                  <article key={title} className="rounded-2xl border border-[#E6DAD3] bg-white p-6">
                    <div className="mb-4 flex h-9 w-9 items-center justify-center rounded-xl bg-[#F2E7E2] text-[#4A1429]">{index < 2 ? <GraduationCap className="h-4 w-4" aria-hidden="true" /> : <Users className="h-4 w-4" aria-hidden="true" />}</div>
                    <h3 className="text-base font-extrabold text-[#4A1429]">{title}</h3><p className="mt-2 text-sm leading-6 text-[#735763]">{text}</p>
                  </article>
                ))}
              </div>
            </div>
            <aside className="rounded-[2rem] border border-[#D9C9C1] bg-[#F2E8E2] p-7 sm:p-9">
              <BookOpenCheck className="h-8 w-8 text-[#8B1C1C]" aria-hidden="true" />
              <h2 className="mt-6 text-2xl font-black text-[#4A1429]">A simpler IELTS writing glossary</h2><p className="mt-3 text-sm leading-6 text-[#735763]">Understand the terminology used throughout your report.</p>
              <dl className="mt-7 space-y-5">{glossary.map(([term, definition]) => <div key={term} className="border-t border-[#D7C5BC] pt-5 first:border-t-0 first:pt-0"><dt className="text-sm font-extrabold text-[#4A1429]">{term}</dt><dd className="mt-1.5 text-xs leading-5 text-[#735763]">{definition}</dd></div>)}</dl>
            </aside>
          </div>
        </section>

        <section className="border-y border-[#E4D7D0] bg-white">
          <div className="mx-auto max-w-7xl px-5 py-24 sm:px-8 lg:px-10">
            <div className="mx-auto max-w-3xl text-center"><p className="text-xs font-extrabold uppercase tracking-[0.2em] text-[#9A7417]">Continue learning</p><h2 className="mt-4 text-3xl font-black tracking-[-0.025em] text-[#4A1429] sm:text-4xl">Build a complete IELTS writing practice routine</h2></div>
            <div className="mt-12 grid gap-5 md:grid-cols-3">
              {relatedResources.map((resource) => (
                <article key={resource.title} className="flex min-h-72 flex-col rounded-3xl border border-[#E6DAD3] bg-[#FCF9F7] p-7">
                  <p className="text-[10px] font-extrabold uppercase tracking-[0.18em] text-[#9A7417]">{resource.eyebrow}</p><h3 className="mt-4 text-xl font-extrabold text-[#4A1429]">{resource.title}</h3><p className="mt-3 text-sm leading-6 text-[#735763]">{resource.text}</p>
                  <Link href={resource.href} className="mt-auto inline-flex items-center gap-2 pt-7 text-sm font-extrabold text-[#7C1728] hover:underline">{resource.label} <ArrowRight className="h-4 w-4" aria-hidden="true" /></Link>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section id="faqs" className="mx-auto max-w-4xl px-5 py-24 sm:px-8">
          <div className="text-center"><p className="text-xs font-extrabold uppercase tracking-[0.2em] text-[#9A7417]">Frequently asked questions</p><h2 className="mt-4 text-3xl font-black tracking-[-0.025em] text-[#4A1429] sm:text-4xl">About AI IELTS writing feedback</h2></div>
          <div className="mt-10 space-y-3">
            {WRITING_ANALYSER_FAQS.map(({ question, answer }) => (
              <details key={question} className="group rounded-2xl border border-[#E3D6CF] bg-white open:border-[#D4B038]/70 open:shadow-[0_10px_30px_rgba(74,20,41,0.06)]">
                <summary className="flex cursor-pointer list-none items-center justify-between gap-5 px-6 py-5 text-sm font-extrabold text-[#4A1429] marker:content-none sm:text-base">{question}<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#F2E8E2] text-lg leading-none transition-transform group-open:rotate-45" aria-hidden="true">+</span></summary>
                <p className="px-6 pb-6 text-sm leading-7 text-[#735763]">{answer}</p>
              </details>
            ))}
          </div>
        </section>

        <section className="px-5 pb-24 sm:px-8">
          <div className="mx-auto max-w-6xl overflow-hidden rounded-[2.25rem] bg-[#3A101C] px-6 py-14 text-center text-white shadow-[0_25px_70px_rgba(58,16,28,0.24)] sm:px-12 sm:py-16">
            <Sparkles className="mx-auto h-7 w-7 text-[#E2BE4A]" aria-hidden="true" />
            <h2 className="mx-auto mt-5 max-w-2xl text-3xl font-black tracking-[-0.025em] sm:text-4xl">Ready to analyse your IELTS writing?</h2><p className="mx-auto mt-4 max-w-xl text-sm leading-7 text-white/65 sm:text-base">Choose a topic, write your answer and discover what deserves your attention next.</p>
              <Link href="/tools-dashboard/writing-analyser" className="mt-8 inline-flex min-h-13 items-center justify-center gap-2 rounded-xl bg-[#D4B038] px-7 py-3.5 text-sm font-extrabold text-[#2B0B14] transition-transform hover:-translate-y-0.5">Start writing practice <ArrowRight className="h-4 w-4" aria-hidden="true" /></Link>
            <p className="mt-5 text-xs text-white/42">Band scores are AI-generated practice estimates and are not official IELTS results.</p>
          </div>
        </section>
      </div>
    </>
  );
}