/* global React */
const { useState, useEffect, useRef } = React;

if (typeof window !== 'undefined' && !window._ytApiLoaded) {
  window._ytApiLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://www.youtube.com/iframe_api';
  document.body.appendChild(script);
}

function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const targets = el.querySelectorAll(".reveal, .reveal-left");
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("revealed");
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });
    targets.forEach(t => observer.observe(t));
    return () => observer.disconnect();
  }, []);
  return ref;
}

// Smooth-scroll helper
function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}

// ============== Nav ==============
function Nav({ active, onNav }) {
  const items = [
    { label: "About",                  id: "about-me" },
    { label: "Short Form Video",      id: "work" },
    { label: "Photography",           id: "lifestyle" },
    { label: "Contact",               id: "contact" },
  ];
  return (
    <nav style={navStyles.bar}>
      <a href="#top" onClick={(e) => { e.preventDefault(); onNav("top"); }} style={navStyles.wm}>bysidneystoker</a>
      <div style={navStyles.links}>
        {items.map(item => (
          <a key={item.id}
             onClick={(e) => { e.preventDefault(); onNav(item.id); }}
             href={`#${item.id}`}
             style={{ ...navStyles.link, ...(active === item.id ? navStyles.linkActive : {}) }}>
            {item.label}
          </a>
        ))}
      </div>
      <button style={navStyles.cta} onClick={() => onNav("contact")}>Let's collaborate</button>
    </nav>
  );
}
const navStyles = {
  bar: {
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "20px 48px",
    borderBottom: "1px solid rgba(46,45,35,0.14)",
    background: "rgba(242, 236, 226, 0.92)",
    backdropFilter: "blur(12px)",
    WebkitBackdropFilter: "blur(12px)",
    position: "sticky", top: 0, zIndex: 50,
  },
  wm: {
    fontFamily: "var(--font-serif)", fontSize: 22, fontStyle: "italic",
    fontWeight: 400, letterSpacing: "-0.01em", color: "var(--coffee-900)",
    cursor: "pointer", textDecoration: "none",
  },
  links: { display: "flex", gap: 32 },
  link: {
    fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500,
    letterSpacing: "0.02em", color: "var(--karaka-800)",
    textDecoration: "none", cursor: "pointer",
    transition: "color 220ms cubic-bezier(0.22, 0.61, 0.36, 1)",
  },
  linkActive: { color: "var(--camel-600)" },
  cta: {
    fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 500,
    letterSpacing: "0.04em", padding: "10px 22px",
    borderRadius: 999, border: "none", cursor: "pointer",
    background: "var(--karaka-800)", color: "var(--cream-50)",
  },
};

