// App.jsx
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

// CONFIGURATION & BRANDING - edit these to customize
const BRAND_COLORS = {
  cyan: "#00BCD4",
  green: "#8BC34A",
  lightBrown: "#D7CCC8",
};
const FONT_HEADINGS = "'Playfair Display', serif"; // Greek inscription vibe
const FONT_BODY = "'Poppins', sans-serif"; // Rounded sans serif, modern
const LOGO_URL = "/logo-transparent.png"; // replace with your transparent logo path
const CALENDLY_URL = "https://calendly.com/yourusername"; // your calendly or tidycal link

// Sample data - replace with your actual content
const SERVICES = [
  {
    id: 1,
    icon: "🏛️",
    title: "Greek-Inspired Design",
    desc: "Elegant website and branding inspired by ancient Greece and Mediterranean vibes.",
  },
  {
    id: 2,
    icon: "🎨",
    title: "Custom Illustrations",
    desc: "Unique, hand-crafted illustrations with classic motifs and modern flair.",
  },
  {
    id: 3,
    icon: "💻",
    title: "Interactive Websites",
    desc: "Responsive, interactive, and engaging user experiences that are easy to navigate.",
  },
];

const PACKAGES = [
  {
    id: 1,
    name: "Starter",
    price: "$500",
    features: ["Basic Website", "3 Pages", "Mobile Responsive"],
  },
  {
    id: 2,
    name: "Professional",
    price: "$1200",
    features: ["Up to 7 Pages", "Advanced Animations", "Calendly Integration"],
  },
  {
    id: 3,
    name: "Premium",
    price: "$2500",
    features: ["Custom Design", "Blog Setup", "Full Support & Maintenance"],
    popular: true,
  },
];

const BLOG_POSTS = [
  {
    id: 1,
    title: "The Charm of Greek-Inspired Design",
    snippet:
      "Explore how ancient Greek architecture influences modern web aesthetics with simplicity and elegance.",
    image:
      "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=60",
  },
  {
    id: 2,
    title: "Top Interactive Website Trends 2025",
    snippet:
      "Discover what makes websites engaging and how to keep visitors hooked with subtle animations and usability.",
    image:
      "https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?auto=format&fit=crop&w=600&q=60",
  },
  {
    id: 3,
    title: "Why White Space is Your Best Friend",
    snippet:
      "Learn how using white space improves readability, focus, and the overall elegance of your website design.",
    image:
      "https://images.unsplash.com/photo-1486308510493-cb7d0a83f47b?auto=format&fit=crop&w=600&q=60",
  },
];

// Utility: Smooth scroll to top on page switch
const scrollToTop = () => window.scrollTo({ top: 0, behavior: "smooth" });

