"use client";

import React from "react";
import Link from "next/link";
import { 
  PackageCheck, 
  ShieldCheck, 
  Clock, 
  CheckCircle2, 
  Zap, 
  HelpCircle, 
  ArrowRight, 
  MessageSquare,
  Sparkles,
  Calculator
} from "lucide-react";
import { SectionCorners } from "@/components/ui/SectionCorner";
import { ShinyButton } from "@/components/ui/ShinyButton";
import { PackagesSection } from "@/components/ui/PackagesSection";
import { QuoteCalculator } from "@/components/ui/QuoteCalculator";
import { BlinkingSquares } from "@/components/ui/BlinkingSquares";
import { useAppStore } from "@/lib/store";

export default function DedicatedPackagesPage() {
  const { siteSettings, t, formatPrice } = useAppStore();

  const assurances = [
    {
      title: "100% Fixed-Price Guarantee",
      desc: "No hidden surprise costs or hourly billing creep. Scope is locked into milestones with fixed delivery dates.",
      icon: ShieldCheck,
    },
    {
      title: "Milestone-Based Escrow / Tranches",
      desc: "Split payments into 33% kickoff, 33% staging milestone verification, and 34% final production deployment.",
      icon: Clock,
    },
    {
      title: "30-90 Day SLA Bug Warranty",
      desc: "Every package includes post-launch technical warranty covering bug fixes, edge crashes, and runtime patching.",
      icon: Zap,
    },
    {
      title: "Complete Code & IP Ownership",
      desc: "Full source code, GitHub repository access, Figma design tokens, and database credentials transferred directly to you.",
      icon: CheckCircle2,
    },
  ];

  const faqs = [
    {
      q: "What payment methods are supported for Pakistani and International clients?",
      a: "We accept Pakistani local bank transfers (IBFT), Raast P2M, JazzCash, Nayapay, Sadapay, and international SWIFT wire transfers or Payoneer / Wise.",
    },
    {
      q: "Can I customize a package with additional pages, mobile apps, or custom APIs?",
      a: "Yes! Use our interactive Sprint Cost Calculator below, or contact our engineering leads directly to customize a tailor-made sprint scope.",
    },
    {
      q: "How soon can engineering pods start after deposit?",
      a: "Pods initialize within 24 to 48 hours. You will receive an invitation to our private staging environment and live project dashboard.",
    },
    {
      q: "Do you offer post-launch maintenance and dedicated engineers?",
      a: `Yes, we offer retainer packages starting from ${formatPrice("PKR 35k/month")} for continuous feature updates, security patches, and cloud uptime monitoring.`,
    },
  ];

  return (
    <div className="mx-auto flex min-h-screen w-[calc(100%-1.5rem)] max-w-[1440px] flex-col border-x border-border sm:w-[calc(100%-2.5rem)] lg:w-[calc(100%-3rem)] bg-background text-foreground font-sans">
      {/* 1. Header Hero Banner */}
      <section className="relative border-b border-border p-6 sm:p-12 lg:p-16 overflow-hidden">
        <SectionCorners />
        <BlinkingSquares
          squareSize={20}
          gap={8}
          color="#024d37"
          maxOpacity={0.35}
          minOpacity={0.03}
          blinkProbability={0.02}
          className="opacity-50"
        />

        <div className="relative z-10 max-w-3xl space-y-4">
          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-4 py-1.5 text-xs font-mono text-foreground">
            <span className="h-2 w-2 rounded-full bg-[#024d37] animate-pulse" />
            {t("pkg.badge")}
          </div>

          <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
            {t("pkg.title")}
          </h1>

          <p className="text-sm sm:text-base text-muted-foreground leading-relaxed">
            {t("pkg.desc")}
          </p>

          <div className="flex flex-wrap items-center gap-3 pt-2">
            <ShinyButton href="/contact" size="md" showArrow>
              Request Custom Proposal
            </ShinyButton>
            <a
              href="#calculator"
              className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 font-mono text-xs font-semibold text-foreground hover:border-[#024d37] transition-all"
            >
              <Calculator className="h-4 w-4 text-[#024d37]" />
              {t("pkg.btn_calc")}
            </a>
          </div>
        </div>
      </section>

      {/* 2. Core Packages Tier Grid */}
      <section id="tiers" className="relative border-b border-border p-6 sm:p-12 lg:p-16 space-y-8">
        <SectionCorners />

        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-border pb-4 font-mono text-xs">
          <div>
            <span className="text-[#024d37] font-semibold">// SELECT DOMAIN SPECIALIZATION</span>
            <h2 className="text-2xl font-bold font-sans text-foreground mt-1">Tiered Service Packages</h2>
          </div>
          <span className="text-muted-foreground">Fixed timelines • Milestone payments</span>
        </div>

        {/* Dynamic packages section */}
        <PackagesSection />
      </section>

      {/* 3. Interactive Custom Sprint Calculator */}
      <section id="calculator" className="relative border-b border-border p-6 sm:p-12 lg:p-16 space-y-8 bg-muted/20">
        <SectionCorners />

        <div className="max-w-3xl space-y-2">
          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1 font-mono text-xs text-[#024d37] font-semibold">
            <Calculator className="h-3.5 w-3.5" />
            // BESPOKE ESTIMATOR
          </div>
          <h2 className="text-3xl font-bold tracking-tight text-foreground">
            Custom Sprint & Technology Scope Calculator
          </h2>
          <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
            Need a hybrid mobile app, custom POS thermal driver, or multi-tenant database? Configure your parameters below for an instant preliminary estimate.
          </p>
        </div>

        <QuoteCalculator />
      </section>

      {/* 4. Engineering Guarantees & Assurances */}
      <section className="relative border-b border-border p-6 sm:p-12 lg:p-16 space-y-8">
        <SectionCorners />

        <div className="border-b border-border pb-4 font-mono text-xs">
          <span className="text-[#024d37] font-semibold">// STANDARDS & DELIVERY CONTRACT</span>
          <h2 className="text-2xl font-bold font-sans text-foreground mt-1">Why Companies Choose AetherSoft</h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {assurances.map((item, idx) => {
            const Icon = item.icon;
            return (
              <div
                key={item.title}
                className="rounded-2xl border border-border bg-card p-6 space-y-3 hover:border-[#024d37]/50 transition-all shadow-xs"
              >
                <div className="h-10 w-10 rounded-xl bg-[#024d37]/10 border border-[#024d37]/30 flex items-center justify-center text-[#024d37]">
                  <Icon className="h-5 w-5" />
                </div>
                <h3 className="font-bold text-base text-foreground">{item.title}</h3>
                <p className="text-xs text-muted-foreground leading-relaxed">{item.desc}</p>
              </div>
            );
          })}
        </div>
      </section>

      {/* 5. Frequently Asked Questions */}
      <section className="relative border-b border-border p-6 sm:p-12 lg:p-16 space-y-8">
        <SectionCorners />

        <div className="max-w-2xl space-y-2">
          <span className="font-mono text-xs text-[#024d37] font-semibold uppercase">// FAQ & BILLING CLARITY</span>
          <h2 className="text-3xl font-bold tracking-tight text-foreground">Frequently Asked Questions</h2>
          <p className="text-xs text-muted-foreground">Answers to common billing, delivery, and procurement questions.</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {faqs.map((faq, idx) => (
            <div
              key={idx}
              className="rounded-2xl border border-border bg-card p-6 space-y-2 hover:border-[#024d37]/40 transition-all"
            >
              <h4 className="font-bold text-sm text-foreground flex items-start gap-2">
                <span className="text-[#024d37] font-mono text-xs">Q{idx + 1}.</span>
                <span>{faq.q}</span>
              </h4>
              <p className="text-xs text-muted-foreground leading-relaxed pl-6">
                {faq.a}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* 6. Call to Action Banner */}
      <section className="relative p-8 sm:p-14 lg:p-16 text-center bg-card">
        <SectionCorners />

        <div className="max-w-2xl mx-auto space-y-6">
          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-4 py-1.5 text-xs font-mono text-foreground">
            <span className="h-2 w-2 rounded-full bg-[#024d37] animate-pulse" />
            DIRECT TECHNICAL CONSULTATION
          </div>

          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-foreground">
            Have a custom software requirement?
          </h2>

          <p className="text-sm text-muted-foreground leading-relaxed">
            Talk directly to our Solutions Architects to scope requirements, draft architecture diagrams, and lock in milestone delivery dates.
          </p>

          <div className="pt-2 flex flex-wrap items-center justify-center gap-4">
            <ShinyButton href="/contact" size="lg" showArrow>
              Schedule Scoping Call
            </ShinyButton>
            <Link
              href="/portfolio"
              className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-6 py-3.5 font-mono text-xs font-semibold uppercase tracking-wider text-foreground hover:border-[#024d37] transition-all"
            >
              View Client Portfolio →
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}