const LandingPage = () => {
    const { Button } = primereact.button;
    const { Card } = primereact.card;
    return (
        <div className="landing-page-content">
            {/* Hero Section */}
            <div className="hero-section text-center p-6 surface-900 text-white">
                <div className="p-4">
                    <h1 className="mb-3 text-6xl" style={{ color: '#4DD0E1' }}>GenFleet IoT Command Center</h1>
                    <p className="mb-4 text-2xl">Unified telemetry for gensets, fleets, and heavy equipment.</p>
                    <p className="mb-5 text-lg max-w-30rem mx-auto text-color-secondary">Monitor uptime, optimize fuel consumption, and enable predictive maintenance to keep your operations running at peak efficiency.</p>
                    <Button label="Go to Dashboard / Login" size="large" className="p-button-info" />
                </div>
            </div>

            {/* Personas Section */}
            <div className="personas-section py-8 px-4 surface-800 text-white-alpha-80 mb-5">
                <h2 className="text-center text-4xl mb-6" style={{ color: '#4DD0E1' }}>Who Benefits?</h2>
                <div className="grid justify-content-center">
                    <div className="col-12 md:col-6 lg:col-4">
                        <Card title="Fleet Manager" subTitle="Optimize routes & reduce costs." className="text-center h-full surface-900 border-round-md">
                            <p className="text-color-secondary">Track vehicle locations, monitor driver behavior, and schedule preventative maintenance to ensure your fleet runs smoothly and efficiently.</p>
                        </Card>
                    </div>
                    <div className="col-12 md:col-6 lg:col-4">
                        <Card title="Equipment Operator" subTitle="Enhance productivity & safety." className="text-center h-full surface-900 border-round-md">
                            <p className="text-color-secondary">Receive real-time alerts on equipment status, perform pre-operational checks, and access maintenance history on the go.</p>
                        </Card>
                    </div>
                    <div className="col-12 md:col-6 lg:col-4">
                        <Card title="Maintenance Lead" subTitle="Streamline repairs & minimize downtime." className="text-center h-full surface-900 border-round-md">
                            <p className="text-color-secondary">Diagnose issues remotely, manage work orders, and track parts inventory to keep your assets in top condition.</p>
                        </Card>
                    </div>
                </div>
            </div>

            {/* Features Section */}
            <div className="features-section py-8 px-4 surface-900 text-white-alpha-80">
                <h2 className="text-center text-4xl mb-6" style={{ color: '#4DD0E1' }}>Key Features</h2>
                <div className="grid justify-content-center">
                    <div className="col-12 md:col-6 lg:col-4">
                        <Card title="Real-time Telemetry" className="text-center h-full surface-800 border-round-md">
                            <p className="text-color-secondary">Live data streams from all your connected assets, including location, fuel levels, engine diagnostics, and more.</p>
                        </Card>
                    </div>
                    <div className="col-12 md:col-6 lg:col-4">
                        <Card title="Predictive Analytics" className="text-center h-full surface-800 border-round-md">
                            <p className="text-color-secondary">Leverage AI-driven insights to predict equipment failures and optimize maintenance schedules before issues arise.</p>
                        </Card>
                    </div>
                    <div className="col-12 md:col-6 lg:col-4">
                        <Card title="Automated Workflows" className="text-center h-full surface-800 border-round-md">
                            <p className="text-color-secondary">Set up automated alerts, notifications, and task assignments based on predefined rules and thresholds.</p>
                        </Card>
                    </div>
                    <div className="col-12 md:col-6 lg:col-4">
                        <Card title="Geofencing & Security" className="text-center h-full surface-800 border-round-md">
                            <p className="text-color-secondary">Define virtual boundaries and receive instant alerts for unauthorized movement or entry/exit from designated areas.</p>
                        </Card>
                    </div>
                    <div className="col-12 md:col-6 lg:col-4">
                        <Card title="Reporting & Compliance" className="text-center h-full surface-800 border-round-md">
                            <p className="text-color-secondary">Generate comprehensive reports for operational efficiency, regulatory compliance, and performance analysis.</p>
                        </Card>
                    </div>
                    <div className="col-12 md:col-6 lg:col-4">
                        <Card title="Mobile Accessibility" className="text-center h-full surface-800 border-round-md">
                            <p className="text-color-secondary">Access all features and data on the go with a fully responsive design optimized for mobile devices.</p>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    );
};
window.LandingPage = LandingPage;