import { Star, LogIn, CreditCard, User, MapPin, Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

const OrderConfirmation = () => {
  const loginUrl = "https://usafundingapplications.org/vx/usa/members";
  const contactUrl = "https://www.usafundingapplications.org/vx/usa/contact/";

  // Mock data - in real app this would come from props/state
  const accountInfo = {
    username: "demo_user", // Would be populated from actual data
    password: "demo_pass", // Would be populated from actual data
    amount: "$24.95"
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-background via-surface to-surface-elevated bg-pattern">
      {/* Header */}
      <header className="bg-surface-elevated border-b border-border shadow-sm">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <div>
            <img 
              src="/lovable-uploads/d9f822d6-d9f9-4069-9616-b0f99836a7df.png" 
              alt="USA Funding Applications"
              className="h-12 w-auto"
            />
          </div>
          <Button 
            className="btn-trust"
            onClick={() => window.open(loginUrl, '_blank')}
          >
            <LogIn className="w-4 h-4 mr-2" />
            Member Login
          </Button>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-12 max-w-4xl">
        {/* Success Header */}
        <div className="text-center mb-12">
          <div className="inline-flex items-center justify-center w-20 h-20 bg-success-primary/10 rounded-full mb-6">
            <Star className="w-10 h-10 text-success-primary fill-success-primary" />
          </div>
          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-success-primary to-success-light bg-clip-text text-transparent">
            Order Confirmed!
          </h1>
          <p className="text-xl text-muted-foreground mb-8">
            Congratulations! You're ready to start applying for grant money.
          </p>
          
          {/* Primary CTA */}
          <div className="bg-gradient-to-r from-success-primary via-success-light to-success-glow p-8 rounded-2xl shadow-success mb-8 backdrop-blur-sm border border-success-primary/20">
            <h2 className="text-2xl font-bold text-white mb-4">
              🎉 Your account is ready! Start applying now!
            </h2>
            <Button 
              size="lg"
              className="bg-white text-logo-red hover:bg-gray-50 text-lg sm:text-xl px-6 sm:px-12 py-4 sm:py-6 rounded-xl font-bold shadow-lg transform hover:scale-105 transition-all duration-300 w-full sm:w-auto"
              onClick={() => window.open(loginUrl, '_blank')}
            >
              <LogIn className="w-5 sm:w-6 h-5 sm:h-6 mr-2 sm:mr-3" />
              <span className="block sm:hidden">Login & Start Applying</span>
              <span className="hidden sm:block">Click Here to Login & Start Applying</span>
            </Button>
          </div>
        </div>

        {/* Account Information */}
        <Card className="card-success mb-8">
          <div className="flex items-center mb-6">
            <div className="w-12 h-12 bg-gradient-to-br from-success-primary/10 to-success-light/10 rounded-xl flex items-center justify-center mr-4 border border-success-primary/20">
              <User className="w-6 h-6 text-success-primary" />
            </div>
            <h3 className="text-2xl font-semibold">Your Account Information</h3>
          </div>
          
          <div className="grid md:grid-cols-2 gap-6 mb-8">
            <div className="space-y-4">
              <div>
                <label className="text-sm font-medium text-muted-foreground">Website</label>
                <p className="text-lg font-medium">usafundingapplications.org</p>
              </div>
              <div>
                <label className="text-sm font-medium text-muted-foreground">Username</label>
                <p className="text-lg font-mono bg-muted px-3 py-2 rounded-md">{accountInfo.username}</p>
              </div>
            </div>
            <div className="space-y-4">
              <div>
                <label className="text-sm font-medium text-muted-foreground">Password</label>
                <p className="text-lg font-mono bg-muted px-3 py-2 rounded-md">{accountInfo.password}</p>
              </div>
              <div>
                <label className="text-sm font-medium text-muted-foreground">Amount Paid</label>
                <p className="text-lg font-semibold text-success-primary">{accountInfo.amount}</p>
              </div>
            </div>
          </div>

          {/* Secondary CTA */}
          <div className="text-center">
            <Button 
              className="btn-success text-lg sm:text-xl px-6 sm:px-8 py-3 sm:py-4 w-full sm:w-auto"
              onClick={() => window.open(loginUrl, '_blank')}
            >
              <LogIn className="w-4 sm:w-5 h-4 sm:h-5 mr-2" />
              <span className="block sm:hidden">Access Member Area</span>
              <span className="hidden sm:block">Access Your Member Area Now</span>
            </Button>
          </div>
        </Card>

        {/* Billing Information */}
        <Card className="card-trust mb-8">
          <div className="flex items-center mb-4">
            <div className="w-12 h-12 bg-gradient-to-br from-trust-primary/10 to-trust-secondary/10 rounded-xl flex items-center justify-center mr-4 border border-trust-primary/20">
              <CreditCard className="w-6 h-6 text-trust-primary" />
            </div>
            <h3 className="text-xl font-semibold">Billing Information</h3>
          </div>
          <div className="bg-gradient-to-r from-trust-primary/5 to-trust-secondary/5 p-6 rounded-xl border border-trust-primary/10">
            <p className="text-center text-lg">
              <strong>Your credit card statement will display:</strong>
            </p>
            <p className="text-center text-xl font-bold text-trust-primary mt-2">
              USFUND.ORG • 888-261-4837
            </p>
          </div>
        </Card>

        {/* Support Information */}
        <Card className="card-elevated">
          <div className="flex items-center mb-4">
            <div className="w-12 h-12 bg-gradient-to-br from-trust-primary/10 to-trust-secondary/10 rounded-xl flex items-center justify-center mr-4 border border-trust-primary/20">
              <Phone className="w-6 h-6 text-trust-primary" />
            </div>
            <h3 className="text-xl font-semibold">Need Help?</h3>
          </div>
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <p className="text-muted-foreground mb-2">Contact Support:</p>
              <a 
                href={contactUrl}
                className="text-logo-blue hover:underline font-medium break-all sm:break-normal text-sm sm:text-base"
              >
                <span className="block sm:hidden">usafundingapplications.org/contact</span>
                <span className="hidden sm:block">www.usafundingapplications.org/contact</span>
              </a>
            </div>
            <div>
              <p className="text-muted-foreground mb-2">Phone Support:</p>
              <p className="font-semibold">1-888-261-4837</p>
            </div>
          </div>
        </Card>

        {/* Final CTA */}
        <div className="text-center mt-12">
          <p className="text-muted-foreground mb-4">Ready to start your funding journey?</p>
          <Button 
            className="btn-success text-base sm:text-lg px-6 sm:px-10 py-3 sm:py-4 w-full sm:w-auto"
            onClick={() => window.open(loginUrl, '_blank')}
          >
            <LogIn className="w-4 sm:w-5 h-4 sm:h-5 mr-2" />
            <span className="block sm:hidden">Login to Account</span>
            <span className="hidden sm:block">Login to Your Account</span>
          </Button>
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-surface-elevated border-t border-border mt-16">
        <div className="container mx-auto px-4 py-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <a href="/v9/" className="text-muted-foreground hover:text-foreground">Home</a>
            <a href={loginUrl} className="text-logo-blue hover:underline font-medium">Log In</a>
            <a href="/v9/terms" className="text-muted-foreground hover:text-foreground">Terms</a>
            <a href="/v9/privacy-policy" className="text-muted-foreground hover:text-foreground">Privacy Policy</a>
          </div>
          <div className="text-center text-sm text-muted-foreground">
            <p className="mb-2">© 2019 USA Funding Applications</p>
            <p>USA Funding Applications is not a government agency and is not affiliated with the United States Government or any other funding agency. USA Grant Applications supplies training materials on how to apply for funding as well as resources on where to apply.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default OrderConfirmation;