﻿
const { useState, useEffect, useRef } = React;

function useReveal(threshold = 0.1) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    if (vis) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setVis(true);obs.disconnect();}
    }, { threshold });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [vis]);
  return [ref, vis];
}

function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [mOpen, setMOpen] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 56);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  const navLinks = ['Home', 'About', 'Menu', 'Gallery', 'Contact'];
  const lc = scrolled ? '#5C3A2E' : 'rgba(255,248,240,0.92)';
  return (
    <>
      <style>{`
        .nav-link { font: 500 14px/1 'Nunito Sans',sans-serif; letter-spacing:.4px; text-decoration:none; transition:color .2s; }
        .nav-link:hover { color:#D97A90 !important; }
        .nav-order { transition:all .3s ease; }
        .nav-order:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(217,122,144,.5) !important; }
        @media(max-width:768px){.nav-desktop{display:none!important}.nav-mobile-btn{display:flex!important}}
        @media(min-width:769px){.nav-mobile-btn{display:none!important}}
      `}</style>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000, height: '72px',
        padding: '0 clamp(20px,4vw,96px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: scrolled ? 'rgba(255,248,240,.96)' : 'transparent',
        backdropFilter: scrolled ? 'blur(24px)' : 'none',
        borderBottom: scrolled ? '1px solid rgba(245,184,196,.18)' : 'none',
        boxShadow: scrolled ? '0 2px 32px rgba(92,58,46,.06)' : 'none',
        transition: 'all .4s ease'
      }}>
        <a href="#home" style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '25px', fontStyle: 'italic', fontWeight: 500, color: scrolled ? '#5C3A2E' : '#FFF8F0', textDecoration: 'none', letterSpacing: '1px', transition: 'color .4s' }}>
          Lila's Kitchen
        </a>
        <div className="nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 'clamp(20px,2vw,44px)' }}>
          {navLinks.map((l) =>
          <a key={l} href={`#${l.toLowerCase()}`} className="nav-link" style={{ color: lc }}>{l}</a>
          )}
          <a href="#order" className="nav-order" style={{ padding: '10px 24px', background: 'linear-gradient(135deg,#D97A90,#E8A0B4)', color: '#fff', borderRadius: '50px', fontSize: '14px', fontWeight: 600, fontFamily: 'Nunito Sans,sans-serif', textDecoration: 'none', boxShadow: '0 4px 16px rgba(217,122,144,.32)' }}>
            Order Now
          </a>
        </div>
        <button className={mOpen ? 'nav-mobile-btn ham-open' : 'nav-mobile-btn'} onClick={() => setMOpen(!mOpen)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '10px', flexDirection: 'column', gap: '5px', minWidth: '44px', minHeight: '44px', alignItems: 'center', justifyContent: 'center' }}>
          {[0, 1, 2].map((i) => <div key={i} className="ham-bar" style={{ width: '24px', height: '2px', background: scrolled ? '#5C3A2E' : '#FFF8F0', borderRadius: '2px', transition: 'background .4s' }} />)}
        </button>
      </nav>
      {mOpen &&
      <div className="mobile-menu-panel" style={{ position: 'fixed', top: '72px', left: 0, right: 0, zIndex: 999, background: 'rgba(255,248,240,.97)', backdropFilter: 'blur(24px)', padding: '16px clamp(20px,5vw,48px) 28px', borderBottom: '1px solid rgba(245,184,196,.25)', boxShadow: '0 8px 32px rgba(92,58,46,.08)' }}>
          {navLinks.map((l) =>
        <a key={l} href={`#${l.toLowerCase()}`} onClick={() => setMOpen(false)} style={{ display: 'flex', alignItems: 'center', padding: '15px 0', fontFamily: 'Nunito Sans,sans-serif', fontSize: '17px', fontWeight: 500, color: '#5C3A2E', textDecoration: 'none', borderBottom: '1px solid rgba(245,184,196,.2)', minHeight: '44px' }}>
              {l}
            </a>
        )}
          <a href="#order" onClick={() => setMOpen(false)} style={{ display: 'block', marginTop: '20px', padding: '16px', textAlign: 'center', background: 'linear-gradient(135deg,#D97A90,#E8A0B4)', color: '#fff', borderRadius: '50px', fontFamily: 'Nunito Sans,sans-serif', fontWeight: 600, textDecoration: 'none', fontSize: '16px', boxShadow: '0 4px 20px rgba(217,122,144,.35)' }}>
            Order Now
          </a>
        </div>
      }
    </>);

}