// NAVIGATION
function NavBar({ currentPage, setCurrentPage }) {
  const [servicesOpen, setServicesOpen] = useState(false);

  return (
    <nav
      className="w-full flex items-center justify-between px-8 py-4 fixed top-0 left-0 bg-white bg-opacity-90 backdrop-blur-md z-50 border-b border-gray-200"
      style={{ fontFamily: FONT_BODY }}
    >
      <div
        className="flex items-center space-x-3 cursor-pointer"
        onClick={() => {
          setCurrentPage("home");
          scrollToTop();
        }}
      >
        <img src={LOGO_URL} alt="Logo" className="h-12 w-auto" />
        <span
          className="font-serif font-bold text-xl"
          style={{ color: BRAND_COLORS.cyan }}
        >
          Your Brand
        </span>
      </div>
      <ul className="flex items-center space-x-6 text-gray-700 font-semibold text-lg">
        <li
          className={`cursor-pointer hover:text-[${BRAND_COLORS.green}] ${
            currentPage === "home" ? "text-" + BRAND_COLORS.green : ""
          }`}
          onClick={() => {
            setCurrentPage("home");
            scrollToTop();
          }}
        >
          Home
        </li>
        <li
          className="relative cursor-pointer"
          onMouseEnter={() => setServicesOpen(true)}
          onMouseLeave={() => setServicesOpen(false)}
        >
          Services ▾
          <AnimatePresence>
            {servicesOpen && (
              <motion.ul
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                className="absolute top-full mt-2 left-0 bg-white shadow-lg rounded-md min-w-[180px] border border-gray-200"
                style={{ fontFamily: FONT_BODY }}
              >
                <li
                  className="px-4 py-2 hover:bg-[rgba(139,195,74,0.1)] cursor-pointer"
                  onClick={() => {
                    setCurrentPage("services");
                    scrollToTop();
                    setServicesOpen(false);
                  }}
                >
                  Services Overview
                </li>
                <li
                  className="px-4 py-2 hover:bg-[rgba(139,195,74,0.1)] cursor-pointer"
                  onClick={() => {
                    setCurrentPage("packages");
                    scrollToTop();
                    setServicesOpen(false);
                  }}
                >
                  Packages & Offers
                </li>
              </motion.ul>
            )}
          </AnimatePresence>
        </li>
        <li
          className={`cursor-pointer hover:text-[${BRAND_COLORS.cyan}] ${
            currentPage === "schedule" ? "text-" + BRAND_COLORS.cyan : ""
          }`}
          onClick={() => {
            setCurrentPage("schedule");
            scrollToTop();
          }}
        >
          Schedule
        </li>
        <li
          className={`cursor-pointer hover:text-[${BRAND_COLORS.lightBrown}] ${
            currentPage === "blog" ? "text-" + BRAND_COLORS.lightBrown : ""
          }`}
          onClick={() => {
            setCurrentPage("blog");
            scrollToTop();
          }}
        >
          Blog
        </li>
        <li
          className={`cursor-pointer hover:text-[${BRAND_COLORS.green}] ${
            currentPage === "contact" ? "text-" + BRAND_COLORS.green : ""
          }`}
          onClick={() => {
            setCurrentPage("contact");
            scrollToTop();
          }}
        >
          Contact
        </li>
      </ul>
    </nav>
  );
}

// Home Page
function Home() {
  return (
    <main
      className="pt-24 px-6 md:px-20 max-w-6xl mx-auto text-gray-800"
      style={{ fontFamily: FONT_BODY }}
    >
      {/* Hero Section */}
      <section
        className="flex flex-col md:flex-row items-center justify-between mb-20"
        style={{ minHeight: "70vh" }}
      >
        {/* Left Text */}
        <motion.div
          initial={{ opacity: 0, x: -50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.7 }}
          className="max-w-lg space-y-6"
        >
          <h1
            className="text-5xl font-serif font-bold"
            style={{ color: BRAND_COLORS.cyan, fontFamily: FONT_HEADINGS }}
          >
            Welcome to Our Website
          </h1>
          <p className="text-lg leading-relaxed text-gray-700">
            Clean, elegant, and Greek-inspired websites that combine classical
            beauty with modern interactivity.
          </p>
          <div className="space-x-4">
            <a
              href="#schedule"
              className="inline-block bg-[${BRAND_COLORS.cyan}] hover:bg-[#009bb6] transition text-white px-6 py-3 rounded-md font-semibold shadow-md"
              style={{ backgroundColor: BRAND_COLORS.cyan }}
            >
              Book Now
            </a>
            <a
              href="#services"
              className="inline-block border border-[${BRAND_COLORS.green}] text-[${BRAND_COLORS.green}] hover:bg-[${BRAND_COLORS.green}] hover:text-white transition px-6 py-3 rounded-md font-semibold"
              style={{ borderColor: BRAND_COLORS.green, color: BRAND_COLORS.green }}
            >
              View Services
            </a>
          </div>
        </motion.div>

        {/* Right Hero Image / Greek Columns */}
        <motion.div
          initial={{ opacity: 0, x: 50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.7 }}
          className="mt-12 md:mt-0 relative w-full max-w-lg"
        >
          {/* Greek Columns SVG or simple illustration */}
          <svg
            viewBox="0 0 100 150"
            fill={BRAND_COLORS.cyan}
            xmlns="http://www.w3.org/2000/svg"
            className="w-full h-auto"
            aria-label="Greek column illustration"
          >
            <rect x="20" y="10" width="15" height="130" />
            <rect x="45" y="10" width="15" height="130" />
            <rect x="70" y="10" width="15" height="130" />
            <rect x="15" y="5" width="80" height="10" rx="5" />
            <rect x="15" y="140" width="80" height="10" rx="5" />
          </svg>
        </motion.div>
      </section>
    </main>
  );
}

