/* global React, ChamberChrome */
function About({ onBack }) {
  const photos = window.DARSHAN || [];
  const portrait = photos[2];      // children at the river — feels like the author's view
  const second   = photos[14];     // Ahmedabad dusk
  const third    = photos[19];     // Bundi farmer

  return (
    <div className="chamber chamber-about">
      <ChamberChrome onBack={onBack} num="v." dev="परिचय" en="About" />

      <article className="about-article">
        <header className="about-head">
          <div className="about-eyebrow">— the witness behind the lens —</div>
          <h1 className="about-name">
            <span className="dev">राहुल मालविया</span>
            <span className="en">Rahul Malviya</span>
          </h1>
          <p className="about-tag">photographer · street, travel, documentary, the quiet detail of nature.</p>
        </header>

        <section className="about-section">
          <div className="about-section-img">
            <img src={portrait?.file} alt=""/>
            <span className="about-section-cap">{portrait?.place}</span>
          </div>
          <div className="about-section-body">
            <h2>I.  How I began.</h2>
            <p>
              I started with a Fujifilm X-T200, five years ago, mostly to teach
              myself patience. The camera was a way of not looking away. I had
              been a person who looked away — at strangers, at the slow
              afternoons, at the small dignities of the city — and the camera
              became a polite excuse to stop.
            </p>
            <p>
              Five years later, the camera and I no longer argue. It has taught
              me that there is no such thing as an ordinary moment; there is
              only a moment, and the attention you bring to it.
            </p>
          </div>
        </section>

        <section className="about-section reverse">
          <div className="about-section-img">
            <img src={second?.file} alt=""/>
            <span className="about-section-cap">{second?.place}</span>
          </div>
          <div className="about-section-body">
            <h2>II.  What I work in.</h2>
            <p>
              Street, travel, and documentary photography. I am drawn most
              often to the small detail in nature — the single star before
              the city switches on, the cloud-strata that have been arranging
              themselves all afternoon for a one-minute dusk.
            </p>
            <p>
              I have, in five years, walked nine cities of bhārat in this way.
              Pushkar, Varanasi, Jaisalmer, Udaipur, Indore, Bhopal, Bundi,
              Hampi, Wayanad. And, once, Bagan in Burma — a city that
              taught me a different patience.
            </p>
          </div>
        </section>

        <section className="about-section">
          <div className="about-section-img">
            <img src={third?.file} alt=""/>
            <span className="about-section-cap">{third?.place}</span>
          </div>
          <div className="about-section-body">
            <h2>III.  Why this site.</h2>
            <p>
              This site is a souvenir — not for me, for the world. The
              photographs are so few. They cannot judge me, and they cannot
              represent the country. They are only an organised offering: a
              small temple of mine, opened.
            </p>
            <p>
              If a single frame slows you down for a moment longer than you had
              intended; if a single line of caption stays with you on the
              train home — the archive will have done its small work.
            </p>
          </div>
        </section>

        <section className="about-creed">
          <div className="creed-rule"></div>
          <h2 className="creed-title">a small creed,</h2>
          <ol className="creed-list">
            <li><span className="i">i.</span> <span>kneel when the moment is private.</span></li>
            <li><span className="i">ii.</span> <span>walk the same lane three times if it allows you.</span></li>
            <li><span className="i">iii.</span> <span>do not ask the strangers to smile.</span></li>
            <li><span className="i">iv.</span> <span>thank them with your eyes, not your money.</span></li>
            <li><span className="i">v.</span> <span>the photograph is the receipt, not the journey.</span></li>
          </ol>
        </section>

        <section className="about-kit">
          <div className="kit-rule"></div>
          <h2 className="kit-title">किट · what I carry.</h2>
          <div className="kit-grid">
            <div><b>Body</b><span>Fujifilm X-T200</span></div>
            <div><b>Glass</b><span>XF 23mm f/2 · XF 56mm f/1.2</span></div>
            <div><b>Notebook</b><span>Muji A6, plain</span></div>
            <div><b>Pen</b><span>Pilot Hi-Tec C, 0.4</span></div>
            <div><b>Footwear</b><span>open sandals · bare feet, when permitted</span></div>
            <div><b>Patience</b><span>five years and counting</span></div>
          </div>
        </section>

        <footer className="about-foot">
          <div className="rule"></div>
          <div className="about-contact">
            <span className="dev">पत्र</span>
            <a href="mailto:rahul@darshan.archive">rahul@darshan.archive</a>
            <span className="dot">·</span>
            <a href="#">instagram</a>
            <span className="dot">·</span>
            <a href="#">read the journal</a>
          </div>
        </footer>
      </article>
    </div>
  );
}

window.About = About;