function Hero() {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {const t = setTimeout(() => setLoaded(true), 80);return () => clearTimeout(t);}, []);
  return (
    <section id="home" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
      <style>{`
        @keyframes floatA{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-22px) rotate(4deg)}}
        @keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
        @keyframes floatC{0%,100%{transform:scale(1)}50%{transform:scale(1.07) translateY(-10px)}}
        @keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(9px)}}
        @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
        .hero-btn-primary:hover{transform:translateY(-3px)!important;box-shadow:0 14px 48px rgba(210,70,110,.7)!important}
        .hero-btn-ghost:hover{background:rgba(255,248,240,.22)!important;border-color:rgba(255,248,240,.55)!important}
      `}</style>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `url('https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&w=1920&q=80')`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(140deg,rgba(52,24,12,.86) 0%,rgba(148,72,98,.5) 45%,rgba(52,24,12,.9) 100%)' }} />
      {/* blobs */}
      <div className="hero-blob" style={{ position: 'absolute', width: '500px', height: '500px', borderRadius: '50%', background: 'rgba(245,184,196,.16)', top: '-140px', right: '-70px', filter: 'blur(90px)', animation: 'floatA 7s ease-in-out infinite', pointerEvents: 'none' }} />
      <div className="hero-blob" style={{ position: 'absolute', width: '330px', height: '330px', borderRadius: '50%', background: 'rgba(214,196,238,.13)', bottom: '6%', left: '-50px', filter: 'blur(70px)', animation: 'floatB 9s ease-in-out infinite 2s', pointerEvents: 'none' }} />
      <div className="hero-blob" style={{ position: 'absolute', width: '220px', height: '220px', borderRadius: '50%', background: 'rgba(245,184,196,.1)', top: '42%', right: '9%', filter: 'blur(50px)', animation: 'floatC 6s ease-in-out infinite 1s', pointerEvents: 'none' }} />
      {/* rings */}
      <div style={{ position: 'absolute', width: '130px', height: '130px', borderRadius: '50%', border: '1px solid rgba(245,184,196,.24)', top: '13%', right: '7%', animation: 'floatA 5s ease-in-out infinite', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', width: '72px', height: '72px', borderRadius: '50%', border: '1px solid rgba(245,184,196,.16)', top: '19%', right: '10.5%', animation: 'floatB 6s ease-in-out infinite 1s', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', width: '96px', height: '96px', borderRadius: '50%', border: '1px solid rgba(214,196,238,.22)', bottom: '18%', left: '5%', animation: 'floatC 7s ease-in-out infinite .5s', pointerEvents: 'none' }} />
      {/* content */}
      <div className="hero-content-wrap" style={{ position: 'relative', zIndex: 1, textAlign: 'center', padding: '0 clamp(20px,5vw,60px)', maxWidth: 'clamp(720px,62vw,1000px)', width: '100%', opacity: loaded ? 1 : 0, transform: loaded ? 'translateY(0)' : 'translateY(36px)', transition: 'opacity 1.2s ease .15s, transform 1.2s ease .15s' }}>
        <p className="hero-eyebrow" style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '11px', fontWeight: 600, letterSpacing: '4.5px', textTransform: 'uppercase', color: 'rgba(245,184,196,.82)', marginBottom: '22px' }}>HANDCRAFTED IN CALEDON, SOUTH AFRICA</p>
        <h1 style={{ fontFamily: 'Cormorant Garamond,serif', fontWeight: 300, fontSize: 'clamp(50px,9vw,102px)', color: '#FFF8F0', lineHeight: 1.04, letterSpacing: '-1px', marginBottom: '4px' }}>Seasoned</h1>
        <h1 style={{ fontFamily: 'Cormorant Garamond,serif', fontWeight: 500, fontStyle: 'italic', fontSize: 'clamp(50px,9vw,102px)', color: '#F5B8C4', lineHeight: 1.04, letterSpacing: '-1px', marginBottom: '36px' }}>with Love</h1>
        <p className="hero-desc" style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: 'clamp(15px,2vw,18px)', fontWeight: 300, color: 'rgba(255,248,240,.8)', lineHeight: 1.82, maxWidth: 'clamp(460px,38vw,660px)', margin: '0 auto 52px' }}>
          Custom cakes, sweet treats and gifts made for every special occasion. Each creation is handcrafted with the finest ingredients and baked with genuine care.
        </p>
        <div className="hero-btn-row" style={{ display: 'flex', gap: '14px', justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#order" className="hero-btn-primary" style={{ display: 'inline-flex', alignItems: 'center', padding: '15px 40px', background: 'linear-gradient(135deg,#D4547A,#E8809A)', color: '#fff', borderRadius: '50px', fontFamily: 'Nunito Sans,sans-serif', fontSize: '15px', fontWeight: 700, textDecoration: 'none', boxShadow: '0 8px 36px rgba(210,70,110,.55), 0 0 0 1px rgba(255,255,255,.12) inset', transition: 'all .3s ease', letterSpacing: '.5px' }}>
            Order Now
          </a>
          <a href="#menu" className="hero-btn-ghost" style={{ display: 'inline-flex', alignItems: 'center', padding: '15px 40px', background: 'rgba(255,248,240,.12)', color: '#FFF8F0', border: '1.5px solid rgba(255,248,240,.32)', borderRadius: '50px', fontFamily: 'Nunito Sans,sans-serif', fontSize: '15px', fontWeight: 500, textDecoration: 'none', backdropFilter: 'blur(10px)', transition: 'all .3s ease' }}>
            View Menu
          </a>
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: '34px', left: '50%', animation: 'scrollBounce 2s ease-in-out infinite', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '7px', color: 'rgba(255,248,240,.4)' }}>
        <span style={{ fontSize: '9px', letterSpacing: '3px', fontFamily: 'Nunito Sans,sans-serif', textTransform: 'uppercase' }}>Scroll</span>
        <svg width="14" height="9" viewBox="0 0 14 9" fill="none"><path d="M1 1L7 7L13 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </div>
    </section>);

}

