import React from 'react'

// House of The Black Lotus — Retro 2000s Themed Single-file React component
// - Vibrant, plant-like lotus palette (deep greens, magentas, gold)
// - Retro-2000s UI touches: soft glows, GIF banners, subtle tiled backgrounds
// - Uplifting, pro-Black community focus (online + offline strengthening)
// - Gallery uses GIF placeholders for joyful Black community moments and lotus animations

export default function HouseOfTheBlackLotus() {
  const gifs = [
    'https://media.giphy.com/media/3o6Zt8zb1p1r9g3bEc/giphy.gif', // happy group
    'https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif', // community hug
    'https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif', // lotus bloom
    'https://media.giphy.com/media/5GoVLqeAOo6PK/giphy.gif' // celebration
  ]

  return (
    <div className="min-h-screen" style={{background: 'linear-gradient(180deg,#f7fff9,#fff7fb)'}}>
      {/* Retro tiled header */}
      <header style={{background: 'linear-gradient(90deg,#0b7b52,#ff5fa8)', padding: '2rem 1rem', color: '#fff', boxShadow: '0 6px 18px rgba(0,0,0,0.15)'}}>
        <div style={{maxWidth: 1100, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem'}}>
          <div style={{display: 'flex', alignItems: 'center', gap: '1rem'}}>
            <img src={gifs[2]} alt="lotus" style={{width:72, height:72, borderRadius:12, boxShadow: '0 6px 18px rgba(0,0,0,0.25)'}}/>
            <div>
              <h1 style={{margin:0, fontSize:28, letterSpacing:1, textShadow: '0 2px 6px rgba(0,0,0,0.35)', fontFamily: '"Trebuchet MS", Arial, sans-serif'}}>House of The Black Lotus</h1>
              <div style={{fontSize:12, marginTop:4, opacity:0.95}}>Rooted. Rising. Connected — strengthening Black communities online & offline</div>
            </div>
          </div>

          <nav aria-label="Main" style={{display:'flex', gap:10, alignItems:'center'}}>
            <a href="#mission" style={navLink}>Mission</a>
            <a href="#programs" style={navLink}>Programs</a>
            <a href="#events" style={navLink}>Events</a>
            <a href="#gallery" style={navLink}>Gallery</a>
            <a href="#join" style={{...navLink, background:'rgba(255,255,255,0.95)', color:'#0b7b52', padding:'6px 12px', borderRadius:18}}>Join Us</a>
          </nav>
        </div>
      </header>

      {/* Retro ribbon/banner GIF */}
      <div style={{maxWidth:1100, margin:'-18px auto 0', padding:'0 1rem'}}>
        <div style={{background: 'linear-gradient(90deg, rgba(255,95,168,0.06), rgba(11,123,82,0.06))', border:'1px solid rgba(11,123,82,0.06)', padding:8, borderRadius:10, display:'flex', alignItems:'center', gap:12}}>
          <img src={gifs[0]} alt="community" style={{width:64, height:48, objectFit:'cover', borderRadius:8}}/>
          <div style={{fontFamily:'Arial, sans-serif'}}>
            <strong style={{display:'block', fontSize:14}}>Welcome to the House of The Black Lotus</strong>
            <span style={{fontSize:12, opacity:0.9}}>A joyful, secure, and resource-rich space to uplift Black voices, initiatives, and relationships.</span>
          </div>
        </div>
      </div>

      <main style={{maxWidth:1100, margin:'2rem auto', padding:'0 1rem', display:'grid', gridTemplateColumns:'2fr 1fr', gap:24}}>
        {/* Left column: content */}
        <section style={{background:'rgba(255,255,255,0.95)', padding:20, borderRadius:14, boxShadow:'0 8px 40px rgba(0,0,0,0.06)'}}>
          <article id="mission">
            <h2 style={heading}>Our Mission</h2>
            <p style={lead}>House of The Black Lotus is dedicated to strengthening Black communities — digitally and in physical neighborhoods — by building connection, cultural pride, mutual aid systems, and sustainable local leadership.</p>

            <div style={{display:'flex', gap:12, marginTop:12}}>
              <div style={pill}><strong>Rooted</strong><div style={{fontSize:12}}>Preserve and elevate heritage, stories, and intergenerational wisdom.</div></div>
              <div style={pill}><strong>Rising</strong><div style={{fontSize:12}}>Develop leadership, entrepreneurship, and creative expression.</div></div>
              <div style={pill}><strong>Connected</strong><div style={{fontSize:12}}>Safe online spaces, local chapters, and shared resources.</div></div>
            </div>

            <h3 style={{...subheading, marginTop:18}}>Why the Lotus?</h3>
            <p style={{fontSize:14, lineHeight:1.55}}>The lotus symbolizes resilience, beauty growing from challenge, and renewal — a fitting emblem for a people who rise and thrive. House of The Black Lotus centers that spirit, pairing cultural pride with practical support.</p>

            <h3 style={{...subheading, marginTop:18}}>Values</h3>
            <ul style={{lineHeight:1.6}}>
              <li>Dignity & Respect for all members</li>
              <li>Mutual Aid & Resource Sharing</li>
              <li>Intergenerational Learning</li>
              <li>Creative & Economic Empowerment</li>
              <li>Digital Safety & Accessibility</li>
            </ul>

            <h2 style={{...heading, marginTop:20}}>Programs & Initiatives</h2>
            <section id="programs" style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:12}}>
              <div style={programCard}>
                <h4 style={{margin:0}}>Local Chapters</h4>
                <p style={{fontSize:13}}>Organize neighborhood hubs for mutual support, skill-shares, and cultural events.</p>
              </div>
              <div style={programCard}>
                <h4 style={{margin:0}}>Mentorship Circles</h4>
                <p style={{fontSize:13}}>Peer-led learning for career, arts, and civic engagement.</p>
              </div>
              <div style={programCard}>
                <h4 style={{margin:0}}>Microgrants</h4>
                <p style={{fontSize:13}}>Small, fast funding to sustain local projects and entrepreneurs.</p>
              </div>
              <div style={programCard}>
                <h4 style={{margin:0}}>Digital Safety Workshops</h4>
                <p style={{fontSize:13}}>Practical training to protect community members online.</p>
              </div>
            </section>

            <h2 style={{...heading, marginTop:18}}>Events & Outreach</h2>
            <p style={{fontSize:14}}>House of The Black Lotus hosts community meetups, pop-up cultural fairs, online panels, and leadership bootcamps. Below are upcoming and past highlights that help members connect and collaborate.</p>

            <div style={{display:'grid', gap:12, marginTop:12}}>
              <article style={eventCard}>
                <strong>Healing Circle — Neighborhood Park</strong>
                <div style={{fontSize:12, opacity:0.85}}>October 18 — Community storytelling & restorative practices</div>
              </article>

              <article style={eventCard}>
                <strong>Creative Entrepreneurship Lab</strong>
                <div style={{fontSize:12, opacity:0.85}}>September 5 — 3-day intensive for Black creators</div>
              </article>
            </div>

            <h2 style={{...heading, marginTop:18}}>How to Get Involved</h2>
            <ol style={{lineHeight:1.7}}>
              <li>Join our online forum & local chapter list.</li>
              <li>Volunteer to host an event or mentorship circle.</li>
              <li>Donate to the microgrant fund.</li>
              <li>Share resources and invite neighbors.</li>
            </ol>

            <div style={{marginTop:18}}>
              <a href="#join" style={{padding:'10px 16px', borderRadius:12, background:'#0b7b52', color:'#fff', textDecoration:'none', boxShadow:'0 6px 18px rgba(11,123,82,0.3)'}}>Become a Member</a>
            </div>
          </article>

          <section id="gallery" style={{marginTop:28}}>
            <h3 style={heading}>Gallery — Joy & Community</h3>
            <p style={{fontSize:13}}>Moments of celebration, solidarity, and everyday strength. Click any GIF to open larger (demo-lightbox behavior expected).</p>

            <div style={{display:'flex', gap:10, flexWrap:'wrap', marginTop:12}}>
              {gifs.map((g, i) => (
                <button key={i} style={{border: 'none', padding:0, background:'transparent', cursor:'pointer'}} onClick={() => alert('Open lightbox: GIF '+(i+1))}>
                  <img src={g} alt={`gif-${i}`} style={{width:180, height:110, objectFit:'cover', borderRadius:10, boxShadow:'0 8px 24px rgba(0,0,0,0.12)'}}/>
                </button>
              ))}
            </div>
          </section>
        </section>

        {/* Right column: sidebar */}
        <aside style={{position:'sticky', top:20}}>
          <div style={{background:'linear-gradient(180deg,#fff,#fffefc)', padding:16, borderRadius:12, boxShadow:'0 6px 20px rgba(0,0,0,0.06)'}}>
            <h4 style={{marginTop:0, color:'#0b7b52'}}>Join a Chapter</h4>
            <p style={{fontSize:13}}>Find your local House of The Black Lotus chapter or start a new one.</p>
            <form style={{display:'flex', flexDirection:'column', gap:8, marginTop:8}} onSubmit={(e)=>{e.preventDefault(); alert('Join request submitted')}}>
              <input type="text" placeholder="City, State" style={{padding:8, borderRadius:8, border:'1px solid #e6e6e6'}}/>
              <input type="email" placeholder="you@domain.com" style={{padding:8, borderRadius:8, border:'1px solid #e6e6e6'}}/>
              <button style={{padding:10, borderRadius:10, background:'#ff5fa8', color:'#fff', border:'none'}}>Request Chapter Info</button>
            </form>
          </div>

          <div style={{marginTop:12, padding:12, borderRadius:12, background:'#FFF8F9', boxShadow:'0 6px 20px rgba(0,0,0,0.04)'}}>
            <h4 style={{margin:0, color:'#b33d6a'}}>Support the Microgrant Fund</h4>
            <p style={{fontSize:13}}>Your contributions directly seed local projects and creative businesses.</p>
            <div style={{display:'flex', gap:8, marginTop:8}}>
              <button style={{flex:1, padding:10, borderRadius:8, background:'#0b7b52', color:'#fff', border:'none'}}>Donate</button>
              <button style={{flex:1, padding:10, borderRadius:8, background:'#ffd97a', border:'none'}}>Sponsor</button>
            </div>
          </div>

          <div style={{marginTop:12, padding:12, borderRadius:12, background:'#f8fff8', boxShadow:'0 6px 20px rgba(0,0,0,0.04)'}}>
            <h4 style={{margin:0, color:'#0b7b52'}}>Digital Safety</h4>
            <p style={{fontSize:13}}>Resources and workshops to protect personal data and avoid online harassment.</p>
            <a style={{display:'inline-block', marginTop:8, color:'#0b7b52', textDecoration:'underline'}}>Learn More</a>
          </div>
        </aside>
      </main>

      <footer style={{background:'linear-gradient(90deg,#ff5fa8,#0b7b52)', color:'#fff', padding:'2rem 1rem', marginTop:32}}>
        <div style={{maxWidth:1100, margin:'0 auto', display:'flex', justifyContent:'space-between', gap:12}}>
          <div>
            <strong>House of The Black Lotus</strong>
            <div style={{fontSize:12, opacity:0.95}}>A communal project for Black flourishing — online and on the ground.</div>
          </div>

          <div style={{textAlign:'right'}}>
            <div style={{fontSize:12}}>Follow our chapters</div>
            <div style={{marginTop:8, display:'flex', gap:8, justifyContent:'flex-end'}}>
              <a href="#" style={social}>Instagram</a>
              <a href="#" style={social}>X</a>
              <a href="#" style={social}>Facebook</a>
            </div>
            <div style={{fontSize:11, marginTop:10, opacity:0.9}}>© {new Date().getFullYear()} House of The Black Lotus</div>
          </div>
        </div>
      </footer>
    </div>
  )
}

// --- Inline style helpers ---
const navLink = {color:'#fff', textDecoration:'none', padding:'8px 12px', borderRadius:10, fontSize:13, background:'transparent', border:'1px solid rgba(255,255,255,0.08)'}
const heading = {fontSize:20, color:'#0b7b52', marginBottom:6}
const subheading = {fontSize:16, color:'#b33d6a'}
const lead = {fontSize:15, color:'#333', lineHeight:1.6}
const pill = {background:'#fff', padding:10, borderRadius:10, boxShadow:'0 6px 16px rgba(11,123,82,0.06)', flex:1}
const programCard = {background:'#fff', padding:12, borderRadius:10, border:'1px solid #f1f1f1'}
const eventCard = {background:'#fff', padding:12, borderRadius:10, border:'1px dashed rgba(11,123,82,0.08)'}
const social = {color:'#fff', textDecoration:'none', padding:'6px 10px', border:'1px solid rgba(255,255,255,0.12)', borderRad