"use client";

import { motion } from "framer-motion";
import { useInView } from "framer-motion";
import { useRef, ReactNode } from "react";

interface SectionWrapperProps {
  children: ReactNode;
  className?: string;
  id?: string;
  bg?: "white" | "ivory" | "beige" | "charcoal";
  pattern?: boolean;
  topWedgeColor?: string;
  bottomWedgeColor?: string;
}

/* ─── Animated Decorators ─── */
function FloatingShape({ type, className }: { type: "orb" | "geo"; className?: string }) {
  if (type === "orb") {
    return (
      <motion.div
        animate={{
          y: [0, -20, 0],
          x: [0, 10, 0],
          rotate: [0, 180, 360],
          scale: [1, 1.05, 1],
        }}
        transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
        className={`absolute rounded-full blur-3xl pointer-events-none ${className}`}
      />
    );
  }
  return (
    <motion.div
      animate={{ rotate: [0, 90, 180, 270, 360] }}
      transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
      className={`absolute opacity-10 pointer-events-none mix-blend-overlay ${className}`}
    >
      <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M100 10L190 55L190 145L100 190L10 145L10 55L100 10Z" stroke="currentColor" strokeWidth="2"/>
        <path d="M10 55L100 100L190 55M100 100V190" stroke="currentColor" strokeWidth="2"/>
      </svg>
    </motion.div>
  );
}

export default function SectionWrapper({
  children,
  className = "",
  id,
  bg = "white",
  pattern = false,
  topWedgeColor,
  bottomWedgeColor,
}: SectionWrapperProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  const bgClasses = {
    white: "bg-white overflow-hidden relative",
    ivory: "bg-brand-ivory overflow-hidden relative",
    beige: "bg-brand-beige overflow-hidden relative",
    charcoal: "bg-brand-charcoal text-white overflow-hidden relative",
  };

  return (
    <section
      ref={ref}
      id={id}
      className={`py-20 md:py-28 ${bgClasses[bg]} ${pattern ? "bg-topo-pattern" : ""} ${className}`}
    >
      {/* Decorative Backdrops */}
      {bg === "charcoal" && (
        <>
          <FloatingShape type="orb" className="w-[500px] h-[500px] bg-brand-gold/10 -top-[200px] -right-[200px]" />
          <FloatingShape type="geo" className="text-brand-gold -bottom-20 -left-20 text-brand-gold/20" />
        </>
      )}
      {(bg === "ivory" || bg === "beige") && (
        <FloatingShape type="orb" className="w-[400px] h-[400px] bg-brand-gold/[0.04] top-1/2 -left-[150px] -translate-y-1/2" />
      )}
      {bg === "white" && !pattern && (
        <div className="absolute inset-0 bg-grid-pattern pointer-events-none" />
      )}

      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        className="max-w-7xl mx-auto px-6 relative z-20"
      >
        {children}
      </motion.div>
    </section>
  );
}

/* Section Header Component */
interface SectionHeaderProps {
  label?: string;
  title: string;
  subtitle?: string;
  centered?: boolean;
  light?: boolean;
}

export function SectionHeader({
  label,
  title,
  subtitle,
  centered = true,
  light = false,
}: SectionHeaderProps) {
  return (
    <div className={`mb-16 ${centered ? "text-center" : ""}`}>
      {label && (
        <motion.span
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="inline-block text-xs uppercase tracking-[0.25em] font-semibold text-brand-gold mb-4"
        >
          {label}
        </motion.span>
      )}
      <motion.h2
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6, delay: 0.1 }}
        className={`text-3xl md:text-4xl lg:text-5xl font-serif font-bold leading-tight mb-6 ${
          light ? "text-white" : "text-brand-charcoal"
        }`}
      >
        {title}
      </motion.h2>
      {subtitle && (
        <motion.p
          initial={{ opacity: 0, y: 15 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.2 }}
          className={`text-lg leading-relaxed max-w-3xl ${centered ? "mx-auto" : ""} ${
            light ? "text-gray-300" : "text-brand-gray"
          }`}
        >
          {subtitle}
        </motion.p>
      )}
      <motion.div
        initial={{ scaleX: 0 }}
        whileInView={{ scaleX: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8, delay: 0.3 }}
        className={`mt-8 ${centered ? "flex justify-center" : ""}`}
      >
        <div className="w-20 h-0.5 bg-brand-gold origin-left" />
      </motion.div>
    </div>
  );
}

/* Gold Divider */
export function GoldDivider() {
  return (
    <div className="max-w-7xl mx-auto px-6">
      <div className="gold-divider" />
    </div>
  );
}

/* Stat Card */
interface StatCardProps {
  value: string;
  label: string;
  icon?: string;
}