// Services Page
function Services() {
  return (
    <main
      className="pt-24 px-6 md:px-20 max-w-5xl mx-auto text-gray-800"
      style={{ fontFamily: FONT_BODY }}
    >
      <h2
        className="text-4xl font-serif font-bold mb-10"
        style={{ color: BRAND_COLORS.green, fontFamily: FONT_HEADINGS }}
      >
        Our Services
      </h2>
      <div className="grid md:grid-cols-3 gap-10">
        {SERVICES.map(({ id, icon, title, desc }) => (
          <motion.div
            key={id}
            className="p-6 rounded-lg shadow-md bg-white"
            whileHover={{ scale: 1.05 }}
          >
            <div
              className="text-5xl mb-4"
              aria-hidden="true"
              aria-label={title + " icon"}
            >
              {icon}
            </div>
            <h3
              className="text-xl font-semibold mb-2"
              style={{ fontFamily: FONT_HEADINGS }}
            >
              {title}
            </h3>
            <p className="text-gray-700">{desc}</p>
          </motion.div>
        ))}
      </div>
    </main>
  );
}

// Packages Page
function Packages() {
  return (
    <main
      className="pt-24 px-6 md:px-20 max-w-4xl mx-auto text-gray-800"
      style={{ fontFamily: FONT_BODY }}
    >
      <h2
        className="text-4xl font-serif font-bold mb-10"
        style={{ color: BRAND_COLORS.lightBrown, fontFamily: FONT_HEADINGS }}
      >
        Our Packages
      </h2>
      <div className="flex flex-col md:flex-row gap-8 justify-center">
        {PACKAGES.map(({ id, name, price, features, popular }) => (
          <motion.div
            key={id}
            className={`flex flex-col p-8 rounded-xl shadow-lg ${
              popular ? "border-4 border-green-500" : "border border-gray-300"
            } bg-white max-w-xs mx-auto`}
            whileHover={{ scale: 1.05 }}
          >
            {popular && (
              <span className="text-green-600 font-semibold mb-3 self-center">
                Most Popular
              </span>
            )}
            <h3
              className="text-2xl font-serif font-bold mb-4 text-center"
              style={{ fontFamily: FONT_HEADINGS }}
            >
              {name}
            </h3>
            <p className="text-center text-3xl font-bold mb-6">{price}</p>
            <ul className="mb-6 list-disc list-inside text-gray-700">
              {features.map((feat, i) => (
                <li key={i}>{feat}</li>
              ))}
            </ul>
            <button
              className="mt-auto bg-green-500 hover:bg-green-600 text-white rounded-md py-3 font-semibold transition"
              aria-label={`Select ${name} package`}
              onClick={() => window.open(CALENDLY_URL, "_blank")}
            >
              Book Now
            </button>
          </motion.div>
        ))}
      </div>
    </main>
  );
}

// Schedule Page (Calendly iframe embed)
function Schedule() {
  return (
    <main
      className="pt-24 px-4 md:px-16 max-w-5xl mx-auto"
      style={{ fontFamily: FONT_BODY }}
    >
      <h2
        className="text-4xl font-serif font-bold mb-10 text-center"
        style={{ color: BRAND_COLORS.cyan, fontFamily: FONT_HEADINGS }}
      >
        Schedule an Appointment
      </h2>
      <div className="aspect-w-16 aspect-h-9">
        <iframe
          src={CALENDLY_URL}
          className="w-full h-full border-0 rounded-lg shadow-md"
          title="Schedule appointment"
          allow="clipboard-write"
        ></iframe>
      </div>
    </main>
  );
}

