import Link from "next/link";
export default function Services() {
  return (
<>
  <section className="ux-project-hero">
    <div className="container">
      {/* center content */}
      <div className="ux-project-content text-center">
        <h1 className="ux-project-title">
          We Don't Offer Services. <br />
          We Build Systems.
        </h1>
        <p className="ux-project-subtitle">
          Each vertical is designed to scale brands, revenue, and operations —{" "}
          <br />
          not just deliver assets.
        </p>
      </div>
      <div className="ux-hero-actions">
        <Link href="/digital_platform" className="btn ux-btn-primary">
          View Digital Platforms
          <span className="ux-btn-icon">
            <img src="assets/images/arrowbuttonwhite.svg" alt="" />
          </span>
        </Link>
        <Link href="/brand-architecture" className="btn ux-btn-secondary">
          Explore Brand Systems →
        </Link>
      </div>
    </div>
  </section>
  <section className="systems-section">
    <div className="container systems-wrapper">
      {/* LEFT (STICKY) */}
      <div className="systems-left">
        <p className="small-label">Systems We Build</p>
        <h2>Engineered for measurable growth.</h2>
        <p className="desc">
          We don’t just deliver assets. We build interlocked systems designed to
          scale your operations and revenue.
        </p>
      </div>
      {/* RIGHT (CARDS) */}
      <div className="systems-right">
        {/* CARD 1 */}
        <div className="system-card light">
          <img src="assets/images/Digital.svg" alt="" />
          <h4>Digital Platforms &amp; Experience Architecture</h4>
          <p>
            We design and build high-performance digital platforms structured
            for conversion, scale, and integration.
          </p>
          <span>Includes:</span>
          <ul>
            <li>UX architecture</li>
            <li>Scalable CMS builds</li>
            <li>SaaS integrations</li>
            <li>Conversion systems</li>
          </ul>
          <Link href="/digital_platform">
  View Digital Platforms →
</Link>
        </div>
        {/* CARD 2 (DARK) */}
        <div className="system-card dark">
          <img src="assets/images/Brand.svg" alt="" />
          <h4>Brand Architecture &amp; Identity Systems</h4>
          <p>
            We design brands as structured systems — from positioning to
            scalable visual identity.
          </p>
          <span>Includes:</span>
          <ul>
            <li>Positioning</li>
            <li>Messaging frameworks</li>
            <li>Identity design</li>
            <li>Brand guidelines</li>
          </ul>
          <Link href="/brand_architecture">
  Explore Brand Systems →
</Link>
        </div>
        {/* CARD 3 */}
        <div className="system-card light">
          <img src="assets/images/Campaign.svg" alt="" />
          <h4>Campaign Strategy &amp; Performance Systems</h4>
          <p>Campaign thinking engineered for measurable growth, not noise.</p>
          <span>Includes:</span>
          <ul>
            <li>Campaign architecture</li>
            <li>Creative direction</li>
            <li>Performance funnel systems</li>
            <li>Paid creative frameworks</li>
          </ul>
          <Link href="/campaign_strategy">View Platform Systems →</Link>
        </div>
        {/* CARD 4 (DARK) */}
        <div className="system-card dark">
          <img src="assets/images/Content.svg" alt="" />
          <h4>Content, Motion &amp; Story Systems</h4>
          <p>
            Narrative-driven content structured to build consistency and
            velocity.
          </p>
          <span>Includes:</span>
          <ul>
            <li>Video systems</li>
            <li>Motion design</li>
            <li>Social content engines</li>
            <li>Editorial frameworks</li>
          </ul>
          <Link href="/content_motion">View Platform Systems →</Link>
        </div>
        {/* CARD 5 (GREEN) */}
        <div className="system-card highlight">
          <img src="assets/images/AI-Powered.svg" alt="" />
          <h4>AI-Powered Production &amp; Automation</h4>
          <p>
            We integrate intelligent workflows to increase speed, scale, and
            precision.
          </p>
          <span>Includes:</span>
          <ul>
            <li>Automation frameworks</li>
            <li>AI-assisted production</li>
            <li>Workflow optimization</li>
            <li>Toolchain integration</li>
          </ul>
          <Link href="/ai_powered">View Platform Systems →</Link>
        </div>
      </div>
    </div>
  </section>
  <section className="connect-section">
    <div className="container">
      {/* HEADING */}
      <h2>How Everything Connects</h2>
      <p className="subtitle">
        We design and build high-performance digital platforms structured for
        conversion, scale, and integration.
      </p>
      {/* FLOW */}
      <div className="connect-flow">
        <div className="flow-item">
          <div className="icon">
            <img src="assets/images/Brand1.png" alt="" />
          </div>
          <span>Brand</span>
        </div>
        <div className="arrow">
          <img src="assets/images/Everything.svg" alt="" />
        </div>
        <div className="flow-item">
          <div className="icon">
            <img src="assets/images/Platform.svg" alt="" />
          </div>
          <span>Platform</span>
        </div>
        <div className="arrow">
          <img src="assets/images/Everything.svg" alt="" />
        </div>
        <div className="flow-item">
          <div className="icon">
            <img src="assets/images/Campaign1.svg" alt="" />
          </div>
          <span>Campaign</span>
        </div>
        <div className="arrow">
          <img src="assets/images/Everything.svg" alt="" />
        </div>
        <div className="flow-item">
          <div className="icon">
            <img src="assets/images/content1.svg" alt="" />
          </div>
          <span>Content</span>
        </div>
        <div className="arrow">
          <img src="assets/images/Everything.svg" alt="" />
        </div>
        <div className="flow-item">
          <div className="icon">
            <img src="assets/images/Automation.png" alt="" />
          </div>
          <span>Automation</span>
        </div>
      </div>
      {/* BOTTOM TEXT */}
      <p className="bottom-text">
        Our systems are designed to interlock. Each strengthens the next.
      </p>
    </div>
  </section>
</>

  );
}