import { Banner } from "@/components/billingsdk/banner"

export default function FreeTrialBannerDemo() {
    return (
        <div className="w-full h-full flex flex-col gap-6 min-h-[500px] rounded-lg overflow-hidden bg-background-secondary border-2">
            <Banner
                title="🎉 Start your free trial today!"
                description="Get 30 days free access to all premium features"
                buttonText="Start Free Trial"
                buttonLink="https://example.com/signup"
                variant="default" // default, minimal, popup
            />

            {/* minimal hero example */}
            <section className="flex flex-col items-center justify-center text-center gap-4 py-16">
                <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
                    Create next-generation digital products
                </h1>
                <div className="flex flex-col gap-2">

                    <p className="text-muted-foreground max-w-md">
                        Build faster with our platform
                    </p>
                    <a
                        className="underline underline-offset-4 hover:text-primary transition"
                    >
                        Get Started →
                    </a>
                </div>
            </section>
        </div>
    )
}

import { Banner } from "@/components/billingsdk/banner"

export default function FreeTrialBannerDemo() {
    return (
        <div className="w-full h-full flex flex-col gap-6 min-h-[500px] border rounded-lg overflow-hidden bg-background-secondary border-2">
            <Banner
                title="🎉 Explore your next destination today!"
                description="Discover the best places to visit in the world"
                variant="minimal" // default, minimal, popup
            />

            {/* minimal hero example */}
            <section className="flex flex-col items-center justify-center text-center gap-4 py-16">
                <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
                    Discover the best places to visit in the world
                </h1>
                <div className="flex flex-col gap-2">

                    <p className="text-muted-foreground max-w-md">
                        Explore the best places to visit in the world
                    </p>
                    <a
                        className="underline underline-offset-4 hover:text-primary transition"
                    >
                        Get Started →
                    </a>
                </div>
            </section>
        </div>
    )
}

"use client"

import { Banner } from "@/components/billingsdk/banner"
import { useState } from "react"
import { Button } from "./ui/button"

export default function FreeTrialBannerDemoThree() {
    const [showBanner, setShowBanner] = useState(false)
    return (
        <div className="w-full h-full flex flex-col gap-4 min-h-[500px] justify-center items-center border rounded-lg">
            {showBanner && (
                <Banner
                    title="🎉 Start your free trial today!"
                    description="Get 30 days free access to all premium features"
                    variant="popup" // default, minimal, popup
                />
            )}
            <div className="w-full h-full justify-center items-center flex flex-row gap-4">
                <Button onClick={() => setShowBanner(true)}>Show Banner</Button>
            </div>
        </div>

    )
}

"use client";

import { Banner } from "@/components/billingsdk/banner";
import { useState } from "react";
import { Button } from "./ui/button";
export const gradientColors = [
  "rgba(0,149,255,0.56)",
  "rgba(231,77,255,0.77)",
  "rgba(255,0,0,0.73)",
  "rgba(131,255,166,0.66)",
];
export default function BannerGradientDemo() {
  const [showBanner, setShowBanner] = useState(false);

  return (
    <div className="w-full space-y-8">
      {/* Default Variant */}
      <div className="space-y-4">
        <h3 className="text-lg font-medium">Default Banner</h3>
        <Banner
          title="🌈 Experience the magic of gradients!"
          description="Beautiful animated gradient background with custom colors"
          buttonText="Start Free Trial"
          buttonLink="https://example.com/signup"
          variant="default"
          gradientColors={gradientColors}
          className="w-full"
        />
      </div>

      {/* Minimal Variant */}
      <div className="space-y-4">
        <h3 className="text-lg font-medium">Minimal Banner</h3>
        <Banner
          title="🎉 Start your free trial today!"
          description="Get 30 days free access"
          variant="minimal"
          gradientColors={gradientColors}
        />
      </div>

      {/* Interactive Popup Demo */}
      <div className="space-y-4">
        <h3 className="text-lg font-medium">Popup Banner</h3>
        <div className="flex justify-center">
          <Button variant="outline" onClick={() => setShowBanner(true)}>
            Show Gradient Banner
          </Button>
        </div>
        {showBanner && (
          <Banner
            title="🎉 Start your free trial today!"
            description="Get 30 days free access to all premium features"
            variant="popup"
            gradientColors={gradientColors}
          />
        )}
      </div>
    </div>
  );
}

