// Direction B v2 — Editorial / craft-led case study with real media wired in.
// Same design as B. Adds: hero backdrop video, brief-section browser shot, cursor-demo.webm in M03.

function Nav() {
  return (
    <nav className="nav" aria-label="Main">
      <input type="checkbox" id="navtoggle" className="nav-toggle" hidden />
      <label htmlFor="navtoggle" className="nav-burger" aria-label="Menu"><span></span><span></span><span></span></label>
      <a className="nav-brand" href="home-sunset.html" aria-label="Home"><span className="sjlogo" aria-hidden="true"><svg viewBox="12 12 72 72" xmlns="http://www.w3.org/2000/svg"><g className="sjlogo-top"><path fill="currentColor" d="M78.2 41 H41 V55 H17.8 A31 31 0 1 1 78.2 41 Z"/></g><g className="sjlogo-bot"><path className="sjlogo-acc" d="M17.8 55 H41 V41 H78.2 A31 31 0 0 1 17.8 55 Z"/></g></svg></span></a>
      <div className="nav-meta">
        <a href="home-sunset.html">Home</a>
        <a href="featured-work-night.html" className="active">Featured Work</a>
        <a href="services.html">Services</a>
        <a href="how-i-work.html">How I work</a>        <a className="nav-mcta" href="start-project.html">Get in touch</a>
      </div>
      <a className="nav-cta" href="start-project.html">Get in touch</a>
    </nav>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-waves" aria-hidden="true">
        <div className="hero-waves__glow"></div>
        <div className="hero-waves__layer hero-waves__layer--back"><div className="hero-waves__scroll">
          <svg viewBox="0 0 2880 560" preserveAspectRatio="none"><defs><linearGradient id="hwg-back" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#F0EBDD" stopOpacity="0.045"/><stop offset="1" stopColor="#F0EBDD" stopOpacity="0"/></linearGradient></defs>
          <path fill="url(#hwg-back)" d="M0,230 C120,285 240,285 360,230 S600,175 720,230 S960,285 1080,230 S1320,175 1440,230 S1680,285 1800,230 S2040,175 2160,230 S2400,285 2520,230 S2760,175 2880,230 L2880,560 L0,560 Z"/></svg>
        </div></div>
        <div className="hero-waves__layer hero-waves__layer--mid"><div className="hero-waves__scroll">
          <svg viewBox="0 0 2880 560" preserveAspectRatio="none"><defs><linearGradient id="hwg-mid" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#F0EBDD" stopOpacity="0.06"/><stop offset="1" stopColor="#F0EBDD" stopOpacity="0"/></linearGradient></defs>
          <path fill="url(#hwg-mid)" d="M0,200 C120,145 240,145 360,200 S600,255 720,200 S960,145 1080,200 S1320,255 1440,200 S1680,145 1800,200 S2040,255 2160,200 S2400,145 2520,200 S2760,255 2880,200 L2880,560 L0,560 Z"/>
          <path fill="none" stroke="#E84B1F" strokeOpacity="0.12" strokeWidth="1.25" d="M0,200 C120,145 240,145 360,200 S600,255 720,200 S960,145 1080,200 S1320,255 1440,200 S1680,145 1800,200 S2040,255 2160,200 S2400,145 2520,200 S2760,255 2880,200"/></svg>
        </div></div>
        <div className="hero-waves__layer hero-waves__layer--front"><div className="hero-waves__scroll">
          <svg viewBox="0 0 2880 560" preserveAspectRatio="none"><defs><linearGradient id="hwg-front" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#F0EBDD" stopOpacity="0.05"/><stop offset="1" stopColor="#F0EBDD" stopOpacity="0"/></linearGradient></defs>
          <path fill="url(#hwg-front)" d="M0,215 C160,160 320,160 480,215 S800,270 960,215 S1280,160 1440,215 S1760,270 1920,215 S2240,160 2400,215 S2720,270 2880,215 L2880,560 L0,560 Z"/></svg>
        </div></div>
      </div>
      <div className="hero-inner">
        <div>
          <div className="hero-eyebrow">
            <span className="sq"></span>
            <span>§ Featured Work <span className="fade">/ YBS Digital</span></span>
          </div>
          <h1 className="hero-title">
            YBS Digital<span className="accent">.</span>
          </h1>
          <p className="hero-sub">
            The marketing site I built for YBS Digital, a digital agency in India.
          </p>
          <div className="hero-links">
            <a className="hero-link" href="#">Visit the site →</a>
          </div>
        </div>
        <div className="hero-visual" aria-hidden="true">
          <div className="hero-browser">
            <div className="hero-browser-bar">
              <span className="d"></span><span className="d"></span><span className="d"></span>
              <span className="url">ybsdigital.com</span>
            </div>
            <div className="hero-browser-body">
              <video autoPlay muted loop playsInline poster="screenshots/01-ybs-check.png">
                <source src="cursor-demo.webm" type="video/webm" />
              </video>
            </div>
          </div>
          <div className="chroma-cursor-float">
            <span className="ring"></span>
            <span className="dot"></span>
          </div>
          <div className="hero-cursor-callout">
            <span className="dot"></span>
            <span>Chromatic cursor · GSAP</span>
            <span className="line"></span>
          </div>
        </div>
      </div>
    </section>
  );
}

