const { useState, useRef } = React;

function ServicesApp() {
  const [activeIdx, setActiveIdx] = useState(0);

  const services = [
    {
      id: "01",
      tag: "FLAGSHIP CINEMA",
      title: "Wedding & Muhurtham Films",
      subtitle: "Multi-Camera Full-Frame Direction",
      desc: "Full-day wedding cinema capturing Muhurtham rituals, high-emotion vows, stage entries, and ceremony teasers. Graded with custom analog 35mm film color science.",
      specs: [
        { label: "Camera Rig", val: "Sony A7 IV + Prime Cinema Optics" },
        { label: "Master Resolution", val: "4K 60P DCI 10-Bit 4:2:2" },
        { label: "Sound Design", val: "Multi-Channel Wireless Studio Audio" },
        { label: "Deliverables", val: "Grand Feature Film + 60s Teaser Reel" }
      ],
      icon: (
        <svg width="22" height="22" 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>
      )
    },
    {
      id: "02",
      tag: "ENGAGEMENT & BRIDAL",
      title: "Bride to Be & Groom to Be",
      subtitle: "Stylized Couple Portraits & Haldi Ceremonies",
      desc: "Intimate portraiture, Haldi and Mehendi storytelling, couple chemistry teasers, and trending vertical reels crafted for high social reach.",
      specs: [
        { label: "Camera Rig", val: "iPhone Pro 4K + Sony Alpha Prime" },
        { label: "Capture Format", val: "Apple ProRes Log & S-Cinetone" },
        { label: "Visual Style", val: "Speed-Ramped Viral Edits & Warm Tones" },
        { label: "Delivery Speed", val: "Same-Day Teaser + 48h Full Master" }
      ],
      icon: (
        <svg width="22" height="22" 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>
      )
    },
    {
      id: "03",
      tag: "FAMILY & MATERNITY",
      title: "Baby Shower & Maternity Films",
      subtitle: "Heartfelt Maternal Milestone Coverage",
      desc: "Tender, cinematic documentary honoring family arrivals with soft natural lighting, emotional voiceover integration, and timeless photography.",
      specs: [
        { label: "Filming Style", val: "Observational Candid Documentary" },
        { label: "Color Pipeline", val: "Kodak 5219 Natural Skin Emulation" },
        { label: "Stills Gallery", val: "Retouched Master Photo Collection" },
        { label: "Audio Polish", val: "Licensed Acoustic Cinema Score" }
      ],
      icon: (
        <svg width="22" height="22" 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>
      )
    },
    {
      id: "04",
      tag: "AUTOMOTIVE",
      title: "Luxury Car & Bike Deliveries",
      subtitle: "High-Energy Unveiling Films",
      desc: "Ultra-crisp showroom deliveries with motorized gimbal tracking, authentic exhaust sound design, rolling tracking shots, and vertical teaser reels.",
      specs: [
        { label: "Stabilization", val: "3-Axis Motorized Gimbal Tracking" },
        { label: "Frame Rate", val: "4K 60FPS / 120FPS Smooth Slow-Mo" },
        { label: "Sound FX", val: "Engine Rev & Delivery Sound Design" },
        { label: "Format", val: "9:16 Vertical Instagram Reels Master" }
      ],
      icon: (
        <svg width="22" height="22" 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>
      )
    },
    {
      id: "05",
      tag: "COMMERCIAL & ADS",
      title: "Brand Commercials & Ad Cuts",
      subtitle: "High-Conversion Social Media Direction",
      desc: "Visual commercial promos for restaurants, fashion brands, jewelry, and lifestyle campaigns designed to capture immediate attention and elevate brand prestige.",
      specs: [
        { label: "Pre-Production", val: "Concept Storyboarding & Scripting" },
        { label: "Lighting Rig", val: "Studio Direction & Wireless Control" },
        { label: "Aspect Ratios", val: "Dual Export (16:9 Cinema & 9:16 Social)" },
        { label: "Turnaround", val: "Fast 3-5 Day Commercial Master" }
      ],
      icon: (
        <svg width="22" height="22" 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>
      )
    },
    {
      id: "06",
      tag: "MOBILE & 4K CINEMA",
      title: "4K 60FPS Mobile & Cinema Videography",
      subtitle: "Rapid-Turnaround Creator & Event Shoots",
      desc: "Agile iPhone Pro ProRes Log shoots tailored for rapid event coverage, live creator content, behind-the-scenes, and immediate 24-48h deliveries.",
      specs: [
        { label: "Primary Device", val: "Apple iPhone Pro Series" },
        { label: "Codec Quality", val: "Apple ProRes Log 4K 60FPS" },
        { label: "Stabilization", val: "Action Sensor-Shift + Gimbal" },
        { label: "Express Cut", val: "24-48h Same-Event Delivery" }
      ],
      icon: (
        <svg width="22" height="22" 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>
      )
    }
  ];

  const current = services[activeIdx];

  return (
    <div className="rb-interactive-list-section">
      <div className="section-header-minimal">
        <h2 className="section-heading font-serif">Production Services</h2>
        <p className="section-desc">
          Select any production discipline below to explore technical setup, visual direction, and deliverables.
        </p>
      </div>

      {/* ReactBits Interactive Flow Deck (List on Left, Live Stage on Right) */}
      <div className="rb-services-deck">
        
        {/* Left Column: Interactive Navigation Accordion List */}
        <div className="rb-deck-nav-list">
          {services.map((item, idx) => (
            <div
              key={item.id}
              onClick={() => setActiveIdx(idx)}
              className={`rb-deck-nav-item ${activeIdx === idx ? 'active' : ''}`}
            >
              <div className="rb-item-left">
                <span className="rb-item-idx font-serif">{item.id}</span>
                <div className="rb-item-text">
                  <span className="rb-item-tag">{item.tag}</span>
                  <h4 className="rb-item-title">{item.title}</h4>
                </div>
              </div>
              
              <div className="rb-item-arrow">
                <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>
            </div>
          ))}
        </div>

        {/* Right Column: Live Cinematic Preview Panel with Camera Leather Finish */}
        <div className="rb-deck-stage-panel">
          <div className="rb-stage-card">
            
            {/* Top Stage Row */}
            <div className="rb-stage-top">
              <div className="rb-stage-icon-box">
                {current.icon}
              </div>
              <span className="rb-stage-badge">{current.tag}</span>
            </div>

            {/* Stage Title */}
            <div className="rb-stage-title-wrap">
              <h3 className="rb-stage-title font-serif">{current.title}</h3>
              <p className="rb-stage-sub">{current.subtitle}</p>
            </div>

            <p className="rb-stage-desc">{current.desc}</p>

            {/* Technical Specs Breakdown Matrix */}
            <div className="rb-stage-matrix">
              <div className="matrix-heading">TECHNICAL SPECIFICATIONS &amp; GEAR</div>
              <div className="matrix-grid">
                {current.specs.map((s, i) => (
                  <div key={i} className="matrix-row">
                    <span className="matrix-label">{s.label}</span>
                    <span className="matrix-val">{s.val}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Direct Booking CTA */}
            <button
              type="button"
              onClick={() => window.openReeloxBooking && window.openReeloxBooking(current.title)}
              className="rb-stage-book-btn"
            >
              <span>Book {current.title}</span>
              <div className="rb-stage-btn-circle">
                <svg width="13" height="13" 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>
  );
}

// Mount Services Root Component
const servicesMount = document.getElementById('react-services-app');
if (servicesMount) {
  const servicesRoot = ReactDOM.createRoot(servicesMount);
  servicesRoot.render(<ServicesApp />);
}