export default function About() {
  const beliefData = [
    {
      title: "Ideas must survive scale",
      desc: "A strong concept doesn't break when applied across formats, platforms, or timezones. It adapts without dilution.",
      icon: "bi-layers",
    },
    {
      title: "Design must justify itself",
      desc: "Every decision has a reason. We don't chase trends or add complexity for its own sake. Form follows function always.",
      icon: "bi-vector-pen",
    },
    {
      title: "AI is leverage, not identity",
      desc: "We use AI to accelerate execution, not replace judgment. Technology amplifies structured thinking—it doesn't create it.",
      icon: "bi-cpu",
      highlight: true,
    },
    {
      title: "Systems beat style",
      desc: "A beautiful website that can't be updated is a liability. We build for longevity, not just launch day.",
      icon: "bi-columns-gap",
    },
  ];

  return (
    <>
      {/* HERO */}
      <section className="ux-project-hero">
  <div className="container">

    <div className="ux-project-content text-center">
      <h1 className="ux-project-title" data-aos="fade-up">
        We Build With Structure.
      </h1>

      <p
        className="ux-project-subtitle"
        data-aos="fade-up"
        data-aos-delay="120"
      >
        AAideA is a boutique systems-led creative studio for operators who need
        more than aesthetic polish—they need scalable execution.
      </p>
    </div>

    {/* 🔥 IMAGE ROW */}
    <div className="hero-images row justify-content-center mt-5 g-4">

      <div className="col-lg-4 col-md-6">
        <div className="hero-img-box">
          <img src="assets/images/structure1.png" alt="Team Work" />
        </div>
      </div>

      <div className="col-lg-4 col-md-6">
        <div className="hero-img-box hero-img-boxup">
          <img src="assets/images/structure2.png" alt="Office" />
        </div>
      </div>

      <div className="col-lg-4 col-md-6">
        <div className="hero-img-box">
          <img src="assets/images/structure3.png" alt="Collaboration" />
        </div>
      </div>

    </div>

  </div>
</section>

      {/* PHILOSOPHY */}
      <section className="philosophy-section py-5">
        <div className="container">
          <div className="row align-items-center g-5">
            
            <div className="col-lg-6">
              <div className="image-box">
                <img
                  src="assets/images/intersection.png"
                  alt="Philosophy"
                  className="img-fluid"
                />
              </div>
            </div>

            <div className="col-lg-6">
              <p className="ux-section-label">Philosophy</p>

              <h2 className="main-heading">
                We exist at the intersection of strategy, design, and execution.
                Not as separate phases—but as a single disciplined approach.
              </h2>

              <p className="desc mt-3">
                Too Many Agencies Deliver Beautiful Work That Doesn't Scale.
                Too Many Consultancies Deliver Strategies That Never Ship. We Do Both.
              </p>

              <p className="desc">
                Our Clients Don't Need Hand-Holding. They Need Clarity, Structure,
                And Speed—Without Sacrificing Taste Or Long-Term Thinking.
              </p>
            </div>

          </div>
        </div>
      </section>

      {/* ✅ BELIEF SECTION (ADDED HERE) */}
      <section className="belief-section">
        <div className="container">
          <h2 className="section-title mb-5">What We Believe</h2>

          <div className="row g-4">
            {beliefData.map((item, i) => (
              <div className="col-lg-3 col-md-6" key={i}>
                <div className={`belief-card ${item.highlight ? "active" : ""}`}>
                  
                  <div className="icon-box">
                  <img
            src="assets/images/Ideasabout.svg" 
            alt="Global"
            className="img-fluid"
          />  
                  </div>

                  <h5>{item.title}</h5>
                  <p>{item.desc}</p>

                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="working-section">
  <div className="container">
  <div className="displayflexhead" style={{ width: "100%" }}>
    <p className="ux-section-label" style={{ width: "18%" }}>Working Model</p>

    <h2 className="main-heading">
      We operate lean. Senior-led execution. No bloated teams.<br />
      No outsource chaos.
    </h2>
    </div>
    <div className="row g-4">

      {/* CARD 1 */}
      <div className="col-lg-4">
        <div className="working-card">
          <span className="number">01</span>
          <p>
            Every project is led by senior practitioners—not delegated to junior
            teams or external freelancers. You work directly with the people
            building your brand.
          </p>
        </div>
      </div>

      {/* CARD 2 */}
      <div className="col-lg-4">
        <div className="working-card">
          <span className="number">02</span>
          <p>
            We don't scale headcount. We scale systems. This means faster
            timelines, clearer communication, and consistent quality from
            concept through deployment.
          </p>
        </div>
      </div>

      {/* CARD 3 */}
      <div className="col-lg-4">
        <div className="working-card">
          <span className="number">03</span>
          <p>
            Small teams move faster. Less bureaucracy. More accountability.
            Better outcomes.
          </p>
        </div>
      </div>

    </div>

  </div>
</section>
<section className="global-section py-5">
  <div className="container">
    <div className="row align-items-center g-5">

      {/* LEFT CONTENT */}
      <div className="col-lg-6">

        <p className="small-title">Global Outlook</p>

        <h2 className="main-heading">
          Built for global decision-makers.
        </h2>

        <p className="desc mt-3">
          We work with operators across industries and geographies—from
          venture-backed startups to established brands entering new markets.
          Location doesn’t limit execution.
        </p>

        <div className="highlight-box mt-4">
        
          <span>
          <img
            src="assets/images/buildaboiticon.svg" 
            alt="Global"
            className="img-fluid"
          />    Remote-first. Timezone-flexible. Outcome-focused.
          </span>
        </div>

      </div>

      {/* RIGHT IMAGE */}
      <div className="col-lg-6">
        <div className="image-box">
          <img
            src="assets/images/decision.png" 
            alt="Global"
            className="img-fluid"
          />
        </div>
      </div>

    </div>
  </div>
</section>

<section className="who-section ">
  <div className="container">
    <div className="row align-items-center g-5">

      {/* LEFT IMAGE */}
      <div className="col-lg-6">
        <div className="who-image">
          <img
            src="assets/images/Whoabout.png" 
            alt="Team"
            className="img-fluid"
          />
        </div>
      </div>

      {/* RIGHT CONTENT */}
      <div className="col-lg-6">

        <h2 className="who-title">Who We Work With</h2>

        <p className="who-desc">
          Founders building brands that need to scale without losing coherence.
        </p>

        <p className="who-desc">
          Operators who move fast but think long-term—execution speed matters,
          but structure matters more.
        </p>

        <p className="who-desc">
          Companies entering new markets or repositioning existing offerings—
          where clarity is the competitive advantage.
        </p>

        <p className="who-muted mt-4">
          If you value noise over signal, we’re not the right fit.
        </p>

        <p className="who-muted">
          If you need cheap and fast over structured and right, look elsewhere.
        </p>

      </div>

    </div>
  </div>
</section>






    </>
  );
}