// ============== Hero ==============
function Hero({ onCTA }) {
  const niches = ["Wellness", "Beauty", "Lifestyle", "Motherhood"];
  const credentials = ["Registered aesthetics nurse", "B.S. Exercise science"];
  return (
    <section id="top" style={heroStyles.wrap}>
      {/* Centered headline band */}
      <div style={heroStyles.band} className="anim-fade-up delay-1">
        <div style={heroStyles.eyebrow}>UGC Studio · Est. 2026</div>
        <div style={heroStyles.rule} />
        <h1 style={heroStyles.h1}>
          Engaging content <em style={{ color: "var(--camel-600)" }}>for brands</em> with taste.
        </h1>
        <div style={heroStyles.ctas}>
          <button style={heroStyles.btnPrimary} onClick={onCTA}>Let's collaborate</button>
        </div>
      </div>

      {/* About + headshot row */}
      <div style={heroStyles.bottom}>
        <div style={heroStyles.about} className="anim-fade-up delay-2">
          <p style={heroStyles.lede}>
            Most creators talk about products. I understand them.
          </p>
          <p style={heroStyles.body}>
            I'm Sidney, a registered aesthetic nurse with 5+ years of clinical experience and a
            degree in exercise science. My background in aesthetics + holistic health means I
            bring something most creators can't, real knowledge of the products I work with. I
            create beauty, wellness + lifestyle content that's credible, relatable, + built to
            perform.
          </p>
          <div style={heroStyles.metaRow}>
            <div>
              <div style={heroStyles.metaLabel}>Credentials</div>
              <ul style={heroStyles.credList}>
                {credentials.map(c => <li key={c} style={heroStyles.credItem}>{c}</li>)}
              </ul>
            </div>
          </div>
          <div style={heroStyles.nicheRow}>
            {niches.map(n => (
              <span key={n} style={heroStyles.niche}>{n}</span>
            ))}
          </div>

          <div style={heroStyles.socialsWrap}>
            <div style={heroStyles.socialsEyebrow}>Connect</div>
            <div style={heroStyles.socialsRule} />
            <div style={heroStyles.socialsGrid}>
              {[
                { platform: "Instagram", handle: "@bysidneystoker", meta: "Behind-the-scenes · finished work", url: "https://www.instagram.com/bysidneystoker?igsh=MTFtd2Y0MnV3YnVldg%3D%3D&utm_source=qr", icon: (
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="5"/>
                    <circle cx="12" cy="12" r="4"/>
                    <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/>
                  </svg>
                )},
                { platform: "TikTok", handle: "@bysidneystoker", meta: "Reels · short-form video", url: "https://www.tiktok.com/@bysidneystoker?_r=1&_t=ZT-95vyeSIgB6U", icon: (
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M14 4v10.5a3.5 3.5 0 1 1-3.5-3.5"/>
                    <path d="M14 4c.5 2.5 2.5 4.5 5 5"/>
                  </svg>
                )},
                { platform: "Email", handle: "hello@bysidneystoker.com", meta: "Direct inquiries", url: "mailto:hello@bysidneystoker.com", icon: (
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="5" width="18" height="14" rx="2"/>
                    <path d="M3 7l9 6 9-6"/>
                  </svg>
                )},
              ].map(s => (
                <a key={s.platform} href={s.url} {...(s.url.startsWith("mailto:") ? {} : { target: "_blank", rel: "noopener noreferrer" })} style={{ ...heroStyles.socialCard, ...(s.platform === "Email" ? { gridColumn: "1 / -1", justifySelf: "center", width: "max-content", maxWidth: "100%" } : {}) }}>
                  <div style={heroStyles.socialIcon}>{s.icon}</div>
                  <div style={{ flex: 1 }}>
                    <div style={heroStyles.socialPlatform}>{s.platform}</div>
                    <div style={heroStyles.socialHandle}>{s.handle}</div>
                  </div>
                  <div style={heroStyles.socialArrow}>↗</div>
                </a>
              ))}
            </div>
          </div>
        </div>

        <div style={heroStyles.headshotCol} className="anim-fade-right delay-3">
          <div style={heroStyles.headshotFrame}>
            <div style={heroStyles.headshotBg} />
            <div style={heroStyles.headshotInner}>
              <img src="assets/personal/headshot-sid.jpg" alt="Sidney Stoker" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }} />
            </div>
          </div>
          <div style={heroStyles.headshotLabel}>
            <h2 style={heroStyles.headshotCaption}>Sidney Stoker</h2>
            <div style={heroStyles.headshotHandle}>@bysidneystoker</div>
          </div>
        </div>
      </div>
    </section>
  );
}
const heroStyles = {
  wrap: {
    padding: "56px 48px 80px",
    background: "var(--cream-100)",
  },
  band: {
    textAlign: "center",
    maxWidth: 640,
    margin: "0 auto 64px",
  },
  eyebrow: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--camel-600)",
  },
  rule: { width: 36, height: 1, background: "var(--camel-500)", margin: "14px auto 20px" },
  h1: {
    fontFamily: "var(--font-serif)", fontSize: 48, fontWeight: 500,
    lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--coffee-900)",
    margin: 0, textWrap: "balance",
  },
  nicheRow: {
    display: "flex", alignItems: "center", justifyContent: "center", gap: 12, flexWrap: "wrap",
    marginTop: 20,
  },
  niche: {
    fontFamily: "var(--font-serif)", fontStyle: "italic",
    fontSize: 17, color: "var(--karaka-800)",
  },
  nicheDot: { color: "var(--camel-500)", fontSize: 13 },
  ctas: { display: "flex", gap: 16, alignItems: "center", justifyContent: "center", marginTop: 28 },
  btnPrimary: {
    fontSize: 13, fontWeight: 500, letterSpacing: "0.04em",
    padding: "13px 28px", borderRadius: 999, border: "none", cursor: "pointer",
    background: "var(--camel-500)", color: "var(--cream-50)",
  },
  bottom: {
    display: "grid", gridTemplateColumns: "1.2fr 1fr",
    gap: 64, alignItems: "start",
  },
  about: { textAlign: "center" },
  nicheRow: {
    display: "flex", alignItems: "center", justifyContent: "center", gap: 10, flexWrap: "wrap",
    marginTop: 28,
  },
  niche: {
    fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 500,
    letterSpacing: "0.06em", textTransform: "uppercase",
    padding: "10px 22px", borderRadius: 999,
    background: "transparent",
    border: "1px solid rgba(46,45,35,0.28)",
    color: "var(--karaka-800)",
    userSelect: "none",
    boxShadow: "0 4px 12px rgba(36,25,14,0.10), 0 1px 3px rgba(36,25,14,0.08)",
  },
  lede: {
    fontFamily: "var(--font-serif)", fontStyle: "italic",
    fontSize: 28, fontWeight: 500, lineHeight: 1.25,
    color: "var(--coffee-900)", margin: "0 0 20px",
    letterSpacing: "-0.01em", textWrap: "balance",
  },
  body: {
    fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 450,
    lineHeight: 1.7, color: "var(--karaka-800)",
    maxWidth: "54ch", margin: "0 auto 28px",
  },
  metaRow: { display: "flex", gap: 40, justifyContent: "center" },
  metaLabel: { textDecoration: "underline", textUnderlineOffset: 4,
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--beetle-500)",
    marginBottom: 10,
  },
  credList: { listStyle: "none", margin: 0, padding: 0 },
  credItem: {
    fontFamily: "var(--font-serif)", fontStyle: "italic",
    fontSize: 16, color: "var(--coffee-900)", lineHeight: 1.6,
  },
  socialsWrap: { marginTop: 36, textAlign: "center", maxWidth: 480, margin: "36px auto 0" },
  socialsEyebrow: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--camel-600)",
  },
  socialsRule: { width: 36, height: 1, background: "var(--camel-500)", margin: "12px auto 16px" },
  socialsGrid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, justifyContent: "center" },
  socialCard: {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "10px 16px",
    background: "var(--cream-50)",
    border: "1px solid rgba(46,45,35,0.10)",
    borderRadius: 10,
    textDecoration: "none", color: "inherit",
    flex: 1,
  },
  socialIcon: {
    width: 32, height: 32, borderRadius: 999,
    background: "var(--coffee-900)", color: "var(--cream-50)",
    display: "flex", alignItems: "center", justifyContent: "center",
    flexShrink: 0,
  },
  socialPlatform: {
    fontSize: 9, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--beetle-500)", marginBottom: 2,
  },
  socialHandle: {
    fontFamily: "var(--font-serif)", fontStyle: "italic",
    fontSize: 15, fontWeight: 500, color: "var(--coffee-900)",
    letterSpacing: "-0.01em", lineHeight: 1.1,
  },
  socialMeta: { fontSize: 12, color: "var(--fg-3)", marginTop: 3 },
  socialArrow: { fontSize: 18, color: "var(--camel-600)", fontFamily: "var(--font-serif)" },
  headshotCol: { display: "flex", flexDirection: "column", alignItems: "center", gap: 14 },
  headshotFrame: {
    position: "relative",
    width: "100%", maxWidth: 380,
    padding: 10,
    filter: "drop-shadow(0 32px 64px rgba(36,25,14,0.28))",
  },
  headshotBg: {
    position: "absolute",
    inset: 0,
    borderRadius: 12,
    background: "var(--beetle-500)",
    zIndex: 0,
    boxShadow: "inset 0 2px 8px rgba(255,255,255,0.08), 0 8px 32px rgba(36,25,14,0.22)",
  },
  headshotInner: {
    position: "relative", zIndex: 1,
    width: "100%", aspectRatio: "4/5",
    borderRadius: 6,
    boxShadow: "0 24px 56px rgba(36, 25, 14, 0.32), 0 4px 12px rgba(36,25,14,0.18)",
    overflow: "hidden",
  },
  headshotLabel: {
    background: "rgba(46, 45, 35, 0.6)",
    borderRadius: 8,
    padding: "14px 24px",
    textAlign: "center",
    width: "100%", maxWidth: 380, display: "block",
  },
  headshotCaption: {
    fontFamily: "var(--font-serif)", fontStyle: "italic",
    fontSize: 32, fontWeight: 500,
    letterSpacing: "-0.015em",
    color: "var(--cream-50)",
    margin: 0, lineHeight: 1,
  },
  headshotHandle: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--gentle-300)",
    marginTop: 6,
  },
};

