import { useEffect, useRef, useState } from "react";
import type { CSSProperties, ReactNode, MouseEvent } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import Footer from "@/components/landing/Footer";
import Navigation from "@/components/landing/Navigation";
import PageEnter from "@/components/ui/page-enter";
import {
  Activity,
  ArrowRight,
  BarChart3,
  CalendarClock,
  ShieldCheck,
  Zap,
  TrendingUp,
  Workflow,
} from "lucide-react";

const guardrails = [
  {
    title: "Valuation-driven protection",
    description:
      "When JuniorBees is significantly above its 5-year average price, the strategy automatically reduces midcap and increases gold — protecting against overvalued markets.",
  },
  {
    title: "Automatic recovery positioning",
    description:
      "When midcap is cheap (below its long-term trend), the strategy pushes equity allocation up to 92% — capturing maximum upside after corrections.",
  },
  {
    title: "Gold as intelligent hedge",
    description:
      "Gold is not a fixed allocation. It dynamically expands to protect capital when midcap markets are expensive and contracts when opportunities arise.",
  },
];

const executionSteps = [
  {
    title: "Fetch current JuniorBees price",
    detail:
      "Live market price of JuniorBees ETF (Nifty Next 50 Midcap) is fetched each SIP cycle.",
  },
  {
    title: "Compute 60-month SMA",
    detail:
      "5-year simple moving average of JuniorBees price acts as the fair value reference. Price above SMA = expensive; below SMA = cheap.",
  },
  {
    title: "Calculate dynamic allocation",
    detail:
      "Formula: Midcap% = clip(70% − (Price÷5yr SMA − 1) × 60%, 40%, 92%). Gold takes the remainder.",
  },
  {
    title: "Execute SIP with computed weights",
    detail:
      "New SIP capital is deployed into JuniorBees and GoldBees in exact proportions. No manual intervention needed.",
  },
];

const monitoring = [
  {
    label: "Valuation signal",
    value: "60-month SMA of JuniorBees",
    icon: <Activity className="w-4 h-4" />,
  },
  {
    label: "Review cadence",
    value: "Monthly, automated",
    icon: <CalendarClock className="w-4 h-4" />,
  },
  {
    label: "Expected profile",
    value: "Medium risk, high growth",
    icon: <BarChart3 className="w-4 h-4" />,
  },
];

const comparisonStats = [
  {
    title: "12-year backtested XIRR",
    ours: { value: "16.9%", detail: "Jan 2014 → May 2026 (SIP)" },
    benchmark: { value: "15.6%", detail: "Static 70/30 Midcap+Gold" },
    note: "Dynamic allocation beats static by 1.3% p.a. with lower drawdown.",
  },
  {
    title: "Max drawdown (SIP portfolio)",
    ours: { value: "-10.1%", detail: "Dynamic allocation" },
    benchmark: { value: "-15.5%", detail: "Static 70/30" },
    note: "35% less drawdown than static allocation — gold protection works.",
  },
  {
    title: "Worst crash performance",
    ours: { value: "+4.6%", detail: "2018 Midcap crash XIRR advantage" },
    benchmark: { value: "baseline", detail: "Static 70/30 in same period" },
    note: "Outperformed during the worst midcap crash (2018-2020).",
  },
];

const allocationExamples = [
  { date: "Jan 2018", ratio: "1.66x", midcap: "40%", gold: "60%", state: "Very Expensive", note: "Protected before 2018 crash ✓" },
  { date: "Apr 2020", ratio: "0.85x", midcap: "79%", gold: "21%", state: "Cheap", note: "Bought aggressively at COVID bottom ✓" },
  { date: "Jan 2024", ratio: "1.54x", midcap: "40%", gold: "60%", state: "Expensive", note: "Currently in protection mode" },
];

const SECTION_COUNT = 6;

function usePrefersReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setPrefersReducedMotion(mq.matches);
    update();
    if (mq.addEventListener) {
      mq.addEventListener("change", update);
      return () => mq.removeEventListener("change", update);
    }
    mq.addListener(update);
    return () => mq.removeListener(update);
  }, []);
  return prefersReducedMotion;
}

type TiltCardProps = {
  children: ReactNode;
  className?: string;
  wrapperClassName?: string;
  wrapperStyle?: CSSProperties;
  cardStyle?: CSSProperties;
  prefersReducedMotion: boolean;
};

