// About section: editorial copy + image collage
function About({ onNavigate }) {
  const r1 = useReveal(0.1);
  const r2 = useReveal(0.1);
  return (
    <section className="de-section de-about" id="about">
      <div className="de-pattern-lines" style={{color: 'var(--de-sand)', opacity: 0.4}}></div>

      <div className="de-container de-about__grid">
        <div className="de-about__left" ref={r1}>
          <div className="de-reveal is-in">
            <div className="de-eyebrow">About Digit Estate · Our Vision</div>
            <h2 className="de-about__heading">
              Reflect the spirit of <em>innovation.</em>
            </h2>
            <hr className="de-rule" style={{marginTop: 32, marginBottom: 32}} />
            <p className="de-lead">
              We are an established atelier of architects, designers and engineers,
              shaping residences across Abu Dhabi, Dubai and the wider Gulf.
            </p>
            <p style={{marginTop: 18, color: 'var(--fg-2)'}}>
              In thirteen years of practice we have expanded only in the directions that matter —
              craft, distinctive solutions, and an eye for aesthetic discipline. We believe in bringing
              private visions to life with the patience they deserve.
            </p>
            <p style={{marginTop: 18, color: 'var(--fg-2)'}}>
              Our work redefines the urban skyline with architecture that merges elegance,
              innovation and function — iconic spaces that transcend time.
            </p>
            <div style={{marginTop: 36, display: 'flex', gap: 16, flexWrap: 'wrap'}}>
              <a className="de-btn de-btn--primary" onClick={() => onNavigate('portfolio')}>
                Discover Portfolio <span className="arrow"></span>
              </a>
              <a className="de-link">Our Atelier <Icon name="arrow" size={14} stroke={1.5}/></a>
            </div>
          </div>
        </div>

        <div className="de-about__right" ref={r2}>
          <div className="de-about__image de-about__image--big de-reveal de-clip is-in">
            <div className="de-image-wrap">
              <img src="assets/imagery/living-fireplace.png" alt="Travertine living room with fireplace"/>
            </div>
          </div>
          <div className="de-about__image de-about__image--small de-reveal de-reveal-3 is-in">
            <div className="de-image-wrap">
              <img src="assets/imagery/bedroom-skyline-sunset.png" alt="Master bedroom at sunset"/>
            </div>
          </div>
          <div className="de-about__quote de-reveal de-reveal-4 is-in">
            <Icon name="play" size={14}/>
            <span>Watch the studio film — 2:46</span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;