"use client";

const ProcessSteps = () => {
  const data = [
    {
      id: "1",
      icon: "icon-consultation",
      image: "/images/process/1.jpg",
      title: "Your information",
      desc: "WInitial consultation to understand your needs, preferences, and budget.",
    },
    {
      id: "2",
      icon: "icon-design",
      image: "/images/process/2.jpg",
      title: "Co-signer contact information",
      desc: "Financial review and co-signer verification if required.",
    },
    {
      id: "3",
      icon: "icon-wrench",
      image: "/images/process/3.jpg",
      title: "Review Application",
      desc: "Property evaluation and document review with your agent.",
    },
    {
      id: "4",
      icon: "icon-inspection",
      image: "/images/process/4.jpg",
      title: "Payment",
      desc: "Secure transaction processing and deposit handling.",
    },
    {
      id: "5",
      icon: "icon-inspection",
      image: "/images/process/4.jpg",
      title: "Fast Delivery & Project Success",
      desc: "We deliver exactly what you need, when you need it. From your first quote to your final stone, we’re here to make sure your job gets done—on time and on point.",
    },
  ];

  return (
    <section className={`section container process`}>
      <div className="box-info-aside">
        <div
          className="card-group-custom card-group-corporate"
          id="accordion1"
          role="tablist"
          aria-multiselectable="false"
        >
          <article className="card card-custom card-corporate">
            <div className="card-header" id="accordion1-heading-1" role="tab">
              <div className="card-title">
                <a
                  className="card-link"
                  role="button"
                  data-toggle="collapse"
                  href="#accordion1-collapse-1"
                  aria-controls="accordion1-collapse-1"
                  aria-expanded="true"
                >
                  <span>Why should I refer to a MyHome salesperson?</span>
                  <div className="card-arrow"></div>
                </a>
              </div>
            </div>
            <div
              className="collapse show"
              id="accordion1-collapse-1"
              role="tabpanel"
              aria-labelledby="accordion1-heading-1"
              data-parent="#accordion1"
            >
              <div className="card-body">
                <p>
                  A MyHome salesperson is more than just a “sales person.” They act on your behalf as your agent,
                  providing you with advice and guidance and doing a job – helping you buy or sell a home. While it is
                  true they get paid for what they do, so do other professions that provide advice, guidance.
                </p>
              </div>
            </div>
          </article>
          <article className="card card-custom card-corporate">
            <div className="card-header" id="accordion1-heading-2" role="tab">
              <div className="card-title">
                <a
                  className="card-link collapsed"
                  role="button"
                  data-toggle="collapse"
                  href="#accordion1-collapse-2"
                  aria-controls="accordion1-collapse-2"
                  aria-expanded="false"
                >
                  <span>Should I talk with a bank before looking at homes?</span>
                  <div className="card-arrow"></div>
                </a>
              </div>
            </div>
            <div
              className="collapse"
              id="accordion1-collapse-2"
              role="tabpanel"
              aria-labelledby="accordion1-heading-2"
              data-parent="#accordion1"
            >
              <div className="card-body">
                <p>
                  The answer to the question is YES! There are tons of reasons why you should talk with a bank and get
                  pre-approved before looking at homes. First and foremost, talking with a bank before looking at homes
                  can help you understand exactly how much you can afford. There is no reason to look at homes that are
                  listed for $250,000 if you can only afford up to $200,000.
                </p>
              </div>
            </div>
          </article>
          <article className="card card-custom card-corporate">
            <div className="card-header" id="accordion1-heading-3" role="tab">
              <div className="card-title">
                <a
                  className="card-link collapsed"
                  role="button"
                  data-toggle="collapse"
                  href="#accordion1-collapse-3"
                  aria-controls="accordion1-collapse-3"
                  aria-expanded="false"
                >
                  <span>Should I buy or continue to rent?</span>
                  <div className="card-arrow"></div>
                </a>
              </div>
            </div>
            <div
              className="collapse"
              id="accordion1-collapse-3"
              role="tabpanel"
              aria-labelledby="accordion1-heading-3"
              data-parent="#accordion1"
            >
              <div className="card-body">
                <p>
                  Buying a home can be a very solid investment. This being said, renting can also be a better option for
                  some, depending on the circumstances. The current interest rates are incredible. A 30-year FHA
                  mortgage can be locked in at a rate of around 3.5%. Since the interest rates are so low, it actually
                  can be cheaper to pay a mortgage right now than paying rent.
                </p>
              </div>
            </div>
          </article>
          <article className="card card-custom card-corporate">
            <div className="card-header" id="accordion1-heading-4" role="tab">
              <div className="card-title">
                <a
                  className="card-link collapsed"
                  role="button"
                  data-toggle="collapse"
                  href="#accordion1-collapse-4"
                  aria-controls="accordion1-collapse-4"
                  aria-expanded="false"
                >
                  <span>Can I find a rent-to-own property?</span>
                  <div className="card-arrow"></div>
                </a>
              </div>
            </div>
            <div
              className="collapse"
              id="accordion1-collapse-4"
              role="tabpanel"
              aria-labelledby="accordion1-heading-4"
              data-parent="#accordion1"
            >
              <div className="card-body">
                <p>
                  Of course you can, but the probability isn’t very high. The same can be said about a rent-to-own
                  property. A common question from home buyers is whether rent-to-owns exist or whether an owner would
                  consider that option. They are out there, but there are somethings that you need to know before
                  agreeing to a rent-to-own.
                </p>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
};

export default ProcessSteps;
