const DS = () => window.DawnTangDesignSystem_f09fd2 || {};

function Reveal({ children, delay = 0, style }) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } }, { threshold: 0.12 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} style={{ opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(14px)', transition: `opacity 600ms var(--ease-out) ${delay}ms, transform 600ms var(--ease-out) ${delay}ms`, ...style }}>{children}</div>;
}

function SiteTop({ active }) {
  const { NavPill } = DS();
  return (
    <div className="site-top">
      <a className="site-name" href="Home.html">Dawn Tang</a>
      <nav className="site-nav">
        <NavPill label="Work" href="Home.html#work" active={active === 'work'} />
        <NavPill label="About" href="About.html" active={active === 'about'} />
        <NavPill label="Contact" href="#contact" />
      </nav>
    </div>
  );
}

function SiteFooter() {
  return (
    <footer className="footer" id="contact">
      <div>
        <h2 className="dt-h2" style={{ margin: 0 }}>Come say hi :)</h2>
        <p className="dt-body" style={{ margin: '10px 0 0', color: 'var(--fg-2)' }}>
          <a href="mailto:dawntang2006@icloud.com" style={{ color: 'var(--fg-1)' }}>dawntang2006@icloud.com</a> · Vancouver, Canada
        </p>
      </div>
      <span className="dt-label" style={{ color: 'var(--fg-3)' }}>Dawn Tang, 2026</span>
    </footer>
  );
}

function Rail({ children }) {
  const ref = React.useRef(null);
  const go = (dir) => { const el = ref.current; if (el) el.scrollBy({ left: dir * (el.clientWidth * 0.7), behavior: 'smooth' }); };
  return (
    <div>
      <div className="rail" ref={ref}>{children}</div>
      <div className="rail-arrows">
        <button className="rail-arrow" aria-label="Scroll left" onClick={() => go(-1)}>←</button>
        <button className="rail-arrow" aria-label="Scroll right" onClick={() => go(1)}>→</button>
      </div>
    </div>
  );
}

function Section({ id, title, sub, children, style }) {
  return (
    <section className="section" id={id} style={style}>
      <Reveal>
        <h2 className="dt-h2" style={{ margin: 0 }}>{title}</h2>
        {sub && <p className="dt-body" style={{ margin: '10px 0 0', color: 'var(--fg-2)' }}>{sub}</p>}
      </Reveal>
      <div style={{ marginTop: 'var(--space-7)' }}>{children}</div>
    </section>
  );
}

function NextProject({ href, title, note }) {
  return (
    <div className="case-close">
      <a className="cc-next" href={href}>
        <span className="dt-label">Next case study</span>
        <h2 className="dt-h2">{title}&nbsp;↗</h2>
        {note && <p className="dt-body">{note}</p>}
      </a>
      <a className="cc-index" href="Home.html#work">All work ↗</a>
    </div>
  );
}

function CaseHero({ label, title, intro, meta, aside }) {
  const body = (
    <Reveal>
      <span className="dt-label" style={{ color: 'var(--proj-accent)' }}>{label}</span>
      <h1 className="cs-title">{title}</h1>
      {intro && <p className="dt-body" style={{ maxWidth: '52ch', marginTop: 'var(--space-6)', fontSize: 19 }}>{intro}</p>}
      {meta && (
        <div className="cs-meta">
          {meta.map((m) => (
            <div key={m[0]}><span className="dt-label">{m[0]}</span><span className="dt-body" style={{ fontSize: 15 }}>{m[1]}</span></div>
          ))}
        </div>
      )}
    </Reveal>
  );
  if (!aside) return <header className="cs-hero">{body}</header>;
  return (
    <header className="cs-hero cs-hero-split">
      <div>{body}</div>
      <Reveal><div className="cs-hero-aside">{aside}</div></Reveal>
    </header>
  );
}

function Media({ src, video, caption, aspect, slot, slotId, placeholder, style }) {
  const inner = video
    ? <video src={video} autoPlay muted loop playsInline style={{ aspectRatio: aspect }} />
    : slot
      ? <image-slot id={slotId} shape="rect" placeholder={placeholder || 'Drop an image'} style={{ width: '100%', aspectRatio: aspect || '3 / 2', display: 'block' }}></image-slot>
      : <img src={src} alt={caption || ''} loading="lazy" style={{ aspectRatio: aspect }} />;
  return (
    <figure style={style}>
      <div className={'media-frame' + (video || slot ? '' : ' hover-zoom')}>{inner}</div>
      {caption && <figcaption>{caption}</figcaption>}
    </figure>
  );
}

Object.assign(window, { DS, Reveal, SiteTop, SiteFooter, Rail, Section, NextProject, CaseHero, Media });