// ============== Logo Marquee ==============
function LogoMarquee() {
  const brands = ["WILDGROVE", "MAISON CARÉ", "OAKWELL & CO", "FERN STUDIO", "NORTH ROSEMARY", "SUNDAY HOUSE"];
  return (
    <section style={marqueeStyles.wrap}>
      <div style={marqueeStyles.label}>Trusted by</div>
      <div style={marqueeStyles.row}>
        {brands.map(b => <div key={b} style={marqueeStyles.brand}>{b}</div>)}
      </div>
    </section>
  );
}
const marqueeStyles = {
  wrap: {
    padding: "28px 48px",
    borderTop: "1px solid rgba(46,45,35,0.14)",
    borderBottom: "1px solid rgba(46,45,35,0.14)",
    background: "var(--cream-50)",
    display: "flex", alignItems: "center", gap: 48,
  },
  label: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--fg-3)", flexShrink: 0,
  },
  row: { display: "flex", gap: 40, flex: 1, justifyContent: "space-between", flexWrap: "wrap" },
  brand: {
    fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 18,
    color: "var(--karaka-800)", letterSpacing: "0.04em",
  },
};

// ============== Work — Video Row ==============
function VideoCard({ video }) {
  const [playing, setPlaying] = React.useState(false);
  const [hovered, setHovered] = React.useState(false);
  const iframeRef = React.useRef(null);
  const playerRef = React.useRef(null);

  React.useEffect(() => {
    if (!playing) return;
    let cancelled = false;

    const initPlayer = () => {
      if (cancelled) return;
      if (window.YT && window.YT.Player && iframeRef.current) {
        playerRef.current = new window.YT.Player(iframeRef.current, {
          events: {
            onReady: (event) => {
              try {
                event.target.setPlaybackQuality('hd1080');
              } catch (e) {}
            },
            onStateChange: (event) => {
              if (event.data === 0) {
                setPlaying(false);
              }
            }
          }
        });
      } else {
        setTimeout(initPlayer, 100);
      }
    };

    const timer = setTimeout(initPlayer, 150);

    return () => {
      cancelled = true;
      clearTimeout(timer);
      if (playerRef.current && typeof playerRef.current.destroy === 'function') {
        try { playerRef.current.destroy(); } catch (e) {}
        playerRef.current = null;
      }
    };
  }, [playing]);

  if (video.youtube) {
    return (
      <div style={{ ...workStyles.card, transform: hovered ? "translateY(-6px)" : "translateY(0)", transition: "transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1)" }}
           onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
        <div style={{ ...workStyles.video, background: video.bg, backgroundImage: !playing && video.poster ? `url(${video.poster})` : undefined, backgroundSize: "cover", backgroundPosition: "center", overflow: "hidden", cursor: "pointer" }}
             onClick={() => setPlaying(true)}>
          {playing ? (
            <iframe
              ref={iframeRef}
              id={`yt-${video.youtube.split('/').pop()}`}
              src={`${video.youtube}?autoplay=1&rel=0&modestbranding=1&vq=hd1080&hd=1&enablejsapi=1`}
              title={`${video.brand} — ${video.label}`}
              allow="autoplay; encrypted-media; fullscreen"
              frameBorder="0"
              style={{ width: "100%", height: "100%", display: "block", border: 0 }}
            />
          ) : (
            <div style={workStyles.playBtn}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="var(--cream-50)" style={{ marginLeft: 3 }}>
                <polygon points="6 4 20 12 6 20 6 4" />
              </svg>
            </div>
          )}
        </div>
        <div style={workStyles.brand}>{video.brand}</div>
        <div style={workStyles.label}>{video.label}</div>
      </div>
    );
  }
  return (
    <a href="#" style={{ ...workStyles.card, transform: hovered ? "translateY(-6px)" : "translateY(0)", transition: "transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1)" }}
       onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
      <div style={{ ...workStyles.video, background: video.bg }}>
        <div style={workStyles.playBtn}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="var(--cream-50)" style={{ marginLeft: 3 }}>
            <polygon points="6 4 20 12 6 20 6 4" />
          </svg>
        </div>
      </div>
      <div style={workStyles.brand}>{video.brand}</div>
      <div style={workStyles.label}>{video.label}</div>
    </a>
  );
}

