import { Link } from '@inertiajs/react';
import HouseLayout from '../components/house/HouseLayout';
import InnerPageHero from '../components/house/InnerPageHero';
import { themeSrc, usePublicCopy, useThemeMedia } from '../components/house/publicCopy';

function parseWhyChoose(text) {
    return String(text || '')
        .split(/\r?\n/)
        .map((line) => line.trim())
        .filter(Boolean)
        .map((line) => {
            const parts = line.split(/\s+[–—-]\s+/);
            return {
                title: parts[0]?.trim() || line,
                body: parts.slice(1).join(' – ').trim(),
            };
        });
}

export default function About() {
    const copy = usePublicCopy();
    const media = useThemeMedia();
    const name = copy.highlight_name || 'Geita Bam Apartments';
    const meta = copy.highlight_meta || 'Two bedrooms';
    const testimonials = copy.testimonials || [];
    const apartments = copy.apartments || [];
    const whyChoose = parseWhyChoose(copy.why_choose);
    const whyLeft = whyChoose.filter((_, i) => i % 2 === 0);
    const whyRight = whyChoose.filter((_, i) => i % 2 === 1);

    return (
        <HouseLayout title="About Us">
            <InnerPageHero
              title="About Us"
              crumbs={[{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about-us' }]}
              authorName={name}
              authorMeta={meta}
            />

              {/* ===== ABOUT INTRO (template property3) ======= */}
              <div className="property3-section-area sp6">
                <div className="container">
                <div className="row align-items-center">
                  <div className="col-lg-6">
                  <div className="property-images-area">
                    <div className="img1 reveal image-anime">
                    <img src={themeSrc(media, 'about.property_1', '/img/all-images/property/property-img13.png')} alt="" />
                    </div>
                    <div className="img2 reveal image-anime">
                    <img src={themeSrc(media, 'about.property_2', '/img/all-images/property/property-img5.png')} alt="" />
                    </div>
                    <div className="elements reveal image-anime">
                    <img src="/img/elements/elements9.png" alt="" />
                    </div>
                  </div>
                  </div>
                  <div className="col-lg-1"></div>
                  <div className="col-lg-5">
                  <div className="property-content heading3">
                    <h5 data-aos="fade-left" data-aos-duration="800">About BAM Apartments</h5>
                    <div className="space20"></div>
                    <h2 className="text-anime-style-3">{copy.headline || 'Luxury Living Redefined'}</h2>
                    <div className="space16"></div>
                    <p data-aos="fade-left" data-aos-duration="900">{copy.intro}</p>
                    <div className="space16"></div>
                    <p data-aos="fade-left" data-aos-duration="1000">{copy.offer}</p>
                    <div className="space32"></div>
                    <div className="btn-area1" data-aos="fade-left" data-aos-duration="1200">
                    <Link href="/our-apartments" className="header-btn4">View Our Property</Link>
                    </div>
                  </div>
                  </div>
                </div>
                </div>
              </div>
              {/* ===== ABOUT INTRO ENDS ======= */}

              {/* ===== WHY CHOOSE (template about1 + list-area) ======= */}
              <div className="about1-section-area sp1 bg1" id="why-choose">
                <div className="container">
                <div className="row align-items-center">
                  <div className="col-lg-5">
                  <div className="about-header heading3">
                    <h5 data-aos="fade-left" data-aos-duration="800">{copy.style_line || 'Live in Comfort. Stay in Style.'}</h5>
                    <div className="space20"></div>
                    <h2 className="text-anime-style-3">Why Choose BAM Apartments?</h2>
                    <div className="space16"></div>
                    <div className="list-area why-choose-list" data-aos="fade-left" data-aos-duration="1000">
                      <ul>
                        {whyLeft.map((item) => (
                          <li key={item.title}>
                            <span><img src="/img/icons/check2.svg" alt="" /> {item.title}</span>
                          </li>
                        ))}
                      </ul>
                      <ul>
                        {whyRight.map((item) => (
                          <li key={item.title}>
                            <span><img src="/img/icons/check2.svg" alt="" /> {item.title}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                    <div className="space16"></div>
                    <p data-aos="fade-left" data-aos-duration="1100">{copy.invitation}</p>
                    <div className="space32"></div>
                    <div className="btn-area1" data-aos="fade-left" data-aos-duration="1200">
                    <Link href="/book" className="header-btn4">Book Your Stay</Link>
                    </div>
                  </div>
                  </div>
                  <div className="col-lg-1"></div>
                  <div className="col-lg-6">
                  <div className="space60 d-lg-none d-block"></div>
                  <div className="about-images">
                    <div className="img1 reveal image-anime">
                    <img src={themeSrc(media, 'about.about_1', '/img/all-images/about/about-img1.png')} alt="" />
                    </div>
                    <div className="img2 reveal image-anime">
                    <img src={themeSrc(media, 'about.about_2', '/img/all-images/about/about-img2.png')} alt="" />
                    </div>
                    <div className="elements">
                    <img src="/img/elements/elements12.png" alt="" />
                    </div>
                  </div>
                  </div>
                </div>
                </div>
              </div>
              {/* ===== WHY CHOOSE ENDS ======= */}

              {/* ===== MISSION & VISION (template heading3 columns) ======= */}
              <div className="property3-section-area sp6">
                <div className="container">
                  <div className="row">
                    <div className="col-lg-6" data-aos="fade-up" data-aos-duration="900">
                      <div className="property-content heading3">
                        <h5>Our Purpose</h5>
                        <div className="space20"></div>
                        <h2 className="text-anime-style-3">Our Mission</h2>
                        <div className="space16"></div>
                        <p>{copy.mission_statement}</p>
                      </div>
                    </div>
                    <div className="col-lg-6" data-aos="fade-up" data-aos-duration="1000">
                      <div className="property-content heading3">
                        <h5>Our Direction</h5>
                        <div className="space20"></div>
                        <h2 className="text-anime-style-3">Our Vision</h2>
                        <div className="space16"></div>
                        <p>{copy.vision}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {/* ===== MISSION & VISION ENDS ======= */}

              {/* ===== TESTIMONIAL AREA STARTS ======= */}
              <div className="testimonial3-section-area sp6 bg2" id="testimonials">
                <div className="container">
                <div className="row">
                  <div className="col-lg-5">
                  <div className="testimonia-header heading3">
                    <h5 data-aos="fade-left" data-aos-duration="800">client feedback</h5>
                    <div className="space20"></div>
                    <h2 className="text-anime-style-3">Hear What Our Client Say About Property</h2>
                    <div className="space16"></div>
                    <p data-aos="fade-left" data-aos-duration="1000">{copy.tagline}</p>
                    <div className="space32"></div>
                    <div className="btn-area1" data-aos="fade-left" data-aos-duration="1200">
                    <a href="#testimonials" className="header-btn4">View All Testimonials</a>
                    </div>
                  </div>
                  <div className="space86"></div>
                  <div className="testimonial-video-area" data-aos="zoom-in-up" data-aos-duration="1000">
                    <div className="img1">
                    <img src={themeSrc(media, 'about.testimonial_bg', '/img/all-images/testimonial/testimonial-img3.png')} alt="" />
                    </div>
                    {copy.highlight_video && (
                    <div className="icons">
                    <a href={copy.highlight_video} className="popup-youtube"><i className="fa-solid fa-play"></i></a>
                    </div>
                    )}
                  </div>
                  </div>
                  <div className="col-lg-1"></div>
                  <div className="col-lg-6">
                  <div className="testimonial-arrow-area" data-aos="zoom-in-up" data-aos-duration="1000">
                    {testimonials.length > 0 && (
                    <div className="testimonial3-vertical-slider">
                    {testimonials.map((item) => (
                    <div className="testimonial-vertical" key={item.id}>
                      <div className="verical-boxarea">
                      <div className="images-area">
                        <div className="img1">
                        <img src={item.photo} alt="" />
                        </div>
                        <div className="text">
                        <a href="#">{item.name}</a>
                        <p>{item.role}</p>
                        </div>
                      </div>
                      <div className="quito">
                        <img src="/img/icons/quoto-icon2.svg" alt="" />
                      </div>
                      </div>
                      <div className="space24"></div>
                      {item.headline && <span>{item.headline}</span>}
                      {item.headline && <div className="space16"></div>}
                      <p>“{item.quote}”</p>
                      <div className="space24"></div>
                      <ul>
                      {[1, 2, 3, 4, 5].map((star) => (
                        <li key={star}>
                          <i className={star <= item.rating ? "fa-solid fa-star" : "fa-regular fa-star"}></i>
                        </li>
                      ))}
                      </ul>
                    </div>
                    ))}
                    </div>
                    )}
                    {testimonials.length > 0 && (
                    <div className="testimonial-arrows">
                    <div className="testimonial-prev-arrow">
                      <button><i className="fa-solid fa-angle-up"></i></button>
                    </div>
                    <div className="testimonial-next-arrow">
                      <button><i className="fa-solid fa-angle-down"></i></button>
                    </div>
                    </div>
                    )}
                  </div>
                  </div>
                </div>
                </div>
              </div>
              {/* ===== TESTIMONIAL AREA ENDS ======= */}

              {/* ===== APARTMENT AREA STARTS ======= */}
              <div className="apartment-inner-section-area sp2 bg1">
                <div className="container">
                <div className="row">
                  <div className="col-lg-5 m-auto">
                  <div className="apartment-header space-margin60 text-center heading3">
                    <h5 data-aos="fade-left" data-aos-duration="800">Apartment List</h5>
                    <div className="space20"></div>
                    <h2 className="text-anime-style-3">Our Latest Property</h2>
                  </div>
                  </div>
                </div>
                <div className="row">
                  {apartments.map((item, index) => (
                  <div className="col-lg-4 col-md-6" data-aos="zoom-in-up" data-aos-duration={String(800 + index * 100)} key={item.id}>
                  <div className="apartment-boxarea">
                    <div className="img1">
                    <img src={item.image} alt="" />
                    </div>
                    <div className="content-area">
                    <Link href={`/our-apartments/${item.slug}`}>{item.name}</Link>
                    <div className="space16"></div>
                    <ul>
                      <li>
                      <a href={`/our-apartments/${item.slug}`}><img src="/img/icons/bed-icon1.svg" alt="" />x{item.bedrooms ?? 2}</a> <span>|</span>
                      </li>
                      <li>
                      <Link href={`/our-apartments/${item.slug}`}>{item.price_label}</Link>
                      </li>
                    </ul>
                    </div>
                    <div className="arrow">
                    <Link href="/book">Book</Link>
                    </div>
                  </div>
                  </div>
                  ))}
                </div>
                </div>
              </div>
                            {/* ===== APARTMENT AREA ENDS ======= */}
        </HouseLayout>
    );
}