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 March 31, 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">April 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">
                Accommodation is not included in the ticket price. All prices below are for the full 7 nights (Aug 16–23).
              </p>

              <h4 className="font-semibold mb-3">Commons Hub (on-site)</h4>
              <p className="text-xs text-muted-foreground mb-3">30 beds at the main venue. Basic, communal accommodation.</p>
              <div className="space-y-3 mb-6">
                <div className="bg-muted/50 p-6 rounded-lg">
                  <div className="flex items-baseline gap-3 mb-2">
                    <span className="text-3xl font-bold">€279.30</span>
                    <span className="text-muted-foreground">per person / 7 nights</span>
                  </div>
                  <p className="text-sm text-muted-foreground">Bed in shared room (€39.90/night)</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">€356.30</span>
                    <span className="text-muted-foreground">per person / 7 nights</span>
                  </div>
                  <p className="text-sm text-muted-foreground">Bed in double room (€50.90/night)</p>
                </div>
              </div>

              <div className="pt-4">
                <h4 className="font-semibold mb-3">Other 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>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">
                Food is not included in the ticket price. We&apos;ll follow up via email with food options and pricing closer to the event.
              </p>
            </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-23, 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 (7 nights, shared room)</span>
                  <span className="text-lg font-semibold">€279.30</span>
                </div>
                <div className="flex justify-between items-center py-3 border-b border-border">
                  <span className="font-medium">Food</span>
                  <span className="text-sm text-muted-foreground italic">TBA — details coming soon</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, excl. food)</span>
                  <span className="text-2xl font-bold text-primary">€359.30</span>
                </div>
              </div>

              <p className="text-sm text-muted-foreground italic pt-4">
                *With regular pricing (€120 ticket), total would be €399.30. With late pricing (€150 ticket), total
                would be €429.30.
              </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>
  )
}