"use client";
import Counter from "@/components/Counter";
import OfferCard from "@/components/OfferCard";
import { TestimonialSlider2 } from "@/components/TestimonialSlider";
import WellFoodLayout from "@/layout/WellFoodLayout";
import Link from "next/link";
import Slider from "react-slick";
import { sliderProps } from "@/utility/sliderProps";
import HeroBanner from "@/components/home/HeroBanner";
import PopularMenu from "@/components/home/PopularMenu";
import MenuCategory from "@/components/home/MenuCategory";
import BlogSection from "@/components/home/BlogSection";
import { useEffect, useState } from "react";
const page = () => {
  const [reviews, setReviews] = useState([]);
  const [loading, setLoading] = useState(true);
  const [expandedReview, setExpandedReview] = useState(null);

  useEffect(() => {
    async function loadReviews() {
      try {
        const res = await fetch("/api/reviews");
        const data = await res.json();
        const cleaned = (data.reviews || []).filter(r =>
          (r.text || r.description || r.snippet || r.review_text || r.body || r.content) &&
          r.rating >= 4
        );
        setReviews(cleaned);
      } catch (error) {
        console.error("Home: Failed to fetch reviews", error);
      } finally {
        setLoading(false);
      }
    }
    loadReviews();
  }, []);

  const displayedReviews = reviews.length > 0 && reviews.length < 3
    ? [...reviews, ...reviews, ...reviews]
    : reviews;

  function renderStars(rating) {
    return [...Array(5)].map((_, i) => (
      <i key={i} className={`fa fa-star ${i < rating ? "text-warning" : ""}`} style={{ marginRight: '5px' }}></i>
    ));
  }

  function getReviewText(r) {
    return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
  }

  function truncateText(text) {
    return text.length > 150 ? text.substring(0, 150) + "..." : text;
  }

  function getProfileImage(r) {
    const url = r.profile_photo_url || r.author_profile_photo_url || r.user?.thumbnail;
    if (!url) return null;
    return url.startsWith("http") ? url : `https://lh3.googleusercontent.com/${url}`;
  }

  function getInitials(name) {
    if (!name) return "U";
    return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
  }
  return (
    <WellFoodLayout>
      <HeroBanner />

<section className="about-us-area pt-130 rpt-85 pb-100 rpb-70 rel z-1">
  <div className="container">
    <div className="row flex-column-reverse flex-lg-row align-items-center">
      <div className="col-lg-6">
        <div
          className="about-image-part mb-30 rmb-55"
          data-aos="fade-right"
          data-aos-duration={1500}
        >
          <div className="food-review">
            <div className="author">
              <img
                src="/assets/images/home/about.webp"
                alt="Author"
                loading="lazy"
              />
            </div>
            <span className="text">Very good food</span>
          </div>
          <img
            src="/assets/images/home/about.webp"
            alt="About"
            loading="lazy"
          />
          <div
            className="quality-food"
            style={{
              backgroundImage: "url(/assets/images/shapes/about-star.webp)",
            }}
          >
            <span className="for-border" />
            <span className="text">
              quality <br />
              food
            </span>
          </div>
        </div>
      </div>

      <div className="col-lg-6">
        <div
          className="about-us-content"
          data-aos="fade-left"
          data-aos-duration={1500}
        >
          <div className="section-title mb-25">
            <span className="sub-title mb-5">Introduction</span>
            <h2>Our Promise and Moto</h2>
          </div>
          <p>
            We are first generation entrepreneurs and we are establishing this restaurant with the passion and wealth of experience in recreating the delicious foods from our ancestral region in Tamil Nadu.
          </p>
          <p>
            Our Promise and motto is and shall always be to serve fresh and Authentic Quality Food at Reasonable Prices. We shall always be driven by the privilege of what we serve on your plate rather than anything else.
          </p>
          <div className="about-btn-author pt-5 mb-45">
            <Link href="/about" className="theme-btn style-two">
              learn more us <i className="far fa-arrow-alt-right" />
            </Link>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className="about-shapes">
    <div className="shape one">
      <img
        src="/assets/images/home/about-element.webp"
        alt="Shape"
        loading="lazy"
        className="about-shape-img"
      />
    </div>
  </div>
</section>



      <section className="offer-area pb-100 rpb-120 rel z-1">
        <div className="category-banner-area">
          <div className="container">
            <div className="row">
              <div
                className="col-lg-6"
                data-aos="fade-up"
                data-aos-duration={1500}
                data-aos-offset={50}
              >
                <div
                  className="category-banner-item style-five height-100"
                  style={{
                    backgroundImage:
                      "url(/assets/images/home/left-image.webp)",
                  }}
                >
                  {/* <div className="badge">$89</div> */}
                  <span className="price">Exclusive South Indian Cuisine</span>
                  <p className="text-white mb-0">We like to recreate south Indian foods in the traditional style. We have over 125 items inspired by all the South Indian States</p>
                  <Link href="/menu" className="read-more">
                    Explore Menu <i className="far fa-arrow-alt-right" />
                  </Link>
                </div>
              </div>
              <div
                className="col-lg-6"
                data-aos="fade-up"
                data-aos-delay={50}
                data-aos-duration={1500}
                data-aos-offset={50}
              >
                <div
                  className="category-banner-item style-five"
                  style={{
                    backgroundImage:
                      "url(/assets/images/home/right-image-1.webp)",
                  }}
                >
                  <span className="price">Fresh and Tasty</span>
                  <p className="text-white w-50  mb-0">Enjoy our freshly and carefully prepared foods that that will excite your taste buds and take you back home.</p>
                  <Link href="/menu" className="read-more">
                    Explore Menu <i className="far fa-arrow-alt-right" />
                  </Link>
                </div>
                <div
                  className="category-banner-item style-five"
                  style={{
                    backgroundImage:
                      "url(/assets/images/home/right-image-2.webp)",
                  }}
                >
                  <span className="price">Service and Ambience</span>
                  <p className="text-white w-50 mb-0">We promise to serve in a serene and in a welcoming ambience and our exceptional service is guaranteed to all the patrons.</p>
                  <Link href="/menu" className="read-more">
                    Explore Menu <i className="far fa-arrow-alt-right" />
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Offer Area start */}
      <section
        className="offer-area bgc-black pt-160 rpt-100 pb-150 rpb-120 rel z-1"
        style={{
          backgroundImage: "url(/assets/images/background/offer-dot-bg.png)",
          backgroundPosition: "center"
        }}
      >
        <span className="marquee-wrap style-two text-white">
          <span className="marquee-inner left">SETTING A NEW STANDARD FOR SOUTH INDIAN FOOD IN THE REGION…EH</span>
          <span className="marquee-inner left">ACTUALLY IN THIS PART OF THE WORLD</span>
          {/* <span className="marquee-inner left">special deal</span> */}
        </span>
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-6">
              <div
                className="offer-content text-white rmb-55"
                data-aos="fade-left"
                data-aos-delay={50}
                data-aos-duration={1500}
                data-aos-offset={50}
              >
                <img src="/assets/images/offer/delicious.png" alt="Image" loading="lazy" />
                <h2>Home of the Ontario's Biggest Dosa</h2>
                <h3>
                  The Five Feet Dosa
                </h3>
                <p>
                  Presenting the five feet DOSA - No explanation required Five time the Taste / Five times the fun
                </p>
                <Link href="/menu" className="theme-btn">
                  order now <i className="far fa-arrow-alt-right" />
                </Link>
              </div>
            </div>
            <div className="col-lg-6">
              <div
                className="offer-image"
                data-aos="fade-right"
                data-aos-delay={50}
                data-aos-duration={1500}
                data-aos-offset={50}
              >
                <img
                  src="/assets/images/home/special-deal.webp"
                  alt="Offer Image" loading="lazy"
                />
                {/* <div
                  className="offer-badge"
                  style={{
                    backgroundImage:
                      "url(assets/images/shapes/offer-circle-shape.png)",
                  }}
                >
                  <span>
                    only <br />
                    <span className="price">$59</span>
                  </span>
                </div> */}
              </div>
            </div>
          </div>
        </div>
        <div className="offer-shapes">
          <div className="shape one">
            <img src="/assets/images/home/delicious.webp" alt="Shape" loading="lazy" />
          </div>
          <div className="shape two">
            <img src="/assets/images/shapes/offer-shape2.png" alt="Shape" loading="lazy" />
          </div>
          <div className="shape three">
            <img src="/assets/images/shapes/offer-shape3.png" alt="Shape" loading="lazy" />
          </div>
        </div>
      </section>

      {/* Popular Menu Area start */}
      <MenuCategory />
      {/* Call To Action Area start */}

      <section className="cta-area-two bgc-black text-white py-100 rel z-1">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-4">
              <div
                className="cta-content-two mt-20 rmt-0"
                data-aos="fade-up"
                data-aos-duration={1500}
                data-aos-offset={50}
              >
                <div className="section-title text-white mb-20">
                  <h2>Uncompromisingly South Indian Cuisine</h2>
                </div>
                <hr className="mt-35 mb-45" />
                <p>
                  🥥 Authentic South Indian Cuisine | 🍴 Home of the Heavenly Dosa | 🌿 Fresh Ingredients, Traditional Flavors |
                </p>
              </div>
            </div>
            <div className="col-lg-4">
              <div
                className="cta-two-image rmt-55 rmb-75"
                data-aos="fade-up"
                data-aos-delay={50}
                data-aos-duration={1500}
                data-aos-offset={50}
              >
                <img src="/assets/images/home/need-good-food.webp" alt="CTA" loading="lazy" />
                {/* <div className="badge">
                  <img src="assets/images/cta/cta-two-badge.png" alt="Badge" />
                </div> */}
              </div>
            </div>
            <div className="col-lg-4">
              <div
                className="cta-content-list"
                data-aos="fade-up"
                data-aos-delay={100}
                data-aos-duration={1500}
                data-aos-offset={50}
              >
                <h5>
                  20 Years We Provide Quality foods
                </h5>
                <ul className="list-style-one mt-30 mb-40">
                  <li>Best Quality Natural &amp; Fresh Food</li>
                  <li>Experience &amp; Quality Chefs</li>
                  <li>Awards Winning Restaurant</li>
                  <li>Healthy &amp; Organic Foods</li>
                </ul>
                <Link href="/contact" className="theme-btn">
                  Contact Us <i className="far fa-arrow-alt-right" />
                </Link>
              </div>
            </div>
          </div>
        </div>
        <div className="cta-two-shapes">
          <div className="shape one">
            <img src="/assets/images/home/south-indian/1.webp" alt="Shape" loading="lazy" />
          </div>
          <div className="shape two">
            <img src="/assets/images/home/south-indian/2.webp" alt="Shape" loading="lazy" />
          </div>
          <div className="shape three">
            <img src="/assets/images/home/south-indian/3.webp" alt="Shape" loading="lazy" />
          </div>
          <div className="shape four">
            <img src="/assets/images/home/south-indian/4.webp" alt="Shape" loading="lazy" />
          </div>
        </div>
      </section>
      {/* Call To Action Area end */}

      <PopularMenu />

      {/* Testimonials Six Area start */}
      <section
        className="testimonials-six pt-100 pb-130 rpb-100"
        style={{
          backgroundImage: "url(/assets/images/home/testimonial.webp)",
        }}
      >
        <div className="container rpt-70">
          <div className="row align-items-center justify-content-between">
            <div className="col-xl-6 col-lg-8">
              <div className="testimonials-three-content rel z-1 text-white rmb-55">
                <div
                  className="section-title mb-45"
                  data-aos="fade-up"
                  data-aos-duration={1500}
                  data-aos-offset={50}
                >
                  <span className="sub-title text-yellow mb-5">
                    customer feedback
                  </span>
                  <h2>what our customer’s say us</h2>
                </div>
                <Slider
                  {...sliderProps.testimonialsTwoCarousel}
                  className="testimonials-two-carousel"
                  data-aos="fade-up"
                  data-aos-duration={1500}
                  data-aos-offset={50}
                >
                  {loading ? (
                    <div className="testimonial-two-item style-two">
                      <div className="content">
                        <div className="customer-review">Loading reviews...</div>
                      </div>
                    </div>
                  ) : displayedReviews.length > 0 ? (
                    displayedReviews.map((r, index) => {
                      const fullText = getReviewText(r);
                      const isExpanded = expandedReview === index;
                      const profileImg = getProfileImage(r);
                      const name = r.user?.name || r.author_name || "Customer";

                      return (
                        <div key={index} className="testimonial-two-item style-two">
                          <div className="content">
                            <div className="google-review-card-home" style={{ background: 'transparent', padding: '10px 0' }}>
                              <div className="google-review-header d-flex align-items-center" style={{ marginBottom: '15px' }}>
                                <div className="google-avatar" style={{
                                  width: '55px',
                                  height: '55px',
                                  minWidth: '55px',
                                  borderRadius: '50%',
                                  overflow: 'hidden',
                                  background: '#eee',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  border: '1px solid #ddd'
                                }}>
                                  {profileImg ? (
                                    <img
                                      src={profileImg}
                                      alt={name}
                                      onError={(e) => (e.target.style.display = 'none')}
                                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                                    />
                                  ) : (
                                    <span style={{ fontSize: '18px', fontWeight: 'bold', color: '#555' }}>{getInitials(name)}</span>
                                  )}
                                </div>
                                <div className="google-user-info" style={{ marginLeft: '15px' }}>
                                  <h4 className="google-name" style={{ fontSize: '18px', fontWeight: '700', margin: 0, color: '#fff', lineHeight: '1.2' }}>
                                    {name}
                                  </h4>
                                  <div className="google-stars" style={{ fontSize: '14px', marginTop: '4px', color: '#ffc107' }}>
                                    {renderStars(r.rating)}
                                  </div>
                                </div>
                              </div>
                              <div className="testimonial-content">
                                <div className="testimonial-text">
                                  <p style={{ color: '#fff' }}>
                                    {isExpanded ? fullText : truncateText(fullText)}
                                  </p>
                                </div>
                                {fullText.length > 200 && (
                                  <button
                                    className="read-more-btn mt-3"
                                    onClick={(e) => {
                                      e.stopPropagation();
                                      setExpandedReview(isExpanded ? null : index);
                                    }}
                                    style={{ color: '#ffc107', textAlign: 'left', width: 'auto' }}
                                  >
                                    {isExpanded ? "Read Less" : "Read More"}
                                  </button>
                                )}
                              </div>
                            </div>
                          </div>
                        </div>
                      );
                    })
                  ) : (
                    <div className="testimonial-two-item style-two">
                      <div className="content">
                        <div className="customer-review">No reviews available.</div>
                      </div>
                    </div>
                  )}
                </Slider>
                <div className="new-button pt-30">
                  <Link
                    href="https://www.google.com/maps/place/Shivas+Dosa+Restaurant/@43.4056825,-80.5035997,17z/data=!4m8!3m7!1s0x882bf579045db13b:0x258e9b3ccf2549d4!8m2!3d43.4056825!4d-80.5010248!9m1!1b1!16s%2Fg%2F11tj6q0n1j?entry=ttu&g_ep=EgoyMDI1MTIwOS4wIKXMDSoASAFQAw%3D%3D"
                    className="theme-btn"
                    target="_blank"
                  >
                    Review us on Google <i className="far fa-arrow-alt-right" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-lg-4">
              <div
                className="testimonial-quote-badge"
                data-aos="fade-up"
                data-aos-delay={100}
                data-aos-duration={1500}
                data-aos-offset={50}
              >
                {/* <div className="testi-badge">
                  <img src="assets/images/testimonials/badge.png" alt="Badge" />
                </div>
                <div className="quote">
                  <i className="flaticon-quote" />
                </div> */}
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Testimonials Six Area end */}

      {/* Blog Area start */}
      <BlogSection />
      {/* Blog Area end */}

      {/* Client Area start */}
      {/* <div className="client-area bg-light rel z-1">
        <div className="container">
          <div className="client-wrap-two py-80">
            <Slider {...sliderProps.clientActive} className="client-active">
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client1.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client2.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client3.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client4.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client5.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client6.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client1.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client2.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client3.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client4.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client5.png"
                  alt="Client Logo"
                />
              </a>
              <a href="#" className="client-item">
                <img
                  src="assets/images/clients/client6.png"
                  alt="Client Logo"
                />
              </a>
            </Slider>
          </div>
        </div>
      </div> */}
    </WellFoodLayout>
  );
};
export default page;