function BriefShot() {
  return (
    <div className="brief-shot">
      <div className="shot-frame">
        <div className="shot-bar">
          <span className="shot-d"></span><span className="shot-d"></span><span className="shot-d"></span>
          <span className="shot-url">ybs.digital</span>
        </div>
        <div className="shot-body">
          <video autoPlay muted loop playsInline poster="screenshots/01-ybs-check.png">
            <source src="ybs-overview.webm" type="video/webm" />
          </video>
        </div>
      </div>
      <div className="shot-cap">
        <span>Fig. 01 — Homepage motion overview</span>
        <span>Next.js 16 · GSAP · Lenis · 14 pages</span>
      </div>
    </div>
  );
}

function Part({ id, n, tag, title }) {
  return (
    <section className="part" id={id}>
      <div className="part-inner">
        <div className="part-numeral">{n}</div>
        <div className="part-meta">
          <div className="part-tag"><span className="sq"></span>{tag}</div>
          <h2 className="part-title">{title}</h2>
          <div className="part-rule"></div>
        </div>
      </div>
    </section>
  );
}

function Brief() {
  return (
    <section className="sect">
      <div className="sect-inner">
        <div className="brief-media">
          <div className="sect-prose">
            <p className="lead">YBS Digital is a digital agency in Pune. Their pitch sells premium. The old site didn't.</p>
            <p>Every templated agency site looks like every other templated agency site. The hero is too vague to be specific. The motion is too predictable to be felt. The grid is too obedient to be a position. The buyer reads it as <span className="a">competence without conviction</span> and moves on.</p>
            <p>The brief: build a site where the first six seconds say something only YBS could say. <span className="ac">Dark canvas, two brand colours, motion as the differentiator</span>, and lead capture that earns its place.</p>

            <div className="pull">
              <p>"We needed a site that did the heavy lifting in the first six seconds. Sanket's build does that without the gimmicks most agency sites lean on."</p>
              <cite>— Sakshi · Founder, YBS Digital</cite>
            </div>

            <p>Eight weeks. Four design iterations. The site shipped on Next.js 16 with GSAP for motion choreography, Lenis for smooth scroll, and Tailwind 4 for tokens. Bebas for display, Montserrat for body. Fourteen pages from homepage to blog.</p>
          </div>
          <BriefShot />
        </div>
      </div>
    </section>
  );
}