function TiltCard({ children, className, wrapperClassName, wrapperStyle, cardStyle, prefersReducedMotion }: TiltCardProps) {
  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const [transform, setTransform] = useState({ rotateX: 0, rotateY: 0, scale: 1 });

  const handleMouseMove = (event: MouseEvent<HTMLDivElement>) => {
    if (prefersReducedMotion || !wrapperRef.current) return;
    const rect = wrapperRef.current.getBoundingClientRect();
    const x = (event.clientX - rect.left) / rect.width - 0.5;
    const y = (event.clientY - rect.top) / rect.height - 0.5;
    setTransform({ rotateX: y * -8, rotateY: x * 8, scale: 1.02 });
  };

  const handleMouseLeave = () => {
    if (prefersReducedMotion) return;
    setTransform({ rotateX: 0, rotateY: 0, scale: 1 });
  };

  const tiltStyle = prefersReducedMotion ? cardStyle : {
    ...cardStyle,
    transform: `perspective(900px) rotateX(${transform.rotateX}deg) rotateY(${transform.rotateY}deg) scale(${transform.scale})`,
    transition: "transform 0.12s ease-out",
    willChange: "transform",
  };

  return (
    <div ref={wrapperRef} className={wrapperClassName} style={wrapperStyle} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
      <Card className={className} style={tiltStyle}>{children}</Card>
    </div>
  );
}

