import { Link } from "react-router-dom";
import { useParallax } from "@/hooks/useScrollAnimation";
import { SEOHead } from "@/components/SEOHead";
import { ContactFormModal } from "@/components/ContactFormModal";
import { ArrowRight, Search, ShieldCheck, BadgeCheck, Briefcase, BarChart3, Shield, Landmark, HelpCircle, Plug, Layers, ClipboardCheck, PlayCircle } from "lucide-react";

import { StatsBar } from "@/components/StatsBar";
import { SocialProof } from "@/components/SocialProof";
import { EvidenceSpecimen } from "@/components/EvidenceSpecimen";
import { RegulatoryStanding } from "@/components/RegulatoryStanding";
import { LeadershipRow } from "@/components/LeadershipRow";
import { SpecimenDownload } from "@/components/SpecimenDownload";
import { HeroConvergenceField } from "@/components/HeroConvergenceField";
import { HeroEvidenceResolve } from "@/components/HeroEvidenceResolve";
import { HeroAmbientMotes } from "@/components/HeroAmbientMotes";

import { trackEvent } from "@/utils/analytics";

const Index = () => {
  const heroParallax = useParallax(0.3);

  const structuredData = {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "Opsen AI - Continuous Operational Oversight",
    "description": "Opsen AI is building the foundations for Continuous Operational Oversight, enabling evidence-backed decisions as operations, data, and AI systems evolve.",
    "url": "https://opsen.ai",
    "isPartOf": {
      "@type": "WebSite",
      "name": "Opsen AI",
      "url": "https://opsen.ai"
    }
  };

  return (
    <>
      <SEOHead
        title="Opsen AI - Continuous Operational Oversight"
        description="Opsen AI is building the foundations for Continuous Operational Oversight, enabling evidence-backed decisions as operations, data, and AI systems evolve."
        canonicalUrl="https://opsen.ai"
        keywords="continuous operational oversight, evidence-backed decisions, operational resilience, guardrails, drift detection, live telemetry, operational visibility"
        structuredData={structuredData}
        author="Opsen AI Ltd"
      />
      
      <div className="min-h-screen bg-background">
        {/* Hero Section — Control Room split layout */}
        <section ref={heroParallax.ref} className="relative flex items-center bg-primary text-primary-foreground overflow-hidden">
          {/* Background: depth-graded navy + dot-grid + drifting motes */}
          <div className="absolute inset-0 z-0">
            <div className="absolute inset-0 bg-[hsl(var(--surface-1))]" />
            {/* centre lift so the field sits inside the scene */}
            <div
              className="absolute inset-0"
              style={{
                background:
                  "radial-gradient(ellipse 80% 70% at 55% 45%, hsl(var(--surface-0) / 0.95), transparent 70%)",
              }}
            />
            {/* outer vignette toward near-black navy */}
            <div
              className="absolute inset-0"
              style={{
                background:
                  "radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, hsl(var(--surface-2) / 0.85) 100%)",
              }}
            />
            <div
              className="absolute inset-0 opacity-[0.04] animate-grid-drift"
              style={{
                backgroundImage:
                  "radial-gradient(hsl(var(--primary-foreground) / 0.6) 1px, transparent 1px)",
                backgroundSize: "32px 32px",
              }}
            />
            {/* Green radial bloom behind headline */}
            <div className="absolute top-1/4 left-1/4 w-[36rem] h-[36rem] bg-accent/12 rounded-full blur-[140px] animate-bloom pointer-events-none" />
            <div
              className="absolute top-1/3 -left-32 w-[40rem] h-[40rem] bg-accent/10 rounded-full blur-3xl"
              style={{ transform: `translateY(${heroParallax.offset}px)` }}
            />
            <HeroAmbientMotes />
          </div>


          <div className="relative z-10 max-w-7xl mx-auto px-4 py-16 w-full">
            <div className="grid items-center gap-12 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,0.85fr)] lg:gap-16">
              <div className="max-w-2xl text-left">
                {/* Eyebrow */}
                <div className="inline-flex items-center gap-2 mb-4 px-3 py-1.5 rounded-full border border-white/15 bg-white/5 backdrop-blur-sm animate-fade-in" style={{ animationDelay: "0s", animationFillMode: "both" }}>
                  <span className="relative flex h-1.5 w-1.5">
                    <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-accent" />
                  </span>
                  <span className="font-mono text-[11px] md:text-xs tracking-[0.24em] uppercase text-white/70">
                    Continuous Operational Oversight
                  </span>
                </div>

                <h1 className="mb-5 font-display animate-fade-in" style={{ animationDelay: "0.08s", animationFillMode: "both" }}>
                  <span className="block text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight text-white/45 leading-[1.05]">More AI.</span>
                  <span className="block text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-white leading-[1.05]">More outcomes to prove.</span>
                </h1>

                <p className="text-lg md:text-xl mb-8 text-white/80 leading-relaxed max-w-xl animate-fade-in" style={{ animationDelay: "0.16s", animationFillMode: "both" }}>
                  Opsen helps regulated teams establish how a critical operation ran, and what the evidence supports.
                </p>

                {/* CTAs */}
                <div className="flex flex-col sm:flex-row gap-3 animate-fade-in" style={{ animationDelay: "0.24s", animationFillMode: "both" }}>
                  <ContactFormModal defaultInquiryType="briefing" source="index-hero">
                    <button
                      onClick={() => trackEvent("hero_cta_click", { cta: "schedule_briefing", location: "index-hero-primary" })}
                      aria-label="Schedule an Executive Briefing with Opsen AI"
                      className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-semibold ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-accent text-primary hover:bg-accent/90 h-14 px-8 py-3"
                    >
                      Schedule an Executive Briefing
                    </button>
                  </ContactFormModal>
                  <Link
                    to="/how-it-works"
                    onClick={() => trackEvent("hero_cta_click", { cta: "see_how_it_works", location: "index-hero-secondary" })}
                    aria-label="See how Opsen works"
                    className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-semibold ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border border-white/25 bg-white/5 text-white hover:bg-white/10 h-14 px-8 py-3"
                  >
                    See how it works <ArrowRight className="w-4 h-4" />
                  </Link>
                </div>

                {/* Product truths — inline hero rail */}
                <div
                  className="mt-9 pt-6 border-t border-white/10 animate-fade-in"
                  style={{ animationDelay: "0.32s", animationFillMode: "both" }}
                >
                  <StatsBar />
                </div>
              </div>

              {/* Evidence Resolve — abstract, not a product screenshot. ?hero=legacy shows the previous field. */}
              <div
                className="hidden lg:flex justify-end text-white animate-fade-in"
                style={{ animationDelay: "0.2s", animationFillMode: "both" }}
              >
                {typeof window !== "undefined" && window.location.search.includes("hero=legacy") ? (
                  <HeroConvergenceField />
                ) : (
                  <HeroEvidenceResolve />
                )}
              </div>
            </div>
          </div>
        </section>

        {/* Proof before argument: the specimen, then standing, then the people */}
        <EvidenceSpecimen />
        <RegulatoryStanding />
        <LeadershipRow />

        {/* Ecosystem participation — supporting evidence, deliberately quiet */}
        <section className="relative overflow-hidden bg-primary py-10 md:py-12 border-t border-white/10">
          <div className="relative z-10 mx-auto w-full max-w-6xl px-4">
            <SocialProof variant="hero" />
          </div>
        </section>

        {/* The Moment That Matters — dark navy, high contrast */}
        <section className="chapter chapter-surface-0 text-primary-foreground border-y border-white/10">

          <div

            className="absolute inset-0 opacity-[0.04] pointer-events-none"
            style={{
              backgroundImage: "radial-gradient(hsl(var(--primary-foreground) / 0.6) 1px, transparent 1px)",
              backgroundSize: "28px 28px",
            }}
          />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40rem] h-[40rem] bg-accent/10 rounded-full blur-[140px] pointer-events-none" />

          <div className="relative max-w-4xl mx-auto w-full">
            <div className="animate-fade-in mb-10 md:mb-14 max-w-3xl">
              <div className="font-mono text-xs md:text-sm tracking-[0.28em] uppercase text-white/50 mb-4">
                The Moment That Matters
              </div>
              <h2 className="text-3xl md:text-5xl font-bold mb-6 leading-tight text-white">
                When the next decision depends on <span className="text-white/45">what actually happened</span>
              </h2>
              <p className="text-base md:text-lg text-white/75 leading-relaxed max-w-2xl">
                Existing reporting may show an outcome or a process pattern. The harder question is often which records matter, how the operation actually ran and what the evidence is strong enough to support.
              </p>
            </div>

            <ul className="grid md:grid-cols-2 gap-4 md:gap-6">
              {[
                "What happened, and in what order?",
                "Which cases sit behind the pattern?",
                "What operational condition needs to be established?",
                "What does the evidence support, and where are the limits?",
              ].map((q, i) => (
                <li
                  key={q}
                   className="homepage-card group flex items-start gap-3 animate-fade-in"
                  style={{ animationDelay: `${0.15 * (i + 1)}s`, animationFillMode: "both" }}
                >
                  <HelpCircle className="w-5 h-5 text-white/45 flex-shrink-0 mt-0.5" />
                  <span className="text-sm md:text-base text-white/90 leading-relaxed">{q}</span>
                </li>
              ))}
            </ul>
          </div>
        </section>







        {/* Section A — The problem the buyer recognises */}
        <section className="chapter chapter-surface-2 text-primary-foreground border-t border-white/10">
          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            <div
              className="absolute inset-0 opacity-[0.05]"
              style={{
                backgroundImage: "radial-gradient(hsl(var(--primary-foreground) / 0.6) 1px, transparent 1px)",
                backgroundSize: "30px 30px",
              }}
            />
            <div className="absolute top-1/3 left-1/4 w-[36rem] h-[36rem] bg-accent/15 rounded-full blur-[120px]" />
          </div>
          <div className="relative z-10 max-w-5xl mx-auto w-full">
            <div className="mb-10 md:mb-12 max-w-3xl">
              <div className="font-mono text-xs md:text-sm tracking-[0.28em] uppercase text-white/50 mb-3">The problem you already recognise</div>
              <h2 className="text-2xl md:text-4xl font-bold text-white leading-tight">
                The records may already exist. The answer can still be hard to establish.
              </h2>
            </div>

            {/* Editorial list — deliberately not a card grid */}
            <ol className="mb-10 md:mb-12 max-w-3xl divide-y divide-white/10 border-y border-white/10">
              {[
                { title: "Before a material change", body: "AI, automation, a provider change or an operating-model change is about to affect an important operation. Establish how it is running now so there is a measured before-state." },
                { title: "After a change", body: "The design changed. Did execution actually change with it, and which cases sit behind the difference?" },
                { title: "An operational concern", body: "MI or process analysis shows a pattern, but not necessarily the cases and evidence underneath it." },
                { title: "Scrutiny or remediation", body: "Management, Audit, Compliance, a regulator or a major client needs to understand what happened, or whether an issue is still present." },
              ].map(({ title, body }, i) => (
                <li key={title} className="grid grid-cols-[2.5rem_1fr] gap-4 py-5 md:py-6">
                  <span className="font-mono text-sm tracking-[0.18em] text-white/35 pt-1">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <h3 className="text-lg md:text-xl font-semibold text-white leading-snug">{title}</h3>
                    <p className="mt-2 text-sm md:text-base text-white/70 leading-relaxed max-w-2xl">{body}</p>
                  </div>
                </li>
              ))}
            </ol>




            <div className="max-w-3xl">
              <p className="text-base md:text-lg text-white/80 leading-relaxed">
                Opsen is useful when the records exist but answering the wider operational question still requires too much manual reconstruction.
              </p>
              <Link
                to="/why"
                className="inline-flex items-center gap-2 mt-4 text-base text-accent font-semibold hover:gap-3 transition-all duration-300"
              >
                Why Opsen exists <ArrowRight className="w-4 h-4" />
              </Link>
            </div>

          </div>
        </section>

        {/* Section B — How Opsen answers it */}
        <section className="chapter chapter-surface-0 text-primary-foreground border-t border-white/10">

          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            <div
              className="absolute inset-0 opacity-[0.05]"
              style={{
                backgroundImage: "radial-gradient(hsl(var(--primary-foreground) / 0.6) 1px, transparent 1px)",
                backgroundSize: "30px 30px",
              }}
            />
            <div className="absolute top-1/3 -right-32 w-[40rem] h-[40rem] bg-accent/10 rounded-full blur-3xl" />
          </div>
          <div className="relative z-10 max-w-6xl mx-auto w-full">
            <div className="mb-10 md:mb-14 max-w-3xl">
              <div className="font-mono text-xs md:text-sm tracking-[0.28em] uppercase text-white/50 mb-4">How Opsen answers it</div>
              <h2 className="text-2xl md:text-4xl font-bold text-white leading-tight">
                Start with one workflow and the records you already hold.
              </h2>
            </div>

            {/* Four concrete steps */}
             <ol className="grid grid-cols-1 md:grid-cols-4 gap-4 md:gap-6">

              {[
                { icon: Plug, step: "01", title: "Bring together the relevant records", body: "Start with historical extracts from the systems relevant to the workflow. No production integration is required for the initial review." },
                { icon: Layers, step: "02", title: "Show how the workflow ran", body: "Build the population and process view, and surface the main patterns, variants and cases that need explanation." },
                { icon: ClipboardCheck, step: "03", title: "Follow the pattern into the case", body: "Move from the population concern into the cases and source records underneath it." },
                { icon: PlayCircle, step: "04", title: "Test the operational question", body: "Where an agreed condition is machine-decidable and the evidence exists, apply it consistently. Keep evidence gaps and unresolved cases explicit." },
              ].map(({ icon: Icon, step, title, body }) => (
                <li
                  key={step}
                   className="surface-card-dark relative hover:-translate-y-1"
                >
                  <div className="flex items-center gap-3 mb-3 md:mb-4">
                    <div className="w-9 h-9 md:w-10 md:h-10 rounded-xl bg-accent/15 border border-accent/30 flex items-center justify-center">
                      <Icon className="w-4 h-4 md:w-5 md:h-5 text-accent" />
                    </div>
                    <span className="font-mono text-xs md:text-sm tracking-[0.22em] uppercase text-white/50">{step}</span>
                  </div>
                  <h3 className="font-bold text-white mb-2 leading-snug text-sm md:text-base">{title}</h3>
                  <p className="text-xs md:text-sm text-white/75 leading-relaxed">{body}</p>
                </li>

              ))}
            </ol>

          </div>
        </section>

        {/* Hidden for publication: architectural-direction and doctrine bands are under
            copy review. Retained in source, not deleted. */}
        {false && (
          <>
        {/* Architectural direction — light band; the arc reads as linework on light */}
        <section className="chapter bg-muted text-foreground border-y border-border">
          <div
            className="absolute inset-0 opacity-[0.5] pointer-events-none"
            style={{
              backgroundImage: "radial-gradient(hsl(var(--primary) / 0.12) 1px, transparent 1px)",
              backgroundSize: "28px 28px",
            }}
          />
          <div className="relative z-10 max-w-5xl mx-auto w-full">
            <div className="mb-10 md:mb-14 max-w-2xl">
              <div className="font-mono text-xs md:text-sm tracking-[0.28em] uppercase text-muted-foreground/60 mb-4">Architectural direction</div>
              <h2 className="text-2xl md:text-4xl font-bold text-primary leading-tight mb-4">
                Where the architecture is heading
              </h2>
              <p className="text-base md:text-lg text-foreground/75 leading-relaxed">
                Beyond today's read-only deployment — not what is in production now.
              </p>
            </div>
            {/* Horizontal arc — connected stages, not detached cards */}
            <div className="relative">
              <div
                className="pointer-events-none absolute left-0 right-0 top-5 hidden md:block h-px bg-gradient-to-r from-transparent via-primary/25 to-transparent"
                aria-hidden="true"
              />
              <div className="relative grid md:grid-cols-3 gap-8 md:gap-6">
                {[
                  { icon: Search, title: "Operational Reality", body: "A continuously updated view of how work actually flows across processes, controls and systems." },
                  { icon: ShieldCheck, title: "Decision Integrity", body: "Guardrails that keep systems within safe operating limits and surface deviations." },
                  { icon: BadgeCheck, title: "Institutional Assurance", body: "Continuous, traceable verification of control effectiveness mapped to oversight frameworks." },
                ].map(({ icon: Icon, title, body }) => (
                  <div key={title} className="flex flex-col items-start md:px-1">
                    <div className="w-10 h-10 rounded-full bg-card border border-primary/25 flex items-center justify-center">
                      <Icon className="w-5 h-5 text-primary" />
                    </div>
                    <h3 className="mt-4 text-base font-semibold text-primary">{title}</h3>
                    <p className="mt-2 text-sm text-foreground/70 leading-relaxed max-w-[34ch]">{body}</p>
                  </div>
                ))}
              </div>
            </div>
            <div className="mt-10">
              <Link to="/how-it-works" className="inline-flex items-center gap-2 text-base text-primary font-semibold hover:gap-3 transition-all duration-300 border-b border-primary/30 pb-0.5">
                See the full Control Arc <ArrowRight className="w-4 h-4" />
              </Link>
            </div>
          </div>
        </section>

        {/* Statement band — the doctrine line, alone on screen */}
        <section className="relative overflow-hidden bg-primary px-4 py-20 md:py-24 text-primary-foreground border-t border-white/10">
          <div className="relative z-10 mx-auto max-w-4xl">
            <p className="font-display text-3xl md:text-5xl font-semibold leading-[1.15] tracking-tight">
              <span className="text-white/45">Accountability remains.</span>{" "}
              <span className="text-white">Visibility doesn't.</span>
            </p>
          </div>
        </section>
          </>
        )}

        {/* Who This Is For */}
        <section className="chapter chapter-surface-2 text-primary-foreground border-t border-white/10">


          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            <div
              className="absolute inset-0 opacity-[0.05]"
              style={{
                backgroundImage: "radial-gradient(hsl(var(--primary-foreground) / 0.6) 1px, transparent 1px)",
                backgroundSize: "30px 30px",
              }}
            />
            <div className="absolute top-1/2 left-1/4 w-[36rem] h-[36rem] bg-accent/10 rounded-full blur-[120px]" />
          </div>
          <div className="relative z-10 max-w-4xl mx-auto w-full">
            <h2 className="text-2xl md:text-4xl font-bold text-white mb-10 md:mb-12 max-w-3xl">Who This Is For</h2>

            {/* Persona strip — compact rows, one line each */}
            <div className="max-w-3xl divide-y divide-white/10 border-y border-white/10">
              {[
                { icon: Briefcase, title: "COO", body: "See how a critical workflow is actually running, which patterns are creating work and which cases sit behind them." },
                { icon: BarChart3, title: "CRO", body: "Connect a population concern to the underlying cases and evidence, then test the agreed operational condition consistently." },
                { icon: Shield, title: "CCO / Oversight", body: "See what the current operational evidence can establish, and where the evidence limits remain." },
                { icon: Landmark, title: "CEO / Board", body: "Get a grounded view of the operational issue without relying only on headline MI." },
              ].map(({ icon: Icon, title, body }) => (
                <div key={title} className="flex items-start gap-4 py-4 md:py-5">
                  <Icon className="w-5 h-5 text-white/45 flex-shrink-0 mt-0.5" />
                  <div className="grid gap-1 md:grid-cols-[9rem_1fr] md:gap-6 md:items-baseline w-full">
                    <h3 className="font-semibold text-white leading-snug">{title}</h3>
                    <p className="text-sm text-white/70 leading-relaxed">{body}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-10">
              <Link to="/who" className="inline-flex items-center gap-2 text-base text-accent font-semibold hover:gap-3 transition-all duration-300">
                See how Opsen serves each role <ArrowRight className="w-4 h-4" />
              </Link>
            </div>
          </div>
        </section>

        {/* Primary CTA — two tiers: the briefing, and something to circulate */}
        <section className="chapter chapter-surface-0 text-primary-foreground border-y-2 border-accent/30">
          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_70%_at_50%_50%,hsl(var(--accent)/0.14),transparent_70%)]" />
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40rem] h-[36rem] bg-accent/15 rounded-full blur-[140px]" />
          </div>
          <div className="relative z-10 mx-auto grid w-full max-w-6xl items-center gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)] lg:gap-14">
            <div className="text-center lg:text-left">
              <h2 className="text-3xl md:text-5xl font-bold mb-6 text-white leading-tight">Start with one critical operation and <span className="text-white/55">the records you already hold.</span></h2>
              <p className="text-lg md:text-xl mb-8 text-white/85 leading-relaxed max-w-2xl mx-auto lg:mx-0">
                A four-week, historical and read-only Operational Evidence Review. We show how the recorded workflow ran, go into the cases behind material findings and establish what the available evidence supports. No production integration is required for the initial review.
              </p>
              <ContactFormModal defaultInquiryType="briefing" source="index-bottom">
                <button
                  aria-label="Schedule an Executive Briefing"
                  className="animate-pulse-glow inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-semibold ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-accent text-primary hover:bg-accent/90 h-14 px-8 py-3 hover:scale-105 hover:shadow-lg"
                >
                  Schedule an Executive Briefing
                </button>
              </ContactFormModal>
            </div>
            {/* Temporarily hidden pending refresh of the specimen brief copy. Retained, not deleted. */}
            {false && <SpecimenDownload source="index-bottom" />}
          </div>
        </section>


      </div>

    </>
  );
};

export default Index;