function VideoRow({ onCTA }) {
  const ref = useReveal();
  const videos = [
    { brand: "Innisfree", label: "Demonstration", youtube: "https://www.youtube-nocookie.com/embed/qb2P5zoT1Ns", poster: "assets/innisfree/innisfree-thumbnail.png", bg: "linear-gradient(160deg, #DDD0BC, #AF8562)", row: 1 },
    { brand: "Tubby Todd", label: "ASMR Unboxing", youtube: "https://www.youtube-nocookie.com/embed/2bKNq57vMyw", poster: "assets/tubby-todd/tubby-todd-thumbnail.jpg", bg: "linear-gradient(170deg, #DDD0BC, #AF8562)", row: 1 },
    { brand: "Parasol", label: "Talking Head", youtube: "https://www.youtube-nocookie.com/embed/PDergX1mXis", poster: "assets/parasol-diapers/parasol-thumbnail.jpg", bg: "linear-gradient(150deg, #6B6D60, #56584C)", row: 1 },
    { brand: "Ultraviolette", label: "Vlog", youtube: "https://www.youtube-nocookie.com/embed/mOzXqNN0d6s", poster: "assets/ultraviolette/ultraviolette-thumbnail.jpg", bg: "var(--cream-100)", row: 1 },
    { brand: "Personal", label: "GRWM", youtube: "https://www.youtube-nocookie.com/embed/b2E1M2zOeQU", poster: "assets/grwm-choose-my-skincare/thumbnail.jpg", bg: "linear-gradient(160deg, #DDD0BC, #AF8562)", row: 2 },
    { brand: "Mamma Chia", label: "Lifestyle", youtube: "https://www.youtube-nocookie.com/embed/ThN2VLB2rfY", poster: "assets/mamma-chia/mamma-chia-thumbnail.jpg", bg: "linear-gradient(140deg, #C9A07D, #6E5239)", row: 2 },
    { brand: "Nutri-Bites", label: "Talking Head", youtube: "https://www.youtube-nocookie.com/embed/Q4x9qVSkwSs", poster: "assets/nutri-bites/nutri-bites-thumbnail.jpg", bg: "var(--cream-100)", row: 2 },
  ];
  return (
    <section id="work" ref={ref} style={{ ...workStyles.wrap, background: "var(--cream-50)" }}>
      <div style={workStyles.head} className="reveal">
        <div style={workStyles.eyebrow}>Selected work · Video</div>
        <div style={workStyles.rule} />
        <h2 style={workStyles.h2}>Short-form video</h2>
      </div>
      <div style={workStyles.videoRows}>
        {[1, 2].map(rowNum => (
          <div key={rowNum} style={workStyles.videoRow}>
            {videos.filter(v => v.row === rowNum).map((v, i) => (
              <div key={i} className={`reveal reveal-delay-${i + 1}`} style={workStyles.videoCell}>
                <VideoCard video={v} />
              </div>
            ))}
          </div>
        ))}
      </div>
      <div className="reveal" style={{ display: "flex", justifyContent: "center", marginTop: 48 }}>
        <button style={heroStyles.btnPrimary} onClick={onCTA}>Let's work together →</button>
      </div>
      <div className="reveal" style={{ display: "flex", justifyContent: "center", gap: 10, marginTop: 16, flexWrap: "wrap" }}>
        {[
          { platform: "TikTok", handle: "@bysidneystoker", url: "https://www.tiktok.com/@bysidneystoker?_r=1&_t=ZT-95vyeSIgB6U", icon: (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M14 4v10.5a3.5 3.5 0 1 1-3.5-3.5"/>
              <path d="M14 4c.5 2.5 2.5 4.5 5 5"/>
            </svg>
          )},
          { platform: "Instagram", handle: "@bysidneystoker", url: "https://www.instagram.com/bysidneystoker?igsh=MTFtd2Y0MnV3YnVldg%3D%3D&utm_source=qr", icon: (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="5"/>
              <circle cx="12" cy="12" r="4"/>
              <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/>
            </svg>
          )},
          { platform: "Email", handle: "hello@bysidneystoker.com", url: "mailto:hello@bysidneystoker.com", icon: (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="5" width="18" height="14" rx="2"/>
              <path d="M3 7l9 6 9-6"/>
            </svg>
          )},
        ].map(s => (
          <a key={s.platform} href={s.url} {...(s.url.startsWith("mailto:") ? {} : { target: "_blank", rel: "noopener noreferrer" })} style={{ ...heroStyles.socialCard, flex: "0 0 310px", width: 310 }}>
            <div style={heroStyles.socialIcon}>{s.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={heroStyles.socialPlatform}>{s.platform}</div>
              <div style={heroStyles.socialHandle}>{s.handle}</div>
            </div>
            <div style={heroStyles.socialArrow}>↗</div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ============== Work — Photo Row ==============
function PhotoCard({ item, delay }) {
  const videoRef = React.useRef(null);
  const [hovering, setHovering] = React.useState(false);

  const handleEnter = () => {
    if (!item.hoverVideo) return;
    setHovering(true);
    const v = videoRef.current;
    if (v) { v.currentTime = 0; v.play().catch(() => {}); }
  };
  const handleLeave = () => {
    if (!item.hoverVideo) return;
    setHovering(false);
    const v = videoRef.current;
    if (v) { v.pause(); v.currentTime = 0; }
  };

  return (
    <div style={{ ...workStyles.card, cursor: "default" }} className={`reveal reveal-delay-${delay}`}>
      {item.src
        ? <div
            style={{ ...workStyles.photo, overflow: "hidden", position: "relative" }}
            onMouseEnter={handleEnter}
            onMouseLeave={handleLeave}
          >
            <img src={item.src} alt={item.brand} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: item.objectPosition || "center", display: "block", transform: item.scale ? `scale(${item.scale})` : "none", transformOrigin: "center" }} />
            {item.hoverVideo && (
              <video
                ref={videoRef}
                src={item.hoverVideo}
                muted
                loop
                playsInline
                preload="metadata"
                style={{
                  position: "absolute",
                  inset: 0,
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  objectPosition: item.hoverVideoPosition || item.objectPosition || "center",
                  opacity: hovering ? 1 : 0,
                  transition: "opacity 240ms ease",
                  pointerEvents: "none",
                }}
              />
            )}
          </div>
        : <div style={{ ...workStyles.photo, background: item.bg }} />
      }
      <div style={workStyles.brand}>{item.brand}</div>
      <div style={workStyles.label}>{item.label}</div>
    </div>
  );
}

function PhotoRow() {
  const lifestyleRef = useReveal();
  const productRef = useReveal();
  const lifestyle = [
    { brand: "Cub + Fox",     label: "Magic Canvas + Brush Set", src: "assets/cub-fox/lifestyle.jpg", hoverVideo: "assets/cub-fox/cub-fox-broll.mov" },
    { brand: "Then I Met You", label: "Bong² Bounce Cream", src: "assets/then-i-met-you/lifestyle.jpg", hoverVideo: "assets/then-i-met-you/bong2-cream-closeup-broll.mov" },
    { brand: "Olipop", label: "Pre-Biotic Soda Pop", src: "assets/olipop/lifestyle.jpg" },
  ];
  const product = [
    { brand: "+Lux Unfiltered", label: "Product flatlay", src: "assets/lux-unfiltered/product-flatlay.jpg" },
    { brand: "Mary Ruth's", label: "Product shot", src: "assets/mary-ruths/product-shot.jpg", hoverVideo: "assets/mary-ruths/mary-ruths-product-broll.mov", hoverVideoPosition: "center top" },
    { brand: "Parasol Diapers", label: "Product Shot", src: "assets/parasol-diapers/product-shot.jpg" },
    { brand: "Dossier", label: "Product Shot", src: "assets/dossier/product-shot.jpg", objectPosition: "85% 30%", scale: 1.2 },
    { brand: "Time line", label: "Product flatlay", src: "assets/time-line/product-flatlay.jpg" },
  ];
  return (
    <>
      <section id="lifestyle" ref={lifestyleRef} style={{ ...workStyles.wrapAlt, background: "var(--gentle-300)" }}>
        <div style={workStyles.head} className="reveal">
          <div style={workStyles.eyebrow}>Selected work · Photography</div>
          <div style={workStyles.rule} />
          <h2 style={workStyles.h2}>Lifestyle Photography</h2>
        </div>
        <div style={workStyles.grid}>
          {lifestyle.map((p, i) => (
            <div key={i} style={{ gridColumn: (i % 3) + 2 }}>
              <PhotoCard item={p} delay={i + 1} />
            </div>
          ))}
        </div>
      </section>

      <section id="product" ref={productRef} style={{ ...workStyles.wrap, background: "var(--cream-50)" }}>
        <div style={workStyles.head} className="reveal">
          <div style={workStyles.eyebrow}>Selected work · Photography</div>
          <div style={workStyles.rule} />
          <h2 style={workStyles.h2}>Product Photography</h2>
        </div>
        <div style={workStyles.grid}>
          {product.map((p, i) => (
            <PhotoCard key={i} item={p} delay={i + 1} />
          ))}
        </div>
      </section>
    </>
  );
}

const workStyles = {
  wrap: { padding: "40px 48px 80px", background: "var(--cream-100)" },
  wrapAlt: { padding: "80px 48px", background: "var(--cream-50)" },
  head: { marginBottom: 36 },
  eyebrow: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--camel-600)",
  },
  rule: { width: 36, height: 1, background: "var(--camel-500)", margin: "14px 0 18px" },
  h2: {
    fontFamily: "var(--font-serif)", fontSize: 40, fontWeight: 500,
    fontStyle: "italic", color: "var(--coffee-900)", margin: 0,
    letterSpacing: "-0.018em",
  },
  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(5, 1fr)",
    gap: 18,
  },
  videoRows: { display: "flex", flexDirection: "column", gap: 18 },
  videoRow: { display: "flex", gap: 18, justifyContent: "center" },
  videoCell: { flex: "0 0 calc((100% - 4 * 18px) / 5)" },
  card: { textDecoration: "none", color: "inherit", display: "block", cursor: "pointer" },
  video: {
    aspectRatio: "9/16",
    borderRadius: 6,
    marginBottom: 12,
    boxShadow: "0 8px 24px rgba(36,25,14,0.16), 0 2px 6px rgba(36,25,14,0.10)",
    display: "flex", alignItems: "center", justifyContent: "center",
    position: "relative",
  },
  photo: {
    aspectRatio: "4/5",
    borderRadius: 6,
    marginBottom: 12,
    boxShadow: "0 8px 24px rgba(36,25,14,0.16), 0 2px 6px rgba(36,25,14,0.10)",
  },
  playBtn: {
    width: 48, height: 48, borderRadius: 999,
    background: "rgba(36, 25, 14, 0.55)",
    backdropFilter: "blur(4px)",
    display: "flex", alignItems: "center", justifyContent: "center",
    border: "1px solid rgba(242,236,226,0.4)",
  },
  brand: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.16em",
    textTransform: "uppercase", color: "var(--camel-600)",
    marginBottom: 4,
  },
  label: {
    fontFamily: "var(--font-serif)", fontStyle: "italic",
    fontSize: 16, color: "var(--coffee-900)",
  },
};