export default function AlphaShieldStrategy() {
  const prefersReducedMotion = usePrefersReducedMotion();
  const [visibleSections, setVisibleSections] = useState<boolean[]>(Array(SECTION_COUNT).fill(false));
  const [scrollY, setScrollY] = useState(0);
  const sectionRefs = useRef<Array<HTMLElement | null>>([]);
  const revealTransition = prefersReducedMotion ? "" : "transition-all duration-700";
  const cardHover = prefersReducedMotion ? "" : "hover:-translate-y-1 hover:shadow-xl hover:shadow-primary/10";
  const panelHover = prefersReducedMotion ? "" : "transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-primary/10";
  const isSectionVisible = (index: number) => Boolean(visibleSections[index]);
  const sectionReveal = (index: number) => prefersReducedMotion ? "opacity-100" : isSectionVisible(index) ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6";
  const cardReveal = (index: number) => prefersReducedMotion ? "opacity-100" : isSectionVisible(index) ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4";
  const parallaxOffset = prefersReducedMotion ? 0 : Math.min(scrollY * 0.3, 240);

  useEffect(() => {
    if (prefersReducedMotion) { setVisibleSections(Array(SECTION_COUNT).fill(true)); return; }
    const observer = new IntersectionObserver((entries) => {
      setVisibleSections((prev) => {
        const next = prev.length ? [...prev] : Array(SECTION_COUNT).fill(false);
        entries.forEach((entry) => {
          const index = Number(entry.target.getAttribute("data-section-index"));
          if (entry.isIntersecting && Number.isFinite(index)) next[index] = true;
        });
        return next;
      });
    }, { threshold: 0.2 });
    sectionRefs.current.forEach((s) => s && observer.observe(s));
    return () => observer.disconnect();
  }, [prefersReducedMotion]);

  useEffect(() => {
    if (prefersReducedMotion) { setScrollY(0); return; }
    let rafId: number | null = null;
    const handleScroll = () => {
      if (rafId !== null) return;
      rafId = window.requestAnimationFrame(() => { setScrollY(window.scrollY); rafId = null; });
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    handleScroll();
    return () => { window.removeEventListener("scroll", handleScroll); if (rafId !== null) window.cancelAnimationFrame(rafId); };
  }, [prefersReducedMotion]);

  return (
    <div className="min-h-screen text-foreground">
      <Navigation />
      <PageEnter>
        <main className="relative overflow-x-hidden overflow-y-visible pt-20 pb-20 sm:pt-24 sm:pb-24">
          <div className="absolute inset-0 pointer-events-none">
            <div className="absolute -top-32 left-[8%] h-80 w-80 rounded-full bg-primary/10 blur-3xl" style={{ transform: `translate3d(0, ${parallaxOffset}px, 0)` }} />
            <div className="absolute top-10 right-[12%] h-96 w-96 rounded-full bg-chart-2/10 blur-3xl" style={{ transform: `translate3d(0, ${parallaxOffset}px, 0)` }} />
            <div className="absolute top-52 left-[65%] h-64 w-64 rounded-full bg-chart-3/10 blur-3xl" style={{ transform: `translate3d(0, ${parallaxOffset}px, 0)` }} />
          </div>

          {/* Hero */}
          <section ref={(el) => (sectionRefs.current[0] = el)} data-section-index={0}
            className={`relative overflow-hidden px-4 py-12 sm:px-6 sm:py-16 ${revealTransition} ${sectionReveal(0)}`}>
            <div className="absolute inset-0 pointer-events-none">
              <div className="absolute -left-10 top-10 w-72 h-72 rounded-full bg-primary/10 blur-3xl" />
              <div className="absolute right-[-80px] bottom-10 w-80 h-80 rounded-full bg-chart-2/10 blur-3xl" />
            </div>
            <div className="relative z-10 mx-auto grid max-w-6xl gap-8 lg:grid-cols-2 lg:items-start lg:gap-12">
              <div className="space-y-5 sm:space-y-6">
                <Badge className="w-fit bg-primary/15 text-primary border-primary/30">
                  High-growth midcap + gold protection
                </Badge>
                <h1 className="max-w-2xl text-3xl font-bold leading-tight sm:text-4xl md:text-5xl">
                  Alpha Shield Strategy
                </h1>
                <p className="max-w-2xl text-sm text-muted-foreground sm:text-base">
                  Not a fixed 70/30. Allocation adapts monthly based on whether midcap is cheap or expensive relative to its 5-year price average.
                </p>
                <p className="max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
                  Targets 15–18% XIRR by riding midcap growth aggressively when it's cheap, and shielding your capital in gold when it's expensive. Backtested over 12+ years with 16.9% XIRR and only -10.1% max drawdown.
                </p>
                <p className="text-sm text-muted-foreground">
                  The strategy's edge is buying more when others panic, protecting when others are greedy.
                </p>
                <div className="flex flex-wrap gap-3">
                  <Badge variant="secondary" className="bg-chart-2/15 text-chart-2 border-0">Valuation-driven</Badge>
                  <Badge variant="secondary" className="bg-chart-1/15 text-chart-1 border-0">Crash-tested</Badge>
                  <Badge variant="secondary" className="bg-chart-3/15 text-chart-3 border-0">16.9% XIRR</Badge>
                </div>
                <div className="grid gap-4 sm:grid-cols-2">
                  <TiltCard prefersReducedMotion={prefersReducedMotion}
                    className="h-full bg-card/80 backdrop-blur-sm border-card-border"
                    wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
                    wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
                    <CardHeader className="pb-2">
                      <CardTitle className="flex items-center gap-2 text-base">
                        <TrendingUp className="w-4 h-4 text-chart-2" />
                        Growth engine
                      </CardTitle>
                      <CardDescription>JuniorBees ETF — Nifty Next 50 midcap. Historically 17%+ CAGR buy-and-hold.</CardDescription>
                    </CardHeader>
                  </TiltCard>
                  <TiltCard prefersReducedMotion={prefersReducedMotion}
                    className="h-full bg-card/80 backdrop-blur-sm border-card-border"
                    wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
                    wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}>
                    <CardHeader className="pb-2">
                      <CardTitle className="flex items-center gap-2 text-base">
                        <ShieldCheck className="w-4 h-4 text-chart-1" />
                        Intelligent shield
                      </CardTitle>
                      <CardDescription>Gold allocation expands automatically when midcap is expensive. Shrinks when it's cheap.</CardDescription>
                    </CardHeader>
                  </TiltCard>
                </div>
              </div>

              <TiltCard prefersReducedMotion={prefersReducedMotion}
                className="h-full bg-card/70 backdrop-blur-sm border-card-border"
                wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "300ms" }}>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Zap className="w-5 h-5 text-primary" />
                    Strategy at a glance
                  </CardTitle>
                  <CardDescription>
                    The exact allocation formula running Alpha Shield every month.
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="grid gap-4 sm:grid-cols-2">
                    <div className={`p-4 rounded-xl border border-border/60 bg-background/60 ${panelHover}`}>
                      <p className="text-sm text-muted-foreground mb-1">Core assets</p>
                      <ul className="text-sm text-muted-foreground space-y-1">
                        <li><span className="text-foreground font-semibold">JuniorBees ETF:</span> Nifty Next 50 midcap exposure.</li>
                        <li><span className="text-foreground font-semibold">GoldBees ETF:</span> Dynamic hedge that grows when midcap is expensive.</li>
                        <li><span className="text-foreground font-semibold">Monthly SIP:</span> Automated, rule-based execution.</li>
                      </ul>
                    </div>
                    <div className={`p-4 rounded-xl border border-border/60 bg-background/60 ${panelHover}`}>
                      <p className="text-sm text-muted-foreground mb-1">Allocation formula</p>
                      <p className="text-sm font-mono bg-background/80 p-2 rounded border border-border/40 text-foreground">
                        Midcap% = clip(<br/>
                        &nbsp;&nbsp;70% − (Price÷SMA − 1) × 60%,<br/>
                        &nbsp;&nbsp;min 40%, max 92%<br/>
                        )
                      </p>
                      <p className="text-xs text-muted-foreground mt-2">SMA = 60-month (5-year) average price</p>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <div className="flex items-start gap-3">
                      <div className="w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
                        <Workflow className="w-5 h-5" />
                      </div>
                      <div>
                        <p className="font-semibold">Valuation-aware, not forecast-dependent</p>
                        <p className="text-muted-foreground text-sm">
                          No market predictions. Just price vs. 5-year average. Cheap = buy more. Expensive = protect more.
                        </p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="w-10 h-10 rounded-lg bg-chart-2/10 text-chart-2 flex items-center justify-center">
                        <BarChart3 className="w-5 h-5" />
                      </div>
                      <div>
                        <p className="font-semibold">Proven across market regimes</p>
                        <p className="text-muted-foreground text-sm">
                          Outperformed in 2018 midcap crash (+4.6% edge), 2022 rate hike (+5.5% edge). Works across 5 different SMA window lengths tested.
                        </p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </TiltCard>
            </div>
          </section>

          {/* 3 mode cards */}
          <section ref={(el) => (sectionRefs.current[1] = el)} data-section-index={1}
            className={`mx-auto max-w-6xl px-4 pt-10 sm:px-6 ${revealTransition} ${sectionReveal(1)}`}>
            <div className="grid gap-6 lg:grid-cols-3">
              <TiltCard prefersReducedMotion={prefersReducedMotion}
                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
                wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
                <CardHeader>
                  <CardTitle>Cheap market mode</CardTitle>
                  <CardDescription>When JuniorBees is below its 5-year SMA, markets are undervalued. Buy aggressively.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <p className="text-2xl font-semibold text-chart-2 sm:text-3xl">Up to 92% midcap</p>
                  <ul className="text-muted-foreground space-y-2 text-sm">
                    <li>- Price-to-SMA ratio below 1.0 triggers increased equity allocation.</li>
                    <li>- April 2020 (COVID bottom): strategy deployed 79% into midcap — captured full recovery.</li>
                    <li>- Maximum midcap exposure: 92% when very cheap.</li>
                  </ul>
                </CardContent>
              </TiltCard>
              <TiltCard prefersReducedMotion={prefersReducedMotion}
                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
                wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}>
                <CardHeader>
                  <CardTitle>Expensive market mode</CardTitle>
                  <CardDescription>When JuniorBees is significantly above its 5-year SMA, protect capital in gold.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <p className="text-2xl font-semibold text-chart-1 sm:text-3xl">Down to 40% midcap</p>
                  <ul className="text-muted-foreground space-y-2 text-sm">
                    <li>- Price-to-SMA ratio above 1.5 triggers maximum gold protection (60% gold).</li>
                    <li>- Jan 2018: strategy was 40% midcap before the crash — avoided major losses.</li>
                    <li>- Minimum midcap exposure: 40% (never goes to zero — always participates in growth).</li>
                  </ul>
                </CardContent>
              </TiltCard>
              <TiltCard prefersReducedMotion={prefersReducedMotion}
                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
                wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "350ms" }}>
                <CardHeader>
                  <CardTitle>Why midcap + gold?</CardTitle>
                  <CardDescription>A high-growth engine paired with an intelligent crisis hedge.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <ul className="text-muted-foreground space-y-2 text-sm">
                    <li>- Nifty Next 50 (JuniorBees) has historically delivered 17%+ CAGR — significantly above large cap.</li>
                    <li>- Gold rallies during equity stress: 2008, 2018, 2020, 2022 all showed gold protecting portfolios.</li>
                    <li>- Dynamic allocation captures the best of both: growth in bull markets, protection in bears.</li>
                  </ul>
                  <div className="flex flex-wrap gap-2">
                    {monitoring.map((item) => (
                      <Badge key={item.label} variant="secondary"
                        className="flex items-center gap-2 border-border/60 bg-background/80 text-foreground whitespace-normal">
                        {item.icon}
                        <span className="font-medium">{item.label}:</span>
                        <span className="text-muted-foreground">{item.value}</span>
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </TiltCard>
            </div>
          </section>

          {/* Backtest comparison */}
          <section ref={(el) => (sectionRefs.current[2] = el)} data-section-index={2}
            className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(2)}`}>
            <div className="flex flex-col gap-6">
              <div className="flex flex-col gap-2">
                <h3 className="text-2xl font-semibold">How it holds up — 12 years of data</h3>
                <p className="text-muted-foreground text-sm">
                  Backtested from Jan 2014 to May 2026 with Rs 10,000/month SIP. Dynamic vs. static 70/30 allocation.
                </p>
              </div>
              <div className="grid gap-4 md:grid-cols-3">
                {comparisonStats.map((stat, index) => (
                  <TiltCard key={stat.title} prefersReducedMotion={prefersReducedMotion}
                    className="h-full bg-card/80 backdrop-blur-sm border-card-border"
                    wrapperClassName={`${revealTransition} ${cardReveal(2)} ${cardHover} h-full`}
                    wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: `${150 + index * 120}ms` }}>
                    <CardHeader>
                      <CardTitle className="text-lg">{stat.title}</CardTitle>
                      <CardDescription>{stat.note}</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                        <div>
                          <p className="text-xs uppercase tracking-wide text-muted-foreground">Alpha Shield</p>
                          <p className="text-xl font-semibold text-chart-2 sm:text-2xl">{stat.ours.value}</p>
                          <p className="text-xs text-muted-foreground">{stat.ours.detail}</p>
                        </div>
                        <Badge variant="secondary" className="bg-chart-2/15 text-chart-2 border-0">Dynamic wins</Badge>
                      </div>
                      <div className="flex items-start justify-between gap-3">
                        <div>
                          <p className="text-xs uppercase tracking-wide text-muted-foreground">Benchmark</p>
                          <p className="text-xl font-semibold text-muted-foreground sm:text-2xl">{stat.benchmark.value}</p>
                          <p className="text-xs text-muted-foreground">{stat.benchmark.detail}</p>
                        </div>
                      </div>
                    </CardContent>
                  </TiltCard>
                ))}
              </div>
            </div>
          </section>

          {/* Real allocation examples */}
          <section ref={(el) => (sectionRefs.current[3] = el)} data-section-index={3}
            className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(3)}`}>
            <div className="grid gap-8 lg:grid-cols-2">
              <TiltCard prefersReducedMotion={prefersReducedMotion}
                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
                wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover} h-full`}
                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
                <CardHeader>
                  <CardTitle>Real allocation examples</CardTitle>
                  <CardDescription>How the strategy actually allocated at key market moments.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="border-b border-border/40">
                          <th className="text-left py-2 text-muted-foreground font-medium">Date</th>
                          <th className="text-right py-2 text-muted-foreground font-medium">Midcap</th>
                          <th className="text-right py-2 text-muted-foreground font-medium">Gold</th>
                          <th className="text-left py-2 pl-3 text-muted-foreground font-medium">Outcome</th>
                        </tr>
                      </thead>
                      <tbody>
                        {allocationExamples.map((ex) => (
                          <tr key={ex.date} className="border-b border-border/20">
                            <td className="py-3 font-medium">{ex.date}</td>
                            <td className="py-3 text-right text-chart-2 font-semibold">{ex.midcap}</td>
                            <td className="py-3 text-right text-chart-1 font-semibold">{ex.gold}</td>
                            <td className="py-3 pl-3 text-muted-foreground text-xs">{ex.note}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                  <p className="text-xs text-muted-foreground">
                    Price-to-SMA ratio drives allocation. The strategy correctly positioned itself before the 2018 crash and at the 2020 COVID bottom.
                  </p>
                </CardContent>
              </TiltCard>

              <TiltCard prefersReducedMotion={prefersReducedMotion}
                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
                wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover} h-full`}
                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}>
                <CardHeader>
                  <CardTitle>Execution checklist</CardTitle>
                  <CardDescription>Exactly what happens every SIP cycle — fully automated.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-5">
                  {executionSteps.map((step, index) => (
                    <div key={step.title} className="flex gap-4">
                      <div className="flex-none">
                        <div className="w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center font-semibold">
                          {index + 1}
                        </div>
                      </div>
                      <div>
                        <p className="font-semibold">{step.title}</p>
                        <p className="text-muted-foreground text-sm leading-relaxed">{step.detail}</p>
                      </div>
                    </div>
                  ))}
                </CardContent>
              </TiltCard>
            </div>
          </section>

          {/* Guardrails */}
          <section ref={(el) => (sectionRefs.current[4] = el)} data-section-index={4}
            className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(4)}`}>
            <TiltCard prefersReducedMotion={prefersReducedMotion}
              className="bg-card/80 backdrop-blur-sm border-card-border"
              wrapperClassName={`${revealTransition} ${cardReveal(4)} ${cardHover}`}
              wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
              <CardHeader>
                <CardTitle>Built-in guardrails</CardTitle>
                <CardDescription>Why this strategy is fundamentally sound, not just backtested.</CardDescription>
              </CardHeader>
              <CardContent className="grid gap-6 md:grid-cols-3">
                {guardrails.map((item) => (
                  <div key={item.title} className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
                    <p className="font-semibold flex items-center gap-2">
                      <ShieldCheck className="w-4 h-4 text-chart-1" />
                      {item.title}
                    </p>
                    <p className="text-muted-foreground text-sm">{item.description}</p>
                  </div>
                ))}
              </CardContent>
            </TiltCard>
          </section>

          {/* CTA */}
          <section ref={(el) => (sectionRefs.current[5] = el)} data-section-index={5}
            className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(5)}`}>
            <TiltCard prefersReducedMotion={prefersReducedMotion}
              className="bg-card/80 backdrop-blur-sm border-card-border"
              wrapperClassName={`${revealTransition} ${cardReveal(5)} ${cardHover}`}
              wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
              <CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                  <CardTitle>Ready to activate Alpha Shield?</CardTitle>
                  <CardDescription>Connect your Zerodha account and start your first SIP in under 2 minutes.</CardDescription>
                </div>
                <Button variant="secondary" className="rounded-lg group w-full sm:w-fit" asChild>
                  <a href="/" className="flex items-center gap-2">
                    Back to Home
                    <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
                  </a>
                </Button>
              </CardHeader>
              <CardContent className="grid gap-6 md:grid-cols-3">
                <div className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
                  <p className="font-semibold flex items-center gap-2">
                    <Zap className="w-4 h-4 text-primary" />
                    Who is this for?
                  </p>
                  <p className="text-muted-foreground text-sm">
                    Investors with 5+ year horizon who want higher growth than Nifty SIP but don't want to actively manage a portfolio.
                  </p>
                </div>
                <div className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
                  <p className="font-semibold flex items-center gap-2">
                    <Activity className="w-4 h-4 text-chart-2" />
                    Risk level
                  </p>
                  <p className="text-muted-foreground text-sm">
                    Medium. Midcap is more volatile than large cap, but gold protection and dynamic allocation significantly reduce drawdowns vs. 100% midcap.
                  </p>
                </div>
                <div className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
                  <p className="font-semibold flex items-center gap-2">
                    <BarChart3 className="w-4 h-4 text-chart-3" />
                    Minimum SIP
                  </p>
                  <p className="text-muted-foreground text-sm">
                    Rs 5,000/month recommended. JuniorBees and GoldBees are both highly liquid NSE ETFs with tight spreads.
                  </p>
                </div>
              </CardContent>
            </TiltCard>
          </section>
        </main>
      </PageEnter>
      <Footer />
    </div>
  );
}
