// Seraphora - Starter React component (single-file)
// TailwindCSS classes are used for styling. Drop this into a Create React App / Vite / Next.js project
// Make sure Tailwind is set up in your project (recommended)

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

export default function SeraphoraLanding() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-[#0f172a] via-[#0b1220] to-[#081226] text-slate-100 antialiased">
      {/* Header */}
      <header className="max-w-6xl mx-auto p-6 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Logo />
          <div>
            <h1 className="text-lg font-semibold tracking-wide">Seraphora</h1>
            <p className="text-xs text-slate-400">Sanctified spaces • spiritual home design</p>
          </div>
        </div>
        <nav className="hidden md:flex gap-6 items-center text-sm text-slate-300">
          <a className="hover:text-white transition" href="#features">Philosophy</a>
          <a className="hover:text-white transition" href="#process">Process</a>
          <a className="hover:text-white transition" href="#gallery">Gallery</a>
          <button className="ml-2 px-4 py-2 bg-white/6 backdrop-blur rounded-full text-sm hover:bg-white/10 transition">Get Started</button>
        </nav>
      </header>

      {/* Hero */}
      <main className="max-w-6xl mx-auto px-6 py-10 flex flex-col md:flex-row gap-8 items-center">
        <section className="flex-1">
          <motion.h2
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.05 }}
            className="text-4xl md:text-5xl font-extrabold leading-tight">
            Design your home with intention
          </motion.h2>

          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.2 }}
            className="mt-4 text-slate-300 max-w-xl">
            Seraphora blends spiritual principles, subtle ritual, and modern design to craft sanctuaries that
            nourish the soul. From aura-aware color palettes to altar-friendly nooks, build a home that feels
            like a haven.
          </motion.p>

          <div className="mt-8 flex gap-3">
            <a href="#get-started" className="inline-flex items-center gap-2 px-5 py-3 rounded-full bg-gradient-to-r from-[#7c3aed] to-[#06b6d4] font-medium shadow-lg">Create my sanctuary</a>
            <a href="#gallery" className="inline-flex items-center gap-2 px-5 py-3 rounded-full border border-white/10 text-sm">Explore gallery</a>
          </div>

          <Features />
        </section>

        <aside className="flex-1">
          <div className="rounded-2xl p-6 bg-gradient-to-br from-white/3 to-white/2 border border-white/5 backdrop-blur-lg">
            <div className="mb-4">
              <h3 className="text-xl font-semibold">Quick start</h3>
              <p className="text-sm text-slate-300">Answer a few questions and get a tailored sacred layout.</p>
            </div>

            <ol className="space-y-3 text-sm text-slate-200">
              <li className="flex items-start gap-3">
                <div className="w-7 h-7 rounded-full bg-white/6 flex items-center justify-center">1</div>
                <div>
                  <div className="font-medium">Set intention</div>
                  <div className="text-slate-400 text-xs">Choose the life you want your space to support.</div>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <div className="w-7 h-7 rounded-full bg-white/6 flex items-center justify-center">2</div>
                <div>
                  <div className="font-medium">Select energy tone</div>
                  <div className="text-slate-400 text-xs">Calm, radiant, grounded—or a bespoke blend.</div>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <div className="w-7 h-7 rounded-full bg-white/6 flex items-center justify-center">3</div>
                <div>
                  <div className="font-medium">Receive layout</div>
                  <div className="text-slate-400 text-xs">A focused plan with altars, flow, and light placement.</div>
                </div>
              </li>
            </ol>

            <div className="mt-6">
              <a href="#get-started" className="block text-center px-4 py-2 rounded-md bg-white/6 hover:bg-white/8">Begin</a>
            </div>
          </div>
        </aside>
      </main>

      {/* Gallery & Process */}
      <section id="gallery" className="max-w-6xl mx-auto px-6 py-12">
        <h3 className="text-2xl font-semibold mb-4">Gallery — glimpses of sanctuaries</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {new Array(6).fill(0).map((_, i) => (
            <div key={i} className="rounded-xl overflow-hidden border border-white/6">
              <div className="h-44 bg-gradient-to-br from-[#0f172a] to-[#0b1220] flex items-center justify-center text-slate-400">Image {i + 1}</div>
              <div className="p-4">
                <h4 className="font-medium">Sanctuary {i + 1}</h4>
                <p className="text-xs text-slate-400 mt-1">Soft light, earthen textures, and a peaceful altar nook.</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section id="features" className="max-w-6xl mx-auto px-6 py-8">
        <h3 className="text-2xl font-semibold mb-6">Design Philosophy</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card title="Intentional Layout" desc="Flow-first designs that honor rituals and daily rhythms." />
          <Card title="Energy Palettes" desc="Colors chosen for mood, aura alignment, and light." />
          <Card title="Minimal Altars" desc="Sacred moments integrated respectfully into everyday spaces." />
        </div>
      </section>

      {/* Footer */}
      <footer className="mt-12 border-t border-white/6 py-8">
        <div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
          <div>
            <div className="flex items-center gap-3">
              <Logo small />
              <div>
                <div className="font-semibold">Seraphora</div>
                <div className="text-xs text-slate-400">Build your sacred space</div>
              </div>
            </div>
          </div>
          <div className="text-sm text-slate-400">© {new Date().getFullYear()} Seraphora — All rights reserved</div>
        </div>
      </footer>
    </div>
  );
}

function Logo({ small = false }) {
  return (
    <div className={`flex items-center ${small ? 'gap-2' : 'gap-3'}`}>
      <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-[#7c3aed] to-[#06b6d4] flex items-center justify-center shadow-md">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C12 2 16 6 16 10C16 13 13.5 15 12 18C10.5 15 8 13 8 10C8 6 12 2 12 2Z" fill="white" fillOpacity="0.95" />
        </svg>
      </div>
    </div>
  );
}

function Features() {
  return (
    <div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div className="p-4 bg-white/3 rounded-xl border border-white/5">
        <div className="text-sm font-semibold">Aura Mapping</div>
        <div className="text-xs text-slate-300 mt-1">Match colors & layout to personal energy.</div>
      </div>
      <div className="p-4 bg-white/3 rounded-xl border border-white/5">
        <div className="text-sm font-semibold">Ritual Corners</div>
        <div className="text-xs text-slate-300 mt-1">Small, intentional spaces for daily practice.</div>
      </div>
      <div className="p-4 bg-white/3 rounded-xl border border-white/5">
        <div className="text-sm font-semibold">Light Guidance</div>
        <div className="text-xs text-slate-300 mt-1">Placement suggestions for mood & clarity.</div>
      </div>
    </div>
  );
}

function Card({ title, desc }) {
  return (
    <div className="p-6 rounded-2xl bg-white/3 border border-white/5">
      <h4 className="font-semibold mb-2">{title}</h4>
      <p className="text-sm text-slate-300">{desc}</p>
    </div>
  );
}