Untitled

import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

const NeptunSonyAdMockups = () => {
  return (
    <div className="grid grid-cols-1 gap-6 md:grid-cols-3 p-4">
      {/* Square Ad */}
      <Card className="rounded-2xl shadow-lg bg-gray-900 text-white">
        <CardHeader>
          <CardTitle className="text-xl font-bold text-center">Sony WH-1000XM4</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col items-center">
          <motion.img
            src="/images/sony_wh_1000xm4_square.jpg"
            alt="Sony WH-1000XM4"
            className="w-3/4 rounded-lg"
            whileHover={{ scale: 1.05 }}
          />
          <p className="text-center mt-4">
            "Izoloje botën. Zhytu në tingull. Vetëm tek Neptun!"
          </p>
          <Button className="mt-4 bg-blue-600 text-white hover:bg-blue-700">
            Bli Tani Tek Neptun
          </Button>
        </CardContent>
      </Card>

      {/* Horizontal Ad */}
      <Card className="rounded-2xl shadow-lg bg-gray-900 text-white">
        <CardHeader>
          <CardTitle className="text-xl font-bold text-left">Sony WH-1000XM4</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col md:flex-row items-center gap-4">
          <motion.img
            src="/images/sony_wh_1000xm4_horizontal.jpg"
            alt="Sony WH-1000XM4"
            className="w-full md:w-1/2 rounded-lg"
            whileHover={{ scale: 1.05 }}
          />
          <div className="text-left">
            <p>
              "Zhytuni në cilësinë më të lartë të audios me Sony WH-1000XM4. Tani në ofertë ekskluzive tek Neptun!"
            </p>
            <Button className="mt-4 bg-blue-600 text-white hover:bg-blue-700">
              Shiko Ofertën
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Vertical Ad */}
      <Card className="rounded-2xl shadow-lg bg-gray-900 text-white">
        <CardHeader>
          <CardTitle className="text-xl font-bold text-center">Sony WH-1000XM4</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col items-center">
          <motion.img
            src="/images/sony_wh_1000xm4_vertical.jpg"
            alt="Sony WH-1000XM4"
            className="w-full rounded-lg"
            whileHover={{ scale: 1.05 }}
          />
          <p className="text-center mt-4">
            "Përjetoni tingullin e përsosur me Sony WH-1000XM4. Merrni tuajin tani!"
          </p>
          <Button className="mt-4 bg-blue-600 text-white hover:bg-blue-700">
            Porosit Tani
          </Button>
        </CardContent>
      </Card>
    </div>
  );
};

export default NeptunSonyAdMockups;