import React, { useState, useEffect, useRef } from 'react';
import { 
  Heart, Handshake, Phone, Mail, MapPin, Menu, X, ArrowRight, 
  Shield, Leaf, Users, Activity, CheckCircle, Gift, 
  Home as HomeIcon, Sun, Anchor, Award, Briefcase, Plus
} from 'lucide-react';

// --- CUSTOM CSS INJECTION ---
const globalStyles = `
  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

  :root {
    --bg: #f9f9f7; /* Warm Off-White */
    --bg-light: #ffffff; /* Pure White */
    --text: #0b1325; /* Deep Navy / Black */
    --accent: #f5a623; /* Warm Amber */
  }

  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
    cursor: none; /* Custom cursor */
  }

  h1, h2, h3, .use-serif {
    font-family: 'Lora', serif;
    letter-spacing: -0.01em !important;
  }

  /* Custom Cursor */
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
  }
  .custom-cursor.hovering {
    width: 60px;
    height: 60px;
    background-color: var(--text);
  }

  /* Typography Utilities */
  .text-huge {
    font-family: 'Lora', serif;
    font-size: clamp(3.5rem, 9vw, 10rem);
    line-height: 1;
    letter-spacing: -0.02em !important;
    font-weight: 500;
    text-transform: uppercase;
  }
  
  /* Outline Text for Light Mode */
  .text-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(11, 19, 37, 0.3);
    transition: all 0.3s ease;
  }
  .text-outline:hover {
    color: var(--accent);
    -webkit-text-stroke: 1.5px var(--accent);
  }

  /* Marquee Animation */
  .marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: flex;
  }
  .marquee-content {
    display: inline-block;
    animation: marquee 25s linear infinite;
  }
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Scroll Reveal Animations */
  .reveal-wrap {
    overflow: hidden;
  }
  .reveal-up {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .delay-100 { transition-delay: 100ms; }
  .delay-200 { transition-delay: 200ms; }
  .delay-300 { transition-delay: 300ms; }

  /* Interactive Image Hover - Clear and Bright */
  .hover-image-reveal {
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hover-image-reveal:hover {
    transform: scale(1.05);
  }
`;

// --- HOOKS & UTILS ---

const useScrollReveal = (options = { threshold: 0.1 }) => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
        observer.unobserve(entry.target);
      }
    }, options);
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [options]);

  return [ref, isVisible];
};

const ScrollReveal = ({ children, className = '', delay = '' }) => {
  const [ref, isVisible] = useScrollReveal();
  return (
    <div ref={ref} className={`reveal-up ${isVisible ? 'is-visible' : ''} ${delay} ${className}`}>
      {children}
    </div>
  );
};

// --- SHARED COMPONENTS ---

const Marquee = ({ text }) => (
  <div className="marquee-container py-6 border-y border-black/10 bg-white">
    <div className="marquee-content text-3xl md:text-5xl font-bold uppercase tracking-widest text-outline">
      {text}&nbsp;•&nbsp;{text}&nbsp;•&nbsp;{text}&nbsp;•&nbsp;{text}&nbsp;•&nbsp;
    </div>
  </div>
);

const Button = ({ children, variant = 'primary', className = '', onClick, type = 'button' }) => {
  const baseStyle = "group relative inline-flex items-center justify-center px-8 py-4 font-bold uppercase tracking-widest transition-all overflow-hidden rounded-full shadow-sm";
  const variants = {
    primary: "bg-[#0b1325] text-white hover:bg-[#f5a623] hover:text-[#0b1325]",
    outline: "border border-black/30 text-[#0b1325] hover:border-[#f5a623] hover:bg-[#f5a623]",
  };

  return (
    <button type={type} className={`${baseStyle} ${variants[variant]} ${className} interactive`} onClick={onClick}>
      <span className="relative z-10 flex items-center gap-2">
        {children}
        {variant === 'primary' && <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />}
      </span>
    </button>
  );
};