// ============== Get to Know Me ==============
function GetToKnowMe() {
  const ref = useReveal();
  const leftPhotos = [
    { src: "assets/personal/about-family.jpg",  alt: "Sidney's family" },
    { src: "assets/personal/about-dogs.png",    alt: "Sidney's three dogs" },
    { src: "assets/personal/about-product.png", alt: "Sidney with a product" },
  ];
  const rightPhotos = [
    { src: "assets/personal/about-mom.jpg",  alt: "Sidney with her son" },
    { src: "assets/personal/about-cafe.jpg", alt: "Sidney at a cafe" },
  ];
  const facts = [
    "Registered aesthetics nurse with 5+ years of clinical experience",
    "B.S. in Exercise Science",
    "Based in Salt Lake City, Utah",
    "Raising a toddler boy",
    "Dog mom of 3, available for pet content",
    "Passionate about clean skincare + intentional wellness",
    "Currently booking UGC projects for wellness, beauty + lifestyle brands",
    "Access to an aesthetic clinic + treatment room for elevated content settings",
  ];
  return (
    <section id="about-me" ref={ref} style={gtkStyles.wrap}>
      <div style={gtkStyles.header} className="reveal">
        <div style={gtkStyles.eyebrow}>Hi...</div>
        <div style={gtkStyles.rule} />
        <h2 style={gtkStyles.h2}>A little more <em style={{ color: "var(--camel-600)" }}>about me</em></h2>
      </div>
      <div style={gtkStyles.grid}>
        <div style={gtkStyles.photos}>
          {leftPhotos.map((p, i) => (
            <div key={i} className={`reveal reveal-delay-${i + 1}`} style={{ ...gtkStyles.photoWrap, gridColumn: i === 0 ? "span 2" : "auto" }}>
              <img src={p.src} alt={p.alt} style={gtkStyles.photoImg} />
            </div>
          ))}
        </div>
        <div style={gtkStyles.facts}>
          <ul style={gtkStyles.list}>
            {facts.map((f, i) => (
              <li key={i} className={`reveal-left reveal-delay-${i + 1}`} style={gtkStyles.item}>{f}</li>
            ))}
          </ul>
          <div style={gtkStyles.rightPhotos}>
            {rightPhotos.map((p, i) => (
              <div key={i} className={`reveal reveal-delay-${i + 2}`} style={gtkStyles.photoWrap}>
                <img src={p.src} alt={p.alt} style={gtkStyles.photoImg} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
const gtkStyles = {
  wrap: { padding: "96px 48px", background: "var(--gentle-300)" },
  header: { marginBottom: 56 },
  eyebrow: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--camel-700)",
  },
  rule: { width: 36, height: 1, background: "var(--camel-600)", margin: "14px 0 20px" },
  h2: {
    fontFamily: "var(--font-serif)", fontSize: 42, fontWeight: 500,
    lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--coffee-900)", margin: 0,
  },
  grid: { display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "start" },
  photos: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 },
  photoWrap: {
    borderRadius: 8, overflow: "hidden",
    boxShadow: "0 12px 36px rgba(36,25,14,0.18), 0 3px 8px rgba(36,25,14,0.10)",
    aspectRatio: "4/5",
  },
  photoImg: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
  facts: { paddingTop: 8, display: "flex", flexDirection: "column", gap: 32 },
  rightPhotos: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, width: "100%" },
  list: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 18 },
  item: {
    fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 450,
    lineHeight: 1.6, color: "var(--coffee-900)",
    borderLeft: "1px solid var(--camel-500)",
    paddingLeft: 16,
  },
};

