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

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="min-h-screen bg-background font-sans text-foreground flex flex-col">
      <SiteHeader />

      <main className="flex-1">
        {/* Hero Section - Monarch Style Clean Split */}
        <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
          <div className="absolute inset-0 mesh-gradient -z-10 opacity-30" />

          <div className="max-w-7xl mx-auto px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-16 items-center">

              {/* Left Column: Copy */}
              <div className="max-w-2xl 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 backdrop-blur-sm mb-8">
                  <span className="flex h-2 w-2 rounded-full bg-primary"></span>
                  Now available for US & Canadian businesses
                </div>
                <h1 className="text-5xl font-bold tracking-tight text-foreground sm:text-7xl mb-6 leading-tight">
                  Master your money <br />
                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">
                    with total clarity.
                  </span>
                </h1>
                <p className="mt-6 text-lg text-muted-foreground mb-10">
                  LedgerOne connects all your financial accounts in one place. Automate bookkeeping, track cash flow, and stay audit-ready without the spreadsheet chaos.
                </p>
                <div className="flex flex-wrap items-center gap-4">
                  <Link
                    href="/register"
                    className="rounded-full bg-primary px-8 py-4 text-base font-bold text-primary-foreground shadow-lg shadow-primary/25 hover:bg-primary/90 hover:-translate-y-1 transition-all"
                  >
                    Start your free trial
                  </Link>
                  <Link
                    href="/demo"
                    className="rounded-full bg-background border border-border px-8 py-4 text-base font-semibold text-foreground hover:bg-secondary transition-colors"
                  >
                    See how it works
                  </Link>
                </div>
              </div>

              {/* Right Column: Composed Media Stack */}
              <div className="relative h-[600px] w-full flex items-center justify-center animate-fade-in delay-200">
                {/* 1. Base Layer: Video (Desktop View) */}
                <div className="absolute top-0 right-0 w-[90%] h-[80%] rounded-2xl overflow-hidden border border-border shadow-2xl bg-background/50 backdrop-blur-xl z-10">
                  <video
                    poster="/images/hero_celebration_video_poster_1769386269277.png"
                    className="w-full h-full object-cover opacity-80"
                    autoPlay
                    muted
                    loop
                    playsInline
                  >
                    <source src="/videos/hero.mp4" type="video/mp4" />
                  </video>
                  {/* Overlay Gradient */}
                  <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent"></div>
                </div>

                {/* 2. Middle Layer: Interactive Simulator (Floating Card) */}
                <div className="absolute bottom-10 right-10 w-[320px] z-20 hidden xl:block">
                  <div className="bg-background/80 backdrop-blur-md border border-border rounded-2xl p-1 shadow-glass transform hover:scale-105 transition-transform duration-500">
                    <GrowthSimulator />
                  </div>
                </div>


              </div>

            </div>
          </div>
        </section>

        {/* Social Proof */}
        <section className="py-12 border-y border-border bg-secondary/20">
          <div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
            <p className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-8">
              Trusted by forward-thinking finance teams
            </p>
            <div className="grid grid-cols-2 gap-8 md:grid-cols-5 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
              {/* Placeholders for logos */}
              <div className="flex items-center justify-center font-bold text-xl">Acme Corp</div>
              <div className="flex items-center justify-center font-bold text-xl">GlobalTech</div>
              <div className="flex items-center justify-center font-bold text-xl">Nebula</div>
              <div className="flex items-center justify-center font-bold text-xl">Vertex</div>
              <div className="flex items-center justify-center font-bold text-xl">Horizon</div>
            </div>
          </div>
        </section>

        {/* Feature Grid */}
        <section className="py-24 lg:py-32">
          <div className="max-w-7xl mx-auto px-6 lg:px-8">
            <div className="text-center max-w-3xl mx-auto mb-20">
              <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                Everything you need to manage your wealth.
              </h2>
              <p className="mt-4 text-lg text-muted-foreground">
                Stop logging into ten different sites. LedgerOne brings your entire financial life into a single, secure, and beautiful view.
              </p>
            </div>

            <div className="grid gap-12 lg:grid-cols-3">
              {/* Feature 1: Connect */}
              <div className="glass-panel rounded-3xl p-8 hover:border-primary/50 transition-colors group">
                <div className="h-12 w-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                </div>
                <h3 className="text-xl font-bold text-foreground mb-3">Sync Everything</h3>
                <p className="text-muted-foreground mb-6">
                  Connect over 11,000 financial institutions. Banks, credit cards, loans, and investments update automatically.
                </p>
                <div className="rounded-xl overflow-hidden border border-border shadow-sm">
                  <Image
                    src="https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=1470&auto=format&fit=crop"
                    alt="Bank connections"
                    width={400}
                    height={250}
                    className="w-full h-48 object-cover"
                  />
                </div>
              </div>

              {/* Feature 2: Visualize */}
              <div className="glass-panel rounded-3xl p-8 hover:border-primary/50 transition-colors group">
                <div className="h-12 w-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                </div>
                <h3 className="text-xl font-bold text-foreground mb-3">Visualize Cash Flow</h3>
                <p className="text-muted-foreground mb-6">
                  See exactly where your money goes. Track income vs expenses with beautiful, interactive charts.
                </p>
                <div className="rounded-xl overflow-hidden border border-border shadow-sm">
                  <Image
                    src="/images/feature-cashflow.png"
                    alt="Cash flow chart"
                    width={400}
                    height={250}
                    className="w-full h-48 object-cover"
                  />
                </div>
              </div>

              {/* Feature 3: Report */}
              <div className="glass-panel rounded-3xl p-8 hover:border-primary/50 transition-colors group">
                <div className="h-12 w-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                </div>
                <h3 className="text-xl font-bold text-foreground mb-3">Custom Reports</h3>
                <p className="text-muted-foreground mb-6">
                  Build the exact report you need. Filter by category, tag, or merchant and export to CSV for your accountant.
                </p>
                <div className="rounded-xl overflow-hidden border border-border shadow-sm">
                  <Image
                    src="/images/feature-reports.png"
                    alt="Report builder"
                    width={400}
                    height={250}
                    className="w-full h-48 object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-24 relative overflow-hidden">
          <div className="absolute inset-0 bg-primary/5 -z-10" />
          <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
            <h2 className="text-4xl font-bold tracking-tight text-foreground mb-6">
              Ready to take control?
            </h2>
            <p className="text-xl text-muted-foreground mb-10">
              Join thousands of business owners who trust LedgerOne for their financial clarity.
            </p>
            <Link
              href="/register"
              className="inline-block rounded-full bg-primary px-10 py-4 text-lg font-bold text-primary-foreground shadow-xl shadow-primary/30 hover:bg-primary/90 hover:-translate-y-1 transition-all"
            >
              Start your 14-day free trial
            </Link>
            <p className="mt-4 text-sm text-muted-foreground">
              No credit card required. Cancel anytime.
            </p>
          </div>
        </section>

      </main>

      <SiteFooter />
      <PageSchema schema={schema} />
    </div>
  );
}