// Floodbusterz — sister-company cross-promo + leak-hover modal
const { useState: useStateFB, useEffect: useEffectFB, useRef: useRefFB } = React;

const FB = window.CB_DATA.floodbusterz;
const CB = window.CB_DATA.brand;

// Logo mark for FB - water drop with FB initials
function FBLogo({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <defs>
        <linearGradient id="fbg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#1ba3ff" />
          <stop offset="100%" stopColor="#0066cc" />
        </linearGradient>
      </defs>
      <path d="M32 4 C 18 22, 10 32, 10 42 a22 22 0 1 0 44 0 C 54 32, 46 22, 32 4 Z" fill="url(#fbg)" />
      <text x="32" y="48" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="20" fill="#fff" letterSpacing="-1">FB</text>
    </svg>
  );
}

function Floodbusterz() {
  const [time, setTime] = useStateFB(0);
  useEffectFB(() => {
    const id = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="fb-section" id="floodbusterz" data-screen-label="floodbusterz">
      <div className="fb-tape">
        <div className="fb-tape-inner">
          {Array.from({length: 28}).map((_, i) => (
            <span key={i}>● SISTER COMPANY · WATER DAMAGE? STORM? FLOOD? · CALL FLOODBUSTERZ · </span>
          ))}
        </div>
      </div>

      <div className="container fb-inner">
        {/* HEAD */}
        <div className="fb-head">
          <div className="fb-eye">
            <span className="dot" /> 09 · WHEN PLUMBING TURNS INTO A FLOOD
          </div>
          <div className="fb-head-grid">
            <div>
              <div className="fb-tag-row">
                <FBLogo size={64} />
                <div className="fb-mark">
                  <div className="fb-name">FLOODBUSTERZ</div>
                  <div className="fb-sub">WATER DAMAGE · RESTORATION · {CB.region.toUpperCase()}</div>
                </div>
              </div>
              <h2 className="fb-h2">
                Sometimes a leak<br/>
                isn't <span className="fb-strike">a leak</span>.<br/>
                <span className="fb-accent">It's a flood.</span>
              </h2>
            </div>
            <div className="fb-pitch">
              <p>
                When water gets where it shouldn't be — soaked drywall, ruined hardwood, basement under an inch of water — you don't just need a plumber. You need a restoration crew that can dry, save, and rebuild.
              </p>
              <p>
                That's <strong>Floodbusterz</strong> — our sister company. <strong>Separate crews, same family</strong>. We can dispatch both to the same job in one call.
              </p>
            </div>
          </div>
        </div>

        {/* BIG STAT BAR */}
        <div className="fb-stats">
          <div className="fb-stat">
            <div className="fb-stat-num">1<span className="fb-stat-unit">CALL</span></div>
            <div className="fb-stat-lbl">Plumbing +<br/>drying crews</div>
          </div>
          <div className="fb-stat">
            <div className="fb-stat-num">24<span className="fb-stat-unit">/7</span></div>
            <div className="fb-stat-lbl">Emergency<br/>response</div>
          </div>
          <div className="fb-stat">
            <div className="fb-stat-num">100%</div>
            <div className="fb-stat-lbl">Insurance<br/>billing direct</div>
          </div>
          <div className="fb-stat">
            <div className="fb-stat-num">$0</div>
            <div className="fb-stat-lbl">Mitigation<br/>assessment</div>
          </div>
        </div>

        {/* SERVICES + ONE-CALL */}
        <div className="fb-grid">
          <div className="fb-services">
            <div className="fb-services-head">
              <span className="dot" /> RESTORATION SCOPE
            </div>
            <div className="fb-services-list">
              {FB.services.map((s, i) => (
                <div key={i} className="fb-service">
                  <span className="fb-service-num">{String(i+1).padStart(2,'0')}</span>
                  <span className="fb-service-name">{s.toUpperCase()}</span>
                  <span className="fb-service-arrow">→</span>
                </div>
              ))}
            </div>
          </div>

          <div className="fb-onecall">
            <div className="fb-onecall-head">
              ONE-CALL DISPATCH
            </div>
            <div className="fb-onecall-body">
              <h3 className="fb-onecall-h">Two trucks.<br/>One phone call.</h3>
              <p>
                Burst pipe at 2am? We send the Clog Busterz plumbing truck to stop the water — and the Floodbusterz restoration crew to dry it out. <strong>Same family. Same dispatch. No back-and-forth.</strong>
              </p>
              <div className="fb-onecall-flow">
                <div className="fb-flow-step">
                  <div className="fb-flow-num">01</div>
                  <div className="fb-flow-lbl">Stop the<br/>water</div>
                  <div className="fb-flow-co">CLOG BUSTERZ</div>
                </div>
                <div className="fb-flow-arrow">→</div>
                <div className="fb-flow-step">
                  <div className="fb-flow-num">02</div>
                  <div className="fb-flow-lbl">Extract &<br/>dry</div>
                  <div className="fb-flow-co fb-co-blue">FLOODBUSTERZ</div>
                </div>
                <div className="fb-flow-arrow">→</div>
                <div className="fb-flow-step">
                  <div className="fb-flow-num">03</div>
                  <div className="fb-flow-lbl">Restore &<br/>rebuild</div>
                  <div className="fb-flow-co fb-co-blue">FLOODBUSTERZ</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* CTA */}
        <div className="fb-cta">
          <div className="fb-cta-text">
            <div className="fb-cta-h">Got water where it shouldn't be?</div>
            <div className="fb-cta-sub">Tap to dispatch Floodbusterz — separate hotline, same dispatch desk.</div>
          </div>
          <div className="fb-cta-actions">
            <a href={`tel:${FB.phoneRaw}`} className="fb-phone-pill">
              <span>●</span>{FB.phone}
            </a>
            <a href={FB.url} target="_blank" rel="noopener" className="fb-btn-ghost">
              VISIT FLOODBUSTERZ.COM →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// Hover modal — pops on flood/leak service hover
function FloodHoverModal({ open, onClose }) {
  if (!open) return null;
  return (
    <div className="fb-modal-bg" onClick={onClose}>
      <div className="fb-modal" onClick={e => e.stopPropagation()}>
        <button className="fb-modal-x" onClick={onClose}>×</button>
        <div className="fb-modal-flag">
          <FBLogo size={36} />
          <div>
            <div className="fb-modal-flag-h">SOUNDS LIKE A FLOODBUSTERZ JOB.</div>
            <div className="fb-modal-flag-s">Our sister company handles water damage & restoration.</div>
          </div>
        </div>
        <div className="fb-modal-body">
          <h3 className="fb-modal-h">When a leak isn't just a leak.</h3>
          <p>If water has soaked drywall, flooring, or ceilings — you need restoration, not just plumbing repair. <strong>Floodbusterz</strong> dries, decontaminates, and rebuilds.</p>
          <ul className="fb-modal-list">
            <li>● Same-day emergency dispatch</li>
            <li>● Direct insurance billing</li>
            <li>● Free mitigation assessment</li>
            <li>● Licensed restoration crew</li>
          </ul>
          <div className="fb-modal-actions">
            <a href={`tel:${FB.phoneRaw}`} className="fb-phone-pill big">
              <span>●</span>{FB.phone}
            </a>
            <a href={FB.url} target="_blank" rel="noopener" className="fb-btn-ghost">VISIT FLOODBUSTERZ →</a>
            <button className="fb-btn-text" onClick={onClose}>No, just plumbing</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Floodbusterz = Floodbusterz;
window.FloodHoverModal = FloodHoverModal;
window.FBLogo = FBLogo;