const { useState, useRef, useEffect } = React;
const { motion } = window.Motion || window['framer-motion'] || { motion: { div: 'div', section: 'section', h1: 'h1' } };

function HeroApp() {
  const cardRef = useRef(null);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);
  const [activeCategory, setActiveCategory] = useState("all");
  const [followerCount, setFollowerCount] = useState(253);

  useEffect(() => {
    fetch('instagram.json')
      .then((res) => (res.ok ? res.json() : null))
      .then((data) => {
        if (data && data.followers) setFollowerCount(data.followers);
      })
      .catch(() => {});
  }, []);

  const handleMouseMove = (e) => {
    if (!cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    setMousePos({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };

  const categories = [
    { id: "all", label: "All Works" },
    { id: "weddings", label: "Weddings" },
    { id: "events", label: "Events" },
    { id: "commercial", label: "Ads / Auto" },
  ];

  // Professional SVG Icons Map (Zero Emojis)
  const icons = {
    ring: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="7"></circle><path d="M12 2v3M9 3l1.5 2M15 3l-1.5 2"></path></svg>
    ),
    sparkle: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2l2.4 7.4L22 12l-7.6 2.6L12 22l-2.4-7.4L2 12l7.6-2.6z"></path></svg>
    ),
    user: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
    ),
    heart: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
    ),
    gift: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>
    ),
    car: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="9" rx="2"></rect><path d="M5 11l2-5h10l2 5"></path><circle cx="7.5" cy="16.5" r="1.5"></circle><circle cx="16.5" cy="16.5" r="1.5"></circle></svg>
    ),
    clapper: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="M2 8h20M6 4l2 4M12 4l2 4M18 4l2 4"></path></svg>
    ),
    mobile: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="5" y="2" width="14" height="20" rx="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
    ),
    camera: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
    ),
    photo: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
    )
  };

  const servicesList = [
    { id: 1, title: "Grand Weddings & Muhurtham", cat: "weddings", badge: "4K Cinema", iconKey: "ring" },
    { id: 2, title: "Engagement & Ring Ceremony", cat: "weddings", badge: "Cinematic", iconKey: "sparkle" },
    { id: 3, title: "Bride to Be & Groom to Be", cat: "weddings", badge: "Viral Reels", iconKey: "user" },
    { id: 4, title: "Baby Shower & Maternity Films", cat: "events", badge: "Heirloom", iconKey: "heart" },
    { id: 5, title: "Birthday & Milestone Parties", cat: "events", badge: "Highlights", iconKey: "gift" },
    { id: 6, title: "Car & Bike Deliveries", cat: "commercial", badge: "Anamorphic", iconKey: "car" },
    { id: 7, title: "Brand Commercials & Ad Cuts", cat: "commercial", badge: "Editorial", iconKey: "clapper" },
    { id: 8, title: "Pro Mobile Videography (4K 60)", cat: "all", badge: "Fast Delivery", iconKey: "mobile" },
    { id: 9, title: "35mm Camera Cinematography", cat: "all", badge: "DCI Color", iconKey: "camera" },
    { id: 10, title: "Candid Stills & Event Photos", cat: "all", badge: "Raw 45MP", iconKey: "photo" },
  ];

  const filteredServices = activeCategory === "all" 
    ? servicesList 
    : servicesList.filter(s => s.cat === activeCategory || s.cat === "all");

  return (
    <motion.section 
      className="bento-master-hero" 
      id="heroRunway"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.8 }}
    >
      
      {/* Full-Bleed Background Layer */}
      <div className="bento-hero-bg-layer">
        <img 
          src="banner.png" 
          alt="Reelox Production Cinema Equipment" 
          className="bento-hero-bg-img" 
        />
        <div className="bento-hero-bg-overlay"></div>
      </div>

      {/* Top Architectural Headline */}
      <div className="bento-hero-header-row">
        <div className="bento-headline-left">
          <span className="bento-italic-kicker font-serif">Define Your</span>
          <h1 className="bento-giant-title">VISION</h1>
        </div>

        <div className="bento-headline-right">
          <div className="bento-spark-wrap">
            <span className="bento-italic-kicker font-serif">Craft Your</span>
            <svg className="bento-spark-icon" width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z"/>
            </svg>
          </div>
          <h1 className="bento-giant-title">CINEMA</h1>
        </div>
      </div>

      {/* ─── 3D PERSPECTIVE WRAPPER (15 DEGREE PERMANENT ANGLED HERO) ─── */}
      <div className="bento-3d-stage">
        <div 
          ref={cardRef}
          onMouseMove={handleMouseMove}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
          className="rb-spotlight-bento-card"
          style={{
            '--mouse-x': `${mousePos.x}px`,
            '--mouse-y': `${mousePos.y}px`,
          }}
        >
          {/* ReactBits Dynamic Radial Spotlight Layer */}
          <div className="rb-spotlight-layer" style={{ opacity: isHovered ? 1 : 0 }}></div>
          <div className="rb-card-border-glow" style={{ opacity: isHovered ? 1 : 0 }}></div>

          <div className="bento-card-grid">
            
            {/* Left Column: Mission, Actions & Social Proof */}
            <div className="bento-col-left">
              <h2 className="bento-lead-statement">
                Every Milestone.<br />
                Captured in Cinema.
              </h2>

              <p className="bento-sub-para">
                From weddings and baby showers to car deliveries and viral brand shoots. Full-scale camera cinematography &amp; mobile videography tailored for you.
              </p>

              <div className="bento-cta-group">
                <a href="#works" className="bento-pill-btn-black">
                  <span>Explore Reels</span>
                  <div className="bento-btn-circle">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      <line x1="5" y1="12" x2="19" y2="12"></line>
                      <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                  </div>
                </a>

                <a 
                  href="https://wa.me/919360701609?text=Hi%20Reelox,%20I'd%20like%20to%20book%20a%20shoot%20for%20my%20event." 
                  target="_blank" 
                  rel="noopener" 
                  className="bento-pill-btn-glass"
                >
                  <span>Book Shoot</span>
                </a>
              </div>

              {/* Social Proof Avatar Floating Pill */}
              <div className="bento-social-proof-pill">
                <div className="bento-avatar-group">
                  <img src="follower_1.jpg" alt="Reelox Community" className="bento-avatar" />
                  <img src="follower_2.jpg" alt="Reelox Community" className="bento-avatar" />
                  <img src="follower_3.png" alt="Reelox Community" className="bento-avatar" />
                </div>
                <div className="bento-proof-text">
                  <span className="proof-title">{followerCount} Followers</span>
                  <span className="proof-heart">&hearts; on @reeloxproduction</span>
                </div>
              </div>
            </div>

            {/* Center Column: AUTHENTIC SAJNA 💓 VIDEO (AUTOPLAY LOOP) */}
            <div className="bento-col-center">
              <div className="bento-film-frame-card">
                <video 
                  src="sajna_reel.mp4"
                  poster="banner.png"
                  autoPlay 
                  loop 
                  muted 
                  playsInline 
                  className="bento-film-video"
                />
                
                {/* Direct Link to Instagram Reel */}
                <a 
                  href="https://www.instagram.com/reeloxproduction/" 
                  target="_blank" 
                  rel="noopener" 
                  className="bento-center-instagram-badge" 
                  aria-label="View on Instagram"
                >
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                  </svg>
                  <span>@reeloxproduction</span>
                </a>

                <div className="bento-film-overlay">
                  <div className="overlay-top-row">
                    <span className="bento-film-tag">SIGNATURE FILM</span>
                    <span className="bento-film-specs">4K DCI &bull; 35MM &bull; MOBILE</span>
                  </div>
                  <h4 className="bento-film-title font-serif">Sajna 💓 Reel</h4>
                  <p className="bento-film-desc">Weddings &bull; Events &bull; Commercials &bull; Deliveries</p>
                </div>
              </div>
            </div>

            {/* Right Column: SLEEK INTERACTIVE WHAT WE DO CARD WITH SVG ICONS */}
            <div className="bento-col-right">
              
              {/* Top 3 Metric Feature Badges */}
              <div className="bento-feature-icons-row">
                <div className="bento-feature-icon-item">
                  <div className="feature-icon-bubble">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect><line x1="7" y1="2" x2="7" y2="22"></line><line x1="17" y1="2" x2="17" y2="22"></line><line x1="2" y1="12" x2="22" y2="12"></line><line x1="2" y1="7" x2="7" y2="7"></line><line x1="2" y1="17" x2="7" y2="17"></line><line x1="17" y1="17" x2="22" y2="17"></line><line x1="17" y1="7" x2="22" y2="7"></line></svg>
                  </div>
                  <span className="feature-icon-title">Pro Cinema</span>
                  <span className="feature-icon-sub">Camera Setup</span>
                </div>

                <div className="bento-feature-icon-item">
                  <div className="feature-icon-bubble">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
                  </div>
                  <span className="feature-icon-title">Mobile Video</span>
                  <span className="feature-icon-sub">4K 60FPS Reels</span>
                </div>

                <div className="bento-feature-icon-item">
                  <div className="feature-icon-bubble">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>
                  </div>
                  <span className="feature-icon-title">Photography</span>
                  <span className="feature-icon-sub">Candid &amp; Stills</span>
                </div>
              </div>

              {/* ─── SLEEK GLASS SERVICES SHOWCASE (ZERO EMOJIS, PURE SVG ICONS) ─── */}
              <div className="bento-what-we-do-card">
                
                {/* Header with Live Status Dot & Counter */}
                <div className="what-we-do-header">
                  <div className="wwd-title-group">
                    <span className="wwd-dot"></span>
                    <span className="wwd-title">WHAT WE DO</span>
                  </div>
                  <span className="wwd-count-badge">10+ Services</span>
                </div>

                {/* Filter Pills */}
                <div className="wwd-filter-pills">
                  {categories.map((cat) => (
                    <button
                      key={cat.id}
                      onClick={() => setActiveCategory(cat.id)}
                      className={`wwd-filter-btn ${activeCategory === cat.id ? 'active' : ''}`}
                    >
                      {cat.label}
                    </button>
                  ))}
                </div>

                {/* Dynamic Scrollable Services Stack with Vector SVG Icons */}
                <div className="wwd-services-scroll-container">
                  {filteredServices.map((item) => (
                    <a 
                      key={item.id}
                      href={`https://wa.me/919360701609?text=Hi%20Reelox,%20I'd%20like%20to%20book%20a%20shoot%20for%20${encodeURIComponent(item.title)}.`}
                      target="_blank" 
                      rel="noopener"
                      className="wwd-service-row"
                    >
                      <div className="wwd-row-left">
                        <div className="wwd-icon-bubble">
                          {icons[item.iconKey]}
                        </div>
                        <span className="wwd-row-title">{item.title}</span>
                      </div>
                      <span className="wwd-row-badge">{item.badge}</span>
                    </a>
                  ))}
                </div>

                {/* Bottom Direct Booking Action */}
                <button 
                  type="button"
                  onClick={() => window.openReeloxBooking && window.openReeloxBooking('Custom Event Shoot')} 
                  className="wwd-action-btn"
                >
                  <span>Book Your Slot</span>
                  <div className="wwd-action-arrow">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      <line x1="5" y1="12" x2="19" y2="12"></line>
                      <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                  </div>
                </button>

              </div>

            </div>

          </div>

        </div>
      </div>

    </motion.section>
  );
}

// Mount React Component
const rootElement = document.getElementById('react-hero-app');
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<HeroApp />);
}