// ============== Contact ==============
function ContactCTA() {
  const ref = useReveal();
  const [submitted, setSubmitted] = useState(false);
  return (
    <section id="contact" ref={ref} style={ctaStyles.wrap}>
      <div style={ctaStyles.left} className="reveal">
        <div style={ctaStyles.hFrame}>
          <h2 style={ctaStyles.h}>Your brand, <em>told naturally.</em></h2>
        </div>
      </div>
      <form name="contact" data-netlify="true" style={ctaStyles.form} className="reveal reveal-delay-2"
            onSubmit={(e) => {
              e.preventDefault();
              const data = new FormData(e.target);
              fetch("/", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams(data).toString() })
                .then(() => setSubmitted(true))
                .catch(() => setSubmitted(true));
            }}>
        <input type="hidden" name="form-name" value="contact" />
        {submitted ? (
          <div style={ctaStyles.success}>
            <div style={ctaStyles.eyebrow}>Sent</div>
            <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, color: "var(--coffee-900)", margin: "10px 0 0" }}>
              So glad you reached out. Talk soon!
            </p>
          </div>
        ) : (
          <>
            <input name="brand" style={ctaStyles.input} placeholder="Brand name" />
            <input name="email" style={ctaStyles.input} placeholder="Email" />
            <textarea name="message" style={{ ...ctaStyles.input, minHeight: 80, resize: "none" }}
                      placeholder="What's the vision? Give me the good stuff." />
            <button type="submit" style={ctaStyles.btn}>Send</button>
          </>
        )}
      </form>
    </section>
  );
}
const ctaStyles = {
  wrap: {
    background: "var(--cream-100)",
    padding: "96px 48px",
    display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64,
    alignItems: "center",
  },
  left: {
    display: "flex", alignItems: "center", justifyContent: "center",
  },
  hFrame: {
    border: "1px solid rgba(46,45,35,0.2)",
    borderRadius: 12,
    padding: "40px 48px",
    textAlign: "center",
  },
  h: {
    fontFamily: "var(--font-serif)", fontSize: 52, fontWeight: 500,
    lineHeight: 1.05, letterSpacing: "-0.02em",
    color: "var(--coffee-900)",
    margin: 0, textWrap: "balance",
  },
  form: { display: "flex", flexDirection: "column", gap: 12 },
  input: {
    fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 450,
    padding: "14px 16px",
    background: "var(--cream-50)",
    border: "1px solid rgba(46,45,35,0.18)",
    borderRadius: 4,
    color: "var(--coffee-900)",
    outline: "none",
  },
  btn: {
    marginTop: 6, padding: "14px 26px",
    background: "var(--coffee-900)", color: "var(--cream-50)",
    border: "none", borderRadius: 999, cursor: "pointer",
    fontSize: 13, fontWeight: 500, letterSpacing: "0.04em",
    alignSelf: "flex-start",
  },
  success: { padding: "20px 0" },
};

