Stop guessing the market.
Start trading a process.

// components/marketing/hero-section.tsx
import Link from "next/link";
import { ArrowRight, Download, ShieldCheck } from "lucide-react";
import { LiveChartPreview } from "./live-chart-preview";

export function HeroSection() {
  return (
    <section className="relative isolate overflow-hidden bg-[#05080F] pt-32 pb-24 sm:pt-40">
      {/* ambient glow + grid */}
      <div className="pointer-events-none absolute -top-40 left-1/2 h-[520px] w-[820px]
        -translate-x-1/2 rounded-full bg-emerald-500/10 blur-[130px]" />
      <div className="absolute inset-0 bg-grid-slate/[0.06]
        [mask-image:radial-gradient(ellipse_80%_60%_at_50%_0%,#000_40%,transparent_100%)]" />

      <div className="relative mx-auto grid max-w-7xl grid-cols-1
        items-center gap-12 px-4 sm:px-6 lg:grid-cols-12">
        {/* ---------- Copy column ---------- */}
        <div className="lg:col-span-6">
          <span className="inline-flex items-center gap-2 rounded-full border
            border-emerald-500/25 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-400">
            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-400" />
            Live market cohort — Batch 14 opens 1st of next month
          </span>

          <h1 className="mt-6 font-display text-4xl font-extrabold leading-[1.05]
            tracking-tight text-white sm:text-5xl xl:text-[58px]">
            Stop guessing the market.{" "}
            <span className="bg-gradient-to-r from-white via-emerald-400 to-sky-300
              bg-clip-text text-transparent">
              Start trading a process.
            </span>
          </h1>

          <p className="mt-6 max-w-xl text-lg leading-relaxed text-slate-400">
            Smart Money Desk teaches the unglamorous 90% that actually decides your P&L —
            <strong className="font-medium text-slate-200"> risk management, position sizing,
            execution psychology</strong> and data-driven setups built on Price Action,
            VWAP, Moving Averages and real Options mechanics.
          </p>

          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link
              href="/courses"
              data-cta="hero_primary"
              className="group inline-flex items-center justify-center gap-2 rounded-xl
                bg-emerald-500 px-6 py-3.5 font-semibold text-[#05080F] shadow-[0_0_0_1px_rgba(16,185,129,.25),0_10px_40px_-10px_rgba(16,185,129,.55)]
                transition hover:-translate-y-0.5 hover:bg-emerald-400
                focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-400"
            >
              Explore Courses
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Link>

            <Link
              href="#free-resources"
              data-cta="hero_secondary"
              className="inline-flex items-center justify-center gap-2 rounded-xl border
                border-white/10 bg-white/[0.03] px-6 py-3.5 font-semibold text-slate-200
                transition hover:border-emerald-500/40 hover:bg-emerald-500/[0.07] hover:text-white"
            >
              <Download className="h-4 w-4 text-emerald-400" />
              Free Trading Resources
            </Link>
          </div>

          <ul className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-3 text-[13px] text-slate-500">
            {["Lifetime access + free updates",
              "7-day no-questions refund",
              "Education only — never tips"].map((t) => (
              <li key={t} className="inline-flex items-center gap-2">
                <ShieldCheck className="h-4 w-4 text-emerald-500" /> {t}
              </li>
            ))}
          </ul>
        </div>

        {/* ---------- Trust visual ---------- */}
        <div className="lg:col-span-6">
          <div className="relative">
            <div className="absolute -inset-4 rounded-[28px] bg-gradient-to-tr
              from-emerald-500/20 via-transparent to-sky-500/20 blur-2xl" />
            <LiveChartPreview />   {/* client component, dynamically imported */}
          </div>
        </div>
      </div>
    </section>
  );
}

// components/marketing/course-card.tsx
"use client";

import Link from "next/link";
import Image from "next/image";
import { Clock, Layers, Star, PlayCircle } from "lucide-react";
import { cn } from "@/lib/utils";

export type Level = "Foundation" | "Intermediate" | "Advanced";

export interface CourseCardProps {
  slug: string;
  title: string;
  outcome: string;
  level: Level;
  modules: number;
  hours: number;
  rating: number;
  priceInr: number;
  mrpInr?: number;
  thumbnail: string;
  /** 0–100. When defined, card renders the enrolled/progress state. */
  progress?: number;
  onEnroll?: (slug: string) => void;
}

const LEVEL_STYLES: Record<Level, string> = {
  Foundation:   "bg-emerald-500/10 text-emerald-400 ring-emerald-500/20",
  Intermediate: "bg-sky-500/10 text-sky-400 ring-sky-500/20",
  Advanced:     "bg-violet-500/10 text-violet-400 ring-violet-500/20",
};

const inr = (n: number) =>
  new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR",
    maximumFractionDigits: 0 }).format(n);

export function CourseCard({
  slug, title, outcome, level, modules, hours, rating,
  priceInr, mrpInr, thumbnail, progress, onEnroll,
}: CourseCardProps) {
  const isEnrolled = typeof progress === "number";
  const discount = mrpInr ? Math.round(((mrpInr - priceInr) / mrpInr) * 100) : 0;

  return (
    <article
      className="group relative flex w-[320px] shrink-0 snap-center flex-col overflow-hidden
        rounded-2xl border border-white/[0.07] bg-gradient-to-b from-[#0B1220] to-[#070C16]
        transition-all duration-300 hover:-translate-y-1.5 hover:border-emerald-500/30
        hover:shadow-[0_25px_60px_-25px_rgba(16,185,129,.35)] sm:w-auto"
    >
      {/* thumbnail */}
      <div className="relative aspect-[16/9] overflow-hidden">
        <Image src={thumbnail} alt={title} fill sizes="340px"
          className="object-cover transition-transform duration-500 group-hover:scale-105" />
        <div className="absolute inset-0 bg-gradient-to-t from-[#070C16] via-transparent" />
        <span className={cn("absolute left-3 top-3 rounded-md px-2 py-1 text-[10px]
          font-semibold uppercase tracking-wider ring-1", LEVEL_STYLES[level])}>
          {level}
        </span>
        {discount > 0 && !isEnrolled && (
          <span className="absolute right-3 top-3 rounded-md bg-amber-400 px-2 py-1
            text-[10px] font-bold text-[#1a1205]">{discount}% OFF</span>
        )}
      </div>

      {/* body */}
      <div className="flex flex-1 flex-col p-5">
        <h3 className="font-display text-[17px] font-bold leading-snug text-white">{title}</h3>
        <p className="mt-2 line-clamp-2 text-[13.5px] leading-relaxed text-slate-400">{outcome}</p>

        <div className="mt-4 flex items-center gap-4 text-[12px] text-slate-500">
          <span className="inline-flex items-center gap-1.5"><Layers className="h-3.5 w-3.5"/>{modules} modules</span>
          <span className="inline-flex items-center gap-1.5"><Clock className="h-3.5 w-3.5"/>{hours}h</span>
          <span className="inline-flex items-center gap-1.5 text-amber-400">
            <Star className="h-3.5 w-3.5 fill-current"/>{rating.toFixed(1)}</span>
        </div>

        {isEnrolled && (
          <div className="mt-4">
            <div className="flex justify-between text-[11px] text-slate-500">
              <span>Progress</span><span className="font-mono text-emerald-400">{progress}%</span>
            </div>
            <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-[#05080F]">
              <div className="h-full rounded-full bg-gradient-to-r from-emerald-600 to-emerald-400
                transition-[width] duration-700" style={{ width: `${progress}%` }} />
            </div>
          </div>
        )}

        {/* footer: price + CTA */}
        <div className="mt-5 flex items-end justify-between border-t border-white/[0.06] pt-4">
          {isEnrolled ? (
            <span className="text-[13px] font-medium text-emerald-400">Enrolled</span>
          ) : (
            <div>
              <p className="font-display text-xl font-extrabold text-white">{inr(priceInr)}</p>
              {mrpInr && <p className="text-[12px] text-slate-600 line-through">{inr(mrpInr)}</p>}
            </div>
          )}

          {isEnrolled ? (
            <Link href={`/dashboard/courses/${slug}`}
              className="inline-flex items-center gap-1.5 rounded-xl border border-emerald-500/30
                bg-emerald-500/10 px-4 py-2.5 text-[13px] font-semibold text-emerald-400
                transition hover:bg-emerald-500/20">
              <PlayCircle className="h-4 w-4" /> Continue
            </Link>
          ) : (
            <button type="button" onClick={() => onEnroll?.(slug)}
              aria-label={`Enroll in ${title}`}
              className="rounded-xl bg-emerald-500 px-4 py-2.5 text-[13px] font-semibold
                text-[#05080F] shadow-[0_10px_30px_-12px_rgba(16,185,129,.8)]
                transition hover:bg-emerald-400 active:scale-[.97]">
              Enroll Now
            </button>
          )}
        </div>
      </div>
    </article>
  );
}

import crypto from "crypto";
import { NextResponse } from "next/server";
import { supabaseAdmin } from "@/lib/supabase/admin";

export const runtime = "nodejs";

export async function POST(req: Request) {
  const raw = await req.text();
  const signature = req.headers.get("x-razorpay-signature") ?? "";

  const expected = crypto
    .createHmac("sha256", process.env.RAZORPAY_WEBHOOK_SECRET!)
    .update(raw).digest("hex");

  if (!crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(signature)))
    return new NextResponse("Invalid signature", { status: 400 });

  const event = JSON.parse(raw);
  if (event.event !== "payment.captured") return NextResponse.json({ ok: true });

  const { id: paymentId, notes } = event.payload.payment.entity;

  // Idempotent upsert — replays can never double-grant access.
  const { error } = await supabaseAdmin()
    .from("enrollments")
    .upsert({
      user_id:   notes.user_id,
      course_id: notes.course_id,
      order_id:  paymentId,
      status:    "active",
      source:    "razorpay",
    }, { onConflict: "user_id,course_id" });

  if (error) return new NextResponse("DB error", { status: 500 });

  // fire-and-forget: welcome email + PostHog purchase event
  return NextResponse.json({ ok: true });
}