import { Navigation } from "@/components/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function SponsorPage() {
  const sponsorshipTiers = [
    {
      name: "Forest Friend",
      amount: "$25/month",
      benefits: [
        "Monthly newsletter with forest updates",
        "Seasonal mushroom growing tips",
        "Recognition on our supporters page",
        "10% discount on courses",
      ],
    },
    {
      name: "Log Steward",
      amount: "$75/month",
      benefits: [
        "All Forest Friend benefits",
        "Quarterly care package of dried shiitake",
        "Invitation to annual forest gathering",
        "20% discount on courses",
        "Your name on a cultivation log",
      ],
    },
    {
      name: "Forest Guardian",
      amount: "$150/month",
      benefits: [
        "All Log Steward benefits",
        "Monthly fresh shiitake delivery (seasonal)",
        "Free annual course attendance",
        "Private forest tour for you and guests",
        "Lifetime supporter recognition",
      ],
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      <Navigation />

      {/* Hero Section */}
      <section className="py-16 px-4 bg-primary text-primary-foreground forest-texture">
        <div className="container mx-auto max-w-4xl text-center">
          <h1 className="text-5xl font-bold mb-6 text-balance">Sponsor the Old Growth</h1>
          <p className="text-xl leading-relaxed text-primary-foreground/90 text-pretty">
            Help preserve 20 acres of old growth forest, protect the watershed for endangered Texada Island
            sticklebacks, support sustainable cultivation, and keep the ancient art of shiitake growing alive at the
            edge of civilization.
          </p>
        </div>
      </section>

      {/* Why Sponsor Section */}
      <section className="py-16 px-4 moss-texture">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold text-foreground mb-12 text-center">Why Your Support Matters</h2>

          <div className="grid md:grid-cols-3 gap-8 mb-12">
            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">🌱</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Sustainable Cultivation</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Support traditional, eco-friendly mushroom farming that works with nature, not against it. Every log
                  is carefully selected and sustainably sourced.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">🐟</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Watershed Protection</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Protect critical habitat for the endangered Texada Island stickleback species pairs—one of Earth's
                  youngest and rarest fish species found in only five lakes.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">📚</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Education & Knowledge</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Your sponsorship helps keep courses affordable and accessible, passing on decades of cultivation
                  wisdom to the next generation.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Sponsorship Tiers */}
      <section className="py-16 px-4 bg-muted/30 fern-pattern">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold text-foreground mb-12 text-center">Sponsorship Levels</h2>

          <div className="grid md:grid-cols-3 gap-8">
            {sponsorshipTiers.map((tier, index) => (
              <Card key={index} className={`border-border ${index === 1 ? "ring-2 ring-primary" : ""}`}>
                <CardHeader>
                  <CardTitle className="text-2xl text-foreground">{tier.name}</CardTitle>
                  <p className="text-3xl font-bold text-primary mt-2">{tier.amount}</p>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-3 mb-6">
                    {tier.benefits.map((benefit, i) => (
                      <li key={i} className="flex items-start gap-2 text-muted-foreground">
                        <span className="text-primary mt-1">✓</span>
                        <span>{benefit}</span>
                      </li>
                    ))}
                  </ul>
                  <Button className="w-full bg-[#1a4d2e] hover:bg-[#153d24] text-white">Become a {tier.name}</Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* One-Time Support */}
      <section className="py-16 px-4 moss-texture">
        <div className="container mx-auto max-w-4xl">
          <Card className="border-border">
            <CardHeader>
              <CardTitle className="text-2xl text-foreground text-center">One-Time Contribution</CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <p className="text-muted-foreground mb-6 leading-relaxed">
                Prefer to make a one-time contribution? Every bit helps maintain the old growth forest, protect the
                watershed, support the courses, and keep this unique operation thriving.
              </p>
              <div className="flex flex-wrap gap-4 justify-center mb-6">
                <Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
                  $25
                </Button>
                <Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
                  $50
                </Button>
                <Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
                  $100
                </Button>
                <Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
                  Custom Amount
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Impact Section */}
      <section className="py-16 px-4 bg-muted/30 fern-pattern">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="text-3xl font-bold text-foreground mb-6">Your Impact</h2>
          <p className="text-lg text-muted-foreground mb-8 leading-relaxed text-pretty">
            When you sponsor the Old Growth, you're not just supporting mushroom cultivation. You're preserving a way of
            life, protecting old growth forest land and critical watershed habitat for endangered species, enabling
            education, and helping maintain a community gathering place where stories are shared, knowledge is passed
            down, and the connection between people and nature thrives.
          </p>
          <div className="grid md:grid-cols-2 gap-6 text-left">
            <div className="flex gap-4">
              <div className="text-2xl">🍄</div>
              <div>
                <h3 className="font-semibold text-foreground mb-2">Sustainable Production</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Maintain log cultivation operations and continue producing high-quality shiitake mushrooms
                </p>
              </div>
            </div>
            <div className="flex gap-4">
              <div className="text-2xl">🐟</div>
              <div>
                <h3 className="font-semibold text-foreground mb-2">Watershed Conservation</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Protect clean water sources that support the endangered Texada Island stickleback species pairs
                </p>
              </div>
            </div>
            <div className="flex gap-4">
              <div className="text-2xl">👥</div>
              <div>
                <h3 className="font-semibold text-foreground mb-2">Community Programs</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Support volunteer initiatives and keep courses accessible to all who want to learn
                </p>
              </div>
            </div>
            <div className="flex gap-4">
              <div className="text-2xl">🌲</div>
              <div>
                <h3 className="font-semibold text-foreground mb-2">Old Growth Stewardship</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Protect and maintain 20 acres of old growth forest land for future generations
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 px-4 moss-texture">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="text-3xl font-bold text-foreground mb-6">Join the Forest Community</h2>
          <p className="text-lg text-muted-foreground mb-8 leading-relaxed text-pretty">
            Whether you choose monthly sponsorship or a one-time contribution, you become part of something special—a
            community dedicated to sustainable living, traditional knowledge, watershed protection, and the magic of the
            old growth forest.
          </p>
          <Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
            Get Started Today
          </Button>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 border-t border-border forest-texture">
        <div className="container mx-auto max-w-6xl text-center text-muted-foreground">
          <p>Shiitake John's Forest • Texada Island, BC • Where the pavement ends</p>
        </div>
      </footer>
    </div>
  )
}