/* global React, useReveal */

window.Cover = function Cover() {
  const ref = useReveal();
  return (
    <section className="cover" id="top" ref={ref}>
      <div className="cover__grid">
        <div className="cover__copy">
          <div className="cover__kicker">
            <span>Analytics-led marketing</span>
            <span>Campaign systems</span>
            <span>Open Summer 2026</span>
          </div>

          <h1 className="cover__title">
            <span className="ln"><span>Simran</span></span>
            <span className="ln"><span><em>Sampat.</em></span></span>
          </h1>

          <p className="cover__lede">
            I turn scattered campaign signals into audience insight, sharper messaging, and measurable operating momentum.
          </p>

          <div className="cover__actions">
            <a href="#journey" className="btn btn--primary">Start the story</a>
            <a href="#cases" className="btn btn--ghost">See the proof</a>
          </div>

          <div className="cover__byline">
            <div><span className="key">Based</span> <strong>Pembroke, North Carolina</strong></div>
            <div><span className="key">From</span> <strong>Bangalore, India</strong></div>
            <div><span className="key">Edge</span> <strong>Creative systems with analytical discipline</strong></div>
            <div><span className="key">Status</span> <strong>Seeking Summer 2026 internships</strong></div>
          </div>
        </div>

        <div className="cover__portrait" aria-label="Portrait of Simran Sampat">
          <img src="assets/simran-portrait-professional.jpg" alt="Simran Sampat" />
          <div className="portrait__plate">
            <span>Portfolio journey</span>
            <strong>Signal to strategy</strong>
          </div>
        </div>
      </div>

      <div className="cover__metrics" aria-label="Selected outcomes">
        <div className="cover__metric">
          <div className="n">+35<sup>%</sup></div>
          <div className="l">Student engagement lift from campaign iteration</div>
        </div>
        <div className="cover__metric">
          <div className="n">+25<sup>%</sup></div>
          <div className="l">Reach expansion through channel-specific messaging</div>
        </div>
        <div className="cover__metric">
          <div className="n">50<em>+</em></div>
          <div className="l">Digital assets created for active teams</div>
        </div>
        <div className="cover__metric">
          <div className="n">05</div>
          <div className="l">Credentials spanning analytics, marketing, and leadership</div>
        </div>
      </div>
    </section>
  );
};