// About AEQ Section - Split Screen Premium Layout
function AboutAEQ({ t }) {
  const whyChooseUs = [
    { number: "01", title: "Multi-Disciplinary Expertise", text: "Wealth of knowledge in health, safety, occupational hygiene, environmental and engineering", color: "#f59e0b" },
    { number: "02", title: "Business-Centered Approach", text: "Trained in risk management with wider business-centered perspective", color: "#06b6d4" },
    { number: "03", title: "Client-Focused Solutions", text: "Flexible company providing practical and cost-effective solutions", color: "#a855f7" },
    { number: "04", title: "Industry Veterans", text: "Consultants with over 25 years experience in heavy industry and petrochemical", color: "#10b981" },
    { number: "05", title: "International Coverage", text: "Operating across Malaysia, Indonesia, and Singapore", color: "#f43f5e" }
  ];

  return (
    <section className="about-split-section" id="about">
      {/* Split Screen Container */}
      <div className="split-container">
        {/* Left Side - Logo on Light Background */}
        <div className="split-left">
          <div className="left-bg-pattern"></div>
          <div className="logo-container">
            <div className="logo-glow"></div>
            <div className="logo-box">
              <img src="assets/aeq-logo-transparent.png" alt="AEQ Logo" className="split-logo" />
            </div>
            <div className="logo-text">
              <span className="years-big">11+</span>
              <span className="years-sub">Years of Excellence</span>
            </div>
            <p className="logo-tagline">Shaping Malaysia's Safety &<br/>Engineering Landscape</p>
          </div>
        </div>

        {/* Right Side - Content on Dark Background */}
        <div className="split-right">
          <div className="right-content">
            <div className="section-tag">
              <span className="tag-line"></span>
              <span>About AEQ</span>
            </div>

            <h2 className="split-title">Overview of Our Company</h2>

            <div className="split-text">
              <p>
                Our focus is on <strong>Environmental, Health and Safety Training, Consultancy and Engineering services</strong>.
                We facilitate organizations to ensure compliance to OSHA, FMA and EQA enforced by DOSH and DOE.
              </p>
              <p>
                Formed in <strong>2013</strong>, AEQ has successfully supported several management to embrace Environmental,
                Health and Safety principles. <strong>We provide trainings and consultancy under the Occupational Safety & Health Standards, Malaysian Standards and Other International Standards.</strong>
              </p>
            </div>

            <div className="compliance-badges">
              <div className="compliance-badge">
                <span className="badge-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    <path d="M9 12l2 2 4-4"/>
                  </svg>
                </span>
                <span>ISO 45001</span>
              </div>
              <div className="compliance-badge">
                <span className="badge-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 6v6l4 2"/>
                  </svg>
                </span>
                <span>ISO 14001</span>
              </div>
              <div className="compliance-badge">
                <span className="badge-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                    <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
                  </svg>
                </span>
                <span>OSHA 1994</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Why Choose Us - Minimalist Grid */}
      <div className="why-section">
        <div className="why-header">
          <span className="why-tag">
            <span className="tag-line"></span>
            <span>Why Choose Us</span>
          </span>
          <h3 className="why-title">What sets AEQ apart</h3>
        </div>

        <div className="why-grid">
          {whyChooseUs.map((item, index) => (
            <div key={index} className="why-card">
              <span className="why-number" style={{ color: item.color }}>{item.number}</span>
              <h4 className="why-card-title">{item.title}</h4>
              <p className="why-card-text">{item.text}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .about-split-section {
          position: relative;
          background: #030712;
          overflow: hidden;
        }

        /* Split Container */
        .split-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          min-height: 700px;
        }

        /* Left Side - Dark */
        .split-left {
          position: relative;
          background: linear-gradient(135deg, #030712 0%, #0a1628 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 60px;
          overflow: hidden;
        }

        .left-bg-pattern {
          display: none;
        }

        .logo-container {
          position: relative;
          text-align: center;
          z-index: 1;
        }

        .logo-glow {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 800px;
          height: 800px;
          background: radial-gradient(circle, rgba(6, 182, 212, 0.35) 0%, rgba(6, 182, 212, 0.2) 30%, rgba(6, 182, 212, 0.08) 50%, transparent 70%);
          border-radius: 50%;
          animation: aboutLogoGlow 3s ease-in-out infinite;
          z-index: 0;
        }

        @keyframes aboutLogoGlow {
          0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
          50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
        }

        .logo-box {
          background: transparent;
          border-radius: 20px;
          padding: 20px;
          margin-bottom: 28px;
          position: relative;
          transition: all 0.3s ease;
        }

        .logo-box:hover {
          transform: translateY(-8px) scale(1.02);
        }

        .split-logo {
          width: 650px;
          max-width: 90vw;
          height: auto;
          display: block;
          filter: drop-shadow(0 0 50px rgba(6, 182, 212, 0.6)) drop-shadow(0 0 100px rgba(6, 182, 212, 0.4)) drop-shadow(0 0 150px rgba(6, 182, 212, 0.25));
          animation: logoFloat 4s ease-in-out infinite;
        }

        @keyframes logoFloat {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-12px); }
        }

        .logo-text {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 16px;
        }

        .years-big {
          font-size: 64px;
          font-weight: 200;
          color: #ffffff;
          line-height: 1;
          letter-spacing: -0.03em;
        }

        .years-sub {
          font-size: 13px;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.6);
          text-transform: uppercase;
          letter-spacing: 0.12em;
          margin-top: 8px;
        }

        .logo-tagline {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.5);
          line-height: 1.6;
          margin: 0;
          font-weight: 300;
        }

        /* Right Side - Dark */
        .split-right {
          position: relative;
          background: linear-gradient(135deg, #0a0f1a 0%, #1a1f2e 100%);
          display: flex;
          align-items: center;
          padding: 60px 80px;
        }

        .split-right::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 1px;
          background: rgba(255, 255, 255, 0.1);
        }

        .right-content {
          max-width: 520px;
        }

        .section-tag {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 20px;
        }

        .tag-line {
          width: 24px;
          height: 1px;
          background: rgba(255, 255, 255, 0.4);
        }

        .section-tag span:last-child {
          font-size: 13px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
          letter-spacing: 0.08em;
          text-transform: none;
        }

        .split-title {
          font-size: clamp(32px, 3.5vw, 44px);
          font-weight: 300;
          color: #ffffff;
          margin: 0 0 28px;
          line-height: 1.25;
          letter-spacing: -0.01em;
        }

        .split-text {
          margin-bottom: 28px;
        }

        .split-text p {
          font-size: 15px;
          line-height: 1.75;
          color: rgba(255, 255, 255, 0.65);
          margin: 0 0 14px;
          font-weight: 300;
        }

        .split-text p:last-child {
          margin-bottom: 0;
        }

        .split-text strong {
          color: rgba(255, 255, 255, 0.9);
          font-weight: 500;
        }

        /* Compliance Badges */
        .compliance-badges {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        }

        .compliance-badge {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 16px;
          background: transparent;
          border: 1px solid rgba(255, 255, 255, 0.15);
          border-radius: 6px;
          transition: all 0.3s ease;
        }

        .compliance-badge:hover {
          background: rgba(255, 255, 255, 0.05);
          border-color: rgba(255, 255, 255, 0.25);
        }

        .badge-icon {
          color: rgba(255, 255, 255, 0.5);
          display: flex;
        }

        .compliance-badge span:last-child {
          font-size: 13px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.7);
        }

        /* Why Choose Us Section */
        .why-section {
          padding: 80px 0;
          background: #0a0f1a;
        }

        .why-header {
          max-width: 1200px;
          margin: 0 auto 48px;
          padding: 0 clamp(20px, 5vw, 56px);
        }

        .why-tag {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 16px;
        }

        .why-tag .tag-line {
          width: 24px;
          height: 1px;
          background: rgba(255, 255, 255, 0.4);
        }

        .why-tag span:last-child {
          font-size: 13px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.5);
          letter-spacing: 0.08em;
        }

        .why-title {
          font-size: clamp(28px, 3.5vw, 40px);
          font-weight: 300;
          color: #ffffff;
          margin: 0;
          letter-spacing: -0.01em;
        }

        /* Grid Layout */
        .why-grid {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 clamp(20px, 5vw, 56px);
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1px;
          background: rgba(255, 255, 255, 0.06);
        }

        .why-card {
          background: #0a0f1a;
          padding: 36px 32px;
          transition: background 0.3s ease;
        }

        .why-card:hover {
          background: rgba(255, 255, 255, 0.02);
        }

        .why-number {
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 16px;
          display: block;
          letter-spacing: 0.05em;
        }

        .why-card-title {
          font-size: 17px;
          font-weight: 500;
          color: #ffffff;
          margin: 0 0 10px;
          line-height: 1.3;
        }

        .why-card-text {
          font-size: 14px;
          line-height: 1.6;
          color: rgba(255, 255, 255, 0.5);
          margin: 0;
          font-weight: 300;
        }

        /* Responsive */
        @media (max-width: 1024px) {
          .split-container {
            grid-template-columns: 1fr;
            min-height: auto;
          }

          .split-left {
            padding: 60px 40px;
            min-height: 500px;
          }

          .split-right {
            padding: 60px 40px;
          }

          .split-right::before {
            top: 0;
            left: 0;
            right: 0;
            bottom: auto;
            width: auto;
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
          }

          .right-content {
            max-width: 100%;
          }
        }

        @media (max-width: 768px) {
          .split-left {
            padding: 50px 24px;
            min-height: 500px;
          }

          .logo-box {
            padding: 20px;
          }

          .split-logo {
            width: 320px;
          }

          .logo-glow {
            width: 400px;
            height: 400px;
          }

          .years-big {
            font-size: 56px;
          }

          .split-right {
            padding: 50px 24px;
          }

          .compliance-badges {
            flex-direction: column;
          }

          .why-section {
            padding: 60px 0;
          }

          .why-grid {
            grid-template-columns: 1fr;
          }

          .why-card {
            padding: 28px 24px;
          }
        }
      `}</style>
    </section>
  );
}

window.AboutAEQ = AboutAEQ;