Guide to Mobile Website Optimisation

import React, { useState } from 'react';
import { Download, ChevronRight, Smartphone, Zap, Navigation, Layout, FileInput, Settings, AlertTriangle, CheckSquare, Check } from 'lucide-react';

export default function MobileGuide() {
    const [checklist, setChecklist] = useState({
        performance: Array(6).fill(false),
        navigation: Array(6).fill(false),
        content: Array(7).fill(false),
        forms: Array(6).fill(false),
        functionality: Array(6).fill(false)
    });

    const checklistItems = {
        performance: [
            'Page load time under 3 seconds',
            'Compressed images and media files',
            'Minimised code (HTML, CSS, JavaScript)',
            'Browser caching enabled',
            'Lazy loading for images',
            'Limited use of resource-heavy features'
        ],
        navigation: [
            'Clear, prominent menu structure',
            'Large, easily tappable buttons (44x44px)',
            'Adequate spacing between elements',
            'Simple, logical user journey',
            'Search function easily accessible',
            'Back-to-top button for long pages'
        ],
        content: [
            'Readable font sizes (16px minimum)',
            'Sufficient contrast ratios',
            'Short paragraphs',
            'Bullet points for better scanning',
            'No horizontal scrolling',
            'Responsive images',
            'Adaptive tables'
        ],
        forms: [
            'Minimal form fields',
            'Correct input types for keyboards',
            'Clear error messages',
            'Autofill enabled',
            'Large form fields and buttons',
            'Mobile-friendly CAPTCHA'
        ],
        functionality: [
            'Touch screen compatibility',
            'No hover-dependent functions',
            'Mobile-optimised PDFs',
            'Properly sized sharing buttons',
            'Click-to-call phone numbers',
            'Map-linked addresses'
        ]
    };

    const toggleChecklistItem = (section, index) => {
        setChecklist(prev => ({...prev,
            [section]: prev[section].map((item, i) => i === index?!item: item)
        }));
    };

    const getProgress = (section) => {
        const completed = checklist[section].filter(Boolean).length;
        const total = checklist[section].length;
        return Math.round((completed / total) * 100);
    };

    const getTotalProgress = () => {
        const allChecks = Object.values(checklist).flat();
        const completed = allChecks.filter(Boolean).length;
        const total = allChecks.length;
        return Math.round((completed / total) * 100);
    };

    return (
        <div className="max-w-4xl mx-auto p-6 bg-white">
            {/* Hero Section */}
            <div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white rounded-lg p-8 mb-8">
                <h1 className="text-3xl font-bold mb-4">The Complete Guide to Mobile Website Optimisation</h1>
                <p className="text-xl mb-6">Transform your website into a mobile-friendly powerhouse</p>
                <div className="flex items-center justify-between">
                    <button className="flex items-center bg-white text-blue-800 px-6 py-3 rounded-full font-semibold hover:bg-blue-50 transition-colors">
                        <Download className="w-5 h-5 mr-2" />
                        Download PDF Guide
                    </button>
                    <div className="text-white">
                        <span className="text-2xl font-bold">{getTotalProgress()}%</span>
                        <span className="ml-2">Complete</span>
                    </div>
                </div>
            </div>

            {/* Main Content Sections with Checklists */}
            <div className="space-y-8">
                {[
                    { key: 'performance', icon: Zap, title: 'Performance', color: 'text-yellow-500', bgColor: 'bg-yellow-50' },
                    { key: 'navigation', icon: Navigation, title: 'Navigation', color: 'text-blue-500', bgColor: 'bg-blue-50' },
                    { key: 'content', icon: Layout, title: 'Content and Layout', color: 'text-green-500', bgColor: 'bg-green-50' },
                    { key: 'forms', icon: FileInput, title: 'Forms and Input', color: 'text-purple-500', bgColor: 'bg-purple-50' },
                    { key: 'functionality', icon: Settings, title: 'Functionality', color: 'text-red-500', bgColor: 'bg-red-50' },
                ].map((section) => (
                    <div key={section.key} className="border rounded-lg p-6 hover:shadow-lg transition-shadow">
                        <div className="flex items-center justify-between mb-4">
                            <div className="flex items-center">
                                <section.icon className={`w-6 h-6 ${section.color} mr-3`} />
                                <h2 className="text-xl font-bold">{section.title}</h2>
                            </div>
                            <div className="flex items-center">
                                <div className="w-32 bg-gray-200 rounded-full h-2 mr-3">
                                    <div
                                        className={`h-2 rounded-full ${section.bgColor}`}
                                        style={{ width: `${getProgress(section.key)}%` }}
                                    ></div>
                                </div>
                                <span className="text-sm font-medium">{getProgress(section.key)}%</span>
                            </div>
                        </div>
                        <div className="pl-9 space-y-3">
                            {checklistItems[section.key].map((item, index) => (
                                <div
                                    key={index}
                                    className="flex items-center space-x-3 cursor-pointer"
                                    onClick={() => toggleChecklistItem(section.key, index)}
                                >
                                    <div className={`w-5 h-5 rounded border flex items-center justify-center
                                        ${checklist[section.key][index]? `${section.bgColor} border-none`: 'border-gray-300'}`}
                                    >
                                        {checklist[section.key][index] && <Check className={`w-4 h-4 ${section.color}`} />}
                                    </div>
                                    <span className={checklist[section.key][index]? 'line-through text-gray-500': ''}>
                                        {item}
                                    </span>
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
            </div>

            {/* CTA Footer */}
            <div className="bg-gray-50 rounded-lg p-6 text-center mt-8">
                <h3 className="font-bold mb-4">
                    You've completed {getTotalProgress()}% of the mobile optimisation checklist!
                </h3>
                <button className="bg-blue-600 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-700 transition-colors">
                    {getTotalProgress() === 100? 'Download Completion Certificate': 'Continue Optimising'}
                </button>
            </div>
        </div>
    );
}