import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

export default function AboutSection() {
  return (
    <section id="about" style={{
      padding: '100px 24px',
      backgroundColor: '#000000',
      position: 'relative',
      borderBottom: '1px solid var(--border-gold)',
    }}>
      <div className="container">
        
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))',
          gap: '50px',
          alignItems: 'center',
        }}>
          
          {/* Left Column: Native High-Res Luxury Brand Card */}
          <div style={{ position: 'relative' }}>
            <div style={{
              background: '#0D0D0D',
              borderRadius: '24px',
              padding: '36px 30px',
              border: '2px solid var(--color-gold)',
              boxShadow: '0 12px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.2)',
              textAlign: 'center',
              position: 'relative',
            }}>
              
              {/* Inner Double Gold Border */}
              <div style={{
                position: 'absolute',
                top: '12px',
                left: '12px',
                right: '12px',
                bottom: '12px',
                border: '1px solid rgba(212, 175, 55, 0.4)',
                borderRadius: '16px',
                pointerEvents: 'none',
              }} />

              {/* Gold Quote Mark */}
              <div style={{
                fontSize: '2.8rem',
                color: 'var(--color-gold)',
                lineHeight: 1,
                marginBottom: '12px',
                fontFamily: 'var(--font-serif)',
              }}>
                “
              </div>

              {/* Vector Typography */}
              <div style={{
                fontSize: 'clamp(1.4rem, 2.4vw, 1.85rem)',
                fontWeight: 600,
                color: '#FFFFFF',
                letterSpacing: '0.02em',
                marginBottom: '4px',
              }}>
                Be led by God
              </div>

              <div style={{
                fontFamily: 'var(--font-script)',
                fontSize: 'clamp(2.4rem, 3.8vw, 3.2rem)',
                color: 'var(--color-pink-light)',
                lineHeight: 1.1,
                marginBottom: '20px',
                textShadow: '0 2px 14px rgba(224, 0, 111, 0.4)',
              }}>
                from the heart.
              </div>

              {/* Gold Heart Divider */}
              <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: '12px',
                maxWidth: '220px',
                margin: '0 auto 20px',
              }}>
                <div style={{ height: '1px', background: 'var(--color-gold)', flex: 1 }} />
                <span style={{ color: 'var(--color-gold)', fontSize: '0.95rem' }}>💛</span>
                <div style={{ height: '1px', background: 'var(--color-gold)', flex: 1 }} />
              </div>

              {/* High-Res Master Logo */}
              <div style={{ maxWidth: '280px', width: '100%', margin: '0 auto 12px', position: 'relative' }}>
                <Image 
                  src="/images/logo_clean_master.webp" 
                  alt="Wise Hearted Event Decor" 
                  width={1640} 
                  height={1120} 
                  style={{ width: '100%', height: 'auto', display: 'block' }}
                />
              </div>

              {/* Sub-tagline */}
              <div style={{
                fontSize: '0.72rem',
                fontWeight: 800,
                color: 'var(--color-gold-light)',
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
              }}>
                Called to Create. Enabled by God.
              </div>

            </div>
          </div>

          {/* Right Column: About Story & Mission */}
          <div>
            <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
              About the Heart Behind the Brand
            </span>
            <h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '20px', lineHeight: 1.25 }}>
              Called to Create. <br />
              <span className="gold-gradient-text">Enabled by God.</span>
            </h2>
            <p style={{ fontSize: '1.05rem', lineHeight: 1.8, color: '#E2E8F0', marginBottom: '20px' }}>
              At <strong>Wise Hearted Event Decor</strong>, we believe every milestone, birthday, wedding, and celebration is a sacred opportunity to gather loved ones and create memories that last a lifetime.
            </p>
            <p style={{ fontSize: '1.05rem', lineHeight: 1.8, color: '#CBD5E1', marginBottom: '24px' }}>
              Founded with a deep commitment to faith, beauty, purpose, and love, our mission is to transform ordinary rooms into breathtaking, immersive spaces. We do not just build balloon garlands—we pour intentionality, artistic prayer, and meticulous craftsmanship into every single arch, floral arrangement, and personalized detail.
            </p>

            <div style={{
              background: '#0F0F0F',
              borderLeft: '4px solid var(--color-gold)',
              padding: '18px 22px',
              borderRadius: '8px',
              marginBottom: '32px',
              border: '1px solid rgba(212, 175, 55, 0.25)',
              borderLeftWidth: '4px',
            }}>
              <p style={{ fontStyle: 'italic', fontSize: '0.98rem', color: 'var(--color-gold-light)', margin: 0 }}>
                &ldquo;Creating beautiful spaces and memorable events through God-given creativity, with faith, beauty, purpose, and love at the heart of every design.&rdquo;
              </p>
            </div>

            <Link href="#contact" className="btn-pink">
              <span>💕</span> Let’s Design Your Event
            </Link>
          </div>

        </div>

      </div>
    </section>
  );
}