export default function AIFinancialAnalysisWebsite() {
  const features = [
    {
      title: "Plain-English Financial Analysis",
      desc: "Turn raw financials into clear explanations of trends, risks, and opportunities in seconds.",
    },
    {
      title: "Upload Your Statements",
      desc: "Designed for P&L, balance sheet, cash flow, CSV, and spreadsheet-based reporting workflows.",
    },
    {
      title: "Executive-Ready Reporting",
      desc: "Generate owner, lender, and board-style summaries with key metrics and action items.",
    },
    {
      title: "Early Warning Signals",
      desc: "Flag margin compression, cash pressure, AR issues, expense creep, and unusual variance patterns.",
    },
  ];

  const metrics = [
    { label: "Revenue Growth", value: "+8.4%" },
    { label: "Gross Margin", value: "41.2%" },
    { label: "Cash Runway", value: "6.3 mo" },
    { label: "AR Days", value: "47" },
  ];

  const steps = [
    "Upload monthly financials",
    "AI extracts trends and anomalies",
    "Review plain-English insights",
    "Download a polished management report",
  ];

  const plans = [
    {
      name: "Starter",
      price: "$299",
      note: "/month",
      items: ["Monthly upload", "AI summary report", "Core KPI dashboard", "Email support"],
    },
    {
      name: "Growth",
      price: "$749",
      note: "/month",
      items: ["Everything in Starter", "Cash flow insights", "Variance commentary", "Board-ready report export"],
      featured: true,
    },
    {
      name: "Fractional CFO+",
      price: "$1,500",
      note: "/month",
      items: ["Everything in Growth", "Custom KPI setup", "Scenario analysis", "Priority support"],
    },
  ];

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.25),transparent_35%),radial-gradient(circle_at_80%_20%,rgba(16,185,129,0.18),transparent_25%)]" />
      <div className="relative">
        <header className="border-b border-white/10 backdrop-blur-sm">
          <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8">
            <div>
              <div className="text-xl font-semibold tracking-tight">LedgerIQ</div>
              <div className="text-xs text-slate-400">AI Financial Analysis for Small Businesses</div>
            </div>
            <nav className="hidden gap-8 text-sm text-slate-300 md:flex">
              <a href="#features" className="hover:text-white">Features</a>
              <a href="#how-it-works" className="hover:text-white">How It Works</a>
              <a href="#pricing" className="hover:text-white">Pricing</a>
              <a href="#contact" className="hover:text-white">Contact</a>
            </nav>
            <button className="rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-medium shadow-lg shadow-blue-500/10 transition hover:bg-white/15">
              Book a Demo
            </button>
          </div>
        </header>

        <main>
          <section className="mx-auto grid max-w-7xl gap-12 px-6 py-20 lg:grid-cols-2 lg:px-8 lg:py-28">
            <div className="flex flex-col justify-center">
              <div className="mb-4 inline-flex w-fit items-center rounded-full border border-emerald-400/25 bg-emerald-400/10 px-3 py-1 text-xs font-medium text-emerald-300">
                Smarter CFO-style insight, without the full-time overhead
              </div>
              <h1 className="max-w-2xl text-4xl font-semibold tracking-tight text-white sm:text-5xl lg:text-6xl">
                Turn financial statements into decisions.
              </h1>
              <p className="mt-6 max-w-xl text-lg leading-8 text-slate-300">
                LedgerIQ analyzes your P&amp;L, balance sheet, and cash flow to surface trends, risks, and practical next steps in plain English.
              </p>

              <div className="mt-8 flex flex-col gap-4 sm:flex-row">
                <button className="rounded-2xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 shadow-2xl shadow-blue-500/20 transition hover:-translate-y-0.5">
                  Start Free Demo
                </button>
                <button className="rounded-2xl border border-white/15 bg-white/5 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white/10">
                  View Sample Report
                </button>
              </div>

              <div className="mt-10 grid max-w-xl grid-cols-2 gap-4 sm:grid-cols-4">
                {metrics.map((metric) => (
                  <div key={metric.label} className="rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm">
                    <div className="text-xl font-semibold">{metric.value}</div>
                    <div className="mt-1 text-xs text-slate-400">{metric.label}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="relative">
              <div className="rounded-[28px] border border-white/10 bg-white/5 p-5 shadow-2xl shadow-blue-500/10 backdrop-blur-md">
                <div className="rounded-3xl border border-white/10 bg-slate-900/90 p-5">
                  <div className="mb-5 flex items-center justify-between">
                    <div>
                      <div className="text-sm font-medium text-slate-200">Financial Health Overview</div>
                      <div className="text-xs text-slate-400">March Reporting Package</div>
                    </div>
                    <div className="rounded-full bg-emerald-400/15 px-3 py-1 text-xs font-medium text-emerald-300">
                      Stable Outlook
                    </div>
                  </div>

                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="rounded-2xl border border-white/10 bg-slate-800/60 p-4">
                      <div className="text-sm font-medium">AI Summary</div>
                      <p className="mt-3 text-sm leading-6 text-slate-300">
                        Revenue increased 8.4% versus prior month, driven by stronger service volume. Gross margin declined 1.6 points due to rising material cost. AR days increased to 47, which may indicate slower collections.
                      </p>
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-slate-800/60 p-4">
                      <div className="text-sm font-medium">Priority Flags</div>
                      <ul className="mt-3 space-y-3 text-sm text-slate-300">
                        <li>• Cash conversion cycle is lengthening</li>
                        <li>• Payroll expense up faster than revenue</li>
                        <li>• Gross margin softness needs review</li>
                      </ul>
                    </div>
                  </div>

                  <div className="mt-4 rounded-2xl border border-white/10 bg-slate-800/60 p-4">
                    <div className="mb-3 text-sm font-medium">KPI Snapshot</div>
                    <div className="grid gap-3 sm:grid-cols-3">
                      <div className="rounded-xl bg-white/5 p-3">
                        <div className="text-xs text-slate-400">EBITDA Margin</div>
                        <div className="mt-1 text-lg font-semibold">18.7%</div>
                      </div>
                      <div className="rounded-xl bg-white/5 p-3">
                        <div className="text-xs text-slate-400">Operating Cash</div>
                        <div className="mt-1 text-lg font-semibold">$182k</div>
                      </div>
                      <div className="rounded-xl bg-white/5 p-3">
                        <div className="text-xs text-slate-400">Expense Variance</div>
                        <div className="mt-1 text-lg font-semibold">+5.2%</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section id="features" className="mx-auto max-w-7xl px-6 py-8 lg:px-8 lg:py-16">
            <div className="max-w-2xl">
              <h2 className="text-3xl font-semibold tracking-tight">Built for owners, operators, and finance teams</h2>
              <p className="mt-3 text-slate-300">
                A clean, trustworthy interface that explains the numbers instead of just displaying them.
              </p>
            </div>
            <div className="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
              {features.map((feature) => (
                <div key={feature.title} className="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-lg shadow-black/20">
                  <div className="text-lg font-semibold">{feature.title}</div>
                  <p className="mt-3 text-sm leading-6 text-slate-300">{feature.desc}</p>
                </div>
              ))}
            </div>
          </section>

          <section id="how-it-works" className="mx-auto max-w-7xl px-6 py-8 lg:px-8 lg:py-16">
            <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
              <div className="rounded-[32px] border border-white/10 bg-white/5 p-8">
                <h2 className="text-3xl font-semibold tracking-tight">How it works</h2>
                <div className="mt-8 space-y-4">
                  {steps.map((step, index) => (
                    <div key={step} className="flex items-start gap-4 rounded-2xl border border-white/10 bg-slate-900/50 p-4">
                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white text-sm font-semibold text-slate-900">
                        {index + 1}
                      </div>
                      <div className="pt-2 text-slate-200">{step}</div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-[32px] border border-white/10 bg-gradient-to-br from-blue-500/10 to-emerald-400/10 p-8">
                <h3 className="text-2xl font-semibold">What makes it different</h3>
                <p className="mt-4 leading-7 text-slate-300">
                  Most dashboards stop at charts. LedgerIQ interprets the business story behind the numbers — what changed, why it matters, and where to look next.
                </p>
                <div className="mt-8 rounded-2xl border border-white/10 bg-slate-950/50 p-5">
                  <div className="text-sm font-medium text-slate-200">Sample Insight</div>
                  <p className="mt-3 text-sm leading-6 text-slate-300">
                    SG&amp;A increased 11.2% while revenue rose 8.4%, creating mild operating leverage pressure. The largest change came from overtime and software subscriptions. Consider reviewing staffing mix and license utilization before next month close.
                  </p>
                </div>
              </div>
            </div>
          </section>

          <section id="pricing" className="mx-auto max-w-7xl px-6 py-8 lg:px-8 lg:py-16">
            <div className="text-center">
              <h2 className="text-3xl font-semibold tracking-tight">Simple pricing</h2>
              <p className="mt-3 text-slate-300">Start with reporting insights and grow into a more strategic finance workflow.</p>
            </div>
            <div className="mt-10 grid gap-6 lg:grid-cols-3">
              {plans.map((plan) => (
                <div
                  key={plan.name}
                  className={`rounded-[30px] border p-8 ${
                    plan.featured
                      ? "border-emerald-400/40 bg-emerald-400/10 shadow-2xl shadow-emerald-500/10"
                      : "border-white/10 bg-white/5"
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <div className="text-xl font-semibold">{plan.name}</div>
                    {plan.featured && (
                      <div className="rounded-full bg-emerald-300 px-3 py-1 text-xs font-semibold text-slate-900">
                        Most Popular
                      </div>
                    )}
                  </div>
                  <div className="mt-6 flex items-end gap-1">
                    <div className="text-4xl font-semibold">{plan.price}</div>
                    <div className="pb-1 text-slate-400">{plan.note}</div>
                  </div>
                  <ul className="mt-6 space-y-3 text-sm text-slate-300">
                    {plan.items.map((item) => (
                      <li key={item}>• {item}</li>
                    ))}
                  </ul>
                  <button className="mt-8 w-full rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-slate-900 transition hover:-translate-y-0.5">
                    Choose {plan.name}
                  </button>
                </div>
              ))}
            </div>
          </section>

          <section id="contact" className="mx-auto max-w-7xl px-6 py-8 lg:px-8 lg:py-16">
            <div className="grid gap-8 lg:grid-cols-[1fr_1fr]">
              <div className="rounded-[32px] border border-white/10 bg-white/5 p-8">
                <h2 className="text-3xl font-semibold tracking-tight">Ready to launch your AI finance offering?</h2>
                <p className="mt-4 max-w-xl leading-7 text-slate-300">
                  Start with a polished website and a sample reporting workflow, then evolve into a secure client-facing platform.
                </p>
                <div className="mt-8 grid gap-4 sm:grid-cols-2">
                  <div className="rounded-2xl border border-white/10 bg-slate-900/50 p-4">
                    <div className="text-sm font-medium">Best first step</div>
                    <div className="mt-2 text-sm text-slate-300">Launch a lead-generating site with a sample dashboard and demo request form.</div>
                  </div>
                  <div className="rounded-2xl border border-white/10 bg-slate-900/50 p-4">
                    <div className="text-sm font-medium">Next upgrade</div>
                    <div className="mt-2 text-sm text-slate-300">Add secure upload, report generation, and account-based access.</div>
                  </div>
                </div>
              </div>

              <div className="rounded-[32px] border border-white/10 bg-slate-900/70 p-8">
                <h3 className="text-2xl font-semibold">Request a demo</h3>
                <div className="mt-6 space-y-4">
                  <input
                    className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm outline-none placeholder:text-slate-500"
                    placeholder="Your name"
                  />
                  <input
                    className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm outline-none placeholder:text-slate-500"
                    placeholder="Business email"
                  />
                  <input
                    className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm outline-none placeholder:text-slate-500"
                    placeholder="Company name"
                  />
                  <textarea
                    rows={5}
                    className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm outline-none placeholder:text-slate-500"
                    placeholder="What kind of reporting or analysis do you want help with?"
                  />
                  <button className="w-full rounded-2xl bg-emerald-300 px-5 py-3 text-sm font-semibold text-slate-900 transition hover:-translate-y-0.5">
                    Submit Request
                  </button>
                </div>
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
  );
}