"use client";

import Link from "next/link";
import FadeIn from "@/components/FadeIn";

const dimensions = [
  { name: "Value",         methods: ["Sector Z-Score Normalization"] },
  { name: "Growth",        methods: ["Revenue & Earnings Trend Analysis"] },
  { name: "Momentum",      methods: ["Short/Long-Term Trend Divergence"] },
  { name: "Quality",       methods: ["Piotroski F-Score"] },
  { name: "Profitability", methods: ["Sloan Accruals Ratio"] },
  { name: "Sentiment",     methods: ["VADER NLP"] },
  { name: "Analyst",       methods: ["Analyst Consensus Normalization"] },
  { name: "Risk",          methods: ["FINRA RegSHO Short-Volume Analysis"] },
];

const profiles = [
  "Balanced",
  "High Growth",
  "Value / Defensive",
  "Momentum / Swing",
  "Dividend Income",
  "Turnaround / Contrarian",
  "Early-Stage",
];

const dataSources = [
  "SEC EDGAR XBRL",
  "FINRA RegSHO",
  "13F Hedge Fund Filings",
  "SEC Form 4 Insider Transactions",
  "Live Analyst Consensus",
];

const pricingTiers = [
  {
    name: "Weekly",
    price: "$6",
    period: "7-day access",
    sub: null,
    discount: null,
    popular: false,
    priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_WEEKLY ?? "",
  },
  {
    name: "Monthly",
    price: "$19",
    period: "30-day access",
    sub: null,
    discount: null,
    popular: false,
    priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_MONTHLY ?? "",
  },
  {
    name: "Annual",
    price: "$149",
    period: "12-month access",
    sub: "$12.42 / mo",
    discount: "Save 35%",
    popular: true,
    priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_ANNUAL ?? "",
  },
  {
    name: "Lifetime",
    price: "$299",
    period: "Never expires",
    sub: null,
    discount: null,
    popular: false,
    priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_LIFETIME ?? "",
  },
];

