import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight, Mail, Download } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import SponsorshipFlipbook from "@/components/sponsorship-flipbook"

export default function SponsorshipsPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative min-h-[50vh] flex items-center justify-center overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center z-0"
          style={{
            backgroundImage: `url('/images/20220505-113225.jpg')`,
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-b from-background/90 via-background/80 to-background z-[1]" />

        <div className="container mx-auto px-4 relative z-10 text-center max-w-4xl py-20">
          <p className="text-sm font-mono text-primary mb-3 tracking-wider uppercase">Partner with us</p>
          <h1 className="text-4xl md:text-6xl font-black mb-6 text-balance leading-tight">
            Sponsor CCG 2026
          </h1>
          <p className="text-lg md:text-xl text-muted-foreground text-pretty max-w-2xl mx-auto mb-8">
            A week-long unconference in the Austrian Alps bringing together 100+ builders, researchers,
            and activists shaping regenerative futures. Now in its 6th edition.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="gap-2" asChild>
              <a href="mailto:contact@cryptocommonsgather.ing?subject=CCG26 Sponsorship Inquiry">
                <Mail className="w-4 h-4" />
                Get in Touch
              </a>
            </Button>
            <Button size="lg" variant="outline" className="gap-2" asChild>
              <a href="/CCG26-Sponsorship-Package.pdf" download>
                <Download className="w-4 h-4" />
                Download Full Package
              </a>
            </Button>
          </div>
        </div>
      </section>

      {/* Quick Stats + Why */}
      <section className="py-16 px-4 bg-muted/30">
        <div className="container mx-auto max-w-4xl">
          <h2 className="text-2xl font-bold text-center mb-8">Sponsor the continuation of a legacy</h2>
          <div className="grid grid-cols-3 gap-4 mb-12">
            <div className="text-center">
              <div className="text-3xl font-black text-primary">300+</div>
              <p className="text-sm text-muted-foreground">Total Attendees</p>
            </div>
            <div className="text-center">
              <div className="text-3xl font-black text-primary">15+</div>
              <p className="text-sm text-muted-foreground">Countries</p>
            </div>
            <div className="text-center">
              <div className="text-4xl font-black text-primary leading-none">&infin;</div>
              <p className="text-sm text-muted-foreground">Real Value Produced</p>
            </div>
          </div>

          <p className="text-center text-muted-foreground max-w-2xl mx-auto">
            Over five editions, CCG has catalyzed movements like <strong className="text-foreground">#ReFi</strong>,{" "}
            <strong className="text-foreground">#CoFi</strong>, and{" "}
            <strong className="text-foreground">#MycoFi</strong>, and built an active community
            of 500+ members. Our attendees include teams from Commons Stack, BlockScience, Regen Network, EthicHub,
            Circles UBI, Holochain, Economic Space Agency, zkNetwork, and more.
          </p>
        </div>
      </section>

      {/* Photo Strip */}
      <section className="py-0 px-0">
        <div className="grid grid-cols-3 gap-0">
          <div className="relative aspect-[16/10] overflow-hidden">
            <Image
              src="/images/20220830-104828.jpg"
              alt="CCG courtyard gathering"
              fill
              className="object-cover"
              sizes="33vw"
            />
          </div>
          <div className="relative aspect-[16/10] overflow-hidden">
            <Image
              src="/images/20220502-103036.jpg"
              alt="CCG workshop session"
              fill
              className="object-cover"
              sizes="33vw"
            />
          </div>
          <div className="relative aspect-[16/10] overflow-hidden">
            <Image
              src="/images/20220901-085249.jpg"
              alt="CCG morning view"
              fill
              className="object-cover"
              sizes="33vw"
            />
          </div>
        </div>
      </section>

      {/* Sponsorship Tiers at a Glance */}
      <section className="py-24 px-4">
        <div className="container mx-auto max-w-4xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">Sponsorship Tiers</h2>
            <p className="text-muted-foreground max-w-xl mx-auto">
              We're seeking ~€10,000 in total sponsorship to cover coordination, accessibility,
              and documentation costs. Three tiers available:
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6 mb-8">
            <Card className="border-primary/40 relative overflow-hidden">
              <div className="absolute top-0 left-0 right-0 h-1 bg-primary" />
              <CardContent className="p-6 pt-8 text-center">
                <h3 className="text-xl font-black mb-1">FIRST AMONG EQUALS</h3>
                <div className="text-3xl font-black text-primary mb-4">€5,000</div>
                <p className="text-sm text-muted-foreground">
                  2 event tickets, lodging and food, sponsored session, logo everywhere, pre &amp; post-event spotlight
                </p>
              </CardContent>
            </Card>

            <Card className="border-primary/20">
              <CardContent className="p-6 text-center">
                <h3 className="text-xl font-black mb-1">VANGUARD</h3>
                <div className="text-3xl font-black text-primary mb-4">€2,500</div>
                <p className="text-sm text-muted-foreground">
                  1 event ticket, logo on site &amp; signage, social media &amp; newsletter mention
                </p>
              </CardContent>
            </Card>

            <Card className="border-primary/20">
              <CardContent className="p-6 text-center">
                <h3 className="text-xl font-black mb-1">COMRADE</h3>
                <div className="text-3xl font-black text-primary mb-4">€1,000</div>
                <p className="text-sm text-muted-foreground">
                  50% off event ticket, name on supporters section, social media thank-you
                </p>
              </CardContent>
            </Card>
          </div>

          <p className="text-center text-sm text-muted-foreground">
            We also welcome alternative partnerships: track sponsorship, meal sponsorship, travel grants,
            documentation support, and in-kind technology contributions.
          </p>
        </div>
      </section>

      {/* Flipbook Deck */}
      <section className="py-24 px-4 bg-muted/30">
        <div className="container mx-auto max-w-5xl">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold mb-4">Full Sponsorship Deck</h2>
            <p className="text-muted-foreground max-w-lg mx-auto">
              Browse the complete partnership deck with tier details, audience profile,
              budget breakdown, and more.
            </p>
          </div>

          <SponsorshipFlipbook />

          <div className="flex justify-center mt-6">
            <Button variant="outline" size="sm" className="gap-2" asChild>
              <a href="/CCG26-Sponsorship-Package.pdf" download>
                <Download className="w-3.5 h-3.5" />
                Download PDF
              </a>
            </Button>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 px-4 relative overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: `url('/images/20220430-170329.jpg')`,
          }}
        />
        <div className="absolute inset-0 bg-primary/90" />
        <div className="container mx-auto max-w-3xl text-center relative z-10">
          <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance text-primary-foreground">
            Let's Build Together
          </h2>
          <p className="text-lg text-primary-foreground/90 mb-8 text-pretty max-w-xl mx-auto">
            We're seeking partners who share our vision of regenerative, cooperative,
            and commons-based futures — not just logo placement.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
            <Button size="lg" variant="secondary" className="gap-2" asChild>
              <a href="mailto:contact@cryptocommonsgather.ing?subject=CCG26 Sponsorship Inquiry">
                <Mail className="w-4 h-4" />
                Reach Out <ArrowRight className="w-4 h-4" />
              </a>
            </Button>
          </div>

          <p className="text-sm text-primary-foreground/70">
            contact@cryptocommonsgather.ing
          </p>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 border-t border-border">
        <div className="container mx-auto max-w-6xl">
          <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-8 mb-8">
            <div>
              <h3 className="font-bold mb-4">CCG 2026</h3>
              <p className="text-sm text-muted-foreground">
                Crypto Commons Gathering
                <br />
                August 16-22, 2026
              </p>
            </div>

            <div>
              <h3 className="font-semibold mb-4 text-sm">Links</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link href="/gallery" className="text-muted-foreground hover:text-foreground transition-colors">
                    Gallery
                  </Link>
                </li>
                <li>
                  <Link href="/about" className="text-muted-foreground hover:text-foreground transition-colors">
                    About CCG 2026
                  </Link>
                </li>
                <li>
                  <Link href="/directions" className="text-muted-foreground hover:text-foreground transition-colors">
                    Directions
                  </Link>
                </li>
                <li>
                  <Link href="/transparency" className="text-muted-foreground hover:text-foreground transition-colors">
                    Financial Transparency
                  </Link>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4 text-sm">Community</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link
                    href="https://t.me/+n5V_wDVKWrk1ZTBh"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Join the CCG26 Telegram
                  </Link>
                </li>
                <li>
                  <Link
                    href="https://t.me/+gZjhNaDswIc0ZDg0"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Join the Crypto Commons Association Telegram
                  </Link>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4 text-sm">Partners</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link
                    href="https://www.commons-hub.at/"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Commons Hub
                  </Link>
                </li>
                <li>
                  <Link
                    href="https://crypto-commons.org"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Crypto Commons Association
                  </Link>
                </li>
                <li>
                  <Link href="/sponsorships" className="text-muted-foreground hover:text-foreground transition-colors">
                    Sponsorships
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          <div className="pt-8 border-t border-border text-center text-sm text-muted-foreground">
            <p>This website is under a Creative Commons license. Built with solidarity for the commons.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}