const { useState, useEffect, useRef } = React;

function Gallery() {
  const [ref, vis] = window.useReveal();
  const [paused, setPaused] = useState(false);

  const photos = [
    { src: 'uploads/assets/550554343_826980303222641_3964882062018522412_n.jpg', alt: 'Chocolate cake celebration spread' },
    { src: 'uploads/assets/606017667_902858575634813_3760579327924152420_n.jpg', alt: 'Merry Christmas cake' },
    { src: 'uploads/assets/638018575_944422964811707_3240825599121977243_n.jpg', alt: 'Layered chocolate caramel cake' },
    { src: 'uploads/assets/641351600_949703057617031_4243856670676613544_n.jpg', alt: 'Easter bunny gift box' },
    { src: 'uploads/assets/641442577_949703007617036_7925934757241647391_n.jpg', alt: 'Happy Easter gift bag' },
    { src: 'uploads/assets/642730182_949702790950391_1814147979025880647_n.jpg', alt: 'Easter gift basket with sweets' },
    { src: 'uploads/assets/642822695_949702957617041_3642773057894614579_n.jpg', alt: 'Easter candy basket' },
    { src: 'uploads/assets/662267801_981158711138132_5094645543303724804_n.jpg', alt: 'Baby Shark birthday cake' },
    { src: 'uploads/assets/668132691_985080570745946_6785197158269700752_n.jpg', alt: 'Amarula chocolate cake' },
    { src: 'uploads/assets/687029800_1002545812332755_5391860232300458696_n.jpg', alt: 'Chocolate bundt cake' },
  ];

  return (
    <section id="gallery" ref={ref} style={{ padding: 'clamp(8px,2vw,16px) 0 clamp(72px,10vw,120px)', background: '#FFF8F0', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        @keyframes galleryScroll {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .gallery-track {
          display: flex;
          gap: 20px;
          animation: galleryScroll 38s linear infinite;
          width: max-content;
        }
        .gallery-track.paused { animation-play-state: paused; }
        .gallery-slide-card {
          width: 300px;
          height: 360px;
          border-radius: 20px;
          overflow: hidden;
          flex-shrink: 0;
          box-shadow: 0 8px 32px rgba(92,58,46,.12);
          transition: transform .35s ease, box-shadow .35s ease;
          cursor: pointer;
        }
        .gallery-slide-card:hover {
          transform: scale(1.04) translateY(-6px);
          box-shadow: 0 20px 56px rgba(92,58,46,.22);
        }
        .gallery-slide-card img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      `}</style>

      <div style={{ position: 'absolute', width: '320px', height: '320px', borderRadius: '50%', background: 'rgba(214,196,238,.09)', top: '-80px', right: '-60px', filter: 'blur(60px)', pointerEvents: 'none' }} />

      {/* Header */}
      <div style={{ textAlign: 'center', marginBottom: 'clamp(36px,5vw,64px)', padding: '0 clamp(20px,5vw,100px)', 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', display: 'block', marginBottom: '12px' }}>Gallery</span>
        <h2 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(36px,5vw,62px)', fontWeight: 500, color: '#2D1A12', marginBottom: '14px' }}>Our Creations</h2>
        <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '16px', fontWeight: 300, color: '#9A7266' }}>Each cake tells its own story, captured in moments of pure indulgence.</p>
      </div>

      {/* Scrolling strip */}
      <div
        style={{ position: 'relative', overflow: 'hidden', opacity: vis ? 1 : 0, transition: 'opacity .9s ease .2s' }}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        {/* Edge fades */}
        <div className="gallery-fade-l" style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '100px', background: 'linear-gradient(to right, #FFF8F0, transparent)', zIndex: 2, pointerEvents: 'none' }} />
        <div className="gallery-fade-r" style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: '100px', background: 'linear-gradient(to left, #FFF8F0, transparent)', zIndex: 2, pointerEvents: 'none' }} />
        <div className={`gallery-track${paused ? ' paused' : ''}`} style={{ padding: '12px 20px 24px' }}>
          {[...photos, ...photos].map((p, i) => (
            <div key={i} className="gallery-slide-card">
              <img src={p.src} alt={p.alt} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const [ref, vis] = window.useReveal();
  const [idx, setIdx] = useState(0);
  const testimonials = [
  { quote: 'The Amarula cake was absolutely divine. It tasted like a celebration in every single bite.', name: 'Sarah Mitchell', loc: 'Caledon, South Africa', initials: 'SM', grad: '135deg,#D97A90,#E8A0B4' },
  { quote: 'Lila crafted the most breathtaking wedding cake for us. Every guest was blown away by both the look and the taste.', name: 'Amahle Dlamini', loc: 'Cape Town, South Africa', initials: 'AD', grad: '135deg,#9A78C8,#D6C4EE' },
  { quote: 'I order for every family gathering now. The chocolate bundt is my absolute favourite — so moist and rich!', name: 'Pieter van der Berg', loc: 'Stellenbosch, South Africa', initials: 'PV', grad: '135deg,#C8785A,#E8A08C' },
  { quote: 'Absolutely stunning gift packs! Sent one to my mom for her birthday and she cried the happiest tears.', name: 'Nomsa Khumalo', loc: 'Hermanus, South Africa', initials: 'NK', grad: '135deg,#78A8C8,#A0C8E8' }];

  useEffect(() => {
    if (!vis) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % testimonials.length), 5200);
    return () => clearInterval(t);
  }, [vis]);
  const cur = testimonials[idx];
  return (
    <section ref={ref} style={{ padding: 'clamp(72px,10vw,120px) clamp(20px,5vw,80px)', background: 'linear-gradient(160deg,#EDE7F9 0%,#FDE8EE 60%,#FFF8F0 100%)', position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
      <div style={{ position: 'absolute', width: '400px', height: '400px', borderRadius: '50%', background: 'rgba(245,184,196,.13)', top: '-80px', left: '-80px', filter: 'blur(80px)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', width: '350px', height: '350px', borderRadius: '50%', background: 'rgba(214,196,238,.13)', bottom: '-60px', right: '-60px', filter: 'blur(70px)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: '880px', margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div style={{ opacity: vis ? 1 : 0, transition: 'all .8s ease', transform: vis ? 'translateY(0)' : 'translateY(24px)' }}>
          <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '11px', fontWeight: 600, letterSpacing: '3.5px', textTransform: 'uppercase', color: '#D97A90', display: 'block', marginBottom: '32px' }}>Testimonials</span>
          {/* Big decorative quote */}
          <div className="testimonial-dquote" style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '110px', fontWeight: 300, color: 'rgba(217,122,144,.15)', lineHeight: '.7', marginBottom: '16px', userSelect: 'none', pointerEvents: 'none' }}>"</div>
          <div key={idx} style={{ animation: 'fadeUp .55s cubic-bezier(.25,.46,.45,.94)' }}>
            <p style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(20px,3vw,30px)', fontStyle: 'italic', fontWeight: 400, color: '#3A2318', lineHeight: 1.58, marginBottom: '40px' }}>
              {cur.quote}
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
            <div style={{ width: '52px', height: '52px', borderRadius: '50%', background: `linear-gradient(${cur.grad})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Cormorant Garamond,serif', fontSize: '18px', fontWeight: 600, color: '#fff', boxShadow: '0 4px 16px rgba(92,58,46,.2)' }}>
              {cur.initials}
            </div>
            <div>
              <div style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '15px', fontWeight: 600, color: '#3A2318' }}>{cur.name}</div>
              <div style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '13px', fontWeight: 300, color: '#9A7266' }}>{cur.loc}</div>
            </div>
          </div>
          {/* Dot nav */}
          <div style={{ display: 'flex', justifyContent: 'center', gap: '8px', marginTop: '32px' }}>
            {testimonials.map((_, i) =>
            <button key={i} onClick={() => setIdx(i)} style={{ width: i === idx ? '26px' : '8px', height: '8px', borderRadius: '4px', background: i === idx ? '#D97A90' : 'rgba(217,122,144,.28)', border: 'none', cursor: 'pointer', transition: 'all .35s ease', padding: '8px 0', minWidth: '24px', minHeight: '24px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'none' }}>
              <span style={{ display: 'block', width: i === idx ? '26px' : '8px', height: '8px', borderRadius: '4px', background: i === idx ? '#D97A90' : 'rgba(217,122,144,.28)', transition: 'all .35s ease' }} />
            </button>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function Contact() {
  const [ref, vis] = window.useReveal();
  const [form, setForm] = useState({ name: '', cake: '', message: '' });
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const handleSubmit = (e) => {
    e.preventDefault();
    const text = `Hi Lila's Kitchen! 🎂\n\nName: ${form.name}\nCake: ${form.cake}\n\n${form.message}`;
    window.open(`https://wa.me/27766478554?text=${encodeURIComponent(text)}`, '_blank');
  };

  const inputSt = { width: '100%', padding: '13px 16px', background: 'rgba(255,255,255,.75)', border: '1.5px solid rgba(245,184,196,.32)', borderRadius: '12px', fontFamily: 'Nunito Sans,sans-serif', fontSize: '15px', fontWeight: 300, color: '#2D1A12', outline: 'none', backdropFilter: 'blur(8px)', boxSizing: 'border-box', transition: 'border-color .2s' };

  const contactItems = [
  { icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#D97A90" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" /><path d="M22 7l-8.97 5.7a1.94 1.94 0 01-2.06 0L2 7" /></svg>, label: 'Email', sub: 'Reach out anytime', val: 'hello@lilaskitchen.co.za' },
  { icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#D97A90" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.06 1.22 2 2 0 012 .02h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z" /></svg>, label: 'Phone', sub: 'Call us directly', val: '+27 (21) 555-0147' },
  { icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#D97A90" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" /><circle cx="12" cy="10" r="3" /></svg>, label: 'Location', sub: 'Collection only — no delivery', val: '15 Akker St, Bergsig, Caledon 7230' },
  { icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="#D97A90" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>, label: 'WhatsApp', sub: 'Chat with us', val: '+27 76 647 8554', href: 'https://wa.me/27766478554' }];


  return (
    <section id="contact" ref={ref} style={{ padding: 'clamp(72px,10vw,120px) clamp(20px,5vw,100px)', background: '#FFF8F0', position: 'relative', overflow: 'hidden' }}>
      <style>{`input:focus,select:focus,textarea:focus{border-color:#D97A90!important;box-shadow:0 0 0 3px rgba(217,122,144,.12)!important}`}</style>
      <div style={{ position: 'absolute', width: '350px', height: '350px', borderRadius: '50%', background: 'rgba(245,184,196,.09)', top: '-80px', left: '-80px', filter: 'blur(70px)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: '1440px', margin: '0 auto' }}>
        <div className="contact-cols" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'clamp(40px,6vw,100px)', alignItems: 'start' }}>
          {/* Info */}
          <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'translateX(0)' : 'translateX(-30px)', transition: 'all .9s ease' }}>
            <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '11px', fontWeight: 600, letterSpacing: '3.5px', textTransform: 'uppercase', color: '#D97A90' }}>Connect</span>
            <h2 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(32px,4vw,52px)', fontWeight: 500, color: '#2D1A12', margin: '14px 0 18px', lineHeight: 1.2 }}>Get in touch</h2>
            <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '16px', fontWeight: 300, color: '#7D5046', lineHeight: 1.85, marginBottom: '40px' }}>
              Have questions about your order or want to discuss something custom? We'd love to hear from you.
            </p>
            {contactItems.map((item) =>
            <div key={item.label} style={{ display: 'flex', alignItems: 'flex-start', gap: '16px', marginBottom: '28px' }}>
                <div style={{ width: '44px', height: '44px', borderRadius: '50%', background: 'linear-gradient(135deg,rgba(245,184,196,.28),rgba(214,196,238,.28))', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  {item.icon}
                </div>
                <div>
                  <div style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '15px', fontWeight: 600, color: '#2D1A12' }}>{item.label}</div>
                  <div style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '13px', fontWeight: 300, color: '#9A7266' }}>{item.sub}</div>
                  {item.href
                    ? <a href={item.href} target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 400, color: '#D97A90', marginTop: '2px', display: 'block', textDecoration: 'none' }}>{item.val}</a>
                    : <div style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 400, color: '#5C3A2E', marginTop: '2px' }}>{item.val}</div>
                  }
                </div>
              </div>
            )}
          </div>

          {/* Form */}
          <div id="order" style={{ background: 'rgba(255,255,255,.68)', backdropFilter: 'blur(20px)', borderRadius: '24px', padding: 'clamp(28px,4vw,44px)', border: '1px solid rgba(245,184,196,.22)', boxShadow: '0 8px 52px rgba(92,58,46,.07)', opacity: vis ? 1 : 0, transform: vis ? 'translateX(0)' : 'translateX(30px)', transition: 'all .9s ease .15s' }}>
            <h3 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '28px', fontWeight: 500, color: '#2D1A12', marginBottom: '24px' }}>Place an Order</h3>
            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '13px' }}>
                <input placeholder="Your name" value={form.name} onChange={set('name')} required style={inputSt} />
                <select value={form.cake} onChange={set('cake')} required style={{ ...inputSt, color: form.cake ? '#2D1A12' : '#9A7266' }}>
                  <option value="" disabled>Select a cake type</option>
                  <option>Amarula Cream Cake</option>
                  <option>Chocolate Bundt</option>
                  <option>Oreo Chocolate Cake</option>
                  <option>Amarula Milk Fudge</option>
                  <option>Velvet Rose Cake</option>
                  <option>Caramel Pecan Tower</option>
                  <option>Custom Order</option>
                </select>
                <textarea placeholder="Tell us about your occasion, date, and any special requests..." value={form.message} onChange={set('message')} rows={4} style={{ ...inputSt, resize: 'vertical' }} />
                <button type="submit" style={{ width: '100%', padding: '15px', background: 'linear-gradient(135deg,#D97A90,#E8A0B4)', color: '#fff', border: 'none', borderRadius: '50px', fontFamily: 'Nunito Sans,sans-serif', fontSize: '15px', fontWeight: 600, cursor: 'pointer', boxShadow: '0 4px 20px rgba(217,122,144,.35)', transition: 'all .3s ease', letterSpacing: '.3px' }}>Send Order via WhatsApp</button>
              </form>
          </div>
        </div>
      </div>
    </section>);

}

