import Image from "next/image";
import Link from "next/link";
import { ContactSection } from "../../components/contact-section";
import { DemoCta } from "../../components/demo-cta";
import { FaqSection } from "../../components/faq-section";
import { PageSchema } from "../../components/page-schema";
import { SiteFooter } from "../../components/site-footer";
import { SiteHeader } from "../../components/site-header";
import { defaultFaqs } from "../../data/faq";
import { siteInfo } from "../../data/site";

export const metadata = {
  title: "About LedgerOne",
  description:
    "Learn how LedgerOne builds audit-ready ledgers for US finance, tax, and operations teams.",
  keywords: siteInfo.keywords
};

const values = [
  {
    title: "Data ownership",
    detail: "Your data stays portable, exportable, and under your control."
  },
  {
    title: "Transparent automation",
    detail: "Rules are visible, explainable, and ready for compliance review."
  },
  {
    title: "Operational clarity",
    detail: "Keep finance, tax, and operations aligned with one ledger truth."
  }
];

const milestones = [
  {
    title: "Ledger-first architecture",
    detail: "Every transaction starts immutable, then layers preserve every change."
  },
  {
    title: "Built for teams",
    detail: "We design workflows for the handoffs between finance, tax, and ops."
  },
  {
    title: "US-ready exports",
    detail: "Exports are formatted to support US tax and accounting workflows."
  }
];

export default function AboutPage() {
  const schema = [
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      name: "About LedgerOne",
      description:
        "Learn how LedgerOne builds audit-ready ledgers for US finance, tax, and operations teams.",
      url: `${siteInfo.url}/about`
    },
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: defaultFaqs.map((item) => ({
        "@type": "Question",
        name: item.question,
        acceptedAnswer: { "@type": "Answer", text: item.answer }
      }))
    }
  ];

  return (
    <div className="min-h-screen bg-background font-sans text-foreground flex flex-col">
      <SiteHeader />

      <main className="flex-1 pt-32 pb-24 relative overflow-hidden">
        <div className="absolute inset-0 mesh-gradient -z-10 opacity-40" />

        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <section className="grid gap-12 lg:grid-cols-[1fr_1fr] items-center">
            <div className="space-y-8 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">
                Our Story
              </div>
              <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl leading-tight">
                LedgerOne keeps every transaction ready for audits, review, and action.
              </h1>
              <div className="space-y-4 text-lg text-muted-foreground">
                <p>
                  We built LedgerOne for teams that manage high volumes of transactions but
                  still need each decision documented. Our ledger-first workflow keeps the
                  raw truth intact while allowing intelligent categorization and rule-driven
                  automation.
                </p>
                <p>
                  The result is a single source of truth that helps US finance and tax teams
                  collaborate without losing evidence or context.
                </p>
              </div>
              <div className="flex flex-wrap gap-4">
                <Link
                  href="/pricing"
                  className="px-6 py-3 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors shadow-glow-teal"
                >
                  View pricing
                </Link>
                <Link
                  href="/faq"
                  className="px-6 py-3 rounded-lg bg-background border border-border text-foreground font-medium hover:bg-secondary transition-colors"
                >
                  Explore FAQs
                </Link>
              </div>
            </div>
            <div className="relative animate-fade-in">
              <div className="absolute -right-10 top-8 hidden h-64 w-64 rounded-full bg-accent/20 blur-3xl lg:block" />
              <div className="relative rounded-2xl overflow-hidden border border-border shadow-xl glass-panel">
                <Image
                  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=1600&auto=format&fit=crop"
                  alt="Analyst reviewing charts on a laptop"
                  width={1200}
                  height={900}
                  className="h-full w-full object-cover opacity-90"
                />
                <div className="absolute bottom-0 left-0 right-0 bg-background/90 backdrop-blur-sm p-6 border-t border-border">
                  <p className="text-xs font-bold uppercase tracking-wider text-primary">
                    Built for US operators
                  </p>
                  <p className="mt-1 text-sm text-muted-foreground">
                    LedgerOne is built around US accounting workflows, audit readiness, and
                    tax reporting cycles.
                  </p>
                </div>
              </div>
            </div>
          </section>

          <section className="mt-24 grid gap-8 md:grid-cols-3">
            {values.map((value) => (
              <div
                key={value.title}
                className="glass-panel rounded-2xl p-8 shadow-sm hover:shadow-md transition-all"
              >
                <div className="h-10 w-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary mb-4">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                </div>
                <h3 className="text-lg font-bold text-foreground">{value.title}</h3>
                <p className="mt-2 text-muted-foreground">{value.detail}</p>
              </div>
            ))}
          </section>

          <section className="mt-24 text-center">
            <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-6">
              Leadership
            </div>
            <h2 className="text-3xl font-bold text-foreground mb-12">Built by finance experts.</h2>
            <div className="max-w-sm mx-auto glass-panel rounded-2xl p-8 shadow-sm hover:shadow-md transition-all">
              <div className="h-24 w-24 rounded-full bg-primary/10 mx-auto mb-6 flex items-center justify-center text-3xl font-bold text-primary">
                MM
              </div>
              <h3 className="text-xl font-bold text-foreground">Manoj Mohan</h3>
              <p className="text-sm font-medium text-primary mt-1">Founder & CEO</p>
              <p className="mt-4 text-muted-foreground text-sm leading-relaxed">
                Leading the vision to bring audit-ready financial controls to modern businesses.
              </p>
            </div>
          </section>

          <section className="mt-24 rounded-3xl bg-secondary/30 border border-border p-8 sm:p-12">
            <div className="grid gap-12 lg:grid-cols-[0.9fr_1.1fr]">
              <div className="space-y-6">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-background border border-border text-xs font-medium text-muted-foreground">
                  What we built
                </div>
                <h2 className="text-3xl font-bold text-foreground">A ledger that holds the full story.</h2>
                <p className="text-muted-foreground text-lg">
                  Traditional tools collapse data into summaries. LedgerOne keeps each raw
                  entry intact and layers in decisions, reviews, and approvals.
                </p>
              </div>
              <div className="grid gap-6 sm:grid-cols-3">
                {milestones.map((item, index) => (
                  <div
                    key={item.title}
                    className="rounded-xl bg-background border border-border p-6 shadow-sm"
                  >
                    <p className="text-xs font-bold text-primary uppercase tracking-wider">
                      Focus {index + 1}
                    </p>
                    <p className="mt-3 text-sm font-bold text-foreground">{item.title}</p>
                    <p className="mt-2 text-xs text-muted-foreground">{item.detail}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>
        </div>
      </main>

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