import React from "react";

import Facts from "./Facts";
import Service from "./Service";
import Image from "next/image";
import Testimonials from "./Testimonials";
import Blog from "./Blogs/Blog";
import Newsletter from "./Newsletter";
import Contact from "./Contacts/Contact";
import Link from "next/link";
import TestimonialsDark from "./TestimonialsDark";
import ContactDark from "./ContactDark";
import { features4 } from "@/data/features";

export default function homepage({ onePage = false, dark = false }) {
  return (
    <>
      <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
      <section className={`page-section scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="about">
        <div className="container position-relative">
          <div className="row">
            {/* Section Text */}
            <div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
              <div className="w-100 wow fadeInUp">
                <h2 className="section-caption-slick mb-30 mb-sm-20">About Oncology</h2>
                <h3 className="section-title mb-30">Begin your path to healing with Cochise Oncology.</h3>
                <p className="text-gray mb-40">
                  Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We
                  offer personalized cancer care using innovative treatments in our state-of-the-art facility. Take the
                  first step towards comprehensive, patient-focused treatment by scheduling a consultation. Let us
                  listen to your needs, answer your questions, and create a tailored plan for your journey. Fill out our
                  form to connect with our compassionate experts and discover how Cochise Oncology can stand with you in
                  your fight against cancer.
                </p>
                {/* Features List */}
                <div className="row features-list mt-n20 mb-50 mb-sm-30">
                  {/* Features List Item */}
                  {features4.map((feature, index) => (
                    <div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
                      <div className="features-list-icon">
                        <i className="mi-check" />
                      </div>
                      <div className="features-list-text">{feature.text}</div>
                    </div>
                  ))}
                  {/* End Features List Item */}
                </div>
                {/* End Features List */}
                <div className="local-scroll wch-unset">
                  {onePage ? (
                    <>
                      <a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10">
                        <span>Contact us</span>
                      </a>
                    </>
                  ) : (
                    <>
                      <Link
                        href={`/slick-contact${dark ? "-dark" : ""}`}
                        className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
                      >
                        <span>Contact us</span>
                      </Link>
                    </>
                  )}
                  {onePage ? (
                    <></>
                  ) : (
                    <>
                      {" "}
                      <Link href={`/radixact`} className="link-hover-anim ms-2 ms-sm-5 me-2" data-link-animate="y">
                        <div className="link-strong">
                          Find more about Radixact
                          <i className="mi-arrow-right ml-4" aria-hidden="true"></i>
                        </div>
                      </Link>
                    </>
                  )}
                </div>
              </div>
            </div>
            {/* End Section Text */}
            {/* Image */}
            <div className="col-lg-6 d-flex align-items-center">
              <div className="w-100 pe-lg-5">
                <div className="composition-5">
                  <div className="composition-5-decoration opacity-065">
                    <Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
                  </div>
                  <Image
                    src="/assets/images/cochise-welcome.png"
                    alt="Image Description"
                    width={550}
                    height={600}
                    className="wow scaleOutIn"
                    data-wow-offset={200}
                  />
                </div>
              </div>
            </div>
            {/* End Images */}
          </div>
        </div>
      </section>
      <section className={`small-section bg-dark ps-4 ps-lg-0 pe-4 pe-lg-0 position-relative overflow-hidden`}>
        <div className="decoration-12 bg-white" />
        <div className="decoration-13 bg-white" />
        <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center text-white mb-50">
          <h2 className="section-title-small">Why choose Cochise Oncology?</h2>
          <p className="mb-0">
            Here at Cochise Oncology we offer the most up-to-date technology in cancer treatment that rivals the largest
            and most prestigious centers in the country.
          </p>
        </div>
        <Facts />
      </section>
      <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="services">
        <div className="container position-relative">
          <div className="row">
            {/* Left Column */}
            <div className="col-lg-5 mb-md-60 mb-sm-40">
              <h2 className="section-caption-slick mb-30 mb-sm-20">Our Services</h2>
              <h3 className="section-title mb-30">A Cancer Treatment Center of Excellence.</h3>
              <p className="section-descr mb-50 mb-sm-40">
                Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona.
              </p>
              <div className="local-scroll">
                {onePage ? (
                  <>
                    {" "}
                    <a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10">
                      <span>Request a quote</span>
                    </a>
                  </>
                ) : (
                  <>
                    {" "}
                    <Link
                      href={`/slick-contact${dark ? "-dark" : ""}`}
                      className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
                    >
                      <span>Request a quote</span>
                    </Link>
                  </>
                )}
              </div>
            </div>
            {/* End Left Column */}
            {/* Right Column */}
            <Service />
            {/* End Right Column */}
          </div>
        </div>
      </section>
      <section className={`page-section  ${dark ? "bg-dark-1 light-content" : ""} `}>
        {dark ? <TestimonialsDark /> : <Testimonials />}
      </section>
      <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
      <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="blog">
        <div className={`bg-shape-3 ${dark ? "opacity-003" : ""} `}>
          <Image src="/assets/images/demo-slick/bg-shape-3.svg" width={1443} height={644} alt="" />
        </div>
        <Blog />
      </section>
    </>
  );
}