// Shared components for Little Bloom Photo Studio
// All components attached to window for cross-file access.

const { useState, useEffect, useRef } = React;

/* ============ Photo URLs (client studio assets) ============ */
const PHOTOS = {
  hero:        "assets/NG5A0131.jpg",   // full boho daybed — hero portrait
  maternity1:  "assets/NG5A0133.jpg",   // daybed wider shot
  maternity2:  "assets/NG5A0134.jpg",   // daybed + window light detail
  family1:     "assets/NG5A0139.jpg",   // cream sofa / macramé
  family2:     "assets/NG5A0141.jpg",   // sofa wide with windows
  newborn1:    "assets/NG5A0138.jpg",   // antique bassinet by windows
  newborn2:    "assets/NG5A0136-2.jpg", // pampas arrangement close
  couple1:     "assets/NG5A0142.jpg",   // macramé wall detail
  couple2:     "assets/NG5A0141.jpg",
  portrait1:   "assets/NG5A0135.jpg",   // daybed angled
  portrait2:   "assets/NG5A0134.jpg",
  portrait3:   "assets/NG5A0133.jpg",
  branding1:   "assets/NG5A0141.jpg",   // bright minimal sofa
  branding2:   "assets/NG5A0139.jpg",
  studio1:     "assets/NG5A0131.jpg",
  studio2:     "assets/NG5A0139.jpg",   // sofa/macramé — CTA background
  studio3:     "assets/NG5A0133.jpg",
  flowers:     "assets/NG5A0136.jpg",   // pampas arrangement full
  flowers2:    "assets/NG5A0136-2.jpg",
  child1:      "assets/NG5A0137.jpg",   // pampas wall wide
  child2:      "assets/NG5A0139.jpg",
  photographer:"assets/NG5A0134.jpg",   // studio detail (daybed + window)
  light:       "assets/NG5A0138.jpg",   // bassinet / window light
  snackbar:    "assets/NG5A0144.jpg",   // snack bar amenity
};
window.PHOTOS = PHOTOS;

/* ============ Floral Wreath SVG (mini decoration) ============ */
function Wreath({ size = 80, color, half = false }) {
  const c = color || "var(--lb-tan)";
  // Stylized minimal wreath - delicate botanical line art
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" fill="none" stroke={c} strokeWidth="0.9" strokeLinecap="round">
      <g opacity="0.95">
        {/* outer ring as guideline (invisible) — draw sprigs around */}
        {/* Left sprig */}
        <path d="M 18 60 Q 22 50 28 46 Q 36 42 42 46" fill="none" />
        <path d="M 24 52 q 2 -4 6 -3" />
        <path d="M 30 48 q 2 -4 6 -3" />
        <ellipse cx="22" cy="56" rx="2.4" ry="1.2" transform="rotate(-30 22 56)" />
        <ellipse cx="28" cy="50" rx="2" ry="1" transform="rotate(-25 28 50)" />
        <circle cx="40" cy="44" r="3" />
        <circle cx="40" cy="44" r="1.3" />
        {/* Top sprig */}
        <path d="M 50 22 Q 60 18 70 22" />
        <path d="M 55 24 q -1 -4 -4 -5" />
        <path d="M 65 24 q 1 -4 4 -5" />
        <ellipse cx="51" cy="20" rx="1.8" ry="1" transform="rotate(30 51 20)" />
        <ellipse cx="69" cy="20" rx="1.8" ry="1" transform="rotate(-30 69 20)" />
        <circle cx="60" cy="20" r="2.4" />
        {!half && (
          <>
            {/* Right sprig */}
            <path d="M 102 60 Q 98 50 92 46 Q 84 42 78 46" />
            <path d="M 96 52 q -2 -4 -6 -3" />
            <path d="M 90 48 q -2 -4 -6 -3" />
            <ellipse cx="98" cy="56" rx="2.4" ry="1.2" transform="rotate(30 98 56)" />
            <circle cx="80" cy="44" r="3" />
            <circle cx="80" cy="44" r="1.3" />
            {/* Bottom sprig */}
            <path d="M 50 98 Q 60 102 70 98" />
            <path d="M 55 96 q -1 4 -4 5" />
            <path d="M 65 96 q 1 4 4 5" />
            <ellipse cx="51" cy="100" rx="1.8" ry="1" transform="rotate(-30 51 100)" />
            <ellipse cx="69" cy="100" rx="1.8" ry="1" transform="rotate(30 69 100)" />
            <circle cx="60" cy="100" r="2.4" />
          </>
        )}
      </g>
    </svg>
  );
}

