import React, { useEffect, useRef, useState, useLayoutEffect, useMemo, memo } from 'react';
import { 
  motion, 
  useScroll, 
  useTransform, 
  AnimatePresence, 
  useAnimation, 
  useMotionValue,
  useVelocity,
  useSpring,
  useAnimationFrame
} from 'framer-motion';
import { 
  ArrowUpRight, 
  Monitor, 
  RefreshCw, 
  Star, 
  FileText, 
  Calendar, 
  Rocket, 
  Globe, 
  Smartphone, 
  Zap, 
  Shield,
  ChevronRight,
  X,
  Grape
} from 'lucide-react';
import Hls from 'hls.js';

// --- Global Styles ---
const globalStyles = `
  @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Instrument+Serif:ital@1&display=swap');

  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --font-heading: 'Instrument Serif', serif;
    --font-body: 'Barlow', sans-serif;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    overflow-x: hidden;
  }

  .font-heading { font-family: var(--font-heading); }
  .font-body { font-family: var(--font-body); }

  .liquid-glass {
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .liquid-glass-strong {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .fade-bottom { background: linear-gradient(to bottom, transparent, black); }
  .fade-top { background: linear-gradient(to top, transparent, black); }

  input, textarea, select {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: white !important;
    outline: none !important;
  }
`;

// --- Utility: Wrap Math for Infinite Scrolling ---
const wrap = (min, max, v) => {
  const rangeSize = max - min;
  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
};

// --- Shared Component: Badge ---
const Badge = ({ children }) => (
  <div className="liquid-glass rounded-full px-4 py-1.5 text-xs font-semibold text-white/90 font-body inline-block mb-6 tracking-wide uppercase">
    {children}
  </div>
);