export default function UIT() {
  const handleBuy = async (priceId: string) => {
    if (!priceId || priceId.startsWith("STRIPE_PRICE_ID") || priceId.startsWith("price_PLACEHOLDER")) {
      alert("Purchase flow coming soon. Check back shortly.");
      return;
    }
    try {
      const res = await fetch("/api/checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ priceId }),
      });
      const data = await res.json();
      if (data.url) {
        window.location.href = data.url;
      } else {
        alert("Something went wrong. Please try again or contact support@verimundsolutions.com.");
      }
    } catch {
      alert("Something went wrong. Please try again or contact support@verimundsolutions.com.");
    }
  };

  return (
    <>
      {/* ── Hero ─────────────────────────────────────────────────────────── */}
      <section className="relative min-h-[60vh] flex flex-col items-center justify-center text-center px-6 pt-24 overflow-hidden">
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            backgroundImage:
              "linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background:
              "radial-gradient(ellipse 70% 50% at 50% 30%, rgba(74,222,128,0.04) 0%, transparent 70%)",
          }}
        />

        <div className="relative z-10 max-w-2xl mx-auto">
          <p
            className="text-xs font-semibold uppercase tracking-widest mb-4"
            style={{ color: "#4ade80", letterSpacing: "0.2em" }}
          >
            Product
          </p>
          <h1
            className="text-5xl md:text-6xl font-semibold mb-5"
            style={{ letterSpacing: "-0.03em" }}
          >
            UIT
          </h1>
          <p className="text-base md:text-lg mb-8" style={{ color: "#888888", lineHeight: 1.7 }}>
            A multi-dimensional stock screener that evaluates every major US-listed
            equity across 8 scoring dimensions — weighted automatically to match
            your investor profile.
          </p>
          <a
            href="#pricing"
            className="inline-block px-6 py-3 text-sm font-medium rounded-sm transition-all duration-200"
            style={{ background: "#ffffff", color: "#000000" }}
            onMouseEnter={(e) => (e.currentTarget.style.background = "#e0e0e0")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "#ffffff")}
          >
            Get Started
          </a>
        </div>
      </section>

      {/* ── Evaluation Methods ───────────────────────────────────────────── */}
      <section className="py-24 px-6 border-t" style={{ borderColor: "#111111" }}>
        <div className="max-w-5xl mx-auto">
          <FadeIn>
            <p
              className="text-xs font-semibold uppercase tracking-widest mb-3 text-center"
              style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
            >
              Methodology
            </p>
            <h2
              className="text-2xl md:text-3xl font-semibold text-center mb-3"
              style={{ letterSpacing: "-0.02em" }}
            >
              8-Dimension Composite Score
            </h2>
            <p className="text-sm text-center mb-12" style={{ color: "#888888" }}>
              Every stock is scored 0–100 independently. Weights shift automatically based on your selected investor profile.
            </p>
          </FadeIn>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {dimensions.map((d, i) => (
              <FadeIn key={d.name} delay={i * 0.05}>
                <div
                  className="p-5 rounded-sm border h-full"
                  style={{ border: "1px solid #222222", background: "#111111" }}
                >
                  <p className="text-sm font-semibold mb-3" style={{ color: "#ffffff" }}>
                    {d.name}
                  </p>
                  <div className="flex flex-col gap-1">
                    {d.methods.map((m) => (
                      <p key={m} className="text-xs" style={{ color: "#888888" }}>
                        {m}
                      </p>
                    ))}
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>

          {/* Investor profiles */}
          <FadeIn delay={0.2}>
            <div className="mt-10 p-6 rounded-sm border" style={{ border: "1px solid #222222", background: "#111111" }}>
              <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{ color: "#3a3a3a", letterSpacing: "0.15em" }}>
                Investor Profiles
              </p>
              <div className="flex flex-wrap gap-2">
                {profiles.map((p) => (
                  <span
                    key={p}
                    className="text-xs px-3 py-1 rounded-full border"
                    style={{ border: "1px solid #222222", color: "#888888" }}
                  >
                    {p}
                  </span>
                ))}
              </div>
            </div>
          </FadeIn>

          {/* Data sources */}
          <FadeIn delay={0.25}>
            <div className="mt-4 p-6 rounded-sm border" style={{ border: "1px solid #222222", background: "#111111" }}>
              <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{ color: "#3a3a3a", letterSpacing: "0.15em" }}>
                Data Sources
              </p>
              <div className="flex flex-wrap gap-2">
                {dataSources.map((s) => (
                  <span
                    key={s}
                    className="text-xs px-3 py-1 rounded-full border"
                    style={{ border: "1px solid #1a1a1a", color: "#4ade80", background: "#4ade8010" }}
                  >
                    {s}
                  </span>
                ))}
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* ── Pricing ──────────────────────────────────────────────────────── */}
      <section id="pricing" className="py-24 px-6 border-t" style={{ borderColor: "#111111" }}>
        <div className="max-w-4xl mx-auto">
          <FadeIn>
            <p
              className="text-xs font-semibold uppercase tracking-widest mb-3 text-center"
              style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
            >
              Pricing
            </p>
            <h2
              className="text-2xl md:text-3xl font-semibold text-center mb-3"
              style={{ letterSpacing: "-0.02em" }}
            >
              One-time payment. No subscription required.
            </h2>
            <p className="text-sm text-center mb-12" style={{ color: "#888888" }}>
              Purchase a license key. Your key is emailed to you immediately after checkout.
            </p>
          </FadeIn>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {pricingTiers.map((tier, i) => (
              <FadeIn key={tier.name} delay={i * 0.08}>
                <div
                  className="relative p-6 rounded-sm border flex flex-col h-full"
                  style={{
                    border: tier.popular ? "1px solid #ffffff" : "1px solid #222222",
                    background: tier.popular ? "#181818" : "#111111",
                  }}
                >
                  {tier.popular && (
                    <div
                      className="absolute -top-px left-1/2 -translate-x-1/2 px-3 py-0.5 text-xs font-semibold rounded-b-sm whitespace-nowrap"
                      style={{ background: "#ffffff", color: "#000000" }}
                    >
                      Most Popular
                    </div>
                  )}

                  {/* Header */}
                  <div className="flex items-center justify-between mb-2 mt-1">
                    <p className="text-sm font-semibold">{tier.name}</p>
                    {tier.discount && (
                      <span
                        className="text-xs px-2 py-0.5 rounded-full font-semibold"
                        style={{ background: "#4ade8018", color: "#4ade80", border: "1px solid #4ade8030" }}
                      >
                        {tier.discount}
                      </span>
                    )}
                  </div>

                  {/* Price */}
                  <p className="text-4xl font-semibold mb-0.5" style={{ letterSpacing: "-0.03em" }}>
                    {tier.price}
                  </p>
                  {tier.sub && (
                    <p className="text-xs mb-0.5" style={{ color: "#4ade80" }}>
                      {tier.sub}
                    </p>
                  )}
                  <p className="text-xs mb-6" style={{ color: "#888888" }}>
                    {tier.period}
                  </p>

                  {/* Features */}
                  <ul className="flex flex-col gap-2 mb-6 flex-1">
                    {[
                      "Full screener access",
                      "All 7 investor profiles",
                      "Hedge fund & insider data",
                      "License key via email",
                    ].map((f) => (
                      <li key={f} className="text-xs flex items-center gap-2" style={{ color: "#888888" }}>
                        <span style={{ color: "#4ade80" }}>✓</span> {f}
                      </li>
                    ))}
                  </ul>

                  {/* CTA */}
                  <button
                    onClick={() => handleBuy(tier.priceId)}
                    className="w-full py-2.5 text-sm font-medium rounded-sm transition-all duration-200"
                    style={
                      tier.popular
                        ? { background: "#ffffff", color: "#000000" }
                        : { border: "1px solid #222222", color: "#ffffff", background: "transparent" }
                    }
                    onMouseEnter={(e) => {
                      if (tier.popular) {
                        e.currentTarget.style.background = "#e0e0e0";
                      } else {
                        e.currentTarget.style.borderColor = "#ffffff";
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (tier.popular) {
                        e.currentTarget.style.background = "#ffffff";
                      } else {
                        e.currentTarget.style.borderColor = "#222222";
                      }
                    }}
                  >
                    Buy Now
                  </button>
                </div>
              </FadeIn>
            ))}
          </div>

          <FadeIn delay={0.35}>
            <p className="text-xs text-center mt-8" style={{ color: "#3a3a3a" }}>
              Powered by Stripe. Your payment information is never stored on our servers.
            </p>
          </FadeIn>

          {/* ── Active development strip ─────────────────────────────────── */}
          <FadeIn delay={0.4}>
            <div
              className="mt-8 flex items-start sm:items-center gap-4 px-6 py-5 rounded-sm border"
              style={{ border: "1px solid #1a1a1a", background: "#0f0f0f" }}
            >
              <div className="flex-shrink-0 flex items-center gap-2 pt-0.5 sm:pt-0">
                <span
                  className="relative flex h-2 w-2"
                >
                  <span
                    className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-60"
                    style={{ background: "#4ade80" }}
                  />
                  <span
                    className="relative inline-flex rounded-full h-2 w-2"
                    style={{ background: "#4ade80" }}
                  />
                </span>
                <span className="text-xs font-semibold whitespace-nowrap" style={{ color: "#4ade80" }}>
                  Actively developed
                </span>
              </div>
              <p className="text-xs leading-relaxed" style={{ color: "#888888" }}>
                UIT is updated regularly with new scoring signals, data sources, and improvements.
                All updates are included with every license — what you buy today keeps getting better.
              </p>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* ── Discord ──────────────────────────────────────────────────────── */}
      <section className="py-20 px-6 border-t" style={{ borderColor: "#111111" }}>
        <FadeIn>
          <div
            className="max-w-3xl mx-auto rounded-sm border p-10 text-center"
            style={{ border: "1px solid #222222", background: "#111111" }}
          >
            <p
              className="text-xs font-semibold uppercase tracking-widest mb-4"
              style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
            >
              Community
            </p>
            <h3 className="text-2xl font-semibold mb-3" style={{ letterSpacing: "-0.02em" }}>
              Join the UIT Discord
            </h3>
            <p className="text-sm mb-7" style={{ color: "#888888" }}>
              Get support, announcements, and connect with other UIT users.
            </p>
            <a
              href="DISCORD_INVITE_LINK"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block px-6 py-3 text-sm font-medium rounded-sm border transition-all duration-200"
              style={{ border: "1px solid #222222", color: "#ffffff" }}
              onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
              onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#222222")}
            >
              Join Server
            </a>
          </div>
        </FadeIn>
      </section>
    </>
  );
}