import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle2, Mail } from "lucide-react"
import Link from "next/link"

export default function FinancialTransparencyPage() {
  return (
    <div className="min-h-screen">
      {/* Header */}
      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <Link href="/" className="text-xl font-bold">
            CCG 2026
          </Link>
          <nav className="flex items-center gap-4">
            <Button variant="ghost" size="sm" asChild>
              <Link href="/">Home</Link>
            </Button>
            <Button size="sm" asChild>
              <Link href="/register">Register</Link>
            </Button>
          </nav>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-16 px-4 bg-muted/30">
        <div className="container mx-auto max-w-4xl text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6 text-balance">Financial Transparency</h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
            We believe in complete transparency about the costs and financial structure of CCG 2026. Here's a detailed
            breakdown of all expenses and what your contribution covers.
          </p>
        </div>
      </section>

      {/* Main Content */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-4xl">
          {/* Ticket Price */}
          <Card className="mb-8">
            <CardHeader>
              <CardTitle className="text-2xl">Ticket Price</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-baseline gap-4">
                <span className="text-4xl font-bold text-primary">€200</span>
                <span className="text-muted-foreground">per person</span>
              </div>
              <p className="text-muted-foreground leading-relaxed">
                The ticket price is set to cover the venue rental and basic infrastructure, based on expected
                attendance. No one from the organizing team is being paid from ticket sales, and all are covering their
                own travel, food and accommodation, until more sustainable structures and future sponsorships are in
                place.
              </p>
              <div className="pt-4">
                <Button asChild>
                  <Link href="/register">Get Your Ticket</Link>
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* Accommodation */}
          <Card className="mb-8">
            <CardHeader>
              <CardTitle className="text-2xl">Accommodation</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-sm text-muted-foreground mb-4">
                Note that accommodation is not included in the ticket price. These are provided by the Commons Hub:
              </p>
              <div className="bg-muted/50 p-6 rounded-lg">
                <div className="flex items-baseline gap-3 mb-2">
                  <span className="text-3xl font-bold">€37.90</span>
                  <span className="text-muted-foreground">per night</span>
                </div>
                <p className="text-sm text-muted-foreground">Dorm accommodation</p>
              </div>
              <p className="text-muted-foreground leading-relaxed">
                Accommodation includes shared dormitory-style rooms with basic amenities. Bedding and towels are
                provided.
              </p>
            </CardContent>
          </Card>

          {/* Food */}
          <Card className="mb-8">
            <CardHeader>
              <CardTitle className="text-2xl">Food</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-sm text-muted-foreground mb-4">
                Food is also not included in the ticket price and is provided by the Commons Hub:
              </p>
              <div className="bg-muted/50 p-6 rounded-lg mb-4">
                <div className="flex items-baseline gap-3 mb-2">
                  <span className="text-3xl font-bold">€22.50</span>
                  <span className="text-muted-foreground">per day average</span>
                </div>
              </div>

              <div className="space-y-4">
                <div>
                  <h4 className="font-semibold mb-2">Breakdown:</h4>
                  <ul className="space-y-2">
                    <li className="flex items-start gap-2">
                      <CheckCircle2 className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
                      <span className="text-muted-foreground">
                        <strong>First 3 days:</strong> fully catered at €35/day
                      </span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle2 className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
                      <span className="text-muted-foreground">
                        <strong>Last 3 days:</strong> self-organized by participants and the Crypto Commons Association
                        at ~€10/day
                      </span>
                    </li>
                  </ul>
                </div>

                <p className="text-muted-foreground leading-relaxed">
                  Meals include breakfast, lunch, and dinner with vegetarian and vegan options available. The
                  self-organized days involve communal cooking and shared meal preparation.
                </p>
              </div>
            </CardContent>
          </Card>

          {/* Total Cost Estimate */}
          <Card className="mb-8 border-primary/40">
            <CardHeader>
              <CardTitle className="text-2xl">Total Cost Estimate</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-muted-foreground mb-6">
                For the full 6-day event (August 2026), here's what you can expect to pay:
              </p>

              <div className="space-y-3">
                <div className="flex justify-between items-center py-3 border-b border-border">
                  <span className="font-medium">Ticket</span>
                  <span className="text-lg font-semibold">€200</span>
                </div>
                <div className="flex justify-between items-center py-3 border-b border-border">
                  <span className="font-medium">Accommodation (6 nights)</span>
                  <span className="text-lg font-semibold">€227.40</span>
                </div>
                <div className="flex justify-between items-center py-3 border-b border-border">
                  <span className="font-medium">Food (6 days)</span>
                  <span className="text-lg font-semibold">€135</span>
                </div>
                <div className="flex justify-between items-center py-4 bg-primary/10 -mx-6 px-6 mt-4">
                  <span className="font-bold text-lg">Total</span>
                  <span className="text-2xl font-bold text-primary">€562.40</span>
                </div>
              </div>

              <p className="text-sm text-muted-foreground italic pt-4">
                *This is an estimate. Final costs may vary slightly based on actual meal arrangements and accommodation
                choices.
              </p>
            </CardContent>
          </Card>

          {/* Financial Support */}
          <Card className="bg-accent/20 border-accent">
            <CardHeader>
              <CardTitle className="text-2xl">Need Financial Support?</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-muted-foreground leading-relaxed">
                We know these costs add up, especially with travel. If the price is a barrier, please don't hesitate to
                reach out at{" "}
                <a href="mailto:cryptocommonsgathering@gmail.com" className="text-primary hover:underline font-medium">
                  cryptocommonsgathering@gmail.com
                </a>
                . We'll do our best to find a solution together.
              </p>
              <p className="text-muted-foreground leading-relaxed">
                We believe that financial constraints should not prevent anyone from participating in building
                commons-oriented futures. We're committed to working with participants to find creative solutions for
                those who need support.
              </p>
              <div className="pt-4">
                <Button variant="outline" className="gap-2 bg-transparent" asChild>
                  <a href="mailto:cryptocommonsgathering@gmail.com">
                    <Mail className="w-4 h-4" />
                    Contact Us About Support
                  </a>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 px-4 bg-primary text-primary-foreground">
        <div className="container mx-auto max-w-3xl text-center">
          <h2 className="text-3xl font-bold mb-6">Ready to Join CCG 2026?</h2>
          <p className="text-lg mb-8 opacity-90">
            Register now to be part of the sixth edition of this transformative gathering.
          </p>
          <Button size="lg" variant="secondary" asChild>
            <Link href="/register">Register Now</Link>
          </Button>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 border-t border-border">
        <div className="container mx-auto max-w-6xl text-center text-sm text-muted-foreground">
          <p>© 2026 Crypto Commons Gathering. Built with solidarity for the commons.</p>
        </div>
      </footer>
    </div>
  )
}