function DesignLanguage() {
  const cells = [
    {
      h: "01 · Palette",
      t: "Dark canvas, two brand colours.",
      d: "Black isn't moody — it's the absence of compromise. Yellow signals confidence. Vermillion signals urgency.",
      vis: (
        <div className="palette">
          <span className="p1"><em>#07070a</em></span>
          <span className="p2"><em>#FEC602</em></span>
          <span className="p3"><em>#E84B1F</em></span>
        </div>
      ),
    },
    {
      h: "02 · Type",
      t: "Bebas + Montserrat.",
      d: "Display weight for presence. Body workhorse for rhythm. Editorial italic for emphasis.",
      vis: (
        <div className="specimen">
          <span className="a">Aa</span>
          <span className="b">Aa Bb Cc — body voice</span>
          <span className="meta">BEBAS NEUE · MONTSERRAT · INSTRUMENT SERIF</span>
        </div>
      ),
    },
    {
      h: "03 · Grid",
      t: "Editorial, not template.",
      d: "Wide gutters, asymmetric columns, decision-driven margins. The grid reads like a document, not a builder.",
      vis: <div className="grid-vis"></div>,
    },
    {
      h: "04 · Density",
      t: "Whitespace as confidence.",
      d: "Sparse where it counts, dense where the proof lives. Reader is never asked to scan, only to read.",
      vis: (
        <div className="density-bars">
          <span className="x"></span><span className="y"></span><span className="z"></span>
        </div>
      ),
    },
  ];
  return (
    <section className="sect">
      <div className="sect-inner">
        <div className="sect-prose">
          <p className="lead">The system reads like an editorial publication. The buyer registers credibility before they register what's for sale.</p>
        </div>
        <div className="dl">
          {cells.map(c => (
            <div className="dl-cell" key={c.h}>
              <div className="dl-h">{c.h}</div>
              <h3 className="dl-t">{c.t}</h3>
              <p className="dl-d">{c.d}</p>
              <div className="dl-vis">{c.vis}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Motion() {
  const items = [
    {
      n: "M01",
      t: "Parallax depth",
      d: "Photographs on case study covers and hero imagery drift at a slower rate than the text around them. The eye reads it as depth — the photo lives at a different plane than the headline.",
      stage: (
        <div className="motion-stage parallax">
          <div className="parallax-demo" aria-hidden="true">
            <div className="parallax-stage">
              <div className="parallax-col" data-lbl="Photo · 0.6×">
                <div className="parallax-track parallax-photo-track">
                  <div className="px-photo"></div>
                  <div className="px-photo"></div>
                  <div className="px-photo"></div>
                  <div className="px-photo"></div>
                </div>
              </div>
              <div className="parallax-col" data-lbl="Text · 1.0×">
                <div className="parallax-track parallax-text-track">
                  <span className="px-line heading" style={{ width: "72%" }}></span>
                  <span className="px-line" style={{ width: "82%" }}></span>
                  <span className="px-line" style={{ width: "76%" }}></span>
                  <span className="px-line" style={{ width: "68%" }}></span>
                  <span className="px-line" style={{ width: "58%" }}></span>
                  <span className="px-line heading" style={{ width: "70%" }}></span>
                  <span className="px-line" style={{ width: "80%" }}></span>
                  <span className="px-line" style={{ width: "74%" }}></span>
                  <span className="px-line" style={{ width: "66%" }}></span>
                  <span className="px-line" style={{ width: "56%" }}></span>
                  {/* second half — identical pattern for seamless loop */}
                  <span className="px-line heading" style={{ width: "72%" }}></span>
                  <span className="px-line" style={{ width: "82%" }}></span>
                  <span className="px-line" style={{ width: "76%" }}></span>
                  <span className="px-line" style={{ width: "68%" }}></span>
                  <span className="px-line" style={{ width: "58%" }}></span>
                  <span className="px-line heading" style={{ width: "70%" }}></span>
                  <span className="px-line" style={{ width: "80%" }}></span>
                  <span className="px-line" style={{ width: "74%" }}></span>
                  <span className="px-line" style={{ width: "66%" }}></span>
                  <span className="px-line" style={{ width: "56%" }}></span>
                </div>
              </div>
            </div>
            <div className="parallax-demo-meta">
              <span><span className="ac">●</span> Photo 0.6× · Text 1.0×</span>
              <span>ParallaxImage · GSAP</span>
            </div>
          </div>
        </div>
      ),
    },
    {
      n: "M02",
      t: "Magnetic CTAs",
      d: "Two things happen at once. Cursor grows 4× over interactive elements. Primary buttons subtly pull toward the cursor within a threshold radius. Both via GSAP.",
      stage: (
        <div className="motion-stage magnetic">
          <div className="magnetic-demo" aria-hidden="true">
            <div className="magnetic-stage">
              <div className="btn">Get started →</div>
              <span className="magnetic-cursor"><span className="ring"></span><span className="dot"></span></span>
            </div>
            <div className="magnetic-demo-meta">
              <span><span className="ac">●</span> dot 4× · ring 2.5×</span>
              <span>button pull · threshold radius</span>
            </div>
          </div>
        </div>
      ),
    },
    {
      n: "M03",
      t: "Chromatic cursor",
      d: "Dot tracks position, ring lags with mix-blend difference. The cursor inverts whatever surface it crosses. Brand-yellow source, black canvas, vermillion echo.",
      stage: (
        <div className="motion-stage chroma">
          <div className="chroma-demo" aria-hidden="true">
            <div className="chroma-stage">
              <div className="chroma-band band-dark">
                <span className="chroma-band-label">On #0A0A0A</span>
                <span className="chroma-pair pos-a"><span className="ring"></span><span className="dot"></span></span>
                <span className="chroma-state">appears yellow</span>
              </div>
              <div className="chroma-band band-yellow">
                <span className="chroma-band-label dark">Over #FEC602</span>
                <span className="chroma-pair pos-b"><span className="ring"></span><span className="dot"></span></span>
                <span className="chroma-state dark">inverts to dark blue</span>
              </div>
              <div className="chroma-band band-photo">
                <span className="chroma-band-label">Over a photograph</span>
                <span className="chroma-pair pos-c"><span className="ring"></span><span className="dot"></span></span>
                <span className="chroma-state">shifts continuously</span>
              </div>
            </div>
            <div className="chroma-demo-meta">
              <span><span className="ac">●</span> dot 14px · ring 28px</span>
              <span>echo via GSAP lag</span>
            </div>
          </div>
        </div>
      ),
    },
    {
      n: "M04",
      t: "Scroll reveals",
      d: "13 named GSAP timelines, each tied to a ScrollTrigger. Reduced-motion variants registered for every one. No reveal without intent.",
      stage: (
        <div className="motion-stage scroll">
          <div className="scroll-demo" aria-hidden="true">
            <div className="scroll-stage">
              <span className="scroll-line thick accent"></span>
              <span className="scroll-line"></span>
              <span className="scroll-line"></span>
              <span className="scroll-line thick"></span>
              <span className="scroll-line"></span>
              <span className="scroll-line"></span>
              <span className="scroll-line accent"></span>
              <span className="scroll-line"></span>
              <span className="scroll-line thick"></span>
              <span className="scroll-line"></span>
              <span className="scroll-line"></span>
              <span className="scroll-line accent"></span>
              <span className="scroll-line"></span>
              <span className="scroll-line"></span>
            </div>
            <div className="scroll-demo-meta">
              <span><span className="ac">●</span> 13 timelines · 14 reveals</span>
              <span>ScrollTrigger · reduced-motion</span>
            </div>
          </div>
        </div>
      ),
    },
  ];
  return (
    <section className="sect">
      <div className="sect-inner">
        <div className="sect-prose">
          <p className="lead">Motion is the differentiator on this site. Not as decoration — as the signal that says this team builds with intent.</p>
        </div>
        <div className="motion">
          {items.map(i => (
            <div className="motion-cell" key={i.n}>
              <span className="motion-num">{i.n}</span>
              <h3 className="motion-t">{i.t}</h3>
              <p className="motion-d">{i.d}</p>
              {i.stage}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pages() {
  const gallery = [
    { src: "screenshots/ybs-after-services.png",     t: "Services that transform", k: "01" },
    { src: "screenshots/ybs-after-casestudies.png",  t: "Case studies index",      k: "02" },
    { src: "screenshots/ybs-after-blog.png",         t: "Insights · blog",         k: "03" },
    { src: "screenshots/ybs-after-testimonials.png", t: "Testimonials",            k: "04" },
  ];
  return (
    <section className="sect">
      <div className="sect-inner">
        <div className="sect-prose">
          <p className="lead">The brief asked for premium. Here is how that landed across fourteen pages, from the old site to the new.</p>
        </div>

        <div className="ba">
          <div className="ba-eyebrow">Before / After</div>
          <h3 className="ba-headline">The old site sold competence. The new site sells conviction.</h3>
          <div className="ba-pair">
            <div>
              <div className="ba-frame before">
                <div className="ba-tag">Before · 2025</div>
                <div className="ba-bar">
                  <span className="d"></span><span className="d"></span><span className="d"></span>
                  <span className="url">ybsdigital.com</span>
                </div>
                <div className="ba-body">
                  <img src="screenshots/ybs-before-hero.png" alt="YBS Digital — old site, homepage hero" />
                </div>
              </div>
              <div className="ba-cap">
                <span><span className="lbl">Template stack</span></span>
                <span>Pre-rebuild · 2025</span>
              </div>
            </div>
            <div>
              <div className="ba-frame after">
                <div className="ba-tag">After · 2025</div>
                <div className="ba-bar">
                  <span className="d"></span><span className="d"></span><span className="d"></span>
                  <span className="url">ybsdigital.com</span>
                </div>
                <div className="ba-body">
                  <img src="screenshots/ybs-after-hero.png" alt="YBS Digital — new site, homepage hero" />
                </div>
              </div>
              <div className="ba-cap">
                <span><span className="lbl">Next.js 16 · GSAP · Lenis</span></span>
                <span>Live · 8 weeks</span>
              </div>
            </div>
          </div>
        </div>

        <div className="gallery">
          <div className="gallery-eyebrow">In pictures · 4 moments</div>
          <h3 className="gallery-headline">A walk through the rebuilt site, section by section.</h3>
          <div className="gallery-grid">
            {gallery.map(g => (
              <div className="gallery-item" key={g.k}>
                <div className="gallery-thumb">
                  <img src={g.src} alt={g.t} loading="lazy" />
                </div>
                <div className="gallery-cap">
                  <span className="t">{g.t}</span>
                  <span>{g.k}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Closer() {
  return (
    <section className="closer" id="contact">
      <div className="closer-inner">
        <div className="closer-eyebrow"><span className="sq"></span>What's next</div>
        <h2>If a templated stack is what's killing your pitch, this is what replaces it.</h2>
        <a className="closer-cta" href="#"><span>See YBS live</span><span className="arr">→</span></a>
      </div>
      <div className="more">
        <div className="more-head"><span className="sq"></span>More case studies</div>
        <div className="more-grid">
          <a className="more-card" href="Woofadaar.html">
            <div className="more-k">Case 01 · Product</div>
            <h3>Woofadaar <span className="a">— India's dog parent community.</span></h3>
            <div className="more-arr">Read the case →</div>
          </a>
          <a className="more-card" href="case-editorial-storefront.html">
            <div className="more-k">Case 03 · D2C e-commerce</div>
            <h3>Pet wellness brand <span className="a">— an editorial storefront.</span></h3>
            <div className="more-arr">Read the case →</div>
          </a>
          <a className="more-card" href="case-launch-site.html">
            <div className="more-k">Case 04 · Luxury residential</div>
            <h3>Luxury high-rise <span className="a">— a launch site that converts.</span></h3>
            <div className="more-arr">Read the case →</div>
          </a>
        </div>
        <a className="more-all" href="featured-work-night.html">See all featured work →</a>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="ft">
      <span>Sanket Chitnis · 2025</span>
      <span>Direction B v2 — Editorial · with media</span>
    </footer>
  );
}

function Page() {
  return (
    <>
      <Nav />
      <Hero />
      <Part id="p1" n="01" tag="Part 01 · The Brief" title={<>The brief was simple. The <span className="a">execution</span> wasn't.</>} />
      <Brief />
      <Part id="p2" n="02" tag="Part 02 · Design Language" title={<>System reads like a <span className="a">publication</span>.</>} />
      <DesignLanguage />
      <Part id="p3" n="03" tag="Part 03 · Motion" title={<>Motion is the <span className="a">differentiator</span>.</>} />
      <Motion />
      <Part id="p4" n="04" tag="Part 04 · The work" title={<>From templated to <span className="a">unmistakable</span>.</>} />
      <Pages />
      <Closer />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Page />);