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

export default function Hero() {
  return (
    <section style={{
      position: 'relative',
      paddingTop: '160px',
      paddingBottom: '100px',
      overflow: 'hidden',
      backgroundColor: '#000000',
      borderBottom: '1px solid var(--border-gold)',
    }}>
      <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        
        {/* Brand Tagline Badge */}
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '8px',
          background: 'rgba(20, 20, 20, 0.85)',
          border: '1.5px solid var(--color-gold)',
          padding: '8px 22px',
          borderRadius: '50px',
          marginBottom: '28px',
          boxShadow: '0 0 20px rgba(212, 175, 55, 0.25)',
        }}>
          <span style={{ color: 'var(--color-pink)', fontSize: '1rem' }}>✦</span>
          <span style={{ fontSize: '0.82rem', fontWeight: 800, color: 'var(--color-gold-light)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
            CALLED TO CREATE. ENABLED BY GOD.
          </span>
          <span style={{ color: 'var(--color-pink)', fontSize: '1rem' }}>✦</span>
        </div>

        {/* Master 4X Super-Sampled 3D Gold Logo */}
        <div style={{ maxWidth: '480px', width: '100%', margin: '0 auto 28px', position: 'relative' }}>
          <Image 
            src="/images/logo_clean_master.png" 
            alt="Wise Hearted Event Decor Logo" 
            width={1640} 
            height={1120} 
            priority
            style={{ width: '100%', height: 'auto', display: 'block', margin: '0 auto' }}
          />
        </div>

        {/* Subtitle / Promise */}
        <p style={{
          fontSize: 'clamp(1.15rem, 2.5vw, 1.45rem)',
          lineHeight: 1.6,
          color: '#E2E8F0',
          maxWidth: '780px',
          margin: '0 auto 36px',
          fontWeight: 400,
        }}>
          Transforming life’s most cherished celebrations with <strong style={{ color: 'var(--color-gold)', fontWeight: 700 }}>luxury balloon styling</strong>, <strong style={{ color: 'var(--color-pink-light)', fontWeight: 700 }}>custom arched backdrops</strong>, and <strong style={{ color: '#FFFFFF' }}>bespoke event decor</strong>.
        </p>

        {/* CTA Button Group */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: '18px', flexWrap: 'wrap', marginBottom: '60px' }}>
          <Link href="#contact" className="btn-gold" style={{ fontSize: '1.05rem', padding: '16px 36px' }}>
            <span>✨</span> Request a Custom Quote
          </Link>
          <Link href="#portfolio" className="btn-outline" style={{ fontSize: '1.05rem', padding: '15px 32px' }}>
            <span>📸</span> Explore Our Work
          </Link>
        </div>

        {/* Trust Badges Grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: '20px',
          maxWidth: '960px',
          margin: '0 auto',
        }}>
          <div className="glass-panel" style={{ padding: '20px 24px', textAlign: 'center' }}>
            <div style={{ fontSize: '1.8rem', marginBottom: '6px' }}>👑</div>
            <h3 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-gold)', marginBottom: '4px' }}>Bespoke Installations</h3>
            <p style={{ fontSize: '0.88rem', color: 'var(--text-muted)' }}>Custom color-matched palettes tailored to your theme.</p>
          </div>
          <div className="glass-panel" style={{ padding: '20px 24px', textAlign: 'center' }}>
            <div style={{ fontSize: '1.8rem', marginBottom: '6px' }}>✝️</div>
            <h3 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-pink-light)', marginBottom: '4px' }}>Faith & Purpose Driven</h3>
            <p style={{ fontSize: '0.88rem', color: 'var(--text-muted)' }}>Every design crafted with intentionality, love, and care.</p>
          </div>
          <div className="glass-panel" style={{ padding: '20px 24px', textAlign: 'center' }}>
            <div style={{ fontSize: '1.8rem', marginBottom: '6px' }}>💎</div>
            <h3 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-gold)', marginBottom: '4px' }}>Full-Service Execution</h3>
            <p style={{ fontSize: '0.88rem', color: 'var(--text-muted)' }}>Delivery, professional setup, and seamless breakdown.</p>
          </div>
        </div>

      </div>
    </section>
  );
}