import { Banner } from "@/components/billingsdk/banner";

export default function FreeTrialBannerDemo() {
  return (
    <div className="w-full h-full flex flex-col gap-6 min-h-[500px] rounded-lg overflow-hidden bg-background-secondary border-2">
      <Banner
        title="⚠️ Payment Failed - Subscription Suspended"
        description="Your subscription will be canceled in 3 days if payment is not updated"
        buttonText="Update Payment"
        buttonLink="https://example.com/billing"
        variant="destructive"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center text-center gap-4 py-16">
        <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
          Create next-generation digital products
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Build faster with our platform
          </p>
          <a className="underline underline-offset-4 hover:text-primary transition">
            Get Started →
          </a>
        </div>
      </section>
    </div>
  );
}

import { Banner } from "@/components/billingsdk/banner";

export default function BannerWarningDemo() {
  return (
    <div className="w-full h-full flex flex-col gap-6 min-h-[500px] rounded-lg overflow-hidden bg-background-secondary border-2">
      <Banner
        title="⚠️ System Maintenance Scheduled"
        description="Our services will be temporarily unavailable on Sunday, 2AM-4AM UTC for scheduled maintenance"
        buttonText="Learn More"
        buttonLink="https://example.com/maintenance"
        variant="warning"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center text-center gap-4 py-16">
        <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
          System Status Dashboard
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Monitor system health and maintenance schedules
          </p>
          <a className="underline underline-offset-4 hover:text-primary transition">
            View Status →
          </a>
        </div>
      </section>
    </div>
  );
}

import { Banner } from "@/components/billingsdk/banner";

export default function BannerSuccessDemo() {
  return (
    <div className="w-full h-full flex flex-col gap-6 min-h-[500px] rounded-lg overflow-hidden bg-background-secondary border-2">
      <Banner
        title="✅ Payment Processed Successfully"
        description="Your subscription has been activated and you now have access to all premium features"
        buttonText="View Dashboard"
        buttonLink="https://example.com/dashboard"
        variant="success"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center text-center gap-4 py-16">
        <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
          Welcome to Premium
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Enjoy unlimited access to all features
          </p>
          <a className="underline underline-offset-4 hover:text-primary transition">
            Explore Features →
          </a>
        </div>
      </section>
    </div>
  );
}

import { Banner } from "@/components/billingsdk/banner";

export default function BannerInfoDemo() {
  return (
    <div className="w-full h-full flex flex-col gap-6 min-h-[500px] rounded-lg overflow-hidden bg-background-secondary border-2">
      <Banner
        title="ℹ️ New API Version Available"
        description="API v2.1 is now available with improved performance and new endpoints"
        buttonText="View Docs"
        buttonLink="https://example.com/api-docs"
        variant="info"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center text-center gap-4 py-16">
        <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
          Developer Resources
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Access documentation, guides, and API references
          </p>
          <a className="underline underline-offset-4 hover:text-primary transition">
            Browse Docs →
          </a>
        </div>
      </section>
    </div>
  );
}

import { Banner } from "@/components/billingsdk/banner";

export default function BannerAnnouncementDemo() {
  return (
    <div className="w-full h-full flex flex-col gap-6 min-h-[500px] rounded-lg overflow-hidden bg-background-secondary border-2">
      <Banner
        title="🚀 Introducing Advanced Analytics"
        description="Get deeper insights into your billing data with our new analytics dashboard"
        buttonText="Explore Now"
        buttonLink="https://example.com/analytics"
        variant="announcement"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center text-center gap-4 py-16">
        <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
          Advanced Analytics
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Powerful insights to grow your business
          </p>
          <a className="underline underline-offset-4 hover:text-primary transition">
            Get Started →
          </a>
        </div>
      </section>
    </div>
  );
}