import Image from "next/image";
import Link from "next/link";
import { Background } from "../../../components/background";
import { SiteFooter } from "../../../components/site-footer";
import { SiteHeader } from "../../../components/site-header";
import { PageSchema } from "../../../components/page-schema";
import { siteInfo } from "../../../data/site";

export const metadata = {
    title: "Custom Reporting - LedgerOne",
    description: "Build custom financial reports and export audit-ready data for your accountant.",
    keywords: siteInfo.keywords
};

export default function ReportsPage() {
    const schema = [
        {
            "@context": "https://schema.org",
            "@type": "WebPage",
            name: "Custom Reporting",
            description: "Build custom financial reports.",
            url: `${siteInfo.url}/features/reports`
        }
    ];

    return (
        <div className="page-soft-bg min-h-screen font-sans text-foreground flex flex-col relative overflow-hidden">
            <Background />
            <SiteHeader />
            <main className="relative z-10 flex-1 pt-24 pb-16">
                <div className="max-w-7xl mx-auto px-6 lg:px-8">
                    <div className="grid lg:grid-cols-2 gap-12 items-center">
                        <div className="order-2 lg:order-1 relative animate-fade-in delay-200">
                            <div className="absolute -inset-4 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-3xl blur-xl opacity-50"></div>
                            <div className="relative rounded-2xl border border-border bg-background/50 backdrop-blur-xl shadow-2xl overflow-hidden p-2">
                                <Image
                                    src="/images/feature-reports.png"
                                    alt="Report builder interface"
                                    width={800}
                                    height={600}
                                    className="w-full h-auto rounded-xl"
                                />
                            </div>
                        </div>
                        <div className="order-1 lg:order-2 animate-slide-up">
                            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/50 border border-border text-xs font-medium text-muted-foreground mb-6">
                                Reporting
                            </div>
                            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl mb-6 leading-tight">
                                Reports that make your {" "}
                                <span className="heading-hero-accent">accountant smile.</span>
                            </h1>
                            <p className="text-lg text-muted-foreground mb-8">
                                Don't scramble at tax time. LedgerOne keeps your data organized and audit-ready year-round. Build custom reports and export them in seconds.
                            </p>
                            <ul className="space-y-4 mb-10">
                                {[
                                    "Drag-and-drop report builder",
                                    "Filter by date, category, tag, or merchant",
                                    "One-click CSV and PDF exports",
                                    "Share read-only access with your accountant"
                                ].map((item) => (
                                    <li key={item} className="flex items-center gap-3">
                                        <div className="h-6 w-6 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                                        </div>
                                        <span className="text-foreground font-medium">{item}</span>
                                    </li>
                                ))}
                            </ul>
                            <Link href="/register" className="btn-primary">
                                Start building reports
                            </Link>
                        </div>
                    </div>
                </div>
            </main>

            <div className="relative z-10">
                <SiteFooter />
            </div>
            <PageSchema schema={schema} />
        </div>
    );
}