import Link from "next/link";

export default function WorkPage() {
    return (
<>
  <section className="ux-project-hero">
    <div className="container">
      {/* center content */}
      <div className="ux-project-content text-center">
        <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Work</h1>
        <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
          Each project begins with one idea. Everything else extends from it.
        </p>
      </div>
      {/* joined users */}
      <div className="ux-joined-box" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
        <div className="ux-avatar-group">
          <img src="assets/images/user1.png" alt="" />
          <img src="assets/images/user2.png" alt="" />
          <img src="assets/images/user3.png" alt="" />
        </div>
        <p>
          100+ people already joined
          <br />
          the AAideA
        </p>
      </div>
    </div>
  </section>
  {/* ===========================
   CASE STUDY ACCORDION
=========================== */}
  <section className="ux-case-section">
    <div className="container">
      <div className="accordion ux-case-accordion" id="uxCaseAccordion">
        {/* ITEM 1 */}
        <div className="accordion-item ux-case-item" data-aos="fade-up" data-aos-duration="1000">
          <h2 className="accordion-header">
            <button
              className="accordion-button collapsed ux-case-btn"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#caseOne"
            >
              <div className="ux-case-head">
                <h3>HVAC</h3>
                <p>
                  Idea: Modernize a legacy service brand into a digital-first
                  lead engine.
                </p>
              </div>
              <div className="ux-case-right">
                <span>
                  Full Case <img src="assets/images/fullcasearrow.svg" alt="" />
                </span>
              </div>
            </button>
          </h2>
          <div
            id="caseOne"
            className="accordion-collapse collapse"
            data-bs-parent="#uxCaseAccordion"
          >
            <div className="accordion-body ux-case-body">
              <div className="ux-case-inner">
                <img src="assets/images/AchievAR.png" className="ux-case-img" />
                <div className="ux-case-grid">
                  <div>
                    <small>Component</small>
                    <strong>Brand Identity</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Website</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Pitch System</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Content Deck</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Demo Motion</strong>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* ITEM 2 OPEN */}
        <div className="accordion-item ux-case-item" data-aos="fade-up" data-aos-delay="150" data-aos-duration="1000">
          <h2 className="accordion-header">
            <button
              className="accordion-button ux-case-btn"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#caseTwo"
            >
              <div className="ux-case-head">
                <h3>AchievAR</h3>
                <p>
                  Idea: Position immersive learning as structured transformation
                  — not novelty tech.
                </p>
              </div>
              <div className="ux-case-right">
                <span>
                  Full Case <img src="assets/images/fullcasearrow.svg" alt="" />
                </span>
              </div>
            </button>
          </h2>
          <div
            id="caseTwo"
            className="accordion-collapse collapse show"
            data-bs-parent="#uxCaseAccordion"
          >
            <div className="accordion-body ux-case-body">
              <div className="ux-case-inner">
                <img src="assets/images/AchievAR.png" className="ux-case-img" />
                <div className="ux-case-grid">
                  <div>
                    <small>Component</small>
                    <strong>Brand Identity</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Website</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Pitch System</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Content Deck</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Demo Motion</strong>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* ITEM 3 */}
        <div className="accordion-item ux-case-item" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
          <h2 className="accordion-header">
            <button
              className="accordion-button collapsed ux-case-btn"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#caseThree"
            >
              <div className="ux-case-head">
                <h3>LynkedUp Pro</h3>
                <p>
                  Idea: Design a verified talent ecosystem that balances trust
                  with scale.
                </p>
              </div>
              <div className="ux-case-right">
                <span>
                  Full Case <img src="assets/images/fullcasearrow.svg" alt="" />
                </span>
              </div>
            </button>
          </h2>
          <div
            id="caseThree"
            className="accordion-collapse collapse"
            data-bs-parent="#uxCaseAccordion"
          >
            <div className="accordion-body ux-case-body">
              <div className="ux-case-inner">
                <img src="assets/images/AchievAR.png" className="ux-case-img" />
                <div className="ux-case-grid">
                  <div>
                    <small>Component</small>
                    <strong>Brand Identity</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Website</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Pitch System</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Content Deck</strong>
                  </div>
                  <div>
                    <small>Component</small>
                    <strong>Demo Motion</strong>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  {/* TOP CTA */}
  <div className="ux-footer-hero">
    <div className="container">
      <div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
        <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>
</>
    );
  }