export function StatCard({ value, label, icon }: StatCardProps) {
  return (
    <motion.div
      whileHover={{ y: -4 }}
      transition={{ duration: 0.3 }}
      className="text-center p-6 cursor-default"
    >
      {icon && <div className="text-3xl mb-3">{icon}</div>}
      <div className="text-3xl md:text-4xl font-serif font-bold text-brand-gold mb-2">
        {value}
      </div>
      <div className="text-sm text-brand-gray uppercase tracking-wider font-medium">
        {label}
      </div>
    </motion.div>
  );
}

/* CTA Block */
interface CTABlockProps {
  headline: string;
  primaryLabel: string;
  primaryHref: string;
  secondaryLabel?: string;
  secondaryHref?: string;
}

export function CTABlock({
  headline,
  primaryLabel,
  primaryHref,
  secondaryLabel,
  secondaryHref,
}: CTABlockProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6 }}
      className="text-center"
    >
      <h3 className="text-2xl md:text-3xl font-serif font-bold text-brand-charcoal mb-8">
        {headline}
      </h3>
      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <motion.a
          href={primaryHref}
          whileHover={{ scale: 1.03, boxShadow: "0 8px 30px rgba(184,146,58,0.35)" }}
          whileTap={{ scale: 0.98 }}
          className="inline-flex items-center justify-center px-8 py-4 bg-brand-gold text-white font-semibold rounded hover:bg-brand-gold-dark transition-all hover:shadow-lg"
        >
          {primaryLabel}
        </motion.a>
        {secondaryLabel && secondaryHref && (
          <motion.a
            href={secondaryHref}
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.98 }}
            className="inline-flex items-center justify-center px-8 py-4 border-2 border-brand-gold text-brand-gold font-semibold rounded hover:bg-brand-gold hover:text-white transition-all"
          >
            {secondaryLabel}
          </motion.a>
        )}
      </div>
    </motion.div>
  );
}

/* Page Hero Banner */
interface PageHeroProps {
  title: string;
  subtitle?: string;
  breadcrumb?: string;
  bottomWedgeColor?: string;
}

export function PageHero({ title, subtitle, breadcrumb, bottomWedgeColor = "#ffffff" }: PageHeroProps) {
  return (
    <section className="relative bg-brand-charcoal py-24 md:py-32 overflow-hidden">
      {/* Decorative elements */}
      <div className="absolute inset-0 bg-topo-pattern opacity-30" />
      <motion.div
        animate={{ scale: [1, 1.1, 1], opacity: [0.05, 0.12, 0.05] }}
        transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
        className="absolute top-0 right-0 w-[600px] h-[600px] bg-brand-gold rounded-full blur-[120px]"
      />
      <motion.div
        animate={{ scale: [1.1, 1, 1.1], opacity: [0.03, 0.08, 0.03] }}
        transition={{ duration: 14, repeat: Infinity, ease: "easeInOut", delay: 3 }}
        className="absolute -bottom-40 -left-20 w-[400px] h-[400px] bg-brand-gold rounded-full blur-[100px]"
      />

      {/* Subtle grid lines */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-[0.04]">
        {[...Array(4)].map((_, i) => (
          <motion.div
            key={`h-${i}`}
            initial={{ scaleX: 0, opacity: 0 }}
            animate={{ scaleX: 1, opacity: 1 }}
            transition={{ duration: 2, delay: 0.3 + i * 0.15, ease: "easeOut" }}
            className="absolute h-px bg-gradient-to-r from-brand-gold via-brand-gold/40 to-transparent"
            style={{ top: `${20 + i * 18}%`, left: 0, right: 0, transformOrigin: "left" }}
          />
        ))}
      </div>

      <div className="relative max-w-7xl mx-auto px-6 text-center z-10">
        {breadcrumb && (
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="flex items-center justify-center gap-3 mb-8"
          >
            <span className="block h-px w-8 bg-brand-gold/50" />
            <span className="text-brand-gold text-[10px] uppercase tracking-[0.25em] font-bold">
              Home / {breadcrumb}
            </span>
            <span className="block h-px w-8 bg-brand-gold/50" />
          </motion.div>
        )}
        <motion.h1
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.15 }}
          className="text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-white mb-6"
        >
          {title}
        </motion.h1>
        {subtitle && (
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.3 }}
            className="text-lg text-gray-300 max-w-3xl mx-auto leading-relaxed"
          >
            {subtitle}
          </motion.p>
        )}
        <motion.div
          initial={{ scaleX: 0 }}
          animate={{ scaleX: 1 }}
          transition={{ duration: 1, delay: 0.5 }}
          className="mt-8 flex justify-center"
        >
          <div className="w-20 h-0.5 bg-brand-gold" />
        </motion.div>
      </div>
    </section>
  );
}