wise-hearted-decor/src/components/PillarsSection.tsx

import React from 'react';

export default function PillarsSection() {
  const pillars = [
    {
      icon: '✝️',
      title: 'FAITH',
      desc: 'Our foundation. Led by God, guided by faith in every celebration we touch.',
      color: 'var(--color-gold)',
    },
    {
      icon: '👑',
      title: 'PURPOSE',
      desc: 'Every installation is created with intention, elegance, and deep meaning.',
      color: 'var(--color-pink-light)',
    },
    {
      icon: '🤍',
      title: 'WISDOM',
      desc: 'Inspired by God, designed with mindful craftsmanship and flawless execution.',
      color: 'var(--color-gold)',
    },
    {
      icon: '💕',
      title: 'LOVE',
      desc: 'We celebrate life’s most meaningful moments with genuine warmth, care, and devotion.',
      color: 'var(--color-pink-light)',
    },
    {
      icon: '✨',
      title: 'CREATIVITY',
      desc: 'Turning visions into show-stopping balloon artistry and unforgettable spaces.',
      color: 'var(--color-gold)',
    },
  ];

  return (
    <section id="pillars" style={{
      padding: '100px 24px',
      backgroundColor: '#0A0A0A',
      position: 'relative',
      borderBottom: '1px solid var(--border-gold)',
    }}>
      <div className="container">
        
        {/* Section Heading */}
        <div style={{ textAlign: 'center', marginBottom: '60px' }}>
          <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
            Our Foundational Core
          </span>
          <h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '16px' }}>
            The 5 <span className="gold-gradient-text">Brand Pillars</span>
          </h2>
          <p style={{ fontSize: '1.1rem', color: '#94A3B8', maxWidth: '720px', margin: '0 auto', lineHeight: 1.7 }}>
            &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>

        {/* 5 Pillars Grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
          gap: '20px',
          marginBottom: '60px',
        }}>
          {pillars.map((item, idx) => (
            <div key={idx} className="glass-panel" style={{
              padding: '32px 20px',
              textAlign: 'center',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              borderTop: `3px solid ${item.color}`,
              transition: 'transform 0.3s ease, border-color 0.3s ease',
            }}>
              <div style={{
                fontSize: '2.4rem',
                marginBottom: '16px',
                width: '64px',
                height: '64px',
                borderRadius: '50%',
                background: 'rgba(255, 255, 255, 0.05)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                border: '1px solid rgba(255, 255, 255, 0.1)',
                boxShadow: '0 0 16px rgba(0,0,0,0.4)',
              }}>
                {item.icon}
              </div>
              <h3 style={{ fontSize: '1.18rem', fontWeight: 800, color: item.color, letterSpacing: '0.08em', marginBottom: '12px' }}>
                {item.title}
              </h3>
              <p style={{ fontSize: '0.92rem', lineHeight: 1.6, color: '#CBD5E1', margin: 0 }}>
                {item.desc}
              </p>
            </div>
          ))}
        </div>

        {/* Brand Vibes Banner */}
        <div style={{
          background: 'linear-gradient(90deg, rgba(224, 0, 111, 0.15) 0%, rgba(212, 175, 55, 0.15) 50%, rgba(224, 0, 111, 0.15) 100%)',
          border: '1px solid var(--border-gold)',
          borderRadius: '50px',
          padding: '16px 28px',
          textAlign: 'center',
          maxWidth: '850px',
          margin: '0 auto',
        }}>
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            gap: '16px 28px',
            flexWrap: 'wrap',
            fontSize: '0.88rem',
            fontWeight: 800,
            letterSpacing: '0.15em',
            textTransform: 'uppercase',
            color: '#FFFFFF',
          }}>
            <span>FAITHFUL</span>
            <span style={{ color: 'var(--color-gold)' }}>•</span>
            <span>BOLD</span>
            <span style={{ color: 'var(--color-pink)' }}>•</span>
            <span>ELEGANT</span>
            <span style={{ color: 'var(--color-gold)' }}>•</span>
            <span>EMPOWERING</span>
            <span style={{ color: 'var(--color-pink)' }}>•</span>
            <span>PURPOSEFUL</span>
          </div>
        </div>

      </div>
    </section>
  );
}