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 Pricing</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-4 mb-6">
                <div className="flex items-baseline justify-between border-b pb-3">
                  <div>
                    <span className="text-3xl font-bold text-primary">€80</span>
                    <span className="text-sm text-muted-foreground ml-3">Early bird</span>
                  </div>
                  <span className="text-sm text-muted-foreground">Until April 30, 2026</span>
                </div>
                <div className="flex items-baseline justify-between border-b pb-3">
                  <div>
                    <span className="text-3xl font-bold">€120</span>
                    <span className="text-sm text-muted-foreground ml-3">Regular</span>
                  </div>
                  <span className="text-sm text-muted-foreground">May 1 – June 30, 2026</span>
                </div>
                <div className="flex items-baseline justify-between pb-3">
                  <div>
                    <span className="text-3xl font-bold">€150</span>
                    <span className="text-sm text-muted-foreground ml-3">Late</span>
                  </div>
                  <span className="text-sm text-muted-foreground">From July 1, 2026</span>
                </div>
              </div>

              <div className="bg-accent/20 border border-accent p-4 rounded-lg">
                <p className="font-semibold mb-2">CCA Members Special:</p>
                <p className="text-sm text-muted-foreground">
                  Bring two newcomers (who've never attended CCG before) and get a free ticket! If you've already paid,
                  we'll refund you.
                </p>
              </div>

              <p className="text-muted-foreground leading-relaxed">
                The ticket price covers venue rental and basic infrastructure. 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">
                The Commons Hub offers 30 beds on-site. Accommodation is not included in the ticket price:
              </p>
              <div className="space-y-3">
                <div className="bg-muted/50 p-6 rounded-lg">
                  <div className="flex items-baseline gap-3 mb-2">
                    <span className="text-3xl font-bold">€39.20</span>
                    <span className="text-muted-foreground">per night</span>
                  </div>
                  <p className="text-sm text-muted-foreground">26 beds in dorms</p>
                </div>
                <div className="bg-muted/50 p-6 rounded-lg">
                  <div className="flex items-baseline gap-3 mb-2">
                    <span className="text-3xl font-bold">€50.20</span>
                    <span className="text-muted-foreground">per night per person</span>
                  </div>
                  <p className="text-sm text-muted-foreground">4 beds in double rooms</p>
                </div>
              </div>
              <div className="pt-4">
                <h4 className="font-semibold mb-3">Additional accommodation nearby:</h4>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="w-4 h-4 text-primary mt-0.5 flex-shrink-0" />
                    <span>
                      <strong>Herrnhof.at</strong> — comfortable apartments, ideal for teams
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="w-4 h-4 text-primary mt-0.5 flex-shrink-0" />
                    <span>
                      <strong>Gasthof Kobald</strong> — simple rooms, affordable, 12 min walk from the hub
                    </span>
                  </li>
                </ul>
              </div>
            </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 not included in the ticket price and is provided by the Commons Hub:
              </p>

              <div className="space-y-4">
                <div className="bg-muted/50 p-6 rounded-lg">
                  <h4 className="font-semibold mb-3">What's Included:</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-sm">A rich vegetarian breakfast buffet</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-sm">Coffee & tea throughout the 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-sm">Catered lunches (vegetarian/vegan and meat-based options)</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-sm">Catered dinners from Aug 17-21</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-sm">
                        Self-made dinners on Aug 16 & 22, prepared by community kitchen team
                      </span>
                    </li>
                  </ul>
                </div>

                <div className="bg-muted/50 p-6 rounded-lg">
                  <h4 className="font-semibold mb-2">Estimated Cost:</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">First 3 days (fully catered)</span>
                      <span className="font-semibold">€35/day</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Last 3 days (self-organized)</span>
                      <span className="font-semibold">~€10/day</span>
                    </div>
                    <div className="flex justify-between pt-2 border-t">
                      <span className="font-semibold">Total for 6 days</span>
                      <span className="text-2xl font-bold text-primary">€135</span>
                    </div>
                  </div>
                </div>
              </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 event (August 16-22, 2026), here's what you can expect to pay with early bird pricing:
              </p>

              <div className="space-y-3">
                <div className="flex justify-between items-center py-3 border-b border-border">
                  <span className="font-medium">Ticket (Early bird)</span>
                  <span className="text-lg font-semibold">€80</span>
                </div>
                <div className="flex justify-between items-center py-3 border-b border-border">
                  <span className="font-medium">Accommodation (6 nights, dorm)</span>
                  <span className="text-lg font-semibold">€235.20</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 (Early bird)</span>
                  <span className="text-2xl font-bold text-primary">€450.20</span>
                </div>
              </div>

              <p className="text-sm text-muted-foreground italic pt-4">
                *With regular pricing (€120 ticket), total would be €490.20. With late pricing (€150 ticket), total
                would be €520.20.
              </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:contact@cryptocommonsgather.ing" className="text-primary hover:underline font-medium">
                  contact@cryptocommonsgather.ing
                </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:contact@cryptocommonsgather.ing">
                    <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>
  )
}