import prisma from "@/lib/prisma";
import ServerNavigation from "@/app/components/ServerNavigation";
import ServerFooter from "@/app/components/ServerFooter";
import Link from "next/link";

export default async function AboutPage() {
  const settingsDb = await prisma.setting.findMany();
  const settingsMap = settingsDb.reduce((acc: any, curr: any) => {
    acc[curr.key] = curr.value;
    return acc;
  }, {});

  const heroImage = settingsMap["about_hero_image"] || "/images/gallery/img_7.jpg";
  const heroTitle = settingsMap["about_hero_title"] || "Our Story";
  const heroDesc = settingsMap["about_hero_desc"] || "Escape to the tranquil shores of Lazuli Hotel for a rejuvenating getaway in Marsa Alam.";
  const contentTitle = settingsMap["about_content_title"] || "A Sanctuary by the Red Sea";
  const contentP1 = settingsMap["about_content_p1"] || "Located on the pristine coastline of Marsa Alam, Lazuli Hotel is a 5-star beachfront property designed for ultimate relaxation and adventure. With our Moroccan-inspired architecture blending seamlessly into the natural beauty of the Red Sea, we offer an unforgettable experience.";
  const contentP2 = settingsMap["about_content_p2"] || "Whether you're exploring our vibrant house reef, unwinding in our lavish infinity pools, or indulging in world-class dining, every moment at Lazuli is crafted to perfection.";
  
  const contentImages = settingsMap["about_content_images"] 
    ? JSON.parse(settingsMap["about_content_images"]) 
    : ["/images/gallery/img_5.jpg", "/images/gallery/img_6.jpg"];

  return (
    <main style={{ backgroundColor: "var(--bg-primary)" }}>
      <ServerNavigation />
      
      {/* Hero Section */}
      <section 
        style={{ 
          height: "60vh", 
          backgroundImage: `linear-gradient(rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.7)), url('${heroImage}')`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          paddingTop: "5rem"
        }}
      >
        <div className="container animate-fade-in-up">
          <h1 style={{ fontSize: "4rem", color: "white", marginBottom: "1rem", fontFamily: "var(--font-serif)" }}>{heroTitle}</h1>
          <p style={{ fontSize: "1.25rem", color: "#e2e8f0", maxWidth: "600px", margin: "0 auto" }}>
            {heroDesc}
          </p>
        </div>
      </section>

      {/* Content Section */}
      <section style={{ padding: "5rem 0" }}>
        <div className="container">
          <div className="grid grid-cols-2" style={{ gap: "4rem", alignItems: "center" }}>
            <div className="animate-fade-in" style={{ animationDelay: "0.2s" }}>
              <h2 style={{ fontSize: "2.5rem", color: "var(--accent-gold)", marginBottom: "1.5rem" }}>{contentTitle}</h2>
              <p style={{ fontSize: "1.125rem", color: "var(--text-secondary)", lineHeight: "1.8", marginBottom: "1.5rem" }}>
                {contentP1}
              </p>
              <p style={{ fontSize: "1.125rem", color: "var(--text-secondary)", lineHeight: "1.8", marginBottom: "2rem" }}>
                {contentP2}
              </p>
              <Link href="/rooms" className="btn btn-primary" style={{ padding: "1rem 2rem", fontSize: "1.125rem" }}>
                Discover Our Rooms
              </Link>
            </div>
            
            <div className="grid grid-cols-2 animate-fade-in" style={{ gap: "1rem", animationDelay: "0.4s" }}>
              {contentImages.length > 0 && (
                <div className="hover-zoom" style={{ height: "300px" }}>
                  <img src={contentImages[0]} alt="Luxurious stay" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              )}
              {contentImages.length > 1 && (
                <div className="hover-zoom" style={{ height: "300px", transform: "translateY(2rem)" }}>
                  <img src={contentImages[1]} alt="Red Sea View" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Amenities Section */}
      <section style={{ padding: "5rem 0", backgroundColor: "white" }}>
        <div className="container animate-fade-in-up">
          <h2 style={{ fontSize: "2.5rem", textAlign: "center", marginBottom: "3rem", color: "var(--text-primary)" }}>Exceptional Amenities</h2>
          <div className="grid grid-cols-4" style={{ gap: "2rem", textAlign: "center" }}>
            <div style={{ padding: "2rem", backgroundColor: "var(--bg-primary)", borderRadius: "1rem" }}>
              <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>🌊</div>
              <h3 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>Private Beach</h3>
              <p style={{ color: "var(--text-secondary)", fontSize: "0.875rem" }}>Direct access to the pristine Red Sea shores.</p>
            </div>
            <div style={{ padding: "2rem", backgroundColor: "var(--bg-primary)", borderRadius: "1rem" }}>
              <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>🏊‍♂️</div>
              <h3 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>Infinity Pools</h3>
              <p style={{ color: "var(--text-secondary)", fontSize: "0.875rem" }}>Multiple outdoor pools including an Aqua Park.</p>
            </div>
            <div style={{ padding: "2rem", backgroundColor: "var(--bg-primary)", borderRadius: "1rem" }}>
              <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>🍽️</div>
              <h3 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>Fine Dining</h3>
              <p style={{ color: "var(--text-secondary)", fontSize: "0.875rem" }}>World-class restaurants serving global cuisine.</p>
            </div>
            <div style={{ padding: "2rem", backgroundColor: "var(--bg-primary)", borderRadius: "1rem" }}>
              <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>💆‍♀️</div>
              <h3 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>Luxury Spa</h3>
              <p style={{ color: "var(--text-secondary)", fontSize: "0.875rem" }}>Rejuvenating treatments and massages.</p>
            </div>
          </div>
        </div>
      </section>

      <ServerFooter />
    </main>
  );
}