const { useState, useRef } = React;

function FeaturedCakes() {
  const [ref, vis] = window.useReveal();
  const [hovBig, setHovBig] = useState(false);
  const [hovIdx, setHovIdx] = useState(-1);

  const bigCard = {
    label: 'Signature', title: 'Amarula Cakes\nthat tell a story',
    desc: 'Creamy, luxurious, and unmistakably South African',
    img: 'https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?auto=format&fit=crop&w=800&q=80',
  };
  const smallCards = [
    { label:'Indulgence', title:'Chocolate bundt cakes', desc:'Rich, decadent, and perfectly portioned', img:'https://images.unsplash.com/photo-1486427944299-d1955d23e34d?auto=format&fit=crop&w=500&q=80' },
    { label:'Morning', title:'Coffee cakes', desc:'Delicate flavors that pair with your day', img:'https://images.unsplash.com/photo-1558961363-fa8fdf82db35?auto=format&fit=crop&w=500&q=80' },
    { label:'Gifting', title:'Curated gift packs', desc:'Beautifully wrapped treats for those you love', img:'https://images.unsplash.com/photo-1549451371-64aa98a6f660?auto=format&fit=crop&w=500&q=80' },
    { label:'Celebration', title:'Occasion cakes', desc:'Custom designs that make moments unforgettable', img:'https://images.unsplash.com/photo-1571115177098-24ec42ed204d?auto=format&fit=crop&w=500&q=80' },
  ];


  return (
    <section id="featured" ref={ref} style={{ padding: 'clamp(72px,10vw,120px) clamp(20px,5vw,100px)', background: '#FFFCFA', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .bento-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:16px; }
        .bento-big  { grid-column:1; grid-row:1 / 3; }
        @media(max-width:900px){
          .bento-grid { grid-template-columns:1fr 1fr; gap:12px; }
          .bento-big  { grid-column:1 / 3; grid-row:auto; min-height:auto!important; flex-direction:column; }
          .bento-big-img { height:200px!important; width:100%!important; }
        }
        @media(max-width:580px){
          .bento-grid { grid-template-columns:1fr; gap:12px; }
          .bento-big  { grid-column:1; }
          .bento-big-img { height:180px!important; }
        }
        .card-hover { transition:transform .3s ease, box-shadow .3s ease; }
        .card-hover:hover { transform:translateY(-6px); box-shadow:0 18px 52px rgba(92,58,46,.15)!important; }
        .small-card-hover { transition:transform .3s ease, box-shadow .3s ease; }
        .small-card-hover:hover { transform:translateY(-4px); box-shadow:0 14px 40px rgba(92,58,46,.12)!important; }
        .view-link { display:inline-flex; align-items:center; gap:4px; font-family:'Nunito Sans',sans-serif; font-size:13px; font-weight:500; color:#D97A90; text-decoration:none; transition:gap .2s; }
        .view-link:hover { gap:8px; }
        .btn-pink-sm { display:inline-flex; align-items:center; padding:11px 22px; background:linear-gradient(135deg,#D97A90,#E8A0B4); color:#fff; border-radius:50px; font-family:'Nunito Sans',sans-serif; font-size:13px; font-weight:600; text-decoration:none; box-shadow:0 4px 16px rgba(217,122,144,.3); transition:all .3s ease; min-height:44px; }
        .btn-pink-sm:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(217,122,144,.45); }
        @media(max-width:767px){
          .bento-big .card-text-pad { padding:24px 20px 16px!important; }
          .bento-small-pad { padding:18px 18px 12px!important; }
        }
      `}</style>

      <div style={{ position: 'absolute', width: '350px', height: '350px', borderRadius: '50%', background: 'rgba(245,184,196,.09)', top: '-80px', right: '-80px', filter: 'blur(70px)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: '1440px', margin: '0 auto' }}>

        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 'clamp(40px,6vw,64px)', opacity: vis ? 1 : 0, transform: vis ? 'translateY(0)' : 'translateY(24px)', transition: 'all .8s ease' }}>
          <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '11px', fontWeight: 600, letterSpacing: '3.5px', textTransform: 'uppercase', color: '#D97A90' }}>Creations</span>
          <h2 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(36px,5vw,62px)', fontWeight: 500, color: '#2D1A12', margin: '12px 0 14px', lineHeight: 1.12 }}>What we bake best</h2>
          <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '16px', fontWeight: 300, color: '#9A7266' }}>Handcrafted cakes designed for your moments</p>
        </div>

        {/* Bento Grid */}
        <div className="bento-grid" style={{ opacity: vis ? 1 : 0, transition: 'opacity .9s ease .2s' }}>

          {/* Big card */}
          <div className="bento-big card-hover" style={{ borderRadius: '24px', overflow: 'hidden', background: 'linear-gradient(160deg,#FFF0F4,#FBF0FF)', boxShadow: '0 4px 24px rgba(92,58,46,.07)', display: 'flex', flexDirection: 'column', cursor: 'pointer' }}>
            <div className="card-text-pad" style={{ padding: '32px 28px 20px', flex: '0 0 auto' }}>
              <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '10px', fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: '#D97A90' }}>{bigCard.label}</span>
              <h3 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(26px,3vw,38px)', fontWeight: 500, color: '#2D1A12', lineHeight: 1.2, margin: '10px 0 12px', whiteSpace: 'pre-line' }}>{bigCard.title}</h3>
              <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 300, color: '#7D5046', marginBottom: '20px', lineHeight: 1.6 }}>{bigCard.desc}</p>
              <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                <a href="#order" className="btn-pink-sm">Explore</a>
                <a href="#menu" className="view-link">View <span>→</span></a>
              </div>
            </div>
            <div className="bento-big-img" style={{ flex: '1 1 auto', minHeight: '240px', overflow: 'hidden' }}>
              <img src={bigCard.img} alt={bigCard.title} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .6s ease', display: 'block' }}
              onMouseEnter={(e) => e.target.style.transform = 'scale(1.07)'}
              onMouseLeave={(e) => e.target.style.transform = 'scale(1)'} />
            </div>
          </div>

          {/* Small cards */}
          {smallCards.map((card, i) =>
          <div key={i} className="small-card-hover" style={{ borderRadius: '20px', overflow: 'hidden', background: '#FFF8F0', border: '1px solid rgba(245,184,196,.22)', boxShadow: '0 2px 16px rgba(92,58,46,.05)', display: 'flex', flexDirection: 'column', cursor: 'pointer' }}>
              <div className="bento-small-pad" style={{ padding: '22px 22px 14px' }}>
                <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '10px', fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: '#D97A90' }}>{card.label}</span>
                <h3 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(18px,2.5vw,24px)', fontWeight: 500, color: '#2D1A12', lineHeight: 1.25, margin: '8px 0 8px' }}>{card.title}</h3>
                <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '13px', fontWeight: 300, color: '#7D5046', marginBottom: '12px', lineHeight: 1.6 }}>{card.desc}</p>
                <a href="#menu" className="view-link">View <span>→</span></a>
              </div>
              <div className="bento-small-img" style={{ marginTop: 'auto', height: '155px', overflow: 'hidden' }}>
                <img src={card.img} alt={card.title} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .5s ease' }}
              onMouseEnter={(e) => e.target.style.transform = 'scale(1.08)'}
              onMouseLeave={(e) => e.target.style.transform = 'scale(1)'} />
              
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Menu() {
  const [ref, vis] = window.useReveal();
  const [tab, setTab] = useState('classic');

  const classic = [
  { name: 'Amarula Cream Cake', price: 'R450', features: ['Creamy Amarula filling', 'Milk chocolate coating', 'Serves eight to ten'], featured: false },
  { name: 'Chocolate Bundt', price: 'R380', features: ['Rich dark chocolate', 'Perfectly portioned', 'Moist and decadent', 'Ready to order'], featured: true },
  { name: 'Oreo Chocolate Cake', price: 'R420', features: ['Crushed Oreo layers', 'Chocolate ganache', 'Creamy filling', 'Serves six to eight'], featured: false }];

  const signature = [
  { name: 'Amarula Milk Fudge', price: 'R520', features: ['Premium Amarula liqueur', 'Homemade milk fudge', 'Rich caramel layers', 'Serves ten to twelve'], featured: true },
  { name: 'Velvet Rose Cake', price: 'R580', features: ['Red velvet sponge', 'Rose cream cheese', 'Edible floral décor', 'Custom decoration'], featured: false },
  { name: 'Caramel Pecan Tower', price: 'R650', features: ['Multi-layer design', 'Salted caramel drip', 'Toasted pecans', 'Serves twelve plus'], featured: false }];

  const items = tab === 'classic' ? classic : signature;

  const Tick = () =>
  <div style={{ width: '18px', height: '18px', borderRadius: '50%', background: 'rgba(245,184,196,.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <svg width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M1 4L3.5 6.5L9 1" stroke="#D97A90" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
    </div>;


  return (
    <section id="menu" ref={ref} style={{ padding: 'clamp(72px,10vw,120px) clamp(20px,5vw,100px)', background: 'linear-gradient(180deg,#F0EBF9 0%,#FFF8F0 100%)', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .menu-card { transition:transform .3s ease, box-shadow .3s ease; }
        .menu-card:hover { transform:translateY(-7px); }
        .menu-card-feat:hover { box-shadow:0 24px 64px rgba(217,122,144,.22)!important; }
        .menu-card-std:hover  { box-shadow:0 18px 52px rgba(92,58,46,.10)!important; }
        .menu-order-btn { transition:all .3s ease; }
        .menu-order-btn:hover { opacity:.88; transform:translateY(-1px); }
        .tab-btn { transition:all .3s ease; }
      `}</style>
      <div style={{ position: 'absolute', width: '400px', height: '400px', borderRadius: '50%', background: 'rgba(214,196,238,.18)', top: '-100px', left: '-100px', filter: 'blur(80px)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', width: '300px', height: '300px', borderRadius: '50%', background: 'rgba(245,184,196,.13)', bottom: '-60px', right: '-40px', filter: 'blur(60px)', pointerEvents: 'none' }} />

      <div style={{ maxWidth: '1440px', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: '48px', opacity: vis ? 1 : 0, transform: vis ? 'translateY(0)' : 'translateY(24px)', transition: 'all .8s ease' }}>
          <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '11px', fontWeight: 600, letterSpacing: '3.5px', textTransform: 'uppercase', color: '#D97A90' }}>Menu</span>
          <h2 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(36px,5vw,62px)', fontWeight: 500, color: '#2D1A12', margin: '12px 0 14px' }}>Our Cakes</h2>
          <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '16px', fontWeight: 300, color: '#9A7266', marginBottom: '32px', maxWidth: '500px', margin: '0 auto 32px' }}>
            Each creation is crafted to order, baked fresh, and ready to make your moment special.
          </p>
          {/* Tabs */}
          <div style={{ display: 'inline-flex', background: 'rgba(255,255,255,.75)', border: '1px solid rgba(245,184,196,.32)', borderRadius: '50px', padding: '4px', gap: '4px', backdropFilter: 'blur(12px)' }}>
            {['classic', 'signature'].map((t) =>
            <button key={t} className="tab-btn" onClick={() => setTab(t)} style={{
              padding: '9px 30px', borderRadius: '50px', border: 'none', cursor: 'pointer',
              fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 500,
              background: tab === t ? 'linear-gradient(135deg,#D97A90,#E8A0B4)' : 'transparent',
              color: tab === t ? '#fff' : '#7D5046',
              boxShadow: tab === t ? '0 4px 16px rgba(217,122,144,.28)' : 'none',
              letterSpacing: '.3px'
            }}>
                {t.charAt(0).toUpperCase() + t.slice(1)}
              </button>
            )}
          </div>
        </div>

        {/* Cards */}
        <div className="menu-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'clamp(16px,2vw,28px)', opacity: vis ? 1 : 0, transition: 'opacity .9s ease .2s' }}>
          {items.map((item, i) =>
          <div key={`${tab}-${i}`} className={`menu-card ${item.featured ? 'menu-card-feat' : 'menu-card-std'}`} style={{
            borderRadius: '24px',
            background: item.featured ? 'linear-gradient(160deg,#FDEAEF 0%,#EFE8FA 100%)' : 'rgba(255,255,255,.88)',
            border: item.featured ? '1.5px solid rgba(245,184,196,.48)' : '1px solid rgba(245,184,196,.18)',
            padding: '32px 28px 28px',
            position: 'relative', overflow: 'hidden',
            boxShadow: item.featured ? '0 8px 40px rgba(217,122,144,.1)' : '0 4px 20px rgba(92,58,46,.05)'
          }}>
              {item.featured &&
            <div style={{ position: 'absolute', top: '18px', right: '18px', padding: '5px 14px', background: 'linear-gradient(135deg,#D97A90,#E8A0B4)', color: '#fff', borderRadius: '20px', fontSize: '11px', fontWeight: 600, fontFamily: 'Nunito Sans,sans-serif', letterSpacing: '.5px' }}>
                  Popular
                </div>
            }
              {/* Decorative soft orb */}
              {item.featured && <div style={{ position: 'absolute', width: '160px', height: '160px', borderRadius: '50%', background: 'rgba(245,184,196,.12)', top: '-40px', left: '-40px', filter: 'blur(30px)', pointerEvents: 'none' }} />}
              <h3 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '22px', fontWeight: 500, color: '#2D1A12', marginBottom: '4px', lineHeight: 1.3, paddingRight: item.featured ? '60px' : 0 }}>{item.name}</h3>
              <div style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(44px,6vw,60px)', fontWeight: 600, color: '#5C3A2E', lineHeight: 1.05, margin: '8px 0 22px' }}>{item.price}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '28px' }}>
                {item.features.map((f, j) =>
              <div key={j} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <Tick />
                    <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 300, color: '#7D5046' }}>{f}</span>
                  </div>
              )}
              </div>
              <a href="#order" className="menu-order-btn" style={{
              display: 'block', textAlign: 'center', padding: '15px',
              background: item.featured ? 'linear-gradient(135deg,#D97A90,#E8A0B4)' : 'rgba(245,184,196,.22)',
              color: item.featured ? '#fff' : '#D97A90',
              borderRadius: '50px',
              fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 600,
              textDecoration: 'none',
              border: item.featured ? 'none' : '1.5px solid rgba(245,184,196,.45)',
              boxShadow: item.featured ? '0 4px 16px rgba(217,122,144,.28)' : 'none'
            }}>
                Order now
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { FeaturedCakes, Menu });