function About() {
  const [ref, vis] = useReveal();
  const stats = [];
  return (
    <section id="about" ref={ref} style={{ padding: 'clamp(72px,10vw,128px) clamp(20px,5vw,100px)', background: '#FFF8F0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', width: '400px', height: '400px', borderRadius: '50%', background: 'rgba(245,184,196,.09)', top: '-120px', left: '-100px', filter: 'blur(60px)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', width: '280px', height: '280px', borderRadius: '50%', background: 'rgba(214,196,238,.09)', bottom: '-60px', right: '-60px', filter: 'blur(60px)', pointerEvents: 'none' }} />
      <div className="about-cols" style={{ maxWidth: '1440px', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'clamp(48px,6vw,128px)', alignItems: 'center' }}>
        <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'translateX(0)' : 'translateX(-36px)', transition: 'all .9s cubic-bezier(.25,.46,.45,.94)' }}>
          <span style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '11px', fontWeight: 600, letterSpacing: '3.5px', textTransform: 'uppercase', color: '#D97A90' }}>About</span>
          <h2 style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: 'clamp(32px,4vw,52px)', fontWeight: 500, color: '#2D1A12', lineHeight: 1.2, margin: '14px 0 22px' }}>
            Meet Lila's Kitchen,<br />
            <em style={{ fontWeight: 300, color: '#D97A90' }}>where passion meets pastry</em>
          </h2>
          <p style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '16px', fontWeight: 300, color: '#7D5046', lineHeight: 1.88, marginBottom: '24px' }}>
            Our primary focus in the kitchen is specializing in a variety of chocolate cakes and biscuits, and we are more than happy to accommodate custom requests whenever feasible.
          </p>
          <blockquote style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '20px', fontStyle: 'italic', color: '#D97A90', lineHeight: 1.65, marginBottom: '32px', paddingLeft: '18px', borderLeft: '3px solid rgba(245,184,196,.65)' }}>
            "Every bite tells a story of care, craft, and celebration."
          </blockquote>
          <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
            <a href="#featured" style={{ display: 'inline-flex', alignItems: 'center', padding: '13px 30px', 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,.33)', transition: 'all .3s ease' }}>Our Creations</a>
            <a href="#contact" style={{ display: 'inline-flex', alignItems: 'center', padding: '12px 30px', background: 'transparent', color: '#5C3A2E', border: '1.5px solid rgba(245,184,196,.65)', borderRadius: '50px', fontFamily: 'Nunito Sans,sans-serif', fontSize: '14px', fontWeight: 500, textDecoration: 'none', transition: 'all .3s ease' }}>Get in Touch</a>
          </div>
        </div>
        <div className="about-img-composite" style={{ position: 'relative', height: 'clamp(360px,38vw,580px)', opacity: vis ? 1 : 0, transform: vis ? 'translateX(0)' : 'translateX(36px)', transition: 'all .9s cubic-bezier(.25,.46,.45,.94) .18s' }}>
          <div style={{ position: 'absolute', top: 0, left: 0, width: '63%', height: '72%', borderRadius: '20px', overflow: 'hidden', boxShadow: '0 24px 68px rgba(92,58,46,.16)' }}>
            <img src="assets/lilla 54321.png" alt="Our baker" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ position: 'absolute', bottom: 0, right: 0, width: '57%', height: '66%', borderRadius: '20px', overflow: 'hidden', boxShadow: '0 24px 68px rgba(92,58,46,.16)' }}>
            <img src="https://images.unsplash.com/photo-1621303837174-89787a7d4729?auto=format&fit=crop&w=600&q=80" alt="Beautiful cake" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ position: 'absolute', top: '52%', left: '26%', width: '82px', height: '82px', borderRadius: '50%', background: 'linear-gradient(135deg,#F5B8C4,#D6C4EE)', boxShadow: '0 8px 32px rgba(245,184,196,.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'floatA 4s ease-in-out infinite', zIndex: 2 }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'Cormorant Garamond,serif', fontSize: '20px', fontWeight: 700, color: '#5C3A2E', lineHeight: 1 }}>★</div>
              <div style={{ fontFamily: 'Nunito Sans,sans-serif', fontSize: '9px', fontWeight: 700, color: '#5C3A2E', letterSpacing: '1px' }}>LOVE</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Navbar, Hero, About, useReveal });