// --- VIEWS ---

const HomeView = ({ setView }) => {
  return (
    <div className="pt-32 pb-20 relative">
      
      {/* Hero Section */}
      <section className="min-h-[75vh] flex flex-col justify-center px-6 md:px-12 relative z-10">
        <ScrollReveal>
          <p className="text-[#f5a623] uppercase tracking-[0.3em] font-bold mb-6 flex items-center gap-4">
            <span className="w-12 h-[2px] bg-[#f5a623]"></span>
            Sigiriya, Sri Lanka
          </p>
        </ScrollReveal>
        
        <ScrollReveal delay="delay-100">
          <h1 className="text-huge text-[#0b1325]">
            REBUILDING<br />
            <span className="text-outline transition-colors duration-500 interactive">LIVES.</span>
          </h1>
        </ScrollReveal>
        
        <ScrollReveal delay="delay-200">
          <h1 className="text-huge flex items-center flex-wrap gap-4 md:gap-8 text-[#0b1325]">
            RESTORING <span className="text-[#f5a623] interactive">HOPE.</span>
          </h1>
        </ScrollReveal>

        <ScrollReveal delay="delay-300" className="mt-12 max-w-2xl bg-white p-8 rounded-2xl shadow-sm border border-black/5">
          <p className="text-xl md:text-2xl text-black/70 font-light leading-relaxed mb-8">
            Rehab Collective is a Sri Lankan nonprofit organization supporting drug-affected youth through rehabilitation, counseling, family support, and community reintegration.
          </p>
          <div className="flex flex-wrap gap-4">
            <Button onClick={() => setView('get-involved')}>Donate Now</Button>
            <Button variant="outline" onClick={() => setView('get-involved')}>Get Help</Button>
          </div>
        </ScrollReveal>
      </section>

      <Marquee text="DIGNITY • COMPASSION • RECOVERY • OPPORTUNITY • DISCIPLINE" />

      {/* Main Objective - Large Cards */}
      <section className="py-32 px-6 md:px-12 bg-white">
        <ScrollReveal>
          <h2 className="text-5xl md:text-7xl font-bold mb-16 uppercase tracking-tighter text-[#0b1325]">
            Our <span className="text-[#f5a623]">Objective</span>
          </h2>
        </ScrollReveal>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {[
            { title: "Recover", num: "01", text: "Counseling, emotional support, routine, and guided recovery." },
            { title: "Rebuild", num: "02", text: "Skills training, education support, and confidence building." },
            { title: "Reconnect", num: "03", text: "Family awareness, community support, and social acceptance." },
            { title: "Integrate", num: "04", text: "Employment pathways, aftercare, and long-term dignity." }
          ].map((item, idx) => (
            <ScrollReveal key={idx} delay={idx % 2 === 0 ? '' : 'delay-200'}>
              <div className="group border border-black/5 bg-[#f9f9f7] p-10 hover:bg-white hover:border-[#f5a623]/50 hover:shadow-xl transition-all duration-500 h-full flex flex-col interactive relative overflow-hidden rounded-2xl">
                <div className="absolute top-0 right-0 p-8 text-6xl font-bold text-black/5 group-hover:text-[#f5a623]/20 transition-colors">
                  {item.num}
                </div>
                <h3 className="text-4xl md:text-5xl font-bold mb-6 text-[#0b1325] group-hover:text-[#f5a623] transition-colors">{item.title}</h3>
                <p className="text-xl text-black/60 mt-auto leading-relaxed">{item.text}</p>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </section>

      {/* Focus Areas - Grid Layout */}
      <section className="py-32 bg-[#f9f9f7] px-6 md:px-12 border-y border-black/5">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-16">
          <div className="lg:col-span-1">
            <ScrollReveal>
              <h2 className="text-5xl md:text-7xl font-bold uppercase tracking-tighter mb-8 leading-tight text-[#0b1325]">
                Focus<br/>Areas
              </h2>
              <p className="text-xl text-black/60 mb-8 leading-relaxed">
                Our work begins with youth rehabilitation, but recovery becomes stronger when families, communities, and society are part of the solution.
              </p>
              <Button variant="outline" onClick={() => setView('work')}>View All Work</Button>
            </ScrollReveal>
          </div>
          
          <div className="lg:col-span-2 grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-12">
            {[
              { name: "Rehab", icon: <Shield className="w-8 h-8" /> },
              { name: "Youth", icon: <Award className="w-8 h-8" /> },
              { name: "Family", icon: <HomeIcon className="w-8 h-8" /> },
              { name: "Mind", icon: <Heart className="w-8 h-8" /> },
              { name: "Skills", icon: <Briefcase className="w-8 h-8" /> },
              { name: "Community", icon: <Users className="w-8 h-8" /> },
              { name: "Animals", icon: <CheckCircle className="w-8 h-8" /> },
              { name: "Earth", icon: <Leaf className="w-8 h-8" /> }
            ].map((area, idx) => (
              <ScrollReveal key={idx} delay={`delay-${(idx % 4) * 100}`}>
                <div className="group flex flex-col items-start interactive p-4 rounded-xl hover:bg-white transition-colors duration-300">
                  <div className="mb-4 text-black/30 group-hover:text-[#f5a623] transition-colors duration-300">
                    {area.icon}
                  </div>
                  <h4 className="text-xl font-bold uppercase tracking-wider text-[#0b1325]">{area.name}</h4>
                  <div className="h-[2px] w-0 bg-[#f5a623] mt-4 group-hover:w-full transition-all duration-500"></div>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* Massive Image / Founder Quote */}
      <section className="py-32 px-6 md:px-12 relative bg-white">
        <ScrollReveal className="relative h-[60vh] w-full overflow-hidden mb-20 interactive rounded-3xl shadow-lg">
           <img 
            src="https://images.unsplash.com/photo-1529156069898-49953eb1b5ce?auto=format&fit=crop&q=80&w=2000" 
            alt="Community Support" 
            className="w-full h-full object-cover hover-image-reveal absolute inset-0"
          />
          {/* Glassmorphism box to ensure text is readable over the bright image */}
          <div className="absolute bottom-6 left-6 md:bottom-12 md:left-12 z-10 max-w-4xl p-8 bg-white/90 backdrop-blur-md rounded-2xl border border-white shadow-xl">
             <h2 className="text-3xl md:text-5xl font-bold uppercase tracking-tighter leading-tight text-[#0b1325]">
                "One life rebuilt can save a family."
             </h2>
          </div>
        </ScrollReveal>

        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
          <div className="md:col-span-4">
            <ScrollReveal>
              <h3 className="text-sm uppercase tracking-[0.3em] text-[#f5a623] font-bold mb-4" style={{fontFamily: "'DM Sans', sans-serif"}}>Founder's Message</h3>
              <p className="text-2xl font-bold text-[#0b1325]">CHAMARA BANDARA</p>
            </ScrollReveal>
          </div>
          <div className="md:col-span-8">
            <ScrollReveal delay="delay-100">
              <p className="text-2xl md:text-4xl leading-tight font-light text-black/80 use-serif italic">
                "Rehab Collective was created because Sri Lanka cannot afford to lose its young people to addiction. Every young person deserves a second chance, but that second chance must come with care, discipline, skills, and family support."
              </p>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Giant CTA */}
      <section className="py-32 border-y border-black/10 bg-[#f5a623] text-[#0b1325] px-6 md:px-12 text-center interactive cursor-pointer group" onClick={() => setView('get-involved')}>
        <ScrollReveal>
          <h2 className="text-[10vw] font-bold uppercase tracking-tighter leading-none group-hover:scale-105 transition-transform duration-700 text-[#0b1325]">
            DONATE <br/> <span className="text-outline" style={{ WebkitTextStroke: '2px #0b1325' }}>NOW</span>
          </h2>
          <div className="mt-12 flex justify-center">
            <div className="w-20 h-20 rounded-full border-2 border-[#0b1325] flex items-center justify-center group-hover:bg-[#0b1325] group-hover:text-[#f5a623] transition-colors">
              <ArrowRight className="w-10 h-10" />
            </div>
          </div>
        </ScrollReveal>
      </section>
    </div>
  );
};

const AboutView = () => (
  <div className="pt-32 pb-20 px-6 md:px-12 bg-white">
    <ScrollReveal>
      <h1 className="text-huge mb-16 text-[#0b1325]">
        ABOUT <br/> <span className="text-outline">US.</span>
      </h1>
    </ScrollReveal>

    <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 border-t border-black/10 pt-16 mb-32">
      <ScrollReveal>
        <h2 className="text-4xl md:text-6xl font-bold uppercase tracking-tighter mb-8 text-[#0b1325]">Who We Are</h2>
        <p className="text-2xl text-black/70 leading-relaxed font-light use-serif">
          Rehab Collective is a Sri Lankan nonprofit organization based in Sigiriya, established with the belief that every young person deserves a second chance. Our primary focus is helping young people affected by drug addiction recover, rebuild, and return to society with dignity.
        </p>
      </ScrollReveal>
      
      <ScrollReveal delay="delay-200">
        <div className="h-[500px] w-full overflow-hidden interactive rounded-3xl shadow-xl relative">
          <img src="https://images.unsplash.com/photo-1544027993-37dbfe43562a?auto=format&fit=crop&q=80&w=2000" className="w-full h-full object-cover hover-image-reveal" alt="Community Support" />
        </div>
      </ScrollReveal>
    </div>

    <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 mb-32">
       <ScrollReveal>
        <div className="h-[500px] w-full overflow-hidden interactive lg:order-1 order-2 rounded-3xl shadow-xl relative">
          <img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?auto=format&fit=crop&q=80&w=2000" className="w-full h-full object-cover hover-image-reveal" alt="Hope and Youth" />
        </div>
      </ScrollReveal>

      <ScrollReveal delay="delay-200" className="lg:order-2 order-1">
        <h2 className="text-4xl md:text-6xl font-bold uppercase tracking-tighter mb-8 text-[#0b1325]">Why We Exist</h2>
        <p className="text-2xl text-black/70 leading-relaxed font-light mb-8 use-serif">
          We do not view rehabilitation solely as the process of stopping drug use. We believe true recovery includes emotional healing, family support, discipline, education, vocational training, employment pathways, and community acceptance.
        </p>
      </ScrollReveal>
    </div>

    {/* Manifesto / Values */}
    <section className="border-t border-black/10 pt-32">
      <ScrollReveal>
        <h2 className="text-5xl md:text-8xl font-bold uppercase tracking-tighter text-center mb-24 text-[#0b1325]">
          CORE <span className="text-[#f5a623]">VALUES</span>
        </h2>
      </ScrollReveal>

      <div className="flex flex-col">
        {[
          { title: "DIGNITY", text: "Treating every individual with respect, regardless of their past." },
          { title: "COMPASSION", text: "Leading with empathy and understanding in all our care programs." },
          { title: "DISCIPLINE", text: "Creating structured, reliable pathways for lasting recovery." },
          { title: "FAMILY", text: "Healing the entire family unit, not just the individual." },
          { title: "OPPORTUNITY", text: "Providing real skills and pathways to employment." }
        ].map((val, idx) => (
          <ScrollReveal key={idx}>
            <div className="border-b border-black/10 py-12 flex flex-col md:flex-row md:items-center justify-between group interactive hover:bg-[#f9f9f7] rounded-xl transition-colors px-6">
              <h3 className="text-4xl md:text-6xl font-bold uppercase tracking-tighter text-outline group-hover:text-[#f5a623] group-hover:-webkit-text-stroke-[#f5a623] transition-colors w-full md:w-1/2">
                {val.title}
              </h3>
              <p className="text-xl text-black/60 md:w-1/2 mt-4 md:mt-0 font-light group-hover:text-[#0b1325] transition-colors">
                {val.text}
              </p>
            </div>
          </ScrollReveal>
        ))}
      </div>
    </section>
  </div>
);

const WorkView = () => {
  const works = [
    { num: "01", title: "Drug Rehab & Recovery", desc: "Counseling, emotional care, structured routines, education, vocational training, and reintegration support." },
    { num: "02", title: "Family Awareness", desc: "Guiding families on how to support addiction recovery, maintain boundaries, and create safer homes." },
    { num: "03", title: "Training & Employment", desc: "Professional, technical, and vocational training for recovered individuals to gain skills and confidence." },
    { num: "04", title: "Health & Mental Wellbeing", desc: "Awareness programs on addiction prevention, mental wellbeing, first aid, and healthy living." },
    { num: "05", title: "Child & Youth Support", desc: "Supporting vulnerable children and youth, including those affected by bullying, neglect, or isolation." },
    { num: "06", title: "Community Care", desc: "Supporting elder homes, estate workers, low-income families, and vulnerable community groups." },
    { num: "07", title: "Animal Welfare", desc: "Welfare of street dogs and neglected animals via rescue, shelter, medical care, and public awareness." },
    { num: "08", title: "Environment Action", desc: "Plastic reduction, beach cleanups, sustainable tourism, and volunteer engagement." }
  ];

  return (
    <div className="pt-32 pb-20 px-6 md:px-12 bg-[#f9f9f7]">
      <ScrollReveal>
        <h1 className="text-huge mb-16 text-[#0b1325]">
          OUR <br/> <span className="text-[#f5a623]">WORK.</span>
        </h1>
      </ScrollReveal>

      <ScrollReveal>
        <p className="text-2xl md:text-3xl font-light text-black/70 max-w-4xl mb-32 leading-relaxed">
          Rehab Collective works across connected areas that support recovery, dignity, and community wellbeing. Our primary focus is youth drug rehabilitation, supported by holistic community initiatives.
        </p>
      </ScrollReveal>

      <div className="border-t border-black/10">
        {works.map((work, idx) => (
          <ScrollReveal key={idx}>
            <div className="group border-b border-black/10 py-12 md:py-20 flex flex-col lg:flex-row gap-8 lg:items-center interactive hover:bg-white hover:shadow-lg rounded-2xl transition-all px-8 my-2">
              <div className="text-6xl md:text-8xl font-bold text-black/10 group-hover:text-[#f5a623] transition-colors w-32">
                {work.num}
              </div>
              <div className="flex-1">
                <h2 className="text-4xl md:text-5xl font-bold uppercase tracking-tighter mb-4 text-[#0b1325]">{work.title}</h2>
              </div>
              <div className="flex-1 lg:max-w-md">
                <p className="text-xl text-black/60 font-light group-hover:text-black transition-colors">{work.desc}</p>
              </div>
              <div className="w-12 h-12 rounded-full border border-black/30 flex items-center justify-center group-hover:bg-[#f5a623] group-hover:border-[#f5a623] group-hover:text-white transition-colors transform group-hover:rotate-45">
                <ArrowRight className="w-6 h-6" />
              </div>
            </div>
          </ScrollReveal>
        ))}
      </div>
    </div>
  );
};

const GetInvolvedView = () => {
  const [activeTab, setActiveTab] = useState('donate');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 4000);
  };

  const tabs = ['donate', 'volunteer', 'partner', 'help'];

  return (
    <div className="pt-32 pb-20 px-6 md:px-12 min-h-screen flex flex-col bg-white">
      <ScrollReveal>
        <h1 className="text-huge mb-8 leading-none text-[#0b1325]">
          GET <br/> <span className="text-outline">INVOLVED.</span>
        </h1>
        <p className="text-2xl text-[#f5a623] mb-16 uppercase tracking-widest font-bold">Recovery needs people.</p>
      </ScrollReveal>

      <div className="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-16 border-t border-black/10 pt-16">
        
        {/* Massive Tabs Sidebar */}
        <div className="lg:col-span-5 flex flex-col gap-4">
          {tabs.map((tab) => (
            <button 
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`text-left text-4xl md:text-6xl font-bold uppercase tracking-tighter interactive transition-colors duration-300 py-4 ${activeTab === tab ? 'text-[#f5a623]' : 'text-black/20 hover:text-[#0b1325]'}`}
            >
              {tab === 'help' ? 'Get Help' : tab}
            </button>
          ))}
          
          <div className="mt-auto pt-16">
            <h4 className="text-sm uppercase tracking-[0.2em] text-black/50 font-bold mb-4">Direct Contact</h4>
            <p className="text-2xl font-light text-[#0b1325]">+94 77 971 7959</p>
            <p className="text-xl font-light text-black/70 mt-2">info@rehabcollective.org</p>
          </div>
        </div>

        {/* Brutalist Form Area */}
        <div className="lg:col-span-7 bg-[#f9f9f7] p-8 md:p-16 relative overflow-hidden rounded-3xl border border-black/5 shadow-lg">
          {submitted ? (
            <div className="h-full flex flex-col items-center justify-center text-center animate-in fade-in zoom-in duration-500">
              <CheckCircle className="w-24 h-24 text-[#f5a623] mb-8" />
              <h2 className="text-5xl font-bold uppercase tracking-tighter mb-4 text-[#0b1325]">Received.</h2>
              <p className="text-xl text-black/70">We will process your request and connect soon.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="flex flex-col gap-12 animate-in fade-in duration-500">
              <ScrollReveal>
                <div className="flex flex-col gap-2">
                  <label className="text-sm uppercase tracking-widest text-[#f5a623] font-bold">Full Name *</label>
                  <input required type="text" className="w-full bg-transparent border-b-2 border-black/20 pb-4 text-3xl text-[#0b1325] outline-none focus:border-[#f5a623] transition-colors font-light rounded-none placeholder:text-black/20" placeholder="JANE DOE" />
                </div>
              </ScrollReveal>

              <ScrollReveal delay="delay-100">
                <div className="flex flex-col gap-2">
                  <label className="text-sm uppercase tracking-widest text-[#f5a623] font-bold">Email Address *</label>
                  <input required type="email" className="w-full bg-transparent border-b-2 border-black/20 pb-4 text-3xl text-[#0b1325] outline-none focus:border-[#f5a623] transition-colors font-light rounded-none placeholder:text-black/20" placeholder="HELLO@EXAMPLE.COM" />
                </div>
              </ScrollReveal>

              <ScrollReveal delay="delay-200">
                <div className="flex flex-col gap-2">
                  <label className="text-sm uppercase tracking-widest text-[#f5a623] font-bold">Message *</label>
                  <textarea required rows="2" className="w-full bg-transparent border-b-2 border-black/20 pb-4 text-3xl text-[#0b1325] outline-none focus:border-[#f5a623] transition-colors font-light resize-none rounded-none placeholder:text-black/20" placeholder="HOW CAN WE BUILD TOGETHER?"></textarea>
                </div>
              </ScrollReveal>

              {activeTab === 'help' && (
                 <ScrollReveal delay="delay-300">
                  <div className="p-6 border border-black/10 bg-white rounded-xl shadow-sm">
                    <p className="text-sm text-black/70 font-light">
                      <strong className="text-[#0b1325]">PRIVACY NOTICE:</strong> We treat all personal information and referral requests with strict confidentiality.
                    </p>
                  </div>
                </ScrollReveal>
              )}

              <ScrollReveal delay="delay-300">
                <button type="submit" className="group interactive w-full py-6 rounded-full bg-[#0b1325] text-white hover:bg-[#f5a623] hover:text-[#0b1325] transition-all duration-300 text-2xl font-bold uppercase tracking-widest flex items-center justify-center gap-4 shadow-md">
                  Submit Request <ArrowRight className="w-8 h-8 group-hover:translate-x-4 transition-transform" />
                </button>
              </ScrollReveal>
            </form>
          )}
        </div>

      </div>
    </div>
  );
};


// --- MAIN APP COMPONENT ---

export default function App() {
  const [currentView, setCurrentView] = useState('home');
  const [menuOpen, setMenuOpen] = useState(false);
  const [cursorPos, setCursorPos] = useState({ x: -100, y: -100 });
  const [hovering, setHovering] = useState(false);

  // Custom Cursor Logic
  useEffect(() => {
    const updateCursor = (e) => {
      setCursorPos({ x: e.clientX, y: e.clientY });
    };
    
    const handleMouseOver = (e) => {
      if (e.target.closest('.interactive') || e.target.tagName.toLowerCase() === 'button' || e.target.tagName.toLowerCase() === 'a') {
        setHovering(true);
      } else {
        setHovering(false);
      }
    };

    window.addEventListener('mousemove', updateCursor);
    document.addEventListener('mouseover', handleMouseOver);
    
    return () => {
      window.removeEventListener('mousemove', updateCursor);
      document.removeEventListener('mouseover', handleMouseOver);
    };
  }, []);

  // Smooth View Transition
  const handleNavigate = (view) => {
    setMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
    setTimeout(() => setCurrentView(view), 300); // Wait for menu close
  };

  const navLinks = [
    { id: 'home', label: 'Home' },
    { id: 'about', label: 'About' },
    { id: 'work', label: 'Work' },
    { id: 'get-involved', label: 'Involve' }
  ];

  return (
    <>
      <style>{globalStyles}</style>
      
      {/* Custom Cursor */}
      <div 
        className={`custom-cursor hidden md:block ${hovering ? 'hovering' : ''}`} 
        style={{ left: cursorPos.x, top: cursorPos.y }}
      />

      <div className="min-h-screen flex flex-col bg-[#f9f9f7] selection:bg-[#f5a623] selection:text-[#0b1325]">
        
        {/* Minimalist Header */}
        <header className="fixed w-full z-50 top-0 py-6 px-6 md:px-12 flex justify-between items-center pointer-events-none mix-blend-difference text-white">
          <div 
            className="font-bold text-2xl uppercase tracking-tighter interactive pointer-events-auto cursor-none flex items-center gap-3"
            onClick={() => handleNavigate('home')}
          >
            {/* Kept the dot colored without mix-blend affecting it heavily by using a bright base */}
            <div className="w-6 h-6 bg-white rounded-full shadow-[0_0_15px_rgba(255,255,255,0.6)]"></div>
            <span>REHAB<span className="opacity-50">COLL.</span></span>
          </div>

          <button 
            className="interactive pointer-events-auto cursor-none flex items-center gap-4 group"
            onClick={() => setMenuOpen(true)}
          >
            <span className="uppercase tracking-widest text-sm font-bold opacity-80 group-hover:opacity-100 transition-opacity">Menu</span>
            <div className="flex flex-col gap-1.5 w-8">
              <span className="w-full h-[2px] bg-white transition-colors"></span>
              <span className="w-2/3 h-[2px] bg-white ml-auto group-hover:w-full transition-all"></span>
            </div>
          </button>
        </header>

        {/* Fullscreen Overlay Menu */}
        <div className={`fixed inset-0 bg-[#f9f9f7] z-[100] transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] flex flex-col justify-center px-6 md:px-12 ${menuOpen ? 'translate-y-0' : '-translate-y-full'}`}>
          <button 
            className="absolute top-8 right-6 md:right-12 interactive text-black/50 hover:text-[#f5a623] transition-colors"
            onClick={() => setMenuOpen(false)}
          >
            <X className="w-12 h-12" />
          </button>
          
          <div className="flex flex-col gap-4">
            {navLinks.map((link, idx) => (
              <div key={link.id} className="overflow-hidden">
                <button
                  onClick={() => handleNavigate(link.id)}
                  className="text-[12vw] md:text-[8vw] font-bold uppercase tracking-tighter leading-none interactive text-outline hover:text-[#f5a623] hover:-webkit-text-stroke-[#f5a623] transition-all duration-300 text-left block"
                  style={{ transitionDelay: `${idx * 50}ms`, transform: menuOpen ? 'translateY(0)' : 'translateY(100%)' }}
                >
                  {link.label}
                </button>
              </div>
            ))}
          </div>
          
          <div className="absolute bottom-12 left-6 md:left-12 flex gap-8">
             <span className="text-black/50 uppercase tracking-widest text-sm font-bold">Follow</span>
             <a href="#" className="interactive text-[#0b1325] font-bold uppercase tracking-widest text-sm hover:text-[#f5a623] transition-colors">Insta</a>
             <a href="#" className="interactive text-[#0b1325] font-bold uppercase tracking-widest text-sm hover:text-[#f5a623] transition-colors">FB</a>
          </div>
        </div>

        {/* Main Content Area */}
        <main className="flex-grow">
          {currentView === 'home' && <HomeView setView={handleNavigate} />}
          {currentView === 'about' && <AboutView />}
          {currentView === 'work' && <WorkView />}
          {currentView === 'get-involved' && <GetInvolvedView />}
        </main>

        {/* Brutalist Footer - Kept Dark to ground the design */}
        <footer className="bg-[#0b1325] pt-32 pb-12 px-6 md:px-12 text-white">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 mb-32">
            <div>
              <h2 className="text-5xl md:text-7xl font-bold uppercase tracking-tighter mb-8 leading-none text-white">
                BUILD <br/> <span className="text-transparent" style={{ WebkitTextStroke: '1px rgba(255,255,255,0.5)' }}>WITH US.</span>
              </h2>
              <button onClick={() => handleNavigate('get-involved')} className="interactive bg-[#f5a623] text-[#0b1325] font-bold uppercase tracking-widest px-8 py-4 rounded-full hover:bg-white transition-colors">
                Become a Partner
              </button>
            </div>
            
            <div className="grid grid-cols-2 gap-8">
              <div>
                <h4 className="text-sm uppercase tracking-[0.2em] text-[#f5a623] mb-8 font-bold">Navigation</h4>
                <ul className="flex flex-col gap-4">
                  {navLinks.map(link => (
                    <li key={link.id}>
                      <button onClick={() => handleNavigate(link.id)} className="text-xl uppercase font-bold text-white/60 hover:text-white interactive transition-colors tracking-wide">
                        {link.label}
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <h4 className="text-sm uppercase tracking-[0.2em] text-[#f5a623] mb-8 font-bold">Contact</h4>
                <ul className="flex flex-col gap-4 text-lg text-white/60 font-light">
                  <li>97/1 Hotel Road, Sigiriya</li>
                  <li>21120, Sri Lanka</li>
                  <li className="mt-4 interactive hover:text-white cursor-pointer transition-colors">+94 77 971 7959</li>
                  <li className="interactive hover:text-white cursor-pointer transition-colors">info@rehabcollective.org</li>
                </ul>
              </div>
            </div>
          </div>
          
          <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-white/40 font-light uppercase tracking-widest gap-4">
            <p>&copy; {new Date().getFullYear()} REHAB COLLECTIVE.</p>
            <div className="flex gap-8">
              <span className="interactive hover:text-white cursor-pointer transition-colors">Privacy</span>
              <span className="interactive hover:text-white cursor-pointer transition-colors">Terms</span>
            </div>
          </div>
        </footer>
      </div>
    </>
  );
}