// ─────────────────────────────────────────────────────────────────────────────
// WORLDLINESS — Services
// Scroll-triggered materialise animation.
// When the section enters the viewport, category tabs slide in from the left
// and service items burst in (scale + blur dissolve) staggered like particles
// appearing out of thin air. Same on mobile accordion.
// ─────────────────────────────────────────────────────────────────────────────

const CATEGORY_ORDER = ['Renovation', 'New Build', 'Trade', 'Outdoor'];

const CATEGORY_META = {
  'Renovation': { label: 'Renovations',   sub: 'Kitchens, bathrooms & full homes' },
  'New Build':  { label: 'New Builds',     sub: 'Foundation to finish' },
  'Trade':      { label: 'Trades',         sub: 'Roofing, plumbing & electrical' },
  'Outdoor':    { label: 'Outdoor',        sub: 'Landscaping, decks & structures' },
};

// ── ServiceItem — burst materialise on visibility ─────────────────────────────
function ServiceItem({ s, i, isVisible, baseDelay = 0 }) {
  const [state, setState] = useState('hidden'); // hidden → burst → visible

  useEffect(() => {
    if (!isVisible) {
      setState('hidden');
      return;
    }
    const delay = baseDelay + i * 110;
    const t1 = setTimeout(() => {
      setState('burst');
      const t2 = setTimeout(() => setState('visible'), 500);
      return () => clearTimeout(t2);
    }, delay);
    return () => clearTimeout(t1);
  }, [isVisible, i, baseDelay]);

  return (
    <div className={`svc-item svc-item--${state}`}>
      <div className="svc-item-icon">
        <Icon name={s.icon} size={18} />
      </div>
      <div className="svc-item-body">
        <div className="svc-item-name">{s.name}</div>
        <p className="svc-item-desc">{s.description}</p>
      </div>
      {/* Particle halo — visible only during burst */}
      {state === 'burst' && <div className="svc-particle-halo" />}
    </div>
  );
}

// ── Services main component ───────────────────────────────────────────────────
function Services() {
  const services = window.SERVICES;
  const sectionRef = useRef(null);
  const [sectionVisible, setSectionVisible] = useState(false);

  // Grouped by category
  const grouped = CATEGORY_ORDER.map(cat => ({
    cat,
    items: services.filter(s => s.category === cat),
  })).filter(g => g.items.length > 0);

  const [activeIdx, setActiveIdx] = useState(0);
  const [panelVisible, setPanelVisible] = useState(false);

  // Scroll-triggered: watch the section entering viewport
  useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach(e => {
          if (e.isIntersecting && !sectionVisible) {
            setSectionVisible(true);
            // Stagger panel items slightly after tabs appear
            setTimeout(() => setPanelVisible(true), 280);
            io.unobserve(el); // once only
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Tab switch: re-animate panel items
  const selectTab = useCallback((i) => {
    if (i === activeIdx) return;
    setPanelVisible(false);
    setTimeout(() => {
      setActiveIdx(i);
      setPanelVisible(true);
    }, 100);
  }, [activeIdx]);

  const activeGroup = grouped[activeIdx];

  return (
    <section className="services" id="services" ref={sectionRef}>
      <div className="container">
        <Reveal className="services-head">
          <Eyebrow>What We Build</Eyebrow>
          <h2>Every trade.<br/><em style={{fontWeight:500, fontStyle:'italic', color:'var(--bronze-light)'}}>One roof.</em></h2>
          <p>From foundations to finishes — we handle every trade in-house. No subcontractor runaround. No finger-pointing. One team accountable from first call to final walkthrough.</p>
        </Reveal>

        {/* ── Desktop: tab layout ── */}
        <div className={`svc-layout ${sectionVisible ? 'svc-layout--visible' : ''}`}>

          {/* Left: category tabs — slide in from left */}
          <div className="svc-tabs">
            {grouped.map((g, i) => {
              const meta = CATEGORY_META[g.cat] || { label: g.cat, sub: '' };
              const isActive = i === activeIdx;
              return (
                <button
                  key={g.cat}
                  className={`svc-tab ${isActive ? 'active' : ''} ${sectionVisible ? 'svc-tab--in' : ''}`}
                  style={{ animationDelay: `${i * 80}ms` }}
                  onClick={() => selectTab(i)}
                >
                  <div className="svc-tab-inner">
                    <div className="svc-tab-label">{meta.label}</div>
                    <div className="svc-tab-sub">{meta.sub}</div>
                    <div className="svc-tab-count">{g.items.length} service{g.items.length > 1 ? 's' : ''}</div>
                  </div>
                  <svg className="svc-tab-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12h14M13 6l6 6-6 6"/>
                  </svg>
                </button>
              );
            })}
            <div className={`svc-total ${sectionVisible ? 'svc-tab--in' : ''}`} style={{ animationDelay: `${grouped.length * 80}ms` }}>
              <span className="svc-total-num">{services.length}</span>
              <span className="svc-total-label">in-house trades</span>
            </div>
          </div>

          {/* Right: active group items */}
          <div className="svc-panel">
            <div className="svc-panel-header">
              <span className="svc-panel-cat">{CATEGORY_META[activeGroup.cat]?.label || activeGroup.cat}</span>
              <span className="svc-panel-rule" />
            </div>
            <div className="svc-panel-items">
              {activeGroup.items.map((s, i) => (
                <ServiceItem
                  key={`${activeGroup.cat}-${s.slug}`}
                  s={s}
                  i={i}
                  isVisible={panelVisible}
                  baseDelay={0}
                />
              ))}
            </div>
          </div>

        </div>

        {/* ── Mobile: accordion ── */}
        <div className="svc-accordion">
          {grouped.map((g, gi) => (
            <SvcAccordionGroup
              key={g.cat}
              group={g}
              meta={CATEGORY_META[g.cat]}
              defaultOpen={gi === 0}
              sectionVisible={sectionVisible}
              groupDelay={gi * 100}
            />
          ))}
        </div>

      </div>
    </section>
  );
}

function SvcAccordionGroup({ group, meta, defaultOpen, sectionVisible, groupDelay }) {
  const [open, setOpen]         = useState(defaultOpen);
  const [itemsVisible, setItemsVisible] = useState(defaultOpen);

  const toggle = () => {
    if (!open) {
      setOpen(true);
      setTimeout(() => setItemsVisible(true), 20);
    } else {
      setItemsVisible(false);
      setTimeout(() => setOpen(false), 300);
    }
  };

  return (
    <div
      className={`svc-acc-group ${open ? 'open' : ''} ${sectionVisible ? 'svc-acc--in' : ''}`}
      style={{ animationDelay: `${groupDelay}ms` }}
    >
      <button className="svc-acc-trigger" onClick={toggle}>
        <div className="svc-acc-trigger-left">
          <span className="svc-acc-label">{meta?.label || group.cat}</span>
          <span className="svc-acc-sub">{meta?.sub}</span>
        </div>
        <div className="svc-acc-right">
          <span className="svc-acc-count">{group.items.length}</span>
          <svg
            className="svc-acc-chevron"
            width="16" height="16" viewBox="0 0 24 24"
            fill="none" stroke="currentColor" strokeWidth="2"
            strokeLinecap="round" strokeLinejoin="round"
            style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.3s var(--ease-out)' }}
          >
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </div>
      </button>
      {open && (
        <div className="svc-acc-body">
          {group.items.map((s, i) => (
            <ServiceItem
              key={s.slug}
              s={s}
              i={i}
              isVisible={itemsVisible}
              baseDelay={0}
            />
          ))}
        </div>
      )}
    </div>
  );
}

window.Services = Services;