// Blog Page
function Blog() {
  return (
    <main
      className="pt-24 px-6 md:px-20 max-w-6xl mx-auto"
      style={{ fontFamily: FONT_BODY }}
    >
      <h2
        className="text-4xl font-serif font-bold mb-10 text-gray-800"
        style={{ color: BRAND_COLORS.lightBrown, fontFamily: FONT_HEADINGS }}
      >
        Blog
      </h2>
      <div className="grid md:grid-cols-3 gap-8">
        {BLOG_POSTS.map(({ id, title, snippet, image }) => (
          <motion.article
            key={id}
            className="rounded-lg shadow-lg overflow-hidden bg-white cursor-pointer"
            whileHover={{ scale: 1.02 }}
          >
            <img src={image} alt={title} className="w-full h-48 object-cover" />
            <div className="p-6">
              <h3
                className="text-xl font-semibold mb-2"
                style={{ fontFamily: FONT_HEADINGS }}
              >
                {title}
              </h3>
              <p className="text-gray-700">{snippet}</p>
            </div>
          </motion.article>
        ))}
      </div>
    </main>
  );
}

// Contact Page
function Contact() {
  return (
    <main
      className="pt-24 px-6 md:px-20 max-w-3xl mx-auto text-gray-800"
      style={{ fontFamily: FONT_BODY }}
    >
      <h2
        className="text-4xl font-serif font-bold mb-10 text-center"
        style={{ color: BRAND_COLORS.green, fontFamily: FONT_HEADINGS }}
      >
        Contact Us
      </h2>
      <form
        className="flex flex-col space-y-6"
        onSubmit={(e) => {
          e.preventDefault();
          alert("Thank you! Your message has been sent.");
          e.target.reset();
        }}
      >
        <label htmlFor="name" className="font-semibold">
          Name
        </label>
        <input
          id="name"
          type="text"
          required
          className="border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-400"
          aria-required="true"
        />

        <label htmlFor="email" className="font-semibold">
          Email
        </label>
        <input
          id="email"
          type="email"
          required
          className="border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-400"
          aria-required="true"
        />

        <label htmlFor="message" className="font-semibold">
          Message
        </label>
        <textarea
          id="message"
          required
          rows="5"
          className="border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-400"
          aria-required="true"
        ></textarea>

        <button
          type="submit"
          className="bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-md transition"
          aria-label="Send contact message"
        >
          Send Message
        </button>
      </form>
    </main>
  );
}

// Main App Component
export default function App() {
  const [currentPage, setCurrentPage] = useState("home");

  // For accessibility, set focus on main content on page change
  React.useEffect(() => {
    const mainEl = document.querySelector("main");
    if (mainEl) mainEl.focus();
  }, [currentPage]);

  return (
    <>
      <NavBar currentPage={currentPage} setCurrentPage={setCurrentPage} />
      <AnimatePresence mode="wait" initial={false}>
        <motion.div
          key={currentPage}
          initial={{ opacity: 0, x: 30 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -30 }}
          transition={{ duration: 0.4 }}
          tabIndex={-1}
          aria-live="polite"
        >
          {currentPage === "home" && <Home />}
          {currentPage === "services" && <Services />}
          {currentPage === "packages" && <Packages />}
          {currentPage === "schedule" && <Schedule />}
          {currentPage === "blog" && <Blog />}
          {currentPage === "contact" && <Contact />}
        </motion.div>
      </AnimatePresence>
      <footer
        className="mt-20 py-6 text-center text-gray-600 text-sm"
        style={{ fontFamily: FONT_BODY }}
      >
        &copy; {new Date().getFullYear()} Iconic Media. All rights reserved.
      </footer>
    </>
  );
}