"use client";

import { Button, Card } from "@mcpengine/ui";
import Link from "next/link";

const templates = [
  { name: "Trello", desc: "Project management boards, cards, and automation", icon: "📋" },
  { name: "Zendesk", desc: "Support tickets, agents, and customer satisfaction", icon: "🎧" },
  { name: "Mailchimp", desc: "Email campaigns, audiences, and analytics", icon: "📧" },
  { name: "Stripe", desc: "Payments, subscriptions, and invoicing", icon: "💳" },
  { name: "HubSpot", desc: "CRM contacts, deals, and marketing automation", icon: "🔶" },
  { name: "Shopify", desc: "Products, orders, and storefront management", icon: "🛍️" },
];

const pricingTiers = [
  {
    name: "Free",
    price: "$0",
    period: "forever",
    features: ["3 MCP servers", "Local development only", "Community templates", "CLI access"],
    cta: "Get Started Free",
    popular: false,
  },
  {
    name: "Pro",
    price: "$29",
    period: "/mo",
    features: ["20 MCP servers", "Cloud hosting included", "MCP Apps designer", "npm publish", "Priority support"],
    cta: "Start Pro Trial",
    popular: true,
  },
  {
    name: "Team",
    price: "$79",
    period: "/mo + $15/seat",
    features: ["Unlimited servers", "50K requests/day", "Team collaboration", "Shared templates", "Role-based access"],
    cta: "Start Team Trial",
    popular: false,
  },
  {
    name: "Enterprise",
    price: "$500+",
    period: "/mo",
    features: ["SSO / SAML", "Audit logs", "99.9% SLA", "On-premise deployment", "Dedicated support"],
    cta: "Contact Sales",
    popular: false,
  },
];

