import Link from "next/link";

export default function Process() {
  return (
  <>
<>
  <section className="ux-project-hero">
    <div className="container">
      {/* center content */}
      <div className="ux-project-content text-center">
        <h1 className="ux-project-title">Structured Execution.</h1>
        <p className="ux-project-subtitle">
          Every project follows a disciplined internal model.{" "}
        </p>
      </div>
    </div>
  </section>
  {/* ===========================
   PROCESS STEP CARD
=========================== */}
  <section className="ux-process-step-section">
    <div className="container">
      <div className="ux-process-step-box">
        {/* TOP */}
        <span className="ux-process-number">01</span>
        <h2 className="ux-process-title">Absorb</h2>
        <p className="ux-process-subtitle">
          Deep dive into research, positioning, clarity.
        </p>
        {/* CONTENT */}
        <div className="ux-process-grid">
          {/* IMAGE */}
          <div className="ux-process-image">
            <img src="assets/images/Absorb.png" alt="" />
          </div>
          {/* RIGHT TEXT */}
          <div className="ux-process-content">
            <div className="ux-process-item">
              <h4>Research &amp; Discovery</h4>
              <p>
                We dissect the problem before designing the solution. Market
                analysis, competitor mapping, audience profiling, and commercial
                constraints all feed into our strategic foundation.
              </p>
            </div>
            <div className="ux-process-item">
              <h4>Positioning</h4>
              <p>
                Clarity beats cleverness. We define the core idea that
                everything else extends from—one narrative that survives scale
                and translation across every surface.
              </p>
            </div>
            <div className="ux-process-item">
              <h4>Strategic Framework</h4>
              <p>
                Commercial logic. Content architecture. Messaging hierarchy. We
                build the invisible structure that makes execution possible.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="ux-process-step-box">
        {/* TOP */}
        <span className="ux-process-number">02</span>
        <h2 className="ux-process-title">Amplify</h2>
        <p className="ux-process-subtitle">
          System building. Design logic. AI acceleration.
        </p>
        {/* CONTENT */}
        <div className="ux-process-grid">
          {/* IMAGE */}
          <div className="ux-process-image">
            <img src="assets/images/Amplify.png" alt="" />
          </div>
          {/* RIGHT TEXT */}
          <div className="ux-process-content">
            <div className="ux-process-item">
              <h4>Design Systems</h4>
              <p>
                We don't create isolated deliverables. We build scalable visual
                languages—typography, color, components, motion—that maintain
                consistency across platforms without creative compromise.{" "}
              </p>
            </div>
            <div className="ux-process-item">
              <h4>Digital Architecture</h4>
              <p>
                Information structure. User flows. Interface logic. Every screen
                is intentional. Every interaction is justified.
              </p>
            </div>
            <div className="ux-process-item">
              <h4>AI-Assisted Iteration</h4>
              <p>
                We leverage AI to accelerate production without sacrificing
                taste. Rapid variations. Content expansion. Format adaptation.
                Speed with structure.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="ux-process-step-box">
        {/* TOP */}
        <span className="ux-process-number">03</span>
        <h2 className="ux-process-title">Activate</h2>
        <p className="ux-process-subtitle">Deployment across formats.</p>
        {/* CONTENT */}
        <div className="ux-process-grid">
          {/* IMAGE */}
          <div className="ux-process-image">
            <img src="assets/images/Activate.png" alt="" />
          </div>
          {/* RIGHT TEXT */}
          <div className="ux-process-content">
            <div className="ux-process-item">
              <h4>Multi-Format Execution</h4>
              <p>
                Website. Campaign assets. Motion. Content. Social. The core idea
                adapts seamlessly to every channel while maintaining structural
                integrity.{" "}
              </p>
            </div>
            <div className="ux-process-item">
              <h4>Distribution Strategy</h4>
              <p>
                Launch planning. Platform optimization. Performance tracking. We
                ensure the work reaches the right audience with maximum impact.
              </p>
            </div>
            <div className="ux-process-item">
              <h4>Ongoing Refinement</h4>
              <p>
                Digital isn't static. We monitor, iterate, and optimize based on
                real-world performance—refining without rebuilding from scratch.{" "}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  {/* TOP CTA */}
  <div className="ux-footer-hero">
    <div className="container">
      <div className="ux-footer-hero-content text-center">
        <p className="ux-section-label">AAideA</p>
        <h2 className="ux-footer-title">
          If the idea is strong, we'll scale it.
        </h2>
        <div className="ux-hero-actions">
          <Link href="/start_project" className="btn ux-btn-primary">
            Start a Project{" "}
            <span className="ux-btn-icon">
              <img src="assets/images/arrowbuttonwhite.svg" alt="" />
            </span>
          </Link>
        </div>
      </div>
    </div>
  </div>
</>

  </>
  );
}