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";
import Features from "./Features";
import Team from "./Team";

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 ? (
                    <>
                      {" "}
                      <a href="#services" className="link-hover-anim ms-2 ms-sm-5 me-2" data-link-animate="y">
                        <span className="link-strong link-strong-unhovered">
                          Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
                        </span>
                        <span className="link-strong link-strong-hovered" aria-hidden="true">
                          Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
                        </span>
                      </a>
                    </>
                  ) : (
                    <>
                      {" "}
                      <Link
                        href={`/slick-about${dark ? "-dark" : ""}`}
                        className="link-hover-anim ms-2 ms-sm-5 me-2"
                        data-link-animate="y"
                      >
                        <span className="link-strong link-strong-unhovered">
                          Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
                        </span>
                        <span className="link-strong link-strong-hovered" aria-hidden="true">
                          Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
                        </span>
                      </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={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"}  bg-scroll`}
        style={{
          backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
        }}
      >
        <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 className="page-section">
            <hr className="mt-0 mb-0" />
          </div>
          <div className="row mb-50 mb-sm-50">
            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
              <h2 className="section-title-small mb-20">Why choose Cochise Oncology?</h2>
              <p className="text-gray 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>
          </div>
          {/* Features Grid */}
          <Features />
          {/* End Features Grid */}
        </div>
      </section>
      <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
      <section
        className={`page-section pb-0 scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} mb-5`}
        id="team"
      >
        <Team />
      </section>
      <section className="page-section pt-0 pb-0 mt-5">
        <div className="container">
          <div
            className={`small-section ${
              dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
            }  ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
          >
            {/* Decoration Circles */}
            <div className="decoration-12" />
            <div className="decoration-13" />
            {/* End Decoration Circles */}
            <div className="row">
              <div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
                <div className="row">
                  <div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
                    <h2 className="section-title-small mb-20">Like our creative works?</h2>
                    <p className="text-gray mb-0">
                      Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
                      vitae lorem in vehicula.
                    </p>
                  </div>
                  <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
                    {onePage ? (
                      <>
                        <a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim">
                          <span>Start a project</span>
                        </a>
                      </>
                    ) : (
                      <>
                        <Link
                          href={`/slick-portfolio${dark ? "-dark" : ""}`}
                          className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
                        >
                          <span>View all works</span>
                        </Link>
                      </>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </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>
      <section className={`page-section ${dark ? "bg-dark-2 light-content" : "bg-gray-light-1"}  overflow-hidden`}>
        <Newsletter />
      </section>
      <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="contact">
        {dark ? <ContactDark /> : <Contact />}
      </section>
    </>
  );
}