export default function MarketingPage() {
  return (
    <main className="min-h-screen bg-gray-950 text-white">
      {/* ─── HERO ─── */}
      <section className="relative overflow-hidden pt-32 pb-24 px-6">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900/20 via-gray-950 to-gray-950" />
        <div className="relative mx-auto max-w-5xl text-center">
          <h1 className="text-5xl md:text-6xl font-extrabold leading-tight tracking-tight">
            <span className="bg-gradient-to-r from-indigo-400 to-emerald-400 bg-clip-text text-transparent">
              Build MCP Servers Visually.
            </span>
            <br />
            <span className="bg-gradient-to-r from-indigo-400 to-emerald-400 bg-clip-text text-transparent">
              Ship AI Apps Instantly.
            </span>
          </h1>
          <p className="mt-6 text-xl text-gray-400 max-w-2xl mx-auto">
            37 production templates. Drag-and-drop builder. Zero boilerplate.
            From idea to deployed MCP server in 60&nbsp;seconds.
          </p>
          <div className="mt-10 flex items-center justify-center gap-4 flex-wrap">
            <Link href="/dashboard">
              <Button size="lg" className="bg-indigo-600 hover:bg-indigo-500 text-white px-8 py-3 rounded-xl text-lg font-semibold">
                Get Started Free
              </Button>
            </Link>
            <Button
              size="lg"
              variant="ghost"
              className="border border-gray-700 text-gray-300 hover:text-white hover:border-gray-500 px-8 py-3 rounded-xl text-lg font-semibold"
            >
              <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fillRule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
                  clipRule="evenodd"
                />
              </svg>
              Watch Demo
            </Button>
          </div>
          {/* Product mockup placeholder */}
          <div className="mt-16 mx-auto max-w-4xl rounded-2xl border border-gray-700 bg-gray-900 aspect-video flex items-center justify-center">
            <div className="text-center text-gray-600">
              <svg className="w-16 h-16 mx-auto mb-3 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
              <p className="text-sm">MCPEngine Studio — Visual Builder</p>
            </div>
          </div>
        </div>
      </section>

      {/* ─── VALUE PROPS ─── */}
      <section className="py-24 px-6">
        <div className="mx-auto max-w-5xl grid grid-cols-1 md:grid-cols-3 gap-8">
          {[
            {
              icon: (
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                </svg>
              ),
              title: "Upload Any Spec",
              desc: "Drop in an OpenAPI spec, Swagger file, or paste a URL. We parse it instantly and map every endpoint.",
            },
            {
              icon: (
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 8a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zm10 0a1 1 0 011-1h4a1 1 0 011 1v6a1 1 0 01-1 1h-4a1 1 0 01-1-1v-6z" />
                </svg>
              ),
              title: "Customize Visually",
              desc: "Drag-and-drop tools, edit schemas, configure auth — all in a visual builder. No YAML wrangling.",
            },
            {
              icon: (
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
                </svg>
              ),
              title: "Deploy Anywhere",
              desc: "One-click deploy to Cloudflare Workers, npm, or Docker. Production-ready with auth, rate limiting, and monitoring.",
            },
          ].map((card) => (
            <Card key={card.title} className="bg-gray-900 border-gray-800 p-8 rounded-2xl hover:border-gray-700 transition-colors">
              <div className="w-12 h-12 rounded-full bg-indigo-600/20 flex items-center justify-center mb-5">
                {card.icon}
              </div>
              <h3 className="text-xl font-bold text-white mb-2">{card.title}</h3>
              <p className="text-gray-400 leading-relaxed">{card.desc}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* ─── SOCIAL PROOF ─── */}
      <section className="py-16 px-6 border-y border-gray-800">
        <div className="mx-auto max-w-4xl">
          <p className="text-center text-sm font-medium text-gray-500 uppercase tracking-widest mb-8">
            Built on
          </p>
          <div className="flex items-center justify-center gap-12 flex-wrap">
            {["MCP Protocol", "Anthropic Claude", "Cloudflare Workers"].map((name) => (
              <div key={name} className="flex items-center gap-2 text-gray-400 hover:text-gray-300 transition-colors">
                <div className="w-8 h-8 rounded bg-gray-800 flex items-center justify-center text-xs font-bold">
                  {name.charAt(0)}
                </div>
                <span className="text-sm font-medium">{name}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── TEMPLATE SHOWCASE ─── */}
      <section className="py-24 px-6">
        <div className="mx-auto max-w-5xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-extrabold text-white">
              37 Production Templates
            </h2>
            <p className="mt-3 text-gray-400 text-lg">
              Pre-built MCP servers for the tools your team already uses.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {templates.map((t) => (
              <Card
                key={t.name}
                className="bg-gray-900 border-gray-800 p-6 rounded-xl hover:border-indigo-500/50 transition-colors cursor-pointer group"
              >
                <div className="flex items-start gap-4">
                  <span className="text-3xl">{t.icon}</span>
                  <div>
                    <h3 className="text-lg font-bold text-white group-hover:text-indigo-400 transition-colors">
                      {t.name}
                    </h3>
                    <p className="text-sm text-gray-400 mt-1">{t.desc}</p>
                  </div>
                </div>
              </Card>
            ))}
          </div>
          <div className="text-center mt-10">
            <Link
              href="/templates"
              className="text-indigo-400 hover:text-indigo-300 font-medium text-lg transition-colors"
            >
              Browse All Templates →
            </Link>
          </div>
        </div>
      </section>

      {/* ─── PRICING ─── */}
      <section className="py-24 px-6 bg-gray-900/50">
        <div className="mx-auto max-w-6xl">
          <div className="text-center mb-14">
            <h2 className="text-3xl md:text-4xl font-extrabold text-white">
              Simple, Transparent Pricing
            </h2>
            <p className="mt-3 text-gray-400 text-lg">
              Start free. Scale when you&apos;re ready.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {pricingTiers.map((tier) => (
              <Card
                key={tier.name}
                className={`relative bg-gray-900 border rounded-2xl p-8 flex flex-col ${
                  tier.popular
                    ? "border-indigo-500 ring-1 ring-indigo-500/50"
                    : "border-gray-800"
                }`}
              >
                {tier.popular && (
                  <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-indigo-600 text-white text-xs font-bold px-4 py-1 rounded-full">
                    Most Popular
                  </span>
                )}
                <h3 className="text-xl font-bold text-white">{tier.name}</h3>
                <div className="mt-4 mb-6">
                  <span className="text-4xl font-extrabold text-white">{tier.price}</span>
                  <span className="text-gray-400 text-sm ml-1">{tier.period}</span>
                </div>
                <ul className="space-y-3 flex-1 mb-8">
                  {tier.features.map((f) => (
                    <li key={f} className="flex items-start gap-2 text-sm text-gray-300">
                      <svg className="w-5 h-5 text-emerald-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                      {f}
                    </li>
                  ))}
                </ul>
                <Button
                  className={`w-full rounded-xl py-2.5 font-semibold ${
                    tier.popular
                      ? "bg-indigo-600 hover:bg-indigo-500 text-white"
                      : "bg-gray-800 hover:bg-gray-700 text-gray-300"
                  }`}
                >
                  {tier.cta}
                </Button>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ─── FINAL CTA ─── */}
      <section className="py-24 px-6">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl md:text-4xl font-extrabold text-white">
            Ready to build?
          </h2>
          <p className="mt-4 text-gray-400 text-lg">
            Join thousands of developers building MCP servers with MCPEngine.
          </p>
          <div className="mt-8 flex items-center gap-3 max-w-md mx-auto">
            <input
              type="email"
              placeholder="you@company.com"
              className="flex-1 bg-gray-900 border border-gray-700 rounded-xl px-5 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
            />
            <Button className="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-xl font-semibold whitespace-nowrap">
              Get Started
            </Button>
          </div>
          <p className="mt-4 text-sm text-gray-500">
            Free forever. No credit card required.
          </p>
        </div>
      </section>

      {/* ─── FOOTER ─── */}
      <footer className="border-t border-gray-800 py-16 px-6">
        <div className="mx-auto max-w-5xl grid grid-cols-2 md:grid-cols-4 gap-8">
          <div>
            <h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Product</h4>
            <ul className="space-y-2">
              {["Features", "Templates", "Pricing", "Changelog"].map((l) => (
                <li key={l}>
                  <Link href="#" className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
                    {l}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Resources</h4>
            <ul className="space-y-2">
              {["Documentation", "API Reference", "Blog", "Community"].map((l) => (
                <li key={l}>
                  <Link href="#" className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
                    {l}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Company</h4>
            <ul className="space-y-2">
              {["About", "Careers", "Contact", "Partners"].map((l) => (
                <li key={l}>
                  <Link href="#" className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
                    {l}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Legal</h4>
            <ul className="space-y-2">
              {["Privacy", "Terms", "Security", "GDPR"].map((l) => (
                <li key={l}>
                  <Link href="#" className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
                    {l}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <div className="mt-12 pt-8 border-t border-gray-800 text-center">
          <p className="text-sm text-gray-500">
            © {new Date().getFullYear()} MCPEngine. All rights reserved.
          </p>
        </div>
      </footer>
    </main>
  );
}