/* ============ Logo (uses extracted PNG) ============ */
function Logo({ size = 56, variant = "full" }) {
  // variant: "full" (full wreath logo), "text" (just "Little Bloom"), "monogram" (LB)
  if (variant === "text") {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1 }}>
        <span style={{ fontFamily: 'var(--lb-script)', fontSize: size, color: 'var(--lb-tan)', lineHeight: 0.9 }}>Little Bloom</span>
        <span style={{ fontFamily: 'var(--lb-caps)', fontSize: size * 0.18, letterSpacing: '0.4em', color: 'var(--lb-brown)', marginTop: size * 0.1, paddingLeft: 2 }}>PHOTO&nbsp;&nbsp;STUDIO</span>
      </div>
    );
  }
  return <img src="assets/logo.png" alt="Little Bloom Photo Studio" style={{ width: size, height: 'auto', display: 'block' }} />;
}

/* ============ Nav ============ */
function Nav({ page, setPage, dark = false }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { id: 'home', label: 'Home' },
    { id: 'about', label: 'About' },
    { id: 'booking', label: 'Booking & Memberships' },
  ];

  const onSolid = scrolled || open;
  const color = onSolid ? 'var(--lb-brown)' : (dark ? 'var(--lb-cream-3)' : 'var(--lb-brown)');
  const bg = onSolid ? 'rgba(251,247,236,0.92)' : 'transparent';

  const go = (id) => { setPage(id); setOpen(false); window.scrollTo({ top: 0, behavior: 'instant' }); };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: bg,
      backdropFilter: onSolid ? 'saturate(140%) blur(14px)' : 'none',
      WebkitBackdropFilter: onSolid ? 'saturate(140%) blur(14px)' : 'none',
      borderBottom: onSolid ? '1px solid var(--lb-rule-soft)' : '1px solid transparent',
      transition: 'background .35s ease, border-color .35s ease, backdrop-filter .35s ease',
    }}>
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px var(--lb-gutter)', gap: 24, color,
      }}>
        {/* Brand mark */}
        <button onClick={() => go('home')} style={{ background: 'none', border: 0, padding: 0, color: 'inherit', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontFamily: 'var(--lb-script)', fontSize: 30, lineHeight: 0.9, color: onSolid ? 'var(--lb-tan)' : (dark ? 'var(--lb-cream-2)' : 'var(--lb-tan)') }}>Little Bloom</span>
          <span style={{ width: 1, height: 22, background: 'currentColor', opacity: 0.3 }}></span>
          <span style={{ fontFamily: 'var(--lb-caps)', fontSize: 9, letterSpacing: '0.32em', textTransform: 'uppercase', opacity: 0.75 }}>Photo&nbsp;Studio</span>
        </button>

        {/* Desktop links */}
        <div className="lb-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          {items.map(it => (
            <button key={it.id} onClick={() => go(it.id)} style={{
              background: 'none', border: 0, color: 'inherit', padding: '6px 0',
              fontFamily: 'var(--lb-caps)', fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
              borderBottom: page === it.id ? '1px solid currentColor' : '1px solid transparent',
              opacity: page === it.id ? 1 : 0.78,
              transition: 'opacity .25s ease, border-color .25s ease',
            }}>{it.label}</button>
          ))}
        </div>

        <div className="lb-nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <button onClick={() => go('booking')} className="lb-btn" style={{ padding: '12px 22px', fontSize: 11 }}>
            Book a session <span className="arrow"></span>
          </button>
        </div>

        {/* Mobile hamburger */}
        <button className="lb-nav-burger" onClick={() => setOpen(!open)} aria-label="Menu" style={{
          display: 'none', background: 'none', border: 0, padding: 8, color: 'inherit'
        }}>
          <span style={{ display: 'block', width: 22, height: 1, background: 'currentColor', marginBottom: 6 }}></span>
          <span style={{ display: 'block', width: 22, height: 1, background: 'currentColor' }}></span>
        </button>
      </nav>

      {/* Mobile sheet */}
      {open && (
        <div style={{
          padding: '12px var(--lb-gutter) 32px',
          background: 'var(--lb-cream-3)',
          borderTop: '1px solid var(--lb-rule-soft)',
          display: 'flex', flexDirection: 'column', gap: 22,
        }}>
          {items.map(it => (
            <button key={it.id} onClick={() => go(it.id)} style={{
              background: 'none', border: 0, textAlign: 'left', padding: '8px 0',
              fontFamily: 'var(--lb-display)', fontStyle: 'italic', fontSize: 28, color: 'var(--lb-brown)',
            }}>{it.label}</button>
          ))}
          <button onClick={() => go('booking')} className="lb-btn" style={{ alignSelf: 'flex-start', marginTop: 8 }}>
            Book a session <span className="arrow"></span>
          </button>
        </div>
      )}

      <style>{`
        @media (max-width: 880px) {
          .lb-nav-links { display: none !important; }
          .lb-nav-cta { display: none !important; }
          .lb-nav-burger { display: block !important; }
        }
      `}</style>
    </header>
  );
}

