// sections-about.jsx — About, Reviews, Contact/Footer.
function About() {
  return (
    <section className="sec about" id="about">
      <div className="sec-head">
        <div className="sec-head-l">
          <span className="mono dim">ABOUT</span>
          <h2 className="sec-title"><span className="impact">5+ years</span> <span className="serif-ital">of turning ideas into impact.</span></h2>
        </div>
      </div>

      <div className="about-body">
        <div className="about-portrait">
          <img src="assets/sajjad-portrait.jpg" alt="Muhammed Sajjad" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          <span className="mono dim portrait-cap">Muhammed Sajjad — Sr. Creative Designer</span>
        </div>

        <div className="about-text">
          <p className="about-lede" style={{ width: "800px" }}>Senior Creative Designer with <span className="serif-ital">over five years</span> of regional experience — crafting impactful visual stories across branding, advertising and digital media.</p>
          <p style={{ width: "800px" }}>I combine strategic thinking with bold creativity to deliver design solutions that not only look great but drive real results. Recognised for adaptability, innovation and a strong aesthetic sense, I bring a balance of conceptual depth and visual clarity to every project. Working across diverse markets has sharpened my ability to connect ideas with culture and audience insight.</p>
          <p style={{ width: "800px" }}>For me, design isn't just a profession — it's a mindset. I'm passionate about transforming ideas into experiences that inspire, influence and endure, and always ready to take on challenges that push creative boundaries and make a lasting mark.</p>

          <div className="philo">
            <div className="philo-item"><span className="mono accent-text">01</span><h4>Strategy first</h4><p>Bold creativity grounded in strategic thinking — design that drives real results, not just applause.</p></div>
            <div className="philo-item"><span className="mono accent-text">02</span><h4>Culture &amp; insight</h4><p>Diverse markets sharpen the instinct to connect ideas with culture and audience.</p></div>
            <div className="philo-item"><span className="mono accent-text">03</span><h4>Built to endure</h4><p>Experiences that inspire, influence and last — work that makes a mark and holds up.</p></div>
          </div>
        </div>
      </div>

      <div className="stats">
        {window.STATS.map((s) =>
        <div key={s.l} className="stat"><span className="stat-k impact">{s.k}</span><span className="stat-l mono dim">{s.l}</span></div>
        )}
      </div>

      <div className="timeline">
        <span className="mono dim timeline-label">Experience</span>
        <div className="timeline-rows">
          {window.TIMELINE.map((t) =>
          <div key={t.y} className="timeline-row">
              <span className="mono dim tl-y">{t.y}</span>
              <span className="tl-r">{t.r}</span>
              <span className="serif-ital tl-o">{t.o}</span>
            </div>
          )}
        </div>
      </div>

      <div className="toolkit">
        <div className="toolkit-col">
          <span className="mono dim timeline-label">Toolkit</span>
          <div className="chip-row">{window.TOOLS.map((t) => <span key={t} className="chip">{t}</span>)}</div>
        </div>
        <div className="toolkit-col">
          <span className="mono dim timeline-label">Languages</span>
          <div className="chip-row">{window.LANGUAGES.map((l) => <span key={l} className="chip">{l}</span>)}</div>
        </div>
      </div>
    </section>);

}

function Reviews() {
  return (
    <section className="sec reviews" id="reviews">
      <div className="sec-head">
        <div className="sec-head-l">
          <span className="mono dim">04 — Words from the room</span>
          <h2 className="sec-title"><span className="serif-ital">What it's like</span> <span className="impact">to work with me.</span></h2>
        </div>
      </div>
      <div className="review-grid">
        {window.REVIEWS.map((r, i) =>
        <figure key={i} className="review" style={{ '--ac': window.acColor(r.accent) }}>
            <span className="review-mark serif-ital">“</span>
            <blockquote>{r.quote}</blockquote>
            <figcaption>
              <span className="review-name">{r.name}</span>
              <span className="mono dim">{r.role} · {r.org}</span>
            </figcaption>
          </figure>
        )}
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="sec footer" id="contact">
      <div className="footer-top">
        <span className="mono dim">05 — Get in touch</span>
        <h2 className="footer-head">
          <span className="impact">Let's build the</span><br />
          <span className="serif-ital accent-text">next system.</span>
        </h2>
        <a href={`mailto:${window.CONTACT.email}`} className="footer-mail" data-magnetic data-cursor="email">{window.CONTACT.email}</a>
      </div>
      <div className="footer-grid">
        <div className="footer-col">
          <span className="mono dim">Elsewhere</span>
          <a href={window.CONTACT.linkedin} target="_blank" rel="noopener" data-cursor="link" data-no-transition>LinkedIn</a>
          <a href={window.CONTACT.site} target="_blank" rel="noopener" data-cursor="link" data-no-transition>muhammedsajjad.com</a>
          <a href={`tel:${window.CONTACT.phone.replace(/\s/g, '')}`} data-cursor="link">{window.CONTACT.phone}</a>
          <a href={window.CONTACT.resume} target="_blank" rel="noopener" data-cursor="link" data-no-transition>Resume (PDF)</a>
        </div>
        <div className="footer-col">
          <span className="mono dim">Studio</span>
          <p>Open to select brand, advertising &amp; digital work — freelance or full-time. Based in {window.CONTACT.location}.</p>
        </div>
        <div className="footer-col footer-clock">
          <span className="mono dim">Local</span>
          <span className="mono js-clock" id="footer-clock-val">—</span>
        </div>
      </div>
      <div className="footer-base">
        <span className="footer-mark impact">Muhammed Sajjad</span>
        <span className="mono dim">© 2026 — Dubai, UAE.</span>
      </div>
    </footer>);

}

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