// About + Contact + Footer

function About() {
  const ref = window.useReveal();
  return (
    <section className="section" id="about" aria-label="About Kshitij Verma">
      <div className="container">
        <div className="section-header">
          <span className="section-num">// 04</span>
          <h2 className="section-title">About <span className="accent">/the-human/</span></h2>
          <span className="section-meta">A decade in</span>
        </div>

        <div className="about-grid reveal" ref={ref}>
          <div className="about-portrait">
            <img src="uploads/KshitijVerma.jpeg" alt="Kshitij Verma" />
            <div className="about-portrait-tag">
              KV-01 · <span className="accent">SUBJECT IN FRAME</span>
            </div>
          </div>

          <div className="about-prose">
            <h3>Tech kid, movie kid</h3>
            <p>
              I grew up taking things apart and obsessing over how shots were lit, cut, comped.
              Somewhere between those two, this person showed up. My father wrote and directed his
              own plays, staging and story were always close.
            </p>

            <blockquote>
              "I don't know anything else that excites me to this level. There's a passion to
              create something new every day."
            </blockquote>

            <h3>Post-first director</h3>
            <p>
              I visualise the end product first and reverse-engineer direction from there.
              Creative control over every step, script, shot, comp, colour. Direction is physical;
              post is computer-led. I live in both.
            </p>

            <h3>The thread</h3>
            <p>
              Make things look beautiful. Make things people actually like. Push the rig, the pipeline,
              the format until something new shows up.
            </p>

            <div className="timeline">
              <div className="timeline-item">
                <div className="timeline-year">2010</div>
                <div className="timeline-body">
                  <h4 className="timeline-title">First YouTube channel</h4>
                  <p className="timeline-desc">Teaching post-production fundamentals.</p>
                </div>
              </div>
              <div className="timeline-item">
                <div className="timeline-year">2014</div>
                <div className="timeline-body">
                  <h4 className="timeline-title">First production company</h4>
                  <p className="timeline-desc">Music videos, events, rig &amp; camera experiments.</p>
                </div>
              </div>
              <div className="timeline-item">
                <div className="timeline-year">2017</div>
                <div className="timeline-body">
                  <h4 className="timeline-title">Mumbai · OML · Son of Abish S2</h4>
                  <p className="timeline-desc">AD turned post-supervisor, the creative-tech hybrid lane found me.</p>
                </div>
              </div>
              <div className="timeline-item">
                <div className="timeline-year">2021</div>
                <div className="timeline-body">
                  <h4 className="timeline-title">Future Group · Visual Merchandising</h4>
                  <p className="timeline-desc">Travelled, scaled, found my pace. Needed bigger creative challenges.</p>
                </div>
              </div>
              <div className="timeline-item">
                <div className="timeline-year">Now</div>
                <div className="timeline-body">
                  <h4 className="timeline-title">Direction · Virtual Production · VFX</h4>
                  <p className="timeline-desc">Live VP, real-time CG, post pipelines. Building dreamworlds end-to-end.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const ref = window.useReveal();
  return (
    <section className="contact" id="contact" aria-label="Contact">
      <div className="container">
        <div className="section-header">
          <span className="section-num">// 05</span>
          <h2 className="section-title">Get in <span className="accent">/touch/</span></h2>
          <span className="section-meta">Open · Mumbai → World</span>
        </div>

        <div className="contact-inner reveal" ref={ref}>
          <div>
            <h3 className="contact-headline">
              Got an idea<br/>
              <span className="stroke">that needs</span><br/>
              a <span className="accent">frame?</span>
            </h3>
            <a href="mailto:hello@kshitijverma.in" className="contact-email">
              hello@kshitijverma.in
              <span className="arrow">↗</span>
            </a>
          </div>

          <div className="contact-side">
            <div className="contact-side-row">
              <span className="label">Role</span>
              <span className="value">Director · VFX Sup · VP</span>
            </div>
            <div className="contact-side-row">
              <span className="label">Studio</span>
              <span className="value accent">Doozyworks · co-founder</span>
            </div>
            <div className="contact-side-row">
              <span className="label">Based</span>
              <span className="value">Mumbai, IN</span>
            </div>
            <div className="contact-side-row">
              <span className="label">Status</span>
              <span className="value"><span style={{ color: 'var(--accent)' }}>●</span> Available for select projects</span>
            </div>
            <div className="contact-side-row">
              <span className="label">Best for</span>
              <span className="value">Direction · Live VP · Post pipelines · VFX supervision</span>
            </div>
            <div className="contact-side-row">
              <span className="label">Instagram</span>
              <span className="value">
                <a href="https://www.instagram.com/kprasadverma/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent)', letterSpacing: '0.04em' }}>@kprasadverma ↗</a>
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div>© <span className="accent">2026</span> · Kshitij Verma · Built frame-by-frame</div>
      <div>kshitijverma.in / v.2026</div>
    </footer>
  );
}

Object.assign(window, { About, Contact, Footer });