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,
  Sparkles,
  TrendingUp,
  Workflow,
} from "lucide-react";

const guardrails = [
  {
    title: "Limits deep losses",
    description:
      "When trends weaken, allocations shift defensively instead of doubling down into falling markets.",
  },
  {
    title: "Automatic defensive shifts",
    description:
      "Sustained weakness routes new capital to the protective sleeve without panic selling.",
  },
  {
    title: "Position sizing",
    description:
      "Cap any single ETF/Index fund at 20% of the total portfolio to avoid issuer concentration.",
  },
];

const executionSteps = [
  {
    title: "Market regime check",
    detail:
      "Assess trend and valuation to decide whether equity should lean higher or stay defensive.",
  },
  {
    title: "Set allocation bands",
    detail:
      "Equity floats within defined bands; gold auto-balances as the counterweight instead of a fixed split.",
  },
  {
    title: "Rebalance on schedule",
    detail:
      "Monthly cadence with drift checks. New SIP cash fixes misweights before selling.",
  },
  {
    title: "Stay funded",
    detail:
      "Dividends and SIP flows top up underweight legs first, reducing churn and taxes.",
  },
];

const monitoring = [
  {
    label: "Regime filter",
    value: "Long-term trend and valuation bands",
    icon: <Activity className="w-4 h-4" />,
  },
  {
    label: "Review cadence",
    value: "Monthly, with drift alerts",
    icon: <CalendarClock className="w-4 h-4" />,
  },
  {
    label: "Expected profile",
    value: "Low-to-moderate risk, smoother equity curve",
    icon: <BarChart3 className="w-4 h-4" />,
  },
];

const comparisonStats = [
  {
    title: "SIP-aware max drawdown",
    ours: { value: "-13.13%", detail: "Peak: Jan 2020 → Trough: Mar 2020" },
    nifty: { value: "-27.64%", detail: "Peak: Dec 2019 → Trough: Mar 2020" },
    note: "Defense during 2020 crash without stopping SIPs.",
  },
  {
    title: "Worst rolling 24m SIP XIRR",
    ours: { value: "11.51%", detail: "Jan 2010 → Jan 2012" },
    nifty: { value: "-2.69%", detail: "Jan 2010 → Jan 2012" },
    note: "Stayed positive even in the worst 24 months.",
  },
  {
    title: "Full-period SIP XIRR",
    ours: { value: "13.79%", detail: "Flow-based execution" },
    nifty: { value: "12.98%", detail: "Benchmark SIP" },
    note: "Higher compounded return with the same monthly cashflows.",
  },
];

const sipProjection = [
  { label: "Our strategy (adaptive SIP)", value: 24200 },
  { label: "Nifty SIP", value: 23200 },
];

const SECTION_COUNT = 6;

function usePrefersReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setPrefersReducedMotion(mediaQuery.matches);
    update();

    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener("change", update);
      return () => mediaQuery.removeEventListener("change", update);
    }

    mediaQuery.addListener(update);
    return () => mediaQuery.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 GoldenNiftyStrategy() {
  const maxSipValue = Math.max(...sipProjection.map((item) => item.value));
  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((section) => {
      if (section) {
        observer.observe(section);
      }
    });

    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>
        <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">
                Hybrid equity + gold
              </Badge>
              <h1 className="max-w-2xl text-3xl font-bold leading-tight sm:text-4xl md:text-5xl">
                Golden Nifty Strategy
              </h1>
              <p className="max-w-2xl text-sm text-muted-foreground sm:text-base">
                Not a fixed 60/40. Allocation adapts monthly based on market regime and relative valuation.
              </p>
              <p className="max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
                A disciplined system that keeps you invested through cycles without decision fatigue. Equity drives growth,
                gold counters stress, and monthly flows are steered by rules instead of gut feel.
              </p>
              <p className="text-sm text-muted-foreground">
                The strategy’s edge is not prediction — it is consistency under uncertainty.
              </p>
              <div className="flex flex-wrap gap-3">
                <Badge variant="secondary" className="bg-chart-2/15 text-chart-2 border-0">
                  Process driven
                </Badge>
                <Badge variant="secondary" className="bg-chart-1/15 text-chart-1 border-0">
                  Regime aware
                </Badge>
                <Badge variant="secondary" className="bg-chart-3/15 text-chart-3 border-0">
                  Low drift
                </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 intent
                    </CardTitle>
                    <CardDescription>Targeting steady 12-15% p.a. with smoother equity curves.</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" />
                      Risk posture
                    </CardTitle>
                    <CardDescription>Low-to-moderate with automatic defensive shifts when trends weaken.</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">
                  <Sparkles className="w-5 h-5 text-primary" />
                  Strategy at a glance
                </CardTitle>
                <CardDescription>
                  The exact playbook used to run the Golden Nifty allocation 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 structure</p>
                    <ul className="text-sm text-muted-foreground space-y-1">
                      <li><span className="text-foreground font-semibold">Equity growth engine:</span> Nifty 50 exposure.</li>
                      <li><span className="text-foreground font-semibold">Defensive counterweight:</span> Gold that offsets stress.</li>
                      <li><span className="text-foreground font-semibold">Monthly capital flow:</span> SIP-driven, not lump-sum timing.</li>
                    </ul>
                    <p className="text-sm text-muted-foreground mt-3">
                      Allocation is driven by rules, not forecasts.
                    </p>
                  </div>
                  <div className={`p-4 rounded-xl border border-border/60 bg-background/60 ${panelHover}`}>
                    <p className="text-sm text-muted-foreground mb-1">Adaptive weights</p>
                    <p className="text-lg font-semibold">Bands, not fixed ratios</p>
                    <p className="text-sm text-muted-foreground">
                      Equity flexes within guardrails; gold adjusts automatically as the counterweight.
                    </p>
                    <p className="text-sm text-muted-foreground mt-2">
                      Monthly reviews with drift alerts. New cash repairs weights before any sells.
                    </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">Regime aware</p>
                      <p className="text-muted-foreground">
                        Long-term trend and valuation guide whether we stay aggressive or move to a protective mix.
                      </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">Tax + cost aware</p>
                      <p className="text-muted-foreground">
                        Prefer cashflows and minor top-ups to fix drift before selling, keeping turnover low.
                      </p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </TiltCard>
          </div>
        </section>

        <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>Growth mode</CardTitle>
                <CardDescription>When equity trends are healthy, the strategy allows equity exposure to rise within defined risk limits.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <p className="text-2xl font-semibold text-chart-2 sm:text-3xl">Equity leans higher</p>
                <ul className="text-muted-foreground space-y-2 text-sm">
                  <li>- Equity range: roughly 55–75%, with gold flexing as the counterweight.</li>
                  <li>- New SIP flows lean into equity first, staying inside guardrails.</li>
                  <li>- Index-only exposure keeps single-stock risk out of the system.</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>Protective mode</CardTitle>
                <CardDescription>When trends weaken, new capital is defensively allocated without forced selling.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <p className="text-2xl font-semibold text-chart-1 sm:text-3xl">Defense steps up</p>
                <ul className="text-muted-foreground space-y-2 text-sm">
                  <li>- Equity tilts down toward the lower band; gold sleeve scales up automatically.</li>
                  <li>- New SIP money routes defensively; existing holdings are adjusted gradually.</li>
                  <li>- Controls drawdowns while keeping exposure to an eventual recovery.</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 it works</CardTitle>
                <CardDescription>Pairing growth with a crisis hedge, enforced by automation.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <ul className="text-muted-foreground space-y-2 text-sm">
                  <li>- Nifty 50 captures structural economic growth.</li>
                  <li>- Gold offsets equity stress and inflation spikes when they hit.</li>
                  <li>- Flow-based, rule-based tilts make execution repeatable instead of emotional.</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>

        <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 vs. Nifty SIP</h3>
              <p className="text-muted-foreground text-sm">
                No gold-only comparisons. Just our adaptive SIP vs a plain Nifty SIP across drawdowns, rolling pain points, and overall returns.
              </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">Our strategy</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">
                        Better defense
                      </Badge>
                    </div>
                    <div className="flex items-start justify-between gap-3">
                      <div>
                        <p className="text-xs uppercase tracking-wide text-muted-foreground">Nifty SIP</p>
                        <p className="text-xl font-semibold text-muted-foreground sm:text-2xl">{stat.nifty.value}</p>
                        <p className="text-xs text-muted-foreground">{stat.nifty.detail}</p>
                      </div>
                    </div>
                  </CardContent>
                </TiltCard>
              ))}
            </div>
          </div>
        </section>

        <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>Execution checklist</CardTitle>
                <CardDescription>Follow the same steps every month.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-5">
                <p className="text-sm text-muted-foreground">
                  Every investor fails not because of bad strategies, but because they stop executing them. This checklist removes discretion.
                </p>
                {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>

            <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>Guardrails</CardTitle>
                <CardDescription>
                  Automatic rules to keep the portfolio within a defined risk band.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {guardrails.map((item) => (
                  <div key={item.title} className="flex gap-3">
                    <div className="flex-none w-10 h-10 rounded-lg bg-chart-1/10 text-chart-1 flex items-center justify-center">
                      <ShieldCheck className="w-5 h-5" />
                    </div>
                    <div>
                      <p className="font-semibold">{item.title}</p>
                      <p className="text-muted-foreground text-sm leading-relaxed">
                        {item.description}
                      </p>
                    </div>
                  </div>
                ))}
                <div className={`p-4 rounded-xl border border-dashed border-border/60 bg-background/60 ${panelHover}`}>
                  <p className="font-semibold mb-1">Exit discipline</p>
                  <p className="text-muted-foreground text-sm">
                    If both equity and gold weaken together for a stretch, pause new allocations and
                    re-evaluate the backdrop before re-entering. No forced trades.
                  </p>
                </div>
              </CardContent>
            </TiltCard>
          </div>
        </section>

        <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>Why this isn't a DIY strategy</CardTitle>
              <CardDescription>Clients pay for discipline, not a tutorial.</CardDescription>
            </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">
                  <Workflow className="w-4 h-4 text-primary" />
                  Execution discipline
                </p>
                <p className="text-muted-foreground text-sm">
                  Most investors fail to rebalance correctly during drawdowns. This system keeps doing it anyway.
                </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" />
                  Valuation-aware SIP
                </p>
                <p className="text-muted-foreground text-sm">
                  Monthly allocations adapt based on relative pricing — not fixed ratios that ignore where the market is.
                </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">
                  <ShieldCheck className="w-4 h-4 text-chart-1" />
                  Behavior protection
                </p>
                <p className="text-muted-foreground text-sm">
                  Rules prevent panic exits and performance chasing, so the edge compounds instead of leaking away.
                </p>
              </div>
            </CardContent>
          </TiltCard>
        </section>

        <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>Keeping it actionable</CardTitle>
                <CardDescription>
                  What to track, what to automate, and how to stay consistent.
                </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">
                  <Sparkles className="w-4 h-4 text-primary" />
                  Signals to watch
                </p>
                <p className="text-muted-foreground text-sm">
                  Nifty 50 trend strength vs. long-term average, USDINR spikes, and India VIX. These inform when to expect regime shifts.
                </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">
                  <Workflow className="w-4 h-4 text-chart-2" />
                  Automation
                </p>
                <p className="text-muted-foreground text-sm">
                  Scheduled monthly rebalance task, alerts when drift crosses 5%, and a simple checklist stored alongside trade logs.
                </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" />
                  Review cadence
                </p>
                <p className="text-muted-foreground text-sm">
                  Quarterly lookback on drawdowns, hit-rates of regime filter, and transaction costs to ensure the edge persists.
                </p>
              </div>
            </CardContent>
          </TiltCard>
        </section>
        </main>
      </PageEnter>
      <Footer />
    </div>
  );
}
