// International Coverage Section - Liquid Glass Morphism Hero
const { useState, useEffect } = React;

function GlobeSection({ t }) {
  const [isHovered, setIsHovered] = useState(null);

  const locations = [
    { name: "Malaysia", description: "Headquarters & Training Center" },
    { name: "Indonesia", description: "Regional Operations" },
    { name: "Singapore", description: "Strategic Partner Hub" }
  ];

  const services = [
    { icon: "shield", title: "Safety Training", desc: "OSHA & ISO Certified Programs" },
    { icon: "clipboard", title: "Consultancy", desc: "Environmental & Health Solutions" },
    { icon: "tool", title: "Engineering", desc: "Industrial Safety Systems" }
  ];

  // World cities with positions (percentage based for overlay)
  const worldCities = [
    { name: "New York", x: 25, y: 35, size: 6 },
    { name: "London", x: 48, y: 28, size: 6 },
    { name: "Dubai", x: 58, y: 42, size: 5 },
    { name: "Tokyo", x: 85, y: 35, size: 6 },
    { name: "Sydney", x: 88, y: 72, size: 5 },
    { name: "Singapore", x: 75, y: 55, size: 8, highlight: true },
    { name: "Mumbai", x: 65, y: 45, size: 5 },
    { name: "São Paulo", x: 30, y: 65, size: 5 },
    { name: "Los Angeles", x: 15, y: 38, size: 5 },
    { name: "Shanghai", x: 80, y: 38, size: 5 },
    { name: "Jakarta", x: 76, y: 58, size: 7, highlight: true },
    { name: "Kuala Lumpur", x: 74, y: 53, size: 8, highlight: true },
    { name: "Paris", x: 49, y: 30, size: 5 },
    { name: "Hong Kong", x: 79, y: 43, size: 5 },
    { name: "Seoul", x: 82, y: 33, size: 5 },
  ];

  return (
    <section className="intl-hero" id="locations">
      {/* Video Background */}
      <video
        className="intl-video-bg"
        autoPlay
        loop
        muted
        playsInline
      >
        <source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4" type="video/mp4" />
      </video>

      {/* World Cities Overlay */}
      <div className="world-cities-overlay">
        {worldCities.map((city, i) => (
          <div
            key={i}
            className={`world-city-marker ${city.highlight ? 'highlight' : ''}`}
            style={{
              left: `${city.x}%`,
              top: `${city.y}%`,
              width: `${city.size}px`,
              height: `${city.size}px`,
              animationDelay: `${i * 0.2}s`
            }}
            title={city.name}
          >
            <span className="city-pulse"></span>
            <span className="city-label">{city.name}</span>
          </div>
        ))}
        {/* Connection lines */}
        <svg className="city-connections" viewBox="0 0 100 100" preserveAspectRatio="none">
          <path d="M74,53 Q70,45 58,42" className="connection-line" />
          <path d="M74,53 Q78,55 76,58" className="connection-line" />
          <path d="M74,53 Q77,50 75,55" className="connection-line" />
          <path d="M75,55 Q80,48 85,35" className="connection-line delay-1" />
          <path d="M74,53 Q60,40 48,28" className="connection-line delay-2" />
          <path d="M76,58 Q82,65 88,72" className="connection-line delay-1" />
        </svg>
      </div>

      {/* Content Overlay */}
      <div className="intl-content">
        {/* Left Panel */}
        <div className="intl-left">
          <div className="intl-left-glass">
            {/* Nav */}
            <nav className="intl-nav">
              <div className="intl-logo">
                <img src="assets/aeq-logo-transparent.png" alt="AEQ" className="intl-logo-img" />
                <span className="intl-logo-text">AEQ Safety</span>
              </div>
              <div className="intl-nav-pill liquid-glass">
                <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="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
                </svg>
                <span>Global</span>
              </div>
            </nav>

            {/* Hero Center */}
            <div className="intl-hero-center">
              <div className="intl-shining-logo">
                <div className="logo-glow"></div>
                <div className="logo-glow-2"></div>
                <img src="assets/aeq-logo-transparent.png" alt="AEQ" className="big-logo" />
                <div className="logo-shine"></div>
              </div>

              <h2 className="intl-title">
                Expanding the<br />
                <em>spirit of safety</em> across<br />
                Southeast Asia
              </h2>

              <a href="contact.html" className="intl-cta liquid-glass-strong">
                <span>Get Started</span>
                <span className="intl-cta-icon">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M5 12h14M12 5l7 7-7 7"/>
                  </svg>
                </span>
              </a>

              {/* Location Pills */}
              <div className="intl-pills">
                {locations.map((loc, i) => (
                  <div key={i} className="intl-pill liquid-glass">
                    {loc.name}
                  </div>
                ))}
              </div>
            </div>

            {/* Bottom Quote */}
            <div className="intl-quote-section">
              <span className="intl-quote-label">REGIONAL EXCELLENCE</span>
              <p className="intl-quote">
                "Delivering <em>world-class safety solutions</em> with local expertise."
              </p>
              <div className="intl-quote-author">
                <span className="intl-quote-line"></span>
                <span>SINCE 2013</span>
                <span className="intl-quote-line"></span>
              </div>
            </div>
          </div>
        </div>

        {/* Right Panel */}
        <div className="intl-right">
          {/* Top Bar */}
          <div className="intl-right-top">
            <div className="intl-social-pill liquid-glass">
              <a href="#" className="intl-social-link">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/>
                </svg>
              </a>
              <a href="#" className="intl-social-link">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
                  <rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>
                </svg>
              </a>
              <a href="#" className="intl-social-link">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                </svg>
              </a>
              <span className="intl-social-divider"></span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </div>

            <button className="intl-account-btn liquid-glass">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/>
                <path d="M5 19l1 3 3-1-1-3-3 1z"/>
                <path d="M19 19l-1 3-3-1 1-3 3 1z"/>
              </svg>
            </button>
          </div>

          {/* Community Card */}
          <div className="intl-community-card liquid-glass">
            <h4>Enter our ecosystem</h4>
            <p>Join 500+ organizations across Malaysia, Indonesia & Singapore in building safer workplaces.</p>
          </div>

          {/* Bottom Feature Section */}
          <div className="intl-features">
            <div className="intl-features-outer liquid-glass">
              <div className="intl-features-grid">
                {services.slice(0, 2).map((service, i) => (
                  <div
                    key={i}
                    className="intl-feature-card liquid-glass"
                    onMouseEnter={() => setIsHovered(i)}
                    onMouseLeave={() => setIsHovered(null)}
                  >
                    <div className="intl-feature-icon">
                      {service.icon === 'shield' ? (
                        <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"/>
                        </svg>
                      ) : (
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                          <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
                          <rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
                        </svg>
                      )}
                    </div>
                    <h5>{service.title}</h5>
                    <p>{service.desc}</p>
                  </div>
                ))}
              </div>

              {/* Bottom Card */}
              <div className="intl-bottom-card liquid-glass">
                <div className="intl-bottom-thumb">
                  <img src="assets/aeq-logo-transparent.png" alt="AEQ" />
                </div>
                <div className="intl-bottom-info">
                  <h5>Advanced Safety Solutions</h5>
                  <p>ISO 45001, ISO 14001 certified training programs</p>
                </div>
                <button className="intl-bottom-add liquid-glass">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .intl-hero {
          position: relative;
          min-height: 100vh;
          width: 100%;
          overflow: hidden;
          --radius: 1rem;
        }

        /* Video Background */
        .intl-video-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: 0;
        }

        /* World Cities Overlay */
        .world-cities-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 5;
          pointer-events: none;
        }

        .world-city-marker {
          position: absolute;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.6);
          box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
          animation: cityPulse 3s ease-in-out infinite;
          transform: translate(-50%, -50%);
        }

        .world-city-marker.highlight {
          background: #f59e0b;
          box-shadow: 0 0 20px rgba(245, 158, 11, 0.8), 0 0 40px rgba(245, 158, 11, 0.4);
          width: 10px !important;
          height: 10px !important;
        }

        .city-pulse {
          position: absolute;
          inset: -6px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.4);
          animation: pulseRing 2s ease-out infinite;
        }

        .world-city-marker.highlight .city-pulse {
          border-color: rgba(245, 158, 11, 0.6);
        }

        .city-label {
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          margin-top: 6px;
          font-size: 9px;
          color: rgba(255, 255, 255, 0.7);
          white-space: nowrap;
          opacity: 0;
          transition: opacity 0.3s ease;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }

        .world-city-marker:hover .city-label,
        .world-city-marker.highlight .city-label {
          opacity: 1;
        }

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

        @keyframes pulseRing {
          0% { transform: scale(1); opacity: 0.8; }
          100% { transform: scale(2.5); opacity: 0; }
        }

        /* Connection Lines */
        .city-connections {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
        }

        .connection-line {
          fill: none;
          stroke: rgba(255, 255, 255, 0.15);
          stroke-width: 0.15;
          stroke-dasharray: 2 1;
          animation: dashMove 20s linear infinite;
        }

        .connection-line.delay-1 { animation-delay: -5s; }
        .connection-line.delay-2 { animation-delay: -10s; }

        @keyframes dashMove {
          to { stroke-dashoffset: -100; }
        }

        /* Shining Logo - Clean on Dark Background */
        .intl-shining-logo {
          position: relative;
          width: 320px;
          height: 320px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 32px;
        }

        .logo-glow {
          position: absolute;
          inset: -50px;
          background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, rgba(6, 182, 212, 0.1) 40%, transparent 70%);
          border-radius: 50%;
          animation: logoGlow 3s ease-in-out infinite;
          z-index: 0;
        }

        .logo-glow-2 {
          position: absolute;
          inset: -80px;
          background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.05) 40%, transparent 60%);
          border-radius: 50%;
          animation: logoGlow 3s ease-in-out infinite reverse;
          z-index: 0;
        }

        .big-logo {
          width: 280px;
          height: auto;
          position: relative;
          z-index: 3;
          filter: drop-shadow(0 0 30px rgba(6, 182, 212, 0.5)) drop-shadow(0 0 60px rgba(6, 182, 212, 0.3));
          animation: logoFloat 4s ease-in-out infinite;
        }

        .logo-shine {
          position: absolute;
          top: 0;
          left: -100%;
          width: 80%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
          transform: skewX(-20deg);
          animation: logoShine 4s ease-in-out infinite;
          z-index: 4;
        }

        @keyframes logoGlow {
          0%, 100% { opacity: 0.5; transform: scale(1); }
          50% { opacity: 1; transform: scale(1.1); }
        }

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

        @keyframes logoShine {
          0% { left: -100%; }
          20%, 100% { left: 200%; }
        }

        @media (min-width: 768px) {
          .intl-shining-logo {
            width: 400px;
            height: 400px;
          }
          .big-logo {
            width: 350px;
          }
          .logo-glow {
            inset: -80px;
          }
          .logo-glow-2 {
            inset: -120px;
          }
        }

        @media (min-width: 1024px) {
          .intl-shining-logo {
            width: 480px;
            height: 480px;
          }
          .big-logo {
            width: 420px;
          }
          .logo-glow {
            inset: -100px;
          }
          .logo-glow-2 {
            inset: -150px;
          }
        }

        /* Liquid Glass Base */
        .liquid-glass {
          background: rgba(255, 255, 255, 0.01);
          background-blend-mode: luminosity;
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          border: none;
          box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
          position: relative;
          overflow: hidden;
        }

        .liquid-glass::before {
          content: '';
          position: absolute;
          inset: 0;
          padding: 1.4px;
          border-radius: inherit;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.15) 20%,
            transparent 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.15) 80%,
            rgba(255, 255, 255, 0.45) 100%
          );
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
        }

        .liquid-glass-strong {
          background: rgba(255, 255, 255, 0.03);
          background-blend-mode: luminosity;
          backdrop-filter: blur(50px);
          -webkit-backdrop-filter: blur(50px);
          border: none;
          box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15);
          position: relative;
          overflow: hidden;
        }

        .liquid-glass-strong::before {
          content: '';
          position: absolute;
          inset: 0;
          padding: 1.4px;
          border-radius: inherit;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.2) 20%,
            transparent 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.2) 80%,
            rgba(255, 255, 255, 0.5) 100%
          );
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
        }

        /* Content Layout */
        .intl-content {
          position: relative;
          z-index: 10;
          display: flex;
          min-height: 100vh;
        }

        /* Left Panel */
        .intl-left {
          width: 100%;
          padding: 16px;
          display: flex;
        }

        @media (min-width: 1024px) {
          .intl-left {
            width: 52%;
            padding: 24px;
          }
        }

        .intl-left-glass {
          flex: 1;
          border-radius: 24px;
          padding: 24px;
          display: flex;
          flex-direction: column;
          background: rgba(255, 255, 255, 0.02);
          backdrop-filter: blur(50px);
          -webkit-backdrop-filter: blur(50px);
          box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15);
          position: relative;
          overflow: hidden;
        }

        .intl-left-glass::before {
          content: '';
          position: absolute;
          inset: 0;
          padding: 1.4px;
          border-radius: inherit;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.1) 20%,
            transparent 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.1) 80%,
            rgba(255, 255, 255, 0.3) 100%
          );
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
        }

        @media (min-width: 1024px) {
          .intl-left-glass {
            padding: 32px;
          }
        }

        /* Nav */
        .intl-nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 32px;
        }

        .intl-logo {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .intl-logo-img {
          width: 32px;
          height: 32px;
          object-fit: contain;
        }

        .intl-logo-text {
          font-family: 'Archivo', system-ui, sans-serif;
          font-size: 20px;
          font-weight: 600;
          color: #ffffff;
          letter-spacing: -0.02em;
        }

        .intl-nav-pill {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 16px;
          border-radius: 50px;
          color: rgba(255, 255, 255, 0.8);
          font-size: 13px;
          font-weight: 500;
        }

        /* Hero Center */
        .intl-hero-center {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          gap: 24px;
        }

        .intl-hero-icon {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.8);
        }

        .intl-title {
          font-family: 'Archivo', system-ui, sans-serif;
          font-size: clamp(32px, 6vw, 56px);
          font-weight: 500;
          color: #ffffff;
          line-height: 1.1;
          letter-spacing: -0.05em;
          margin: 0;
        }

        .intl-title em {
          font-family: 'Newsreader', Georgia, serif;
          font-style: italic;
          color: rgba(255, 255, 255, 0.8);
        }

        .intl-cta {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          padding: 14px 28px;
          border-radius: 50px;
          color: #ffffff;
          font-family: 'Archivo', system-ui, sans-serif;
          font-size: 14px;
          font-weight: 500;
          text-decoration: none;
          transition: transform 0.2s ease;
        }

        .intl-cta:hover {
          transform: scale(1.05);
        }

        .intl-cta:active {
          transform: scale(0.95);
        }

        .intl-cta-icon {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.15);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .intl-pills {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 10px;
          margin-top: 8px;
        }

        .intl-pill {
          padding: 8px 16px;
          border-radius: 50px;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.8);
          font-weight: 500;
        }

        /* Quote Section */
        .intl-quote-section {
          text-align: center;
          margin-top: auto;
          padding-top: 24px;
        }

        .intl-quote-label {
          font-size: 11px;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.5);
          display: block;
          margin-bottom: 12px;
        }

        .intl-quote {
          font-family: 'Archivo', system-ui, sans-serif;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.8);
          margin: 0 0 16px;
          line-height: 1.6;
        }

        .intl-quote em {
          font-family: 'Newsreader', Georgia, serif;
          font-style: italic;
        }

        .intl-quote-author {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          font-size: 11px;
          letter-spacing: 0.1em;
          color: rgba(255, 255, 255, 0.5);
        }

        .intl-quote-line {
          width: 24px;
          height: 1px;
          background: rgba(255, 255, 255, 0.3);
        }

        /* Right Panel */
        .intl-right {
          display: none;
          width: 48%;
          padding: 24px;
          flex-direction: column;
          gap: 16px;
        }

        @media (min-width: 1024px) {
          .intl-right {
            display: flex;
          }
        }

        .intl-right-top {
          display: flex;
          justify-content: flex-end;
          gap: 12px;
        }

        .intl-social-pill {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 16px;
          border-radius: 50px;
          color: rgba(255, 255, 255, 0.8);
        }

        .intl-social-link {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          transition: color 0.2s ease;
        }

        .intl-social-link:hover {
          color: rgba(255, 255, 255, 0.8);
        }

        .intl-social-divider {
          width: 1px;
          height: 20px;
          background: rgba(255, 255, 255, 0.2);
        }

        .intl-account-btn {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.8);
          cursor: pointer;
          transition: transform 0.2s ease;
          border: none;
        }

        .intl-account-btn:hover {
          transform: scale(1.05);
        }

        /* Community Card */
        .intl-community-card {
          width: 224px;
          padding: 20px;
          border-radius: 20px;
          margin-left: auto;
        }

        .intl-community-card h4 {
          font-family: 'Archivo', system-ui, sans-serif;
          font-size: 14px;
          font-weight: 500;
          color: #ffffff;
          margin: 0 0 8px;
        }

        .intl-community-card p {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
          margin: 0;
          line-height: 1.5;
        }

        /* Features Section */
        .intl-features {
          margin-top: auto;
        }

        .intl-features-outer {
          border-radius: 40px;
          padding: 16px;
        }

        .intl-features-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px;
          margin-bottom: 12px;
        }

        .intl-feature-card {
          border-radius: 24px;
          padding: 20px;
          transition: transform 0.2s ease;
        }

        .intl-feature-card:hover {
          transform: scale(1.02);
        }

        .intl-feature-icon {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 12px;
        }

        .intl-feature-card h5 {
          font-family: 'Archivo', system-ui, sans-serif;
          font-size: 14px;
          font-weight: 500;
          color: #ffffff;
          margin: 0 0 6px;
        }

        .intl-feature-card p {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.5);
          margin: 0;
          line-height: 1.4;
        }

        /* Bottom Card */
        .intl-bottom-card {
          display: flex;
          align-items: center;
          gap: 16px;
          border-radius: 24px;
          padding: 16px;
        }

        .intl-bottom-thumb {
          width: 96px;
          height: 64px;
          border-radius: 16px;
          background: rgba(255, 255, 255, 0.05);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .intl-bottom-thumb img {
          width: 48px;
          height: auto;
          opacity: 0.8;
        }

        .intl-bottom-info {
          flex: 1;
          min-width: 0;
        }

        .intl-bottom-info h5 {
          font-family: 'Archivo', system-ui, sans-serif;
          font-size: 13px;
          font-weight: 500;
          color: #ffffff;
          margin: 0 0 4px;
        }

        .intl-bottom-info p {
          font-size: 11px;
          color: rgba(255, 255, 255, 0.5);
          margin: 0;
          line-height: 1.4;
        }

        .intl-bottom-add {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.8);
          cursor: pointer;
          transition: transform 0.2s ease;
          border: none;
          flex-shrink: 0;
        }

        .intl-bottom-add:hover {
          transform: scale(1.05);
        }
      `}</style>
    </section>
  );
}

window.GlobeSection = GlobeSection;