import React from "react";
import { motion } from "framer-motion";

// EKA Website with logo on left and enhanced visuals
export default function EkaWebsite() {
  const logo = "https://res.cloudinary.com/dhs7j6x1m/image/upload/v1759312496/Eka_unxtvn.png";

  return (
    <div className="min-h-screen bg-gradient-to-b from-[#F7F5F2] to-[#EDE9E4] text-[#2E2A28] antialiased">
      <style>{` :root { --eka-primary: #2E7D77; --eka-accent: #B79C86; --eka-neutral: #F7F5F2; --eka-text:#2E2A28; } `}</style>

      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/90 backdrop-blur-lg shadow-md">
        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
          {/* Logo on Left */}
          <motion.div 
            className="flex items-center gap-4"
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
          >
            <img src={logo} alt="EKA logo" className="h-20 w-auto object-contain drop-shadow-md" />
            <div>
              <div className="text-2xl font-extrabold tracking-wide text-[var(--eka-primary)]">EKA</div>
              <div className="text-sm text-gray-600">Naturally Timeless, For All</div>
            </div>
          </motion.div>

          {/* Navigation */}
          <nav className="hidden md:flex gap-8 items-center text-sm">
            {["About", "Values", "Craftsmanship", "Guidelines"].map((item) => (
              <motion.a
                key={item}
                href={`#${item.toLowerCase()}`}
                whileHover={{ scale: 1.1, color: "#2E7D77" }}
                className="hover:underline font-medium"
              >
                {item}
              </motion.a>
            ))}
            <a className="px-4 py-2 rounded bg-[var(--eka-primary)] text-white text-sm hover:opacity-90 shadow-md" href="#contact">Contact</a>
          </nav>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden">
        {/* Decorative background gradient blob */}
        <div className="absolute -top-32 -left-32 w-96 h-96 bg-[var(--eka-primary)] opacity-20 rounded-full blur-3xl animate-pulse"></div>

        <div className="relative max-w-6xl mx-auto px-6 py-20 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          <motion.div 
            initial={{ opacity: 0, x: -50 }} 
            whileInView={{ opacity: 1, x: 0 }} 
            transition={{ duration: 0.8 }}
          >
            <h1 className="text-6xl md:text-7xl font-extrabold leading-tight text-[var(--eka-primary)] drop-shadow-sm">
              EKA
            </h1>
            <p className="mt-2 text-xl md:text-2xl text-gray-700 font-medium">Naturally Timeless, For All</p>

            <p className="mt-6 text-base text-gray-700 max-w-xl">
              EKA is a conscious luxury brand built on the philosophy of minimalism and authenticity.
              We create timeless designs crafted with eco-friendly, chemical-free materials.
              Every piece reflects responsible craftsmanship that respects both people and the planet.
            </p>

            <div className="mt-8 flex gap-4">
              <motion.a whileHover={{ scale: 1.05 }} href="#shop" className="inline-block px-6 py-3 rounded bg-[var(--eka-primary)] text-white font-medium shadow-lg">Shop Timeless Pieces</motion.a>
              <motion.a whileHover={{ scale: 1.05 }} href="#guidelines" className="inline-block px-6 py-3 rounded border border-gray-200 shadow">Brand Guidelines</motion.a>
            </div>
          </motion.div>

          <motion.div 
            className="flex justify-center md:justify-end"
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8 }}
          >
            <div className="bg-white rounded-2xl shadow-2xl p-10 w-full max-w-md hover:shadow-3xl transition transform hover:scale-105">
              <img src={logo} alt="EKA" className="h-44 mx-auto mb-6 drop-shadow-lg" />
              <h3 className="text-2xl text-center font-semibold text-[var(--eka-primary)]">One choice. One planet. One timeless creation.</h3>
              <p className="mt-4 text-base text-gray-600 text-center">Minimal silhouettes, pure materials, and intentional design for the mindful dresser.</p>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Values */}
      <section id="values" className="max-w-6xl mx-auto px-6 py-16">
        <h2 className="text-3xl font-bold text-center text-[var(--eka-primary)] mb-12">Our Core Values</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {[
            { title: 'Authenticity', text: 'Materials and processes that are honest — no harmful chemicals or false claims.' },
            { title: 'Minimalism', text: 'Designs that focus on purpose and form, avoiding excess.' },
            { title: 'Responsibility', text: 'Fair practices across the supply chain and a measured environmental footprint.' },
          ].map((v, i) => (
            <motion.div
              key={v.title}
              className="bg-white p-8 rounded-2xl shadow-md hover:shadow-xl transition transform hover:scale-105"
              whileHover={{ y: -6 }}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: i * 0.2 }}
            >
              <h4 className="text-lg font-semibold mb-3 text-[var(--eka-primary)]">{v.title}</h4>
              <p className="text-sm text-gray-600">{v.text}</p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-gray-100 mt-12 bg-white/80 backdrop-blur">
        <div className="max-w-6xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="text-sm text-gray-600">© {new Date().getFullYear()} EKA — Naturally Timeless, For All</div>
          <div className="flex gap-4 text-sm text-gray-600">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Press</a>
          </div>
        </div>
      </footer>
    </div>
  );
}