// ============== Connect / Socials ==============
function Connect() {
  const socials = [
    {
      platform: "Instagram",
      handle: "@bysidneystoker",
      meta: "Behind-the-scenes · finished work",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="5"/>
          <circle cx="12" cy="12" r="4"/>
          <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/>
        </svg>
      ),
    },
    {
      platform: "TikTok",
      handle: "@bysidneystoker",
      meta: "Reels · short-form video",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 4v10.5a3.5 3.5 0 1 1-3.5-3.5"/>
          <path d="M14 4c.5 2.5 2.5 4.5 5 5"/>
        </svg>
      ),
    },
  ];
  return (
    <section id="connect" style={connectStyles.wrap}>
      <div style={connectStyles.eyebrow}>Connect</div>
      <div style={connectStyles.rule} />
      <h2 style={connectStyles.h2}>Find me on socials.</h2>
      <div style={connectStyles.grid}>
        {socials.map(s => (
          <a key={s.platform} href="#" style={connectStyles.card}>
            <div style={connectStyles.icon}>{s.icon}</div>
            <div style={connectStyles.cardBody}>
              <div style={connectStyles.platform}>{s.platform}</div>
              <div style={connectStyles.handle}>{s.handle}</div>
              <div style={connectStyles.meta}>{s.meta}</div>
            </div>
            <div style={connectStyles.arrow}>↗</div>
          </a>
        ))}
      </div>
    </section>
  );
}
const connectStyles = {
  wrap: { padding: "80px 48px", background: "var(--cream-50)" },
  eyebrow: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--camel-600)",
  },
  rule: { width: 36, height: 1, background: "var(--camel-500)", margin: "14px 0 18px" },
  h2: {
    fontFamily: "var(--font-serif)", fontSize: 40, fontWeight: 500,
    fontStyle: "italic", color: "var(--coffee-900)", margin: "0 0 36px",
    letterSpacing: "-0.018em",
  },
  grid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 },
  card: {
    display: "flex", alignItems: "center", gap: 20,
    padding: "22px 26px",
    background: "var(--cream-100)",
    border: "1px solid rgba(46,45,35,0.10)",
    borderRadius: 12,
    textDecoration: "none", color: "inherit",
    transition: "transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1)",
  },
  icon: {
    width: 48, height: 48, borderRadius: 999,
    background: "var(--coffee-900)", color: "var(--cream-50)",
    display: "flex", alignItems: "center", justifyContent: "center",
    flexShrink: 0,
  },
  cardBody: { flex: 1, minWidth: 0 },
  platform: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--beetle-500)",
    marginBottom: 4,
  },
  handle: {
    fontFamily: "var(--font-serif)", fontStyle: "italic",
    fontSize: 24, fontWeight: 500, color: "var(--coffee-900)",
    letterSpacing: "-0.01em", lineHeight: 1.1,
  },
  meta: { fontSize: 13, color: "var(--fg-3)", marginTop: 4 },
  arrow: {
    fontSize: 20, color: "var(--camel-600)",
    fontFamily: "var(--font-serif)",
  },
};

