import Link from "next/link";

export default function Campaign() {
    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">Campaigns Built To Perform</h1>
        <p className="ux-project-subtitle">
          We design campaign systems that drive measurable growth, not temporary
          attention.
        </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">
            Most Campaigns Look Impressive But Lack Structure
          </h2>
          <p className="ux-growth-subtitle">They fail because:</p>
          <div className="row">
            <div className="col-md-6">
              <ul className="ux-growth-list">
                <li>Messaging doesn't connect to positioning</li>
                <li>Funnel logic is unclear</li>
              </ul>
            </div>
            <div className="col-md-6">
              <ul className="ux-growth-list">
                <li>Creative isn't built for testing</li>
                <li>Data isn't used to iterate</li>
              </ul>
            </div>
          </div>
          <p className="ux-growth-bottom">
            Attention without performance is wasted spend.
          </p>
        </div>
        {/* Right Image */}
        <div className="col-lg-4">
          <div className="ux-growth-image-box">
            <img src="assets/images/Philosophy.png" alt="Campaign System" />
          </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 build campaigns like structured systems.
          </h2>
        </div>
        <div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
          <p className="ux-section-desc">
            Campaigns Must Be Scalable, Measurable, And Repeatable.
          </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>Campaign Architecture</h4>
            <p>
              Clear objective, defined funnel stages, creative mapped to
              journey.
            </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>Performance-Ready Creative</h4>
            <p>
              Ad structures, messaging variants, testing logic built into the
              design.
            </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>Data-Driven Optimization</h4>
            <p>We track performance and refine creative, not guess.</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>
            Campaign strategy blueprint
          </div>
          <div className="ux-deliver-list">
            <span>02</span>
            Creative direction
          </div>
          <div className="ux-deliver-list">
            <span>03</span>
            Ad creative production
          </div>
          <div className="ux-deliver-list">
            <span>04</span>
            Landing page alignment
          </div>
          <div className="ux-deliver-list">
            <span>05</span>
            Performance funnel mapping
          </div>
          <div className="ux-deliver-list">
            <span>06</span>
            Optimization frameworks
          </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 ad spend, low conversion</h4>
            <span className="ux-mini-title mt-4 d-block">OUTCOME</span>
            <h2>38% lower CPA</h2>
            <p>After restructuring campaign system</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>
</>

    );
  }