/* global React, Arrow, Check, WhatsAppIcon */

// ============================================================
// 1. IT Consulting & System Integration Services — video + bullets
// ============================================================
const IntegrationServices = () => (
  <section style={{ background: "var(--paper)" }}>
    <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 48, alignItems: "center" }}>
      <VideoCard />
      <div className="reveal" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{
            width: 44, height: 44, borderRadius: 12,
            background: "var(--bel-blue-soft)",
            color: "var(--bel-blue)",
            display: "grid", placeItems: "center",
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="3"/>
              <path d="M19.4 15a1.7 1.7 0 0 0 .4 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.4 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.4l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .4-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.4-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.4h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.4l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.4 1.9v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>
            </svg>
          </span>
          <span className="eyebrow" style={{ color: "var(--bel-blue)" }}>SYSTEM INTEGRATION — END-TO-END</span>
        </div>
        <h2 className="h2" style={{ margin: 0 }}>
          IT Consulting &amp; System{" "}
          <span style={{ color: "var(--bel-orange)", fontStyle: "italic", fontWeight: 500 }}>Integration Services</span>
        </h2>
        <p className="lead" style={{ margin: 0 }}>
          We specialize in crafting tailored IT solutions, spanning infrastructure optimization, advanced cybersecurity measures, seamless cloud integrations, enterprise software development, and comprehensive digital transformation strategies.
        </p>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
          {[
            "Assess and align your IT strategy with business goals.",
            "Identify gaps and implement robust, scalable solutions.",
            "Enhance operational efficiency and reduce costs.",
            "Strengthen security frameworks and ensure compliance.",
          ].map((b, i) => (
            <li key={i} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 15.5, color: "var(--ink-2)" }}>
              <span style={{
                width: 24, height: 24, borderRadius: "50%",
                background: "var(--ink)", color: "var(--cream)",
                display: "grid", placeItems: "center", flexShrink: 0,
              }}>
                <Check size={13} />
              </span>
              {b}
            </li>
          ))}
        </ul>
        <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
          <a href="#contact" className="btn btn--primary">
            Get free consultation <span className="arrow"><Arrow size={11} /></span>
          </a>
          <a href="#services" className="btn btn--ghost">Learn more</a>
        </div>
      </div>
    </div>
  </section>
);

// Embedded YouTube video card with decorative frame
const VideoCard = () => (
  <div className="reveal" style={{ position: "relative" }}>
    {/* Orange diagonal accent behind */}
    <div aria-hidden style={{
      position: "absolute", inset: "-14px -10px -10px 10px",
      background: "var(--bel-orange)",
      borderRadius: 28,
      transform: "rotate(-1.8deg)",
      opacity: 0.95,
      boxShadow: "0 32px 60px -22px rgba(239,106,31,0.5)",
    }} />
    {/* Dotted purple accent */}
    <div aria-hidden style={{
      position: "absolute", inset: "-22px -22px -22px 0",
      borderRadius: 30,
      border: "1.5px dashed rgba(120, 69, 233, 0.55)",
      transform: "rotate(1.2deg)",
      pointerEvents: "none",
    }} />

    {/* Floating top-left chip */}
    <div style={{
      position: "absolute", top: -16, left: 16, zIndex: 3,
      background: "var(--ink)", color: "var(--cream)",
      padding: "8px 14px",
      borderRadius: 999,
      display: "inline-flex", alignItems: "center", gap: 8,
      fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.08em", textTransform: "uppercase",
      boxShadow: "0 12px 28px -10px rgba(0,0,0,0.45)",
    }}>
      <span style={{
        width: 8, height: 8, borderRadius: "50%", background: "#FF0000",
        boxShadow: "0 0 0 3px rgba(255,0,0,0.25)",
        animation: "vcPulse 2s ease-in-out infinite",
      }} />
      Featured · Big Expert Lab
    </div>

    {/* Floating bottom-right chip */}
    <div style={{
      position: "absolute", bottom: -14, right: 18, zIndex: 3,
      background: "var(--paper)", color: "var(--ink)",
      padding: "10px 14px",
      borderRadius: 14,
      display: "inline-flex", alignItems: "center", gap: 10,
      border: "1px solid var(--line)",
      boxShadow: "0 18px 32px -14px rgba(120,69,233,0.35)",
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: "var(--bel-blue-soft)", color: "var(--bel-blue)",
        display: "grid", placeItems: "center",
      }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 8.5a10 10 0 1 1-19.4-1.2"/><path d="M22 4v5h-5"/>
        </svg>
      </div>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.15 }}>
        <span style={{ fontWeight: 700, fontSize: 13 }}>4.9 / 5</span>
        <span style={{ fontSize: 11, color: "var(--ink-soft)" }}>1,100+ clients</span>
      </div>
    </div>

    {/* Video frame */}
    <div style={{
      position: "relative",
      borderRadius: 20,
      overflow: "hidden",
      boxShadow: "0 36px 70px -28px rgba(24,24,27,0.45)",
      border: "4px solid var(--ink)",
      aspectRatio: "16 / 9",
      background: "var(--ink)",
    }}>
      <iframe
        src="https://www.youtube.com/embed/ZN-bB9fn1Ic?rel=0&modestbranding=1"
        title="IT Consulting and Digital Services by Big Expert Lab"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, display: "block" }}
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
        loading="lazy"
      />
    </div>

    <style>{`
      @keyframes vcPulse {
        0%, 100% { box-shadow: 0 0 0 3px rgba(255,0,0,0.25); }
        50%      { box-shadow: 0 0 0 7px rgba(255,0,0,0); }
      }
    `}</style>
  </div>
);

Object.assign(window, { IntegrationServices });