import Link from "next/link";

export default function AiPowered() {
    return (
<>
  <section className="ux-project-hero ux-project-heropad">
    <div className="container">
      {/* center content */}
      <div className="ux-project-content text-center">
        <h1 className="ux-project-title">
          Intelligent Production. <br /> Built For Speed.
        </h1>
        <p className="ux-project-subtitle">
          We integrate automation and AI workflows to reduce cost, <br />{" "}
          increase output, and maintain precision.
        </p>
      </div>
      <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>
        <Link href="/work" className="btn ux-btn-secondary">
          View Case Studies
        </Link>
      </div>
      <div className="row align-items-center g-5 ux-growth-section">
        {/* Left Content */}
        <div className="col-lg-8">
          <span className="ux-growth-label">Philosophy</span>
          <h2 className="ux-growth-title">Manual Processes Slow Growth</h2>
          <p className="ux-growth-subtitle">Teams waste time on:</p>
          <div className="row">
            <div className="col-md-6">
              <ul className="ux-growth-list">
                <li>Repetitive asset creation</li>
                <li>Inefficient content workflows</li>
              </ul>
            </div>
            <div className="col-md-6">
              <ul className="ux-growth-list">
                <li>Manual resizing and formatting</li>
                <li>Fragmented production tools</li>
              </ul>
            </div>
          </div>
          <p className="ux-growth-bottom">Growth requires velocity.</p>
        </div>
        {/* Right Image */}
        <div className="col-lg-4">
          <div className="ux-growth-image-box">
            <img
              src="assets/images/Intelligent.png"
              alt="Intelligent Production"
            />
          </div>
        </div>
      </div>
    </div>
  </section>
  <section className="ux-approach-section">
    <div className="container">
      <div className="row align-items-end mb-5">
        <div className="col-lg-6">
          <span className="ux-label">Our Approach</span>
          <h2 className="ux-section-title">
            We treat brand as infrastructure.
          </h2>
        </div>
        <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
          <p className="ux-section-desc">
            We Build Intelligent Production Systems.
          </p>
        </div>
      </div>
      <div className="row g-4">
        {/* Card 1 */}
        <div className="col-lg-4 col-md-6">
          <div className="ux-card">
            <div className="ux-card-top">
              <span className="ux-icon">
                <img src="assets/images/Architecture.svg" alt="" />
              </span>
              <span className="ux-num">01</span>
            </div>
            <h4>Workflow Automation</h4>
            <p>Connect tools to eliminate repetitive steps.</p>
          </div>
        </div>
        {/* Card 2 */}
        <div className="col-lg-4 col-md-6">
          <div className="ux-card">
            <div className="ux-card-top">
              <span className="ux-icon">
                <img src="assets/images/Built.svg" alt="" />
              </span>
              <span className="ux-num">02</span>
            </div>
            <h4>AI-Assisted Creation</h4>
            <p>
              Use intelligent generation where speed matters — without
              compromising quality.
            </p>
          </div>
        </div>
        {/* Card 3 */}
        <div className="col-lg-4 col-md-6">
          <div className="ux-card">
            <div className="ux-card-top">
              <span className="ux-icon">
                <img src="assets/images/Designed.svg" alt="" />
              </span>
              <span className="ux-num">03</span>
            </div>
            <h4>Scalable Asset Systems</h4>
            <p>Templates and component libraries built for rapid deployment.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section className="ux-deliver-section">
    <div className="container">
      <h2 className="ux-deliver-title">What We Deliver</h2>
      <div className="row g-5">
        {/* Left List */}
        <div className="col-lg-7">
          <div className="ux-deliver-list active">
            <span>01</span>
            Production workflow audits
          </div>
          <div className="ux-deliver-list">
            <span>02</span>
            Automation setup
          </div>
          <div className="ux-deliver-list">
            <span>03</span>
            AI tool integration
          </div>
          <div className="ux-deliver-list">
            <span>04</span>
            Template systems
          </div>
          <div className="ux-deliver-list">
            <span>05</span>
            Asset libraries
          </div>
          <div className="ux-deliver-list">
            <span>06</span>
            SOP documentation
          </div>
        </div>
        {/* Right Snapshot */}
        <div className="col-lg-5">
          <div className="ux-snapshot-box">
            <small>CASE SNAPSHOT</small>
            <hr />
            <span className="ux-mini-title">CHALLENGE</span>
            <h4>High production cost and turnaround time</h4>
            <span className="ux-mini-title mt-4 d-block">OUTCOME</span>
            <h2>60% faster</h2>
            <p>Output with automation layer</p>
          </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>
</>

    );
  }