import Image from "next/image";

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

export function Section2() {
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-8">
      <div className="space-y-4">
        <h2 className="text-3xl font-heading">Coffee Menu</h2>
        <div className="grid gap-6 md:grid-cols-2">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Espresso</CardTitle>
                <span className="font-bold">$3.50</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Pure and intense shot of coffee
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Espresso"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
              <div className="mt-4">
                <h3 className="font-heading text-lg mb-2">Extra Toppings</h3>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Caramel Syrup</span>
                    <span className="font-bold">+$0.50</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Vanilla Cream</span>
                    <span className="font-bold">+$0.75</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Chocolate Drizzle</span>
                    <span className="font-bold">+$0.60</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Cappuccino</CardTitle>
                <span className="font-bold">$4.50</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Espresso with steamed milk foam
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Cappuccino"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
              <div className="mt-4">
                <h3 className="font-heading text-lg mb-2">Extra Toppings</h3>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Cinnamon Powder</span>
                    <span className="font-bold">+$0.40</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Whipped Cream</span>
                    <span className="font-bold">+$0.70</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Cocoa Sprinkle</span>
                    <span className="font-bold">+$0.50</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Coffee</CardTitle>
                <div className="flex gap-2">
                  <span className="font-bold">12oz: $3.00</span>
                  <span className="font-bold">16oz: $3.50</span>
                </div>
              </div>
              <CardDescription className="text-muted-foreground">
                Classic brewed coffee, smooth and rich
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Coffee"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
              <div className="mt-4">
                <h3 className="font-heading text-lg mb-2">Extra Toppings</h3>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Hazelnut Syrup</span>
                    <span className="font-bold">+$0.50</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Almond Milk</span>
                    <span className="font-bold">+$0.75</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Extra Shot</span>
                    <span className="font-bold">+$1.00</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
      <Separator className="my-8" />
      <div className="space-y-4">
        <h2 className="text-3xl font-heading">Specialty Drinks</h2>
        <div className="grid gap-6 md:grid-cols-2">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Lavender Latte</CardTitle>
                <span className="font-bold">$5.50</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Espresso with lavender-infused milk
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Lavender Latte"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
              <div className="mt-4">
                <h3 className="font-heading text-lg mb-2">Extra Toppings</h3>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Honey Drizzle</span>
                    <span className="font-bold">+$0.50</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Almond Milk</span>
                    <span className="font-bold">+$0.75</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Lavender Sprinkle</span>
                    <span className="font-bold">+$0.40</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Matcha Frappe</CardTitle>
                <span className="font-bold">$5.99</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Blended green tea with ice and cream
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Matcha Frappe"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
              <div className="mt-4">
                <h3 className="font-heading text-lg mb-2">Extra Toppings</h3>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Coconut Cream</span>
                    <span className="font-bold">+$0.60</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Whipped Cream</span>
                    <span className="font-bold">+$0.70</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Extra Matcha</span>
                    <span className="font-bold">+$0.50</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
      <Separator className="my-8" />
      <div className="space-y-4">
        <h2 className="text-3xl font-heading">Food Menu</h2>
        <div className="grid gap-6 md:grid-cols-2">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Avocado Toast</CardTitle>
                <span className="font-bold">$8.99</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Sourdough bread with mashed avocado and seeds
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Avocado Toast"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
              <div className="mt-4">
                <h3 className="font-heading text-lg mb-2">Extra Toppings</h3>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Poached Egg</span>
                    <span className="font-bold">+$1.50</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Smoked Salmon</span>
                    <span className="font-bold">+$2.50</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Feta Cheese</span>
                    <span className="font-bold">+$1.00</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Croissant</CardTitle>
                <span className="font-bold">$3.99</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Freshly baked butter croissant
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Croissant"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
              <div className="mt-4">
                <h3 className="font-heading text-lg mb-2">Extra Toppings</h3>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Jam</span>
                    <span className="font-bold">+$0.50</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Butter</span>
                    <span className="font-bold">+$0.30</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Honey</span>
                    <span className="font-bold">+$0.60</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
