'use client';

import Image from 'next/image';
import Link from 'next/link';
import { BU_SUNAIDAH_URL, BU_SUNAIDAH_PORTRAIT } from '@/data/bu-sunaidah';
import { InstagramGlyph } from '@/components/icons/InstagramGlyph';

export function BuSunaidahSection() {
  return (
    <div
      style={{
        position: 'relative',
        borderRadius: '2rem',
        padding: 'clamp(2rem, 5vw, 3.5rem)',
        overflow: 'hidden',
        background:
          'radial-gradient(ellipse 60% 80% at 0% 100%, rgba(39, 63, 148,0.18), transparent 65%), radial-gradient(ellipse 70% 60% at 100% 0%, rgba(222, 224, 240,0.12), transparent 60%), linear-gradient(135deg, rgba(28, 27, 33,0.95), rgba(5,5,5,0.98))',
        border: '1px solid rgba(39, 63, 148,0.32)',
        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222, 224, 240,0.05)',
      }}
    >
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          background:
            'linear-gradient(rgba(39, 63, 148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.05) 1px, transparent 1px)',
          backgroundSize: '48px 48px',
          maskImage: 'radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 80%)',
          pointerEvents: 'none',
        }}
      />

      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))', gap: 'clamp(2rem, 5vw, 3.5rem)', alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
          <span className="eyebrow" style={{ color: '#DEE0F0' }}>
            Brand · Culture · Storytelling
          </span>
          <h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
            <span className="text-gradient" style={{ fontWeight: 500 }}>
              Meet Bu Sunaidah.
            </span>
          </h2>
          <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
            An Emirati culture-inspired robotics character Bu Sunaidah is YS Lootah Robotics&apos; community and storytelling ambassador. Designed to celebrate UAE heritage at media events, exhibitions, and innovation programs, Bu Sunaidah shows what intelligent automation looks like when it speaks the language of the region.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
            {[
              'Emirati-inspired robotics persona',
              'Media presence and event activations across the UAE',
              'Community engagement and innovation storytelling',
              'A modern face for advanced robotics in our region',
            ].map((b) => (
              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#FBFBFD', fontSize: '0.95rem', lineHeight: 1.55 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
                  <path d="M20 6 9 17l-5-5" />
                </svg>
                {b}
              </li>
            ))}
          </ul>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', marginTop: '0.5rem' }}>
            <a
              className="btn btn-ghost"
              href="https://www.instagram.com/bu.sunaidah"
              target="_blank"
              rel="noopener noreferrer"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
              </svg>
              Follow @bu.sunaidah
            </a>
            <a className="btn btn-outline" href="/contact/">
              Book Bu Sunaidah for events
            </a>
          </div>
        </div>

        <div
          style={{
            position: 'relative',
            aspectRatio: '1 / 1',
            maxWidth: 460,
            margin: '0 auto',
            width: '100%',
          }}
        >
          <div
            aria-hidden
            style={{
              position: 'absolute',
              inset: '-2rem',
              background:
                'radial-gradient(ellipse 60% 60% at 50% 60%, rgba(222, 224, 240,0.32), transparent 65%)',
              filter: 'blur(28px)',
              pointerEvents: 'none',
            }}
          />
          {(() => {
            const cardStyle = {
              position: 'relative' as const,
              display: 'block' as const,
              width: '100%',
              height: '100%',
              borderRadius: '1.75rem',
              overflow: 'hidden' as const,
              border: '1px solid rgba(39, 63, 148,0.35)',
              background:
                'radial-gradient(ellipse 70% 60% at 50% 55%, rgba(222, 224, 240,0.18), transparent 60%), linear-gradient(180deg, rgba(28, 27, 33,0.85), rgba(5,5,5,0.95))',
              boxShadow: '0 30px 100px rgba(0,0,0,0.7)',
              textDecoration: 'none' as const,
              color: 'inherit' as const,
            };

            const chips = (
              <div
                style={{
                  position: 'absolute',
                  bottom: '1rem',
                  left: '1rem',
                  right: '1rem',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: '0.75rem',
                  pointerEvents: 'none',
                }}
              >
                <span
                  style={{
                    padding: '0.4rem 0.75rem',
                    borderRadius: 999,
                    background: 'rgba(14, 13, 18,0.7)',
                    border: '1px solid rgba(39, 63, 148,0.35)',
                    color: '#DEE0F0',
                    fontSize: '0.66rem',
                    letterSpacing: '0.22em',
                    textTransform: 'uppercase',
                    fontWeight: 600,
                    backdropFilter: 'blur(8px)',
                  }}
                >
                  Emirati-inspired persona
                </span>
                <span
                  style={{
                    padding: '0.35rem 0.65rem',
                    borderRadius: 999,
                    background: 'rgba(222, 224, 240,0.18)',
                    border: '1px solid rgba(222, 224, 240,0.4)',
                    color: '#FBFBFD',
                    fontSize: '0.7rem',
                    letterSpacing: '0.16em',
                    textTransform: 'uppercase',
                    fontWeight: 700,
                  }}
                >
                  Bu Sunaidah
                </span>
              </div>
            );

            if (BU_SUNAIDAH_PORTRAIT) {
              return (
                <Link href="/bu-sunaidah/" aria-label="Open the Bu Sunaidah page" style={cardStyle}>
                  <Image
                    src={BU_SUNAIDAH_PORTRAIT.src}
                    alt={BU_SUNAIDAH_PORTRAIT.alt}
                    fill
                    sizes="(max-width: 768px) 90vw, 460px"
                    style={{ objectFit: 'cover', objectPosition: 'center' }}
                  />
                  {chips}
                </Link>
              );
            }

            return (
              <a
                href={BU_SUNAIDAH_URL}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Open @bu.sunaidah on Instagram in a new tab"
                style={cardStyle}
              >
                <span
                  style={{
                    position: 'absolute',
                    inset: 0,
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    gap: '1.1rem',
                    textAlign: 'center',
                    padding: 'clamp(1.25rem, 4vw, 2rem)',
                    background:
                      'radial-gradient(ellipse 60% 60% at 50% 35%, rgba(58, 85, 196, 0.25), transparent 65%)',
                  }}
                >
                  <span
                    aria-hidden
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: 78,
                      height: 78,
                      borderRadius: 22,
                      color: '#FFFFFF',
                      border: '1px solid rgba(222, 224, 240, 0.28)',
                      background:
                        'radial-gradient(ellipse 60% 60% at 30% 30%, rgba(255, 84, 165, 0.55), transparent 60%), radial-gradient(ellipse 60% 60% at 70% 70%, rgba(255, 165, 84, 0.45), transparent 60%), linear-gradient(135deg, rgba(58, 85, 196, 0.65), rgba(20, 20, 28, 0.85))',
                      boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
                    }}
                  >
                    <InstagramGlyph size={34} />
                  </span>
                  <span
                    style={{
                      fontSize: '0.66rem',
                      letterSpacing: '0.28em',
                      textTransform: 'uppercase',
                      fontWeight: 700,
                      color: '#8891C7',
                    }}
                  >
                    Portrait coming soon
                  </span>
                  <span
                    style={{
                      fontSize: '1.05rem',
                      fontWeight: 500,
                      letterSpacing: '-0.005em',
                      lineHeight: 1.4,
                      maxWidth: 280,
                      color: '#FBFBFD',
                    }}
                  >
                    View Bu Sunaidah&apos;s latest moments on Instagram
                  </span>
                </span>
                {chips}
              </a>
            );
          })()}
        </div>
      </div>
    </div>
  );
}