// ============== Footer ==============
function Footer({ onNav }) {
  return (
    <footer style={footStyles.wrap}>
      <div style={footStyles.col}>
        <div style={footStyles.wm}>bysidneystoker</div>
        <div style={footStyles.tag}>UGC Studio · Est. 2026</div>
      </div>
      <div style={footStyles.col}>
        <div style={footStyles.label}>Studio</div>
        <a style={footStyles.link} href="#about-me" onClick={(e) => { e.preventDefault(); onNav("about-me"); }}>About Me</a>
        <a style={footStyles.link} href="#work" onClick={(e) => { e.preventDefault(); onNav("work"); }}>Short Form Video</a>
        <a style={footStyles.link} href="#lifestyle" onClick={(e) => { e.preventDefault(); onNav("lifestyle"); }}>Photography</a>
        <a style={footStyles.link} href="#contact" onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Contact</a>
      </div>
      <div style={footStyles.col}>
        <div style={footStyles.label}>Connect</div>
        <a style={footStyles.link} href="https://www.instagram.com/bysidneystoker?igsh=MTFtd2Y0MnV3YnVldg%3D%3D&utm_source=qr" target="_blank" rel="noopener noreferrer">Instagram</a>
        <a style={footStyles.link} href="https://www.tiktok.com/@bysidneystoker?_r=1&_t=ZT-95vyeSIgB6U" target="_blank" rel="noopener noreferrer">TikTok</a>
        <a style={footStyles.link} href="#">hello@bysidneystoker.com</a>
      </div>
      <div style={{ ...footStyles.col, alignItems: "flex-end" }}>
        <div style={footStyles.label}>© 2026</div>
        <div style={footStyles.tag}>All rights reserved.</div>
      </div>
    </footer>
  );
}
const footStyles = {
  wrap: {
    background: "var(--cream-100)",
    borderTop: "1px solid rgba(46,45,35,0.14)",
    padding: "56px 48px 36px",
    display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48,
    alignItems: "flex-start",
  },
  col: { display: "flex", flexDirection: "column", gap: 10 },
  wm: {
    fontFamily: "var(--font-serif)", fontSize: 26, fontStyle: "italic",
    color: "var(--coffee-900)", letterSpacing: "-0.01em",
  },
  tag: { fontSize: 12, color: "var(--fg-3)" },
  label: {
    fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
    textTransform: "uppercase", color: "var(--fg-3)",
    marginBottom: 4,
  },
  link: {
    fontSize: 13, color: "var(--karaka-800)",
    textDecoration: "none",
  },
};

Object.assign(window, {
  scrollToId,
  Nav, Hero, LogoMarquee, VideoRow, PhotoRow,
  Services, Connect, ContactCTA, Footer,
});