'use client';

export function FounderSection() {
  return (
    <div
      style={{
        position: 'relative',
        borderRadius: '2rem',
        padding: 'clamp(2rem, 5vw, 3.5rem)',
        overflow: 'hidden',
        background:
          'radial-gradient(ellipse 50% 70% at 100% 0%, rgba(231, 231, 231, 0.15), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(5,5,5,0.98))',
        border: '1px solid rgba(94, 94, 94, 0.28)',
        boxShadow: '0 30px 100px rgba(0,0,0,0.7)',
      }}
    >
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          background:
            'linear-gradient(rgba(94, 94, 94, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.04) 1px, transparent 1px)',
          backgroundSize: '48px 48px',
          maskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%)',
          pointerEvents: 'none',
        }}
      />

      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))', gap: 'clamp(2rem, 4vw, 3rem)', alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <span className="eyebrow">Leadership · YS Lootah Group</span>
          <h2 style={{ margin: 0, fontSize: 'clamp(1.6rem, 3.8vw, 2.4rem)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            <span className="text-gradient" style={{ fontWeight: 500 }}>
              Mr. Yousif Bin Saeed Al Lootah
            </span>
          </h2>
          <p style={{ margin: 0, color: '#e7e7e7', fontSize: '0.85rem', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600 }}>
            Founder · Yousuf Saeed Lootah Investment Group
          </p>
          <p style={{ margin: 0, color: '#e7e7e7', lineHeight: 1.7, fontSize: '1rem' }}>
            Under the leadership of Mr. Yousif Bin Saeed Al Lootah, the group has championed innovation, trust, and long-term value creation across the UAE from technology and robotics to investment and enterprise. YS Lootah Robotics carries that vision into the future of intelligent automation.
          </p>
          <p style={{ margin: 0, color: '#a8a8a8', lineHeight: 1.7, fontSize: '0.92rem' }}>
            <em>“Innovating today for a smarter tomorrow.”</em>
          </p>
        </div>

        <div
          className="fs-pillars"
          style={{
            display: 'grid',
            gap: '1rem',
          }}
        >
          <Pillar value="Group" label="Yousuf Saeed Lootah Investment Group" />
          <Pillar value="AI" label="Artificial intelligence & automation" />
          <Pillar value="UAE" label="Trusted technology partner" />
          <Pillar value="Future" label="Smart, autonomous, intelligent" />
        </div>
      </div>

      <style jsx>{`
        .fs-pillars {
          grid-template-columns: minmax(0, 1fr);
        }
        @media (min-width: 640px) {
          .fs-pillars {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      `}</style>
    </div>
  );
}

function Pillar({ value, label }: { value: string; label: string }) {
  return (
    <div
      style={{
        padding: '1.25rem',
        borderRadius: 14,
        background: 'linear-gradient(135deg, rgba(30, 30, 30, 0.7), rgba(5,5,5,0.92))',
        border: '1px solid rgba(94, 94, 94, 0.22)',
        display: 'flex',
        flexDirection: 'column',
        gap: '0.4rem',
        minHeight: 110,
        justifyContent: 'center',
      }}
    >
      <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.2rem, 2.2vw, 1.5rem)', fontWeight: 700, letterSpacing: '-0.01em' }}>
        {value}
      </span>
      <span style={{ fontSize: '0.72rem', color: '#a8a8a8', letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.45 }}>{label}</span>
    </div>
  );
}