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";
import { LandingHero } from "@/components/landing-hero";
import { LandingFeatures } from "../components/landing-features";
import { LandingFuture } from "../components/landing-future";
import { LandingCta } from "../components/landing-cta";

export const metadata = {
  title: "LedgerOne - The Financial Control Platform for Modern Business",
  description: "Connect all your accounts, automate your bookkeeping, and get audit-ready financials in real-time.",
  keywords: siteInfo.keywords
};

export default function LandingPage() {
  const schema = [
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      name: "LedgerOne",
      url: siteInfo.url,
      potentialAction: {
        "@type": "SearchAction",
        target: `${siteInfo.url}/search?q={search_term_string}`,
        "query-input": "required name=search_term_string"
      }
    },
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      name: "LedgerOne",
      url: siteInfo.url,
      logo: `${siteInfo.url}/logo.png`,
      sameAs: [
        "https://twitter.com/ledgerone",
        "https://linkedin.com/company/ledgerone"
      ]
    }
  ];

  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">
        <LandingHero />

        {/* TRUST SECTION */}
        <section className="bg-secondary/20 py-8">
          <div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
              Trusted by teams who treat finance as a product
            </p>
            <div className="mb-6 flex flex-wrap items-center justify-center gap-8 text-sm text-muted-foreground">
              <div className="flex items-baseline gap-2">
                <span className="text-2xl font-semibold text-foreground">50,000+</span>
                <span>users</span>
              </div>
              <div className="h-4 w-px bg-border" />
              <div className="flex items-baseline gap-2">
                <span className="text-2xl font-semibold text-foreground">$120M+</span>
                <span>tracked monthly</span>
              </div>
              <div className="h-4 w-px bg-border" />
              <div className="flex items-baseline gap-2">
                <span className="text-2xl font-semibold text-foreground">4.9</span>
                <span>avg satisfaction</span>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-6 md:grid-cols-5 md:gap-10 opacity-70 grayscale transition hover:opacity-100 hover:grayscale-0">
              <div className="flex items-center justify-center text-sm font-semibold">Aurora Bank</div>
              <div className="flex items-center justify-center text-sm font-semibold">Northwind</div>
              <div className="flex items-center justify-center text-sm font-semibold">Summit Labs</div>
              <div className="flex items-center justify-center text-sm font-semibold">Horizon Co.</div>
              <div className="flex items-center justify-center text-sm font-semibold">Canvas Ventures</div>
            </div>
          </div>
        </section>

        <LandingFeatures />
        <LandingFuture />
        <LandingCta />

      </main>

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