function CollectionMap() {
  const [ref, vis] = window.useReveal();
  const mapSrc = "https://maps.google.com/maps?q=15+Akker+St,+Bergsig,+Caledon,+7230,+South+Africa&t=&z=15&ie=UTF8&iwloc=&output=embed";
  return (
    <section ref={ref} style={{ padding: 'clamp(72px,10vw,120px) clamp(20px,5vw,100px)', background: 'linear-gradient(160deg,#FFF8F0 0%,#FCEDF2 100%)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', width: '380px', height: '380px', borderRadius: '50%', background: 'rgba(214,196,238,.09)', top: '-80px', right: '-80px', filter: 'blur(70px)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: '1440px', margin: '0 auto' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 'clamp(36px,5vw,56px)', 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', display: 'block', marginBottom: '12px' }}>Collection Only</span>
          <h2 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(36px,5vw,58px)', fontWeight: 500, color: '#2D1A12', marginBottom: '14px' }}>Come collect your order</h2>
          <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '16px', fontWeight: 300, color: '#7D5046', maxWidth: '520px', margin: '0 auto', lineHeight: 1.75 }}>
            We don't deliver — all orders are collected in person. Pop by and pick up your treats fresh from our kitchen.
          </p>
        </div>
        {/* Map + address card */}
        <div className="map-cols" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'clamp(28px,4vw,64px)', alignItems: 'center', opacity: vis ? 1 : 0, transition: 'opacity .9s ease .2s' }}>
          {/* Map iframe */}
          <div style={{ borderRadius: '20px', overflow: 'hidden', boxShadow: '0 12px 52px rgba(92,58,46,.13)', border: '1.5px solid rgba(245,184,196,.22)', lineHeight: 0 }}>
            <iframe
              className="map-iframe"
              title="Lila's Kitchen location"
              src={mapSrc}
              width="100%"
              height="420"
              style={{ border: 0, display: 'block', filter: 'saturate(.9) brightness(1.02)' }}
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
          {/* Address card */}
          <div style={{ background: 'rgba(255,255,255,.72)', backdropFilter: 'blur(20px)', borderRadius: '20px', padding: 'clamp(28px,4vw,44px)', border: '1px solid rgba(245,184,196,.22)', boxShadow: '0 8px 40px rgba(92,58,46,.07)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '14px', marginBottom: '28px' }}>
              <div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'linear-gradient(135deg,#D97A90,#E8A0B4)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxShadow: '0 4px 16px rgba(217,122,144,.35)' }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/>
                </svg>
              </div>
              <div>
                <div style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '12px', fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase', color: '#D97A90', marginBottom: '3px' }}>Our Address</div>
                <div style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '22px', fontWeight: 500, color: '#2D1A12' }}>15 Akker St, Bergsig</div>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              {[
                { label: 'Street', val: '15 Akker St, Bergsig' },
                { label: 'Town', val: 'Caledon, 7230' },
                { label: 'Province', val: 'Western Cape, South Africa' },
              ].map(row =>
                <div key={row.label} style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '14px', borderBottom: '1px solid rgba(245,184,196,.2)' }}>
                  <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '13px', fontWeight: 600, color: '#9A7266', textTransform: 'uppercase', letterSpacing: '1.5px' }}>{row.label}</span>
                  <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 400, color: '#2D1A12' }}>{row.val}</span>
                </div>
              )}
            </div>
            <a
              href="https://maps.google.com/?q=15+Akker+St,+Bergsig,+Caledon,+7230,+South+Africa"
              target="_blank"
              rel="noopener noreferrer"
              style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginTop: '24px', padding: '13px 28px', background: 'linear-gradient(135deg,#D97A90,#E8A0B4)', color: '#fff', borderRadius: '50px', fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 600, textDecoration: 'none', boxShadow: '0 4px 20px rgba(217,122,144,.35)', transition: 'all .3s ease' }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
              Open in Google Maps
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTABanner() {
  return (
    <section style={{ padding: 'clamp(72px,9vw,120px) clamp(20px,5vw,100px)', background: 'linear-gradient(140deg,#3A2318 0%,#5C3A2E 50%,#3A2318 100%)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', width: '500px', height: '500px', borderRadius: '50%', background: 'rgba(245,184,196,.07)', top: '-200px', right: '-100px', filter: 'blur(80px)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', width: '350px', height: '350px', borderRadius: '50%', background: 'rgba(214,196,238,.05)', bottom: '-100px', left: '-60px', filter: 'blur(70px)', pointerEvents: 'none' }} />
      {/* Decorative rings */}
      <div style={{ position: 'absolute', width: '200px', height: '200px', borderRadius: '50%', border: '1px solid rgba(245,184,196,.1)', top: '10%', left: '5%', pointerEvents: 'none', animation: 'floatA 6s ease-in-out infinite' }} />
      <div style={{ position: 'absolute', width: '140px', height: '140px', borderRadius: '50%', border: '1px solid rgba(214,196,238,.08)', bottom: '15%', right: '8%', pointerEvents: 'none', animation: 'floatB 7s ease-in-out infinite 1s' }} />
      <div style={{ maxWidth: '920px', margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1 }}>
        <h2 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(32px,5vw,58px)', fontWeight: 400, color: '#FFF8F0', lineHeight: 1.18, marginBottom: '16px' }}>
          Ready to celebrate<br /><em style={{ color: '#F5B8C4', fontWeight: 300 }}>something sweet?</em>
        </h2>
        <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '16px', fontWeight: 300, color: 'rgba(255,248,240,.68)', marginBottom: '36px', lineHeight: 1.75 }}>
          Let's create the perfect cake for your next moment. Reach out today and let's talk about your vision.
        </p>
        <div style={{ display: 'flex', gap: '14px', justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#order" style={{ display: 'inline-flex', alignItems: 'center', padding: '14px 38px', background: 'linear-gradient(135deg,#D97A90,#E8A0B4)', color: '#fff', borderRadius: '50px', fontFamily: 'Nunito Sans,sans-serif', fontSize: '15px', fontWeight: 600, textDecoration: 'none', boxShadow: '0 6px 28px rgba(217,122,144,.4)', transition: 'all .3s ease' }}>Order Now</a>
          <a href="#contact" style={{ display: 'inline-flex', alignItems: 'center', padding: '14px 38px', background: 'rgba(255,248,240,.1)', color: '#FFF8F0', border: '1.5px solid rgba(255,248,240,.22)', borderRadius: '50px', fontFamily: 'Nunito Sans,sans-serif', fontSize: '15px', fontWeight: 500, textDecoration: 'none', backdropFilter: 'blur(8px)', transition: 'all .3s ease' }}>Contact Us</a>
        </div>
      </div>
    </section>);

}

