import { ArrowRight, TrendingUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import heroBanner from "@/assets/hero-banner.jpg";

const HeroSection = () => {
  return (
    <section className="pt-16">
      {/* Banner */}
      <div className="w-full h-[280px] md:h-[360px] overflow-hidden relative">
        <img
          src={heroBanner}
          alt="Fund any Alipay, WeChat and Bank account in 5-30 mins"
          width={1920}
          height={640}
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-foreground/30 to-transparent" />
        <div className="absolute bottom-8 left-8 md:left-16">
          <h2 className="text-card text-2xl md:text-4xl font-extrabold leading-tight uppercase tracking-wide">
            Fund any Alipay,<br />
            WeChat and Bank<br />
            Account in 5–30 mins
          </h2>
        </div>
      </div>

      {/* Rate card section */}
      <div className="bg-background py-12 md:py-20">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-3xl md:text-5xl font-extrabold text-foreground mb-2">
            Most Secure and Reliable Way to{" "}
            <span className="text-primary">Pay Suppliers in China</span>
          </h1>

          {/* Rate Card */}
          <div className="max-w-md mx-auto mt-10 bg-card rounded-2xl p-8 shadow-[var(--card-shadow)] border border-border">
            <div className="flex items-center gap-2 text-muted-foreground mb-4">
              <TrendingUp className="w-5 h-5 text-primary" />
              <span className="text-sm font-medium">Today's Rate</span>
            </div>
            <div className="text-center">
              <span className="text-6xl font-extrabold text-foreground">0.57</span>
              <span className="text-xl text-muted-foreground ml-2">CNY</span>
            </div>
            <p className="text-muted-foreground text-sm mt-1">
              per <span className="font-semibold">1 GHS</span> 🇬🇭
            </p>
            <Button className="w-full mt-6 h-12 text-base font-semibold gap-2" size="lg">
              BUY RMB <ArrowRight className="w-4 h-4" />
            </Button>
            <p className="text-xs text-muted-foreground mt-3">
              No hidden fees • Secure transactions
            </p>
          </div>

          {/* Trust badge */}
          <div className="mt-10 inline-flex items-center gap-2 bg-card border border-border rounded-full px-5 py-2">
            <span className="text-primary">✦</span>
            <span className="text-sm font-medium text-foreground">Trusted by 50,000+ customers</span>
          </div>
          <p className="text-muted-foreground mt-4 max-w-xl mx-auto text-sm leading-relaxed">
            Exchange GHS to CNY at the best rates. Fast, secure, and available 7AM to 4PM for all your business payments.
          </p>

          {/* Features row */}
          <div className="flex flex-wrap justify-center gap-6 mt-8">
            {["Instant transfers", "Bank-level security", "7AM - 4PM support"].map((f) => (
              <div key={f} className="flex items-center gap-2 text-sm text-muted-foreground">
                <span className="w-2 h-2 rounded-full bg-primary" />
                {f}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;