// --- Components: Booking Form Modal ---
const BookingForm = ({ isOpen, onClose, calDataProps }) => {
  const [step, setStep] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    need: '',
    name: '',
    email: '',
    company: '',
    url: '',
    competitor: '',
    offer: '',
    budget: '',
  });

  const encode = (data) => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&");
  };

  const handleSubmit = async () => {
    setIsSubmitting(true);
    try {
      const isSandbox = window.location.href.startsWith('blob:');
      
      if (!isSandbox) {
        await fetch("/", {
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body: encode({ "form-name": "booking-intel", ...formData })
        });
      } else {
        console.log("Sandbox mode detected: Skipped Netlify form submission. Form Data:", formData);
      }
    } catch (error) {
      console.warn("Netlify Form submission error:", error);
    } finally {
      setIsSubmitting(false);
      setStep(5);
    }
  };

  const handleNext = () => {
    if (step === 4) handleSubmit();
    else setStep(step + 1);
  };

  if (!isOpen) return null;

  return (
    <motion.div 
      initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
      className="fixed inset-0 z-[100] bg-black flex flex-col items-center justify-center p-6"
    >
      {/* Hidden form for Netlify */}
      <form hidden method='post' name='booking-intel'>
        <input type="hidden" name="form-name" value="booking-intel" />
        <input type="text" name="need" />
        <input type="text" name="name" />
        <input type="email" name="email" />
        <input type="text" name="company" />
        <input type="url" name="url" />
        <input type="url" name="competitor" />
        <textarea name="offer"></textarea>
        <input type="text" name="budget" />
      </form>

      <button onClick={onClose} className="absolute top-8 right-8 text-white/40 hover:text-white transition-colors"><X className="w-8 h-8" /></button>
      
      <div className="w-full max-w-2xl">
        <AnimatePresence mode="wait">
          {step === 1 && (
            <motion.div key="step1" initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -20, opacity: 0 }} className="space-y-8">
              <h2 className="text-5xl md:text-6xl font-heading italic tracking-tight">What are we building?</h2>
              <div className="grid grid-cols-1 gap-4">
                {["A brand new website", "A high-converting rework"].map((opt) => (
                  <button key={opt} onClick={() => { setFormData({...formData, need: opt}); handleNext(); }} className={`p-6 rounded-2xl text-left border transition-all ${formData.need === opt ? 'bg-white text-black border-white' : 'border-white/10 hover:border-white/30 bg-white/5'}`}>
                    <span className="text-xl font-medium">{opt}</span>
                  </button>
                ))}
              </div>
            </motion.div>
          )}
          {step === 2 && (
            <motion.div key="step2" initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -20, opacity: 0 }} className="space-y-8">
              <h2 className="text-5xl md:text-6xl font-heading italic tracking-tight">The Basics</h2>
              <div className="space-y-6">
                <div><label className="text-xs uppercase tracking-widest text-white/40 font-bold mb-2 block">Your Name</label>
                <input type="text" name="name" placeholder="John Doe" className="w-full p-4 rounded-xl text-lg" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} /></div>
                <div><label className="text-xs uppercase tracking-widest text-white/40 font-bold mb-2 block">Work Email</label>
                <input type="email" name="email" placeholder="john@company.com" className="w-full p-4 rounded-xl text-lg" value={formData.email} onChange={e => setFormData({...formData, email: e.target.value})} /></div>
                <div><label className="text-xs uppercase tracking-widest text-white/40 font-bold mb-2 block">Company Name</label>
                <input type="text" name="company" placeholder="Acme Corp" className="w-full p-4 rounded-xl text-lg" value={formData.company} onChange={e => setFormData({...formData, company: e.target.value})} /></div>
                <button disabled={!formData.name || !formData.email || !formData.company} onClick={handleNext} className="w-full py-4 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-xl font-bold text-lg disabled:opacity-30 disabled:hover:scale-100 hover:scale-[1.02] transition-all duration-300 shadow-[0_0_15px_rgba(168,85,247,0.5)] flex items-center justify-center gap-2">Continue <ChevronRight className="w-5 h-5" /></button>
              </div>
            </motion.div>
          )}
          {step === 3 && (
            <motion.div key="step3" initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -20, opacity: 0 }} className="space-y-8">
              <h2 className="text-5xl md:text-6xl font-heading italic tracking-tight">The Strategy Intel</h2>
              <div className="space-y-6">
                <div><label className="text-xs uppercase tracking-widest text-white/40 font-bold mb-2 block">Current Website (Optional)</label>
                <input type="url" name="url" placeholder="https://your-site.com" className="w-full p-4 rounded-xl text-lg" value={formData.url} onChange={e => setFormData({...formData, url: e.target.value})} /></div>
                <div><label className="text-xs uppercase tracking-widest text-white/40 font-bold mb-2 block">Top Competitor's Website</label>
                <input type="url" name="competitor" placeholder="https://their-site.com" className="w-full p-4 rounded-xl text-lg" value={formData.competitor} onChange={e => setFormData({...formData, competitor: e.target.value})} /></div>
                <div><label className="text-xs uppercase tracking-widest text-white/40 font-bold mb-2 block">Your Main Offer</label>
                <textarea name="offer" placeholder="In one sentence, what do you sell?" className="w-full p-4 rounded-xl text-lg h-32" value={formData.offer} onChange={e => setFormData({...formData, offer: e.target.value})} /></div>
                <button disabled={!formData.competitor || !formData.offer} onClick={handleNext} className="w-full py-4 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-xl font-bold text-lg disabled:opacity-30 disabled:hover:scale-100 hover:scale-[1.02] transition-all duration-300 shadow-[0_0_15px_rgba(168,85,247,0.5)] flex items-center justify-center gap-2">Continue <ChevronRight className="w-5 h-5" /></button>
              </div>
            </motion.div>
          )}
          {step === 4 && (
            <motion.div key="step4" initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -20, opacity: 0 }} className="space-y-8">
              <h2 className="text-5xl md:text-6xl font-heading italic tracking-tight">Project Investment</h2>
              <div className="grid grid-cols-1 gap-4">
                {["$1.5k - $3k", "$3k - $5k", "$5k - $10k+", "Under $1k"].map((opt) => (
                  <button key={opt} disabled={isSubmitting} onClick={() => { setFormData({...formData, budget: opt}); handleNext(); }} className={`p-6 rounded-2xl text-left border transition-all ${formData.budget === opt ? 'bg-white text-black border-white' : 'border-white/10 hover:border-white/30 bg-white/5'} ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}>
                    <span className="text-xl font-medium">{opt}</span>
                  </button>
                ))}
              </div>
              {isSubmitting && <p className="text-white/40 text-center animate-pulse mt-4">Syncing strategy intel...</p>}
            </motion.div>
          )}
          {step === 5 && (
            <motion.div key="step5" initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="text-center space-y-8">
              <div className="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6"><Star className="w-10 h-10 text-white" /></div>
              <h2 className="text-5xl md:text-7xl font-heading italic tracking-tight text-white leading-tight">Intel Received.</h2>
              <p className="text-xl text-white/60 max-w-md mx-auto">Choose a time for your strategy call below. We'll have your mockup insights ready.</p>
              <button {...calDataProps} onClick={onClose} className="px-10 py-4 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full font-bold text-xl hover:scale-105 transition-all duration-300 shadow-[0_0_20px_rgba(168,85,247,0.5)] hover:shadow-[0_0_30px_rgba(168,85,247,0.7)]">Open Calendar</button>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </motion.div>
  );
};

// --- Components: Media & Animation ---
const LoadingScreen = ({ onComplete }) => {
  const [progress, setProgress] = useState(0);
  const [wordIndex, setWordIndex] = useState(0);
  const words = ["Vision", "Preview", "Fruitful"];
  const onCompleteRef = useRef(onComplete);
  useEffect(() => { onCompleteRef.current = onComplete; }, [onComplete]);
  
  useEffect(() => {
    const wordInterval = setInterval(() => { setWordIndex((prev) => (prev < words.length - 1 ? prev + 1 : prev)); }, 900);
    let startTime;
    let animationFrame;
    const animateProgress = (timestamp) => {
      if (!startTime) startTime = timestamp;
      const elapsed = timestamp - startTime;
      const currentProgress = Math.min((elapsed / 2700) * 100, 100);
      setProgress(currentProgress);
      if (currentProgress < 100) animationFrame = requestAnimationFrame(animateProgress);
      else setTimeout(() => { if (onCompleteRef.current) onCompleteRef.current(); }, 400);
    };
    animationFrame = requestAnimationFrame(animateProgress);
    return () => { clearInterval(wordInterval); cancelAnimationFrame(animationFrame); };
  }, [words.length]);

  return (
    <motion.div exit={{ opacity: 0 }} transition={{ duration: 0.6 }} className="fixed inset-0 z-[9999] bg-[#0a0a0a] text-[#f5f5f5]">
      <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.1 }} className="absolute top-8 left-8 md:top-12 md:left-12 text-xs md:text-sm text-[#888888] uppercase tracking-[0.3em] font-body font-medium">
        Grapeful
      </motion.div>
      <div className="absolute inset-0 flex items-center justify-center">
        <AnimatePresence mode="wait">
          <motion.span key={wordIndex} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }} className="text-4xl md:text-6xl lg:text-7xl font-heading italic text-[#f5f5f5]/80 tracking-[-2px]">
            {words[wordIndex]}
          </motion.span>
        </AnimatePresence>
      </div>
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.1 }} className="absolute bottom-8 right-8 md:bottom-12 md:right-12 text-6xl md:text-8xl lg:text-9xl font-heading text-[#f5f5f5] tabular-nums tracking-[-4px]">
        {Math.round(progress).toString().padStart(3, '0')}
      </motion.div>
      <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-[#1f1f1f]/50">
        <motion.div className="h-full origin-left bg-gradient-to-r from-purple-500 to-indigo-500 shadow-[0_0_15px_rgba(168,85,247,0.5)]" style={{ scaleX: progress / 100 }} />
      </div>
    </motion.div>
  );
};

const HlsVideo = ({ src, className }) => {
  const videoRef = useRef(null);
  useEffect(() => {
    if (videoRef.current) {
      if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource(src); hls.attachMedia(videoRef.current); }
      else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) { videoRef.current.src = src; }
    }
  }, [src]);
  return <video ref={videoRef} autoPlay loop muted playsInline className={`object-cover ${className}`} />;
};

const BlurText = ({ text, className, delayOffset = 0 }) => (
  <div className={className}>
    {text.split(" ").map((word, i) => (
      <motion.span key={i} initial={{ filter: 'blur(10px)', opacity: 0, y: 30 }} whileInView={{ filter: 'blur(0px)', opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6, delay: delayOffset + (i * 0.1) }} className="inline-block mr-[0.25em]">{word}</motion.span>
    ))}
  </div>
);

// --- Components: Scroll Velocity Parallax Gallery ---

const ParallaxGalleryRow = ({ images, baseVelocity = 2 }) => {
  const baseX = useMotionValue(0);
  const { scrollY } = useScroll();
  const scrollVelocity = useVelocity(scrollY);
  const smoothVelocity = useSpring(scrollVelocity, { damping: 50, stiffness: 400 });
  const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], { clamp: false });

  // We duplicate images 4 times to guarantee a seamless loop regardless of screen size.
  const x = useTransform(baseX, (v) => `${wrap(-25, 0, v)}%`);

  const directionFactor = useRef(1);
  useAnimationFrame((t, delta) => {
    let moveBy = directionFactor.current * baseVelocity * (delta / 1000);

    if (velocityFactor.get() < 0) {
      directionFactor.current = -1;
    } else if (velocityFactor.get() > 0) {
      directionFactor.current = 1;
    }

    moveBy += directionFactor.current * moveBy * velocityFactor.get();
    baseX.set(baseX.get() + moveBy);
  });

  const duplicatedImages = [...images, ...images, ...images, ...images];

  return (
    <div className="flex w-full overflow-hidden select-none">
      <motion.div className="flex py-1 flex-nowrap" style={{ x }}>
        {duplicatedImages.map((src, i) => (
          <div key={i} className="flex-none w-[50vw] md:w-[35vw] lg:w-[30vw] pr-2">
            <img src={src} alt="work" className="w-full h-auto block border border-white/10 shadow-[0_0_40px_rgba(0,0,0,0.8)]" />
          </div>
        ))}
      </motion.div>
    </div>
  );
};

const InfiniteMarqueeGallery = ({ images }) => {
  const half = Math.ceil(images.length / 2);
  const row1 = images.slice(0, half);
  const row2 = images.slice(half);

  return (
    <section className="w-full bg-black relative z-20 py-24 flex flex-col overflow-hidden">
      <ParallaxGalleryRow images={row1} baseVelocity={-2} />
      <div className="mt-2">
        <ParallaxGalleryRow images={row2} baseVelocity={2} />
      </div>
    </section>
  );
};

const TextRevealByWord = ({ text }) => {
  const targetRef = useRef(null);
  const { scrollYProgress } = useScroll({ target: targetRef });
  return (
    <div ref={targetRef} className="relative z-0 h-[200vh]">
      <div className="sticky top-0 mx-auto flex h-[50%] max-w-5xl items-center justify-center">
        <p className="flex flex-wrap justify-center text-center font-heading italic text-white/20 text-4xl md:text-7xl leading-[1.1] tracking-[-4px]">
          {text.split(" ").map((word, i) => {
            const start = i / text.split(" ").length;
            const end = start + 1 / text.split(" ").length;
            const opacity = useTransform(scrollYProgress, [start, end], [0, 1]);
            return (
              <span key={i} className="relative mx-1 lg:mx-2.5">
                <span className="absolute opacity-20">{word}</span>
                <motion.span style={{ opacity }} className="text-white">{word}</motion.span>
              </span>
            );
          })}
        </p>
      </div>
    </div>
  );
};

// --- Portfolio Assets ---
const portfolioImages = [
  "https://motionsites.ai/assets/hero-hr-saas-preview-Cf365Y1O.gif",
  "https://motionsites.ai/assets/hero-neuralyn-preview-Br4FRDQA.gif",
  "https://motionsites.ai/assets/hero-logoisum-preview-yhpSc7Yy.gif",
  "https://motionsites.ai/assets/hero-web3-eos-poster-DF0_WdVS.png",
  "https://motionsites.ai/assets/hero-new-era-auto-preview-W56vp0xD.gif",
  "https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif",
  "https://motionsites.ai/assets/hero-taskora-preview-BlRBv8IU.gif",
  "https://motionsites.ai/assets/hero-synapse-ai-preview-BjBuH68i.gif",
  "https://motionsites.ai/assets/hero-bloom-ai-preview-g6RcYLTl.gif",
  "https://motionsites.ai/assets/hero-taskly-preview-Dq2MKaI0.gif"
];

// --- Main Application ---
export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [isFormOpen, setIsFormOpen] = useState(false);
  const journeyRef = useRef(null);
  const { scrollYProgress: journeyProgress } = useScroll({ target: journeyRef, offset: ["start 75%", "end 80%"] });
  const lineHeight = useTransform(journeyProgress, [0, 1], ["0%", "100%"]);

  useEffect(() => {
    (function (C, A, L) { 
      let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { 
        let cal = C.Cal; let ar = arguments; 
        if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } 
        if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if(typeof namespace === "string"){cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar); return;} p(cal, ar); 
      }; 
    })(window, "https://app.cal.com/embed/embed.js", "init");
    window.Cal("init", "15min", {origin:"https://app.cal.com"});
    window.Cal.ns["15min"]("ui", {"hideEventTypeDetails":false,"layout":"month_view"});
  }, []);

  const calDataProps = { "data-cal-link": "jimmy-nguyen-tippa0/15min", "data-cal-namespace": "15min", "data-cal-config": '{"layout":"month_view","useSlotsViewOnSmallScreen":"true"}' };

  return (
    <>
      <style>{globalStyles}</style>
      <AnimatePresence mode="wait">
        {isLoading && <LoadingScreen onComplete={() => setIsLoading(false)} />}
      </AnimatePresence>
      <AnimatePresence>
        {isFormOpen && <BookingForm isOpen={isFormOpen} onClose={() => setIsFormOpen(false)} calDataProps={calDataProps} />}
      </AnimatePresence>

      <div style={{ opacity: isLoading ? 0 : 1, transition: "opacity 0.5s ease-out" }} className="relative w-full bg-black text-white">
        
        {/* NAV */}
        <nav className="fixed top-4 left-0 right-0 z-50 px-4 flex justify-center w-full">
          <div className="w-full max-w-6xl flex items-center justify-between">
            <Grape className="w-8 h-8 text-white drop-shadow-lg" />
            <div className="hidden md:flex bg-white/10 backdrop-blur-xl rounded-full px-8 py-3 items-center gap-8 border border-white/20 shadow-lg">
              {["Process", "Capabilities", "Partnership"].map((item) => (
                <a key={item} href={`#${item.toLowerCase()}`} className="text-sm font-bold tracking-widest uppercase text-white/70 hover:text-white transition-colors">{item}</a>
              ))}
            </div>
            <button onClick={() => setIsFormOpen(true)} className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full px-6 py-2.5 flex items-center gap-2 text-sm font-bold tracking-tight shadow-[0_0_15px_rgba(168,85,247,0.5)] hover:shadow-[0_0_25px_rgba(168,85,247,0.7)] hover:scale-105 transition-all duration-300">Book Preview <Calendar className="w-4 h-4" /></button>
          </div>
        </nav>

        {/* HERO */}
        <section className="relative w-full min-h-screen flex flex-col items-center justify-center pt-32 pb-16 overflow-visible">
          <div className="absolute inset-0 z-0 opacity-40 mix-blend-screen overflow-hidden">
            <HlsVideo src="https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8" className="w-full h-full" />
          </div>
          <div className="absolute bottom-0 left-0 right-0 h-[300px] fade-bottom z-[1]"></div>
          <div className="relative z-10 text-center px-6 max-w-5xl mx-auto mt-16">
            <div className="liquid-glass rounded-full p-1 pr-4 flex items-center gap-3 mb-10 shadow-sm border border-white/10 inline-flex">
              <span className="bg-white text-black text-xs font-bold px-3 py-1 rounded-full">Risk-Free</span>
              <span className="text-sm font-medium text-white/90">Get a free preview before you pay.</span>
            </div>
            
            <div className="text-6xl md:text-8xl lg:text-[7.5rem] leading-[0.9] tracking-[-4px] font-heading italic text-white mb-10">
              <BlurText text="See your new website," className="block" delayOffset={0} />
              <BlurText text="Before you buy." className="block" delayOffset={0.4} />
            </div>

            <p className="text-lg md:text-xl font-medium tracking-tight text-white/70 max-w-2xl mb-12 leading-relaxed mx-auto text-center font-body">
              We design a custom, high-converting landing page for your business—100% free. If you love it, we partner to launch. If not, walk away risk-free.
            </p>
            <button onClick={() => setIsFormOpen(true)} className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full px-10 py-4 font-bold tracking-tight hover:scale-105 transition-all duration-300 shadow-[0_0_20px_rgba(168,85,247,0.5)] hover:shadow-[0_0_30px_rgba(168,85,247,0.7)] text-lg inline-flex items-center justify-center">Get Your Free Preview <ArrowUpRight className="ml-2 w-6 h-6 inline" /></button>
          </div>
        </section>

        {/* PARTNERS BAR */}
        <section className="relative z-20 py-12 flex flex-col items-center -mt-16 md:-mt-24">
          <Badge>Built for growing brands</Badge>
          <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 mt-4 px-6">
            {["Startups", "Local Services", "Consultants", "Agencies"].map((partner) => (
              <span key={partner} className="text-2xl md:text-4xl font-heading italic text-white/30 hover:text-white/60 transition-colors cursor-default tracking-tight">{partner}</span>
            ))}
          </div>
        </section>

        {/* MARQUEE GALLERY WITH SCROLL VELOCITY */}
        <InfiniteMarqueeGallery images={portfolioImages} />

        {/* JOURNEY SECTION */}
        <section id="process" ref={journeyRef} className="relative py-32 flex flex-col items-center overflow-hidden scroll-mt-24">
          <div className="absolute top-1/2 left-0 right-0 -translate-y-1/2 h-[100vh] opacity-30 pointer-events-none">
            <HlsVideo src="https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8" className="w-full h-full" />
          </div>
          <div className="absolute top-0 left-0 right-0 h-[300px] fade-top z-[1]"></div>
          <div className="absolute bottom-0 left-0 right-0 h-[300px] fade-bottom z-[1]"></div>
          
          <div className="relative z-10 text-center max-w-3xl mb-16 px-6">
            <Badge>The Journey</Badge>
            <h2 className="text-6xl md:text-8xl font-heading italic text-white tracking-[-4px] leading-[0.9] mb-6">From vision to fruitful reality.</h2>
            <p className="text-lg md:text-xl font-medium tracking-tight text-white/70 mb-10 text-center">A frictionless, zero-risk process designed to get your brand online faster and better.</p>
          </div>
          
          <div className="relative z-10 w-full max-w-5xl mx-auto py-12 px-6">
            <div className="absolute top-0 bottom-0 left-[32px] md:left-1/2 w-[2px] bg-white/10 md:-translate-x-1/2 rounded-full"></div>
            <motion.div className="absolute top-0 left-[32px] md:left-1/2 w-[2px] bg-gradient-to-b from-purple-500 via-fuchsia-500 to-indigo-500 md:-translate-x-1/2 rounded-full origin-top" style={{ height: lineHeight, filter: 'drop-shadow(0 0 10px rgba(168, 85, 247, 0.6))' }} />
            
            <div className="space-y-24">
              {[
                { title: "Fill the Form", desc: "Share your brand goals so we can build your 'Vibe Code' mockup.", icon: FileText },
                { title: "Strategy Call", desc: "A 15-minute chat to align our visions and verify the fit.", icon: Calendar },
                { title: "Free Preview", desc: "Review your functional landing page. $0 upfront cost.", icon: Monitor },
                { title: "Launch & Grow", desc: "Partner with us for ongoing growth, updates, and results.", icon: Rocket },
              ].map((step, i) => (
                <div key={i} className={`flex md:items-center ${i % 2 === 0 ? 'md:flex-row-reverse' : ''} relative`}>
                  <div className="absolute left-[32px] top-[32px] md:top-1/2 md:-translate-y-1/2 md:left-1/2 w-14 h-14 -translate-x-1/2 liquid-glass-strong border border-white/20 rounded-full flex items-center justify-center z-20 shadow-[0_0_20px_rgba(0,0,0,0.5)]">
                    <step.icon className="w-5 h-5 text-white" />
                  </div>
                  <div className={`w-full pl-24 md:pl-0 md:w-1/2 flex justify-center`}>
                    <motion.div 
                      initial={{ opacity: 0, x: i % 2 === 0 ? 100 : -100, y: 0 }} 
                      whileInView={{ opacity: 1, x: 0, y: 0 }} 
                      viewport={{ once: true, margin: "-150px" }} 
                      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }} 
                      className="bg-white/5 backdrop-blur-xl border border-white/30 rounded-3xl p-8 max-w-sm hover:-translate-y-1 transition-transform shadow-[0_8px_32px_rgba(0,0,0,0.5)]"
                    >
                      <span className="text-white/20 font-heading italic text-3xl mb-2 block">0{i+1}</span>
                      <h3 className="text-3xl font-heading italic text-white mb-2">{step.title}</h3>
                      <p className="text-white/70 font-medium leading-relaxed">{step.desc}</p>
                    </motion.div>
                  </div>
                  <div className="hidden md:block md:w-1/2"></div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CAPABILITIES SECTION */}
        <section id="capabilities" className="py-32 px-6 md:px-16 lg:px-24 max-w-7xl mx-auto scroll-mt-24">
          <div className="text-center mb-24">
            <Badge>Capabilities</Badge>
            <h2 className="text-6xl md:text-8xl font-heading italic text-white tracking-[-4px] leading-[0.9]">Grateful clients. Fruitful results.</h2>
          </div>
          <div className="flex flex-col lg:flex-row items-center gap-16 mb-32">
            <div className="lg:w-1/2 flex flex-col items-start">
              <h3 className="text-4xl md:text-5xl font-heading italic text-white tracking-[-4px] leading-[1] mb-6">Results first.<br/>Charge later.</h3>
              <p className="text-lg md:text-xl font-medium tracking-tight text-white/70 mb-8 max-w-md leading-relaxed">We believe in proving our value upfront. We build a functional preview before you ever pay.</p>
              <button onClick={() => setIsFormOpen(true)} className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full px-8 py-3.5 flex items-center gap-2 font-bold tracking-tight hover:scale-105 transition-all duration-300 shadow-[0_0_15px_rgba(168,85,247,0.5)] hover:shadow-[0_0_25px_rgba(168,85,247,0.7)]">Get Your Free Preview <ArrowUpRight className="w-4 h-4" /></button>
            </div>
            <div className="lg:w-1/2 w-full"><div className="liquid-glass rounded-3xl p-4 aspect-video overflow-hidden"><HlsVideo src="https://stream.mux.com/4IMYGcL01xjs7ek5ANO17JC4VQVUTsojZlnw4fXzwSxc.m3u8" className="w-full h-full object-cover rounded-2xl" /></div></div>
          </div>
          <div className="flex flex-col lg:flex-row-reverse items-center gap-16">
            <div className="lg:w-1/2 flex flex-col items-start lg:pl-16">
              <h3 className="text-4xl md:text-5xl font-heading italic text-white tracking-[-4px] leading-[1] mb-6">Beyond design.<br/>Ongoing growth.</h3>
              <p className="text-lg md:text-xl font-medium tracking-tight text-white/70 mb-8 max-w-md leading-relaxed">A fruitful business needs more than just a website. Our plan includes maintenance and reputation growth.</p>
              <button onClick={() => setIsFormOpen(true)} className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full px-8 py-3.5 flex items-center gap-2 font-bold tracking-tight hover:scale-105 transition-all duration-300 shadow-[0_0_15px_rgba(168,85,247,0.5)] hover:shadow-[0_0_25px_rgba(168,85,247,0.7)]">Book a Call <ArrowUpRight className="w-4 h-4" /></button>
            </div>
            <div className="lg:w-1/2 w-full"><div className="liquid-glass rounded-3xl p-4 aspect-video overflow-hidden"><HlsVideo src="https://stream.mux.com/Xw9AMwwJ5IHKwfzikjGlxoI3MLaKyLpk74rM01UdMsco.m3u8" className="w-full h-full object-cover rounded-2xl" /></div></div>
          </div>
        </section>

        {/* THE PARTNERSHIP SECTION */}
        <section id="partnership" className="py-24 px-6 md:px-16 lg:px-24 max-w-7xl mx-auto scroll-mt-24">
          <div className="text-center mb-16"><Badge>The Partnership</Badge><h2 className="text-6xl md:text-8xl font-heading italic text-white tracking-[-4px] leading-[0.9]">Everything you need. <br />Nothing you don't.</h2></div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            
            {/* Card 1: Setup */}
            <div className="bg-white/5 backdrop-blur-xl rounded-3xl p-10 md:p-12 hover:-translate-y-1 transition-transform flex flex-col relative overflow-hidden border border-white/30 shadow-[0_8px_32px_rgba(0,0,0,0.4)]">
              <div className="mb-10"><span className="bg-white/10 text-white/90 text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-wider">Setup</span><h3 className="text-4xl md:text-5xl font-heading italic tracking-[-2px] text-white mt-6">The Foundation</h3></div>
              <div className="space-y-8 flex-grow">
                <div className="flex gap-5"><div className="w-12 h-12 liquid-glass-strong rounded-full flex items-center justify-center shrink-0 border border-white/20"><Globe className="w-5 h-5 text-white" /></div><div><h4 className="text-2xl font-heading italic text-white mb-2">High-Converting Website</h4><p className="text-white/70 font-medium md:text-lg leading-relaxed">A clean, modern site built to earn trust and bring in leads.</p></div></div>
                <div className="flex gap-5"><div className="w-12 h-12 liquid-glass-strong rounded-full flex items-center justify-center shrink-0 border border-white/20"><Smartphone className="w-5 h-5 text-white" /></div><div><h4 className="text-2xl font-heading italic text-white mb-2">Mobile First Design</h4><p className="text-white/70 font-medium md:text-lg leading-relaxed">Looks sharp and works well on every screen size.</p></div></div>
                <div className="flex gap-5"><div className="w-12 h-12 liquid-glass-strong rounded-full flex items-center justify-center shrink-0 border border-white/20"><Zap className="w-5 h-5 text-white" /></div><div><h4 className="text-2xl font-heading italic text-white mb-2">Fast and Search Ready</h4><p className="text-white/70 font-medium md:text-lg leading-relaxed">Built for speed, structure, and better local visibility.</p></div></div>
              </div>
            </div>

            {/* Card 2: Monthly */}
            <div className="bg-white/5 backdrop-blur-xl rounded-3xl p-10 md:p-12 hover:-translate-y-1 transition-transform flex flex-col relative overflow-hidden border border-white/30 shadow-[0_8px_32px_rgba(168,85,247,0.2)]">
              <div className="absolute top-0 right-0 w-72 h-72 bg-purple-500/10 blur-3xl rounded-full" />
              <div className="mb-10 relative z-10"><span className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-wider shadow-[0_0_15px_rgba(168,85,247,0.4)]">Monthly</span><h3 className="text-4xl md:text-5xl font-heading italic tracking-[-2px] text-white mt-6">Growth Partner</h3></div>
              <div className="space-y-8 flex-grow relative z-10">
                <div className="flex gap-5"><div className="w-12 h-12 liquid-glass-strong rounded-full flex items-center justify-center shrink-0 border border-white/20"><Star className="w-5 h-5 text-white" /></div><div><h4 className="text-2xl font-heading italic text-white mb-2">Review Growth System</h4><p className="text-white/70 font-medium md:text-lg leading-relaxed">Make it easier for customers to leave reviews and boost your online reputation.</p></div></div>
                <div className="flex gap-5"><div className="w-12 h-12 liquid-glass-strong rounded-full flex items-center justify-center shrink-0 border border-white/20"><RefreshCw className="w-5 h-5 text-white" /></div><div><h4 className="text-2xl font-heading italic text-white mb-2">Ongoing Website Updates</h4><p className="text-white/70 font-medium md:text-lg leading-relaxed">We handle text changes, image swaps, and small layout edits.</p></div></div>
                <div className="flex gap-5"><div className="w-12 h-12 liquid-glass-strong rounded-full flex items-center justify-center shrink-0 border border-white/20"><Shield className="w-5 h-5 text-white" /></div><div><h4 className="text-2xl font-heading italic text-white mb-2">Hosting and Protection</h4><p className="text-white/70 font-medium md:text-lg leading-relaxed">Your site stays live, secure, and up to date.</p></div></div>
              </div>
            </div>

          </div>
        </section>

        {/* TEXT REVEAL */}
        <TextRevealByWord text="We prove our value first. See your high-converting website before paying a dime. Love it? Partner to launch. Don't? Walk away risk-free." />

        {/* FOOTER CTA */}
        <section className="relative py-48 px-6 flex flex-col items-center overflow-hidden">
          <div className="absolute inset-0 z-0 opacity-40">
             <HlsVideo src="https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8" className="w-full h-full" />
          </div>
          <div className="absolute top-0 left-0 right-0 h-[300px] fade-top z-[1]" />
          <h2 className="relative z-10 text-6xl md:text-8xl lg:text-[7.5rem] leading-[0.9] tracking-[-4px] font-heading italic text-white mb-12 text-center mt-12">Ready to launch?</h2>
          <button onClick={() => setIsFormOpen(true)} className="relative z-10 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full px-12 py-5 text-xl md:text-2xl font-bold tracking-tight hover:scale-105 transition-all duration-300 shadow-[0_0_20px_rgba(168,85,247,0.5)] hover:shadow-[0_0_30px_rgba(168,85,247,0.7)] flex items-center gap-2">Start Your Free Preview</button>
          <div className="mt-24 w-full max-w-6xl pt-8 border-t border-white/10 flex justify-between text-sm text-white/40 font-medium relative z-10">
            <p>© 2026 Grapeful Web Agency.</p>
            <div className="flex gap-8"><a href="#">Privacy</a><a href="#">Terms</a></div>
          </div>
        </section>
      </div>
    </>
  );
}