/* ============ Footer ============ */
function Footer({ setPage }) {
  return (
    <footer style={{ background: 'var(--lb-forest-deep)', color: 'var(--lb-cream-2)', paddingTop: 'var(--lb-section)', paddingBottom: 36 }}>
      <div className="lb-container" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 56, alignItems: 'start' }}>
        <div>
          <img src="assets/logo.png" alt="Little Bloom Photo Studio" style={{ width: 130, height: 'auto', display: 'block' }} />
          <p className="lb-body" style={{ color: 'rgba(245,240,227,0.65)', marginTop: 20, maxWidth: 320 }}>
            A warm, natural light rental studio thoughtfully designed for photographers, creatives, and growing families — in Pleasant Grove, Utah.
          </p>
        </div>

        <div>
          <div className="lb-eyebrow" style={{ color: 'var(--lb-tan-soft)' }}>Visit</div>
          <p className="lb-body" style={{ color: 'rgba(245,240,227,0.78)', marginTop: 14, lineHeight: 1.85 }}>
            43 S 1300 W St Suite 43A<br />
            Pleasant Grove, UT 84062<br /><br />
            By appointment only<br />
            Book online anytime
          </p>
        </div>

        <div>
          <div className="lb-eyebrow" style={{ color: 'var(--lb-tan-soft)' }}>Explore</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 14 }}>
            {[['home','Home'],['about','About'],['booking','Booking & Memberships'],['terms','Terms & Conditions']].map(([id, label]) => (
              <button key={id} onClick={() => { setPage(id); window.scrollTo({ top: 0, behavior: 'instant' }); }} style={{
                background: 'none', border: 0, color: 'inherit', textAlign: 'left', padding: 0,
                fontFamily: 'var(--lb-body)', fontSize: 15, opacity: 0.85, cursor: 'pointer',
              }}>{label}</button>
            ))}
          </div>
        </div>

        <div>
          <div className="lb-eyebrow" style={{ color: 'var(--lb-tan-soft)' }}>Stay close</div>
          <div style={{ display: 'flex', gap: 14, marginTop: 14 }}>
            <a href="https://www.instagram.com/littlebloomphotostudio/" target="_blank" rel="noreferrer" style={{ fontFamily: 'var(--lb-caps)', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--lb-tan-soft)', borderBottom: '1px solid rgba(206,194,170,0.4)', paddingBottom: 3 }}>Instagram</a>
          </div>
        </div>
      </div>

      <div className="lb-container" style={{ marginTop: 80, paddingTop: 24, borderTop: '1px solid rgba(206,194,170,0.18)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'var(--lb-caps)', fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(245,240,227,0.5)' }}>
          <div>© 2026 Little Bloom Photo Studio &nbsp;|&nbsp; Proudly built with <a href="https://masondietrich.com" target="_blank" rel="noreferrer" style={{ color: 'inherit', textDecoration: 'underline', textUnderlineOffset: 3 }}>Mason Dietrich</a></div>
          <div>Pleasant Grove, Utah</div>
        </div>
    </footer>
  );
}

/* ============ Marquee strip ============ */
function Marquee({ items, speed = 60 }) {
  // duplicate items for seamless scroll
  const arr = [...items, ...items];
  return (
    <div style={{
      borderTop: '1px solid var(--lb-rule)',
      borderBottom: '1px solid var(--lb-rule)',
      overflow: 'hidden',
      background: 'var(--lb-cream)',
      padding: '22px 0',
    }}>
      <div style={{
        display: 'flex', gap: 56, whiteSpace: 'nowrap',
        animation: `lb-marquee ${speed}s linear infinite`,
        width: 'max-content',
      }}>
        {arr.map((t, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 56, fontFamily: 'var(--lb-display)', fontStyle: 'italic', fontSize: 32, color: 'var(--lb-brown)' }}>
            <span style={{ fontFamily: 'var(--lb-script)', color: 'var(--lb-tan)', fontSize: 44 }}>·</span>
            {t}
          </span>
        ))}
      </div>
      <style>{`@keyframes lb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </div>
  );
}

/* ============ Reveal-on-scroll wrapper ============ */
function Reveal({ children, delay = 0, as: As = 'div', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => e.target.classList.add('in'), delay);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={'reveal ' + (rest.className || '')} {...rest}>{children}</As>;
}

/* Export to window */
Object.assign(window, { Wreath, Logo, Nav, Footer, Marquee, Reveal, PHOTOS });