function Footer() {
  const [email, setEmail] = useState('');
  const [subbed, setSubbed] = useState(false);
  const cols = [
  { title: 'Browse', links: ['Home', 'About', 'Menu', 'Gallery', 'Contact'] },
  { title: 'Order', links: ['WhatsApp', 'Call us', 'Email', 'Visit us', 'Hours'] },
  { title: 'Connect', links: ['Instagram', 'Facebook', 'Pinterest', 'TikTok', 'Twitter'], hrefs: { 'Facebook': 'https://www.facebook.com/share/18gDvhXGt5/?mibextid=wwXIfr' } },
  { title: 'Details', links: ['Privacy policy', 'Terms of service', 'Shipping info', 'Returns', 'FAQ'] }];

  return (
    <footer style={{ background: '#2C1810' }}>
      {/* Newsletter */}
      <div style={{ padding: 'clamp(32px,5vw,64px) clamp(20px,5vw,100px)', borderBottom: '1px solid rgba(255,248,240,.08)' }}>
        <div style={{ maxWidth: '1440px', margin: '0 auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: '24px' }}>
          <div>
            <h4 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '22px', fontWeight: 400, color: '#FFF8F0', marginBottom: '6px' }}>Sweet updates monthly</h4>
            <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '13px', fontWeight: 300, color: 'rgba(255,248,240,.42)' }}>Receive recipes, new flavors, and exclusive offers</p>
          </div>
          {subbed ?
          <p style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '18px', fontStyle: 'italic', color: 'rgba(245,184,196,.8)' }}>Thank you for subscribing ✦</p> :

          <div className="newsletter-input-row" style={{ display: 'flex', background: 'rgba(255,255,255,.05)', borderRadius: '50px', overflow: 'hidden', border: '1px solid rgba(245,184,196,.12)' }}>
              <input type="email" placeholder="Your email" value={email} onChange={(e) => setEmail(e.target.value)} style={{ padding: '12px 20px', background: 'transparent', border: 'none', fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', color: '#FFF8F0', outline: 'none', minWidth: 'clamp(140px,22vw,220px)' }} />
              <button onClick={() => {if (email) {setSubbed(true);}}} style={{ padding: '12px 24px', background: 'linear-gradient(135deg,#D97A90,#E8A0B4)', color: '#fff', border: 'none', cursor: 'pointer', fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 600, transition: 'opacity .2s', borderRadius: '0 50px 50px 0' }}>
                Subscribe
              </button>
            </div>
          }
        </div>
      </div>
      {/* Links */}
      <div style={{ padding: 'clamp(40px,6vw,72px) clamp(20px,5vw,100px)', borderBottom: '1px solid rgba(255,248,240,.06)' }}>
        <div className="footer-nav-grid" style={{ maxWidth: '1440px', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(130px,1fr))', gap: 'clamp(24px,3vw,48px)' }}>
          {cols.map((col) =>
          <div key={col.title}>
              <h5 style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '12px', fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(255,248,240,.85)', marginBottom: '16px' }}>{col.title}</h5>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                {col.links.map((l) =>
              <a key={l} href={(col.hrefs && col.hrefs[l]) ? col.hrefs[l] : '#'} target={(col.hrefs && col.hrefs[l]) ? '_blank' : undefined} rel={(col.hrefs && col.hrefs[l]) ? 'noopener noreferrer' : undefined} style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 300, color: 'rgba(255,248,240,.38)', textDecoration: 'none', transition: 'color .2s' }}
              onMouseEnter={(e) => e.target.style.color = 'rgba(245,184,196,.85)'}
              onMouseLeave={(e) => e.target.style.color = 'rgba(255,248,240,.38)'}>
                {l}</a>
              )}
              </div>
            </div>
          )}
        </div>
      </div>
      {/* Bottom */}
      <div style={{ padding: 'clamp(16px,3vw,32px) clamp(20px,5vw,100px)' }}>
        <div style={{ maxWidth: '1440px', margin: '0 auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: '12px' }}>
          <a href="#home" style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '22px', fontStyle: 'italic', fontWeight: 500, color: 'rgba(255,248,240,.45)', textDecoration: 'none' }}>Lila's Kitchen</a>
          <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '13px', fontWeight: 300, color: 'rgba(255,248,240,.25)' }}>© 2025 Lila's Kitchen. All rights reserved. Seasoned with love.</p>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Gallery, Testimonials, Contact, CollectionMap, CTABanner, Footer });