/* ============================================================
   Nhà hàng Chay — Space + Reviews + Visit + FinalCTA + Footer
   ============================================================ */

/* ---------- SECTION 5 — SPACE GALLERY ---------- */
function SpaceGallery() {
  return (
    <section id="space" className="section plaster space">
      <div className="wrap">
        <div className="space-head">
          <Reveal><p className="eyebrow" style={{ color: 'var(--brand-gold)' }}>Không gian</p></Reveal>
          <Reveal delay={100} as="h2" className="space-h2">Một góc ăn chay thật ấm</Reveal>
        </div>

        <div className="space-grid">
          <Reveal variant="arch" className="space-img space-big img-zoom">
            <img src="assets/images/vegetarian-samples/vegetarian_arch_interior.png" alt="Không gian nhà hàng chay ấm áp — bàn ăn gỗ, ghế mây bên vòm tường" style={{ objectPosition: 'center 55%' }} />
            <span className="space-tag">Không gian ấm áp</span>
          </Reveal>
          <Reveal delay={160} variant="arch" className="space-img space-small img-zoom">
            <img src="assets/images/vegetarian-samples/vegetarian_moon_table.png" alt="Góc bàn ăn nhà hàng chay tinh tế bên bức tường vầng trăng và đèn dịu" style={{ objectPosition: 'center 30%' }} />
            <span className="space-tag">Vầng trăng &amp; ánh đèn</span>
          </Reveal>
          <Reveal delay={280} variant="arch" className="space-img space-small img-zoom">
            <img src="assets/gallery/interior.png" alt="Chi tiết bàn ăn chay được bày biện tinh tế" style={{ objectPosition: 'center 50%' }} />
            <span className="space-tag">Chi tiết bàn ăn</span>
          </Reveal>
        </div>

        <div className="space-foot">
          <Reveal as="p" className="space-caption">
            Không gian sang trọng, ánh đèn vàng, bàn gỗ và ghế mây tạo cảm giác ấm, nhẹ và riêng tư.
          </Reveal>
          <Reveal delay={120} as="blockquote" className="space-quote">
            “Không gian ấm áp, riêng tư giành cho bạn và người thương”
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- SECTION 6 — REVIEWS ---------- */
const REVIEWS = [
  { q: 'Không gian nhẹ nhàng, món ăn vừa miệng và trình bày đẹp.', l: 'Không gian' },
  { q: 'Bày trí đẹp, lịch sự, ấm áp và dễ chịu.', l: 'Vibe' },
  { q: 'Nhân viên tư vấn món rất nhiệt tình, phù hợp cả người mới ăn chay.', l: 'Dịch vụ' },
  { q: 'Món từ nấm và rau củ được chế biến sáng tạo, hương vị đậm đà nhưng dễ ăn.', l: 'Ẩm thực' },
];

/* Ảnh feedback thật đã được gỡ bỏ (chứa nhãn hiệu cũ / đánh giá định danh).
   Mảng rỗng -> Reviews tự fallback về review card chữ chung, không broken image. */
const FEEDBACK_IMAGES = [];

/* Accordion ảnh feedback: desktop hover/focus mở rộng item active; mobile scroll cards (CSS).
   onError -> ẩn item lỗi (KHÔNG thay ảnh giả). 1 ảnh -> 1 card lớn; 2–5 ảnh -> accordion. */
function FeedbackAccordion({ images }) {
  const [active, setActive] = useState(0);
  const [errored, setErrored] = useState({});
  const shown = images.filter((img) => !errored[img.id]);
  if (shown.length === 0) return null;
  const safeActive = Math.min(active, shown.length - 1);
  return (
    <div className={`fb-accordion ${shown.length === 1 ? 'is-single' : ''}`}>
      {shown.map((img, i) => (
        <button
          key={img.id}
          type="button"
          className={`fb-item ${i === safeActive ? 'is-active' : ''}`}
          aria-label={`Đánh giá khách hàng: ${img.title}`}
          aria-pressed={i === safeActive}
          onMouseEnter={() => setActive(i)}
          onFocus={() => setActive(i)}
          onClick={() => setActive(i)}
        >
          <span className="fb-image-shell">
            <img
              src={img.src}
              alt={`Ảnh đánh giá khách hàng — ${img.title}`}
              loading="lazy"
              decoding="async"
              onError={() => setErrored((p) => ({ ...p, [img.id]: true }))}
            />
          </span>
          <span className="fb-caption-bar">
            <span className="fb-caption-dot" aria-hidden="true" />
            <span className="fb-caption-text">{img.title}</span>
          </span>
        </button>
      ))}
    </div>
  );
}

function ReviewsSection() {
  const [rating, ratingRef] = useCountUp(5.0, { decimals: 1, duration: 1500 });
  const feedback = FEEDBACK_IMAGES.slice(0, 5); // tối đa 5 ảnh để layout không rối
  const hasFeedback = feedback.length > 0;
  return (
    <section id="reviews" className="section reviews">
      <div className="wrap reviews-grid">
        <div className="reviews-left">
          <Reveal><p className="eyebrow" style={{ color: 'var(--brand-gold)' }}>Đánh giá</p></Reveal>
          <Reveal delay={100} as="h2" className="reviews-h2">
            Những đánh giá và góp ý quý giá của thực khách sau khi trải nghiệm.
          </Reveal>
          <div className="rating-block" ref={ratingRef}>
            <div className="rating-num">{rating}<span className="rating-of">/5</span></div>
            <div className="rating-meta">
              <div className="stars" aria-hidden="true">★★★★★</div>
              <span>Đánh giá từ thực khách</span>
            </div>
          </div>
          {hasFeedback && (
            <Reveal delay={160} as="p" className="reviews-hint">
              <Leaf size={14} color="var(--brand-leaf)" />
              <span>Ảnh đánh giá thật từ khách hàng — di chuột / chạm để xem.</span>
            </Reveal>
          )}
        </div>

        <div className="reviews-right">
          {hasFeedback ? (
            <Reveal variant="soft"><FeedbackAccordion images={feedback} /></Reveal>
          ) : (
            <div className="reviews-cards">
              {REVIEWS.map((r, i) => (
                <Reveal key={r.l} delay={i * 110} variant="quote" className="review-card lift">
                  <span className="rc-quote-mark" aria-hidden="true">”</span>
                  <p className="rc-quote">{r.q}</p>
                  <span className="rc-label">{r.l}</span>
                </Reveal>
              ))}
            </div>
          )}
        </div>
      </div>

      {hasFeedback && (
        <div className="wrap reviews-quotes">
          {REVIEWS.map((r, i) => (
            <Reveal key={r.l} delay={i * 90} variant="quote" className="review-chip lift">
              <span className="rc-quote-mark" aria-hidden="true">”</span>
              <p className="rc-quote">{r.q}</p>
              <span className="rc-label">{r.l}</span>
            </Reveal>
          ))}
        </div>
      )}
    </section>
  );
}

/* ---------- SECTION 7 — VISIT (liên hệ) ---------- */
function VisitSection() {
  const buddhaRef = useReveal({ once: true, threshold: 0.12 });
  return (
    <section id="contact" className="section plaster visit">
      {/* Ảnh Đức Phật (decorative) làm ambience bên phải Visit. */}
      <div ref={buddhaRef} className="visit-buddha-photo" aria-hidden="true">
        <img src="assets/adidaphat.jpg" alt="" loading="lazy" decoding="async" />
      </div>
      <div className="wrap">
        <Reveal><p className="eyebrow" style={{ color: 'var(--brand-gold)' }}>Ghé thăm</p></Reveal>
        <Reveal delay={100} as="h2" className="visit-h2">Ghé thăm nhà hàng chay</Reveal>
        <Reveal delay={160} as="p" className="visit-lead">
          Nhà hàng mở cửa 10:00 – 22:00, hợp cho bữa chay nhẹ, gặp gỡ bạn bè hay bữa ăn gia đình.
        </Reveal>

        <div className="branches-grid">
          {BRAND_BRANCHES.map((b, i) => (
            <Reveal
              key={b.id}
              delay={i * 120}
              variant="route"
              className={`branch-card lift ${i === 0 ? 'branch-card-featured' : ''}`}
            >
              <span className="branch-label">{b.label}</span>
              <h3 className="branch-name">{b.name}</h3>
              <p className="branch-address">{b.address}</p>
              <div className="branch-meta">
                <span className="branch-meta-item"><span className="branch-dot" aria-hidden="true" />{b.hours}</span>
                <span className="branch-meta-item"><span className="branch-star" aria-hidden="true">★</span>{b.rating} · {b.reviewText}</span>
                <a className="branch-meta-item branch-phone" href={b.phoneHref}>{b.phone}</a>
              </div>
              <p className="branch-desc">{b.description}</p>
              <div className="branch-actions">
                {/* Chưa có link bản đồ / số điện thoại thật -> href="#" (cập nhật sau) */}
                <a href={b.mapUrl} className="pill pill-primary">Xem địa điểm</a>
                <a href={b.phoneHref} className="pill pill-secondary">Liên hệ</a>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- SECTION 8 — FINAL CTA ---------- */
function FinalCTA() {
  const lineRef = useReveal({ threshold: 0.3 });
  return (
    <section id="reserve" className="section velvet final-cta">
      <div className="final-glow" aria-hidden="true" />
      <svg className="final-tree" viewBox="0 0 300 320" fill="none" aria-hidden="true">
        <path d="M150 320 L150 150" stroke="var(--brand-gold)" strokeWidth="1.4" opacity="0.55" />
        <path d="M150 180 C110 160 90 140 80 100 M150 200 C190 180 210 160 220 116 M150 150 C150 120 150 95 150 70 M150 170 C120 150 105 130 100 96 M150 165 C180 148 198 128 205 92" stroke="var(--brand-gold)" strokeWidth="1" opacity="0.45" />
        <circle cx="80" cy="98" r="3.5" fill="var(--brand-gold)" opacity="0.6" />
        <circle cx="220" cy="114" r="3.5" fill="var(--brand-gold)" opacity="0.6" />
        <circle cx="150" cy="68" r="3.5" fill="var(--brand-gold)" opacity="0.6" />
        <circle cx="100" cy="94" r="2.5" fill="var(--brand-gold)" opacity="0.5" />
        <circle cx="205" cy="90" r="2.5" fill="var(--brand-gold)" opacity="0.5" />
      </svg>

      <div className="wrap final-inner">
        {/* hoa sen như một medallion, cảm hứng thanh lành của ẩm thực chay */}
        <Reveal className="final-lotus-wrap" once>
          <LotusMark size={104} className="lotus-final" />
          <span className="final-lotus-cap">Hoa sen gợi sự thanh lành và tĩnh tại.</span>
        </Reveal>
        <Reveal><p className="eyebrow" style={{ color: 'var(--gold-bright)', justifyContent: 'center' }}>Đặt bàn</p></Reveal>
        <Reveal delay={100} as="h2" variant="soft" className="final-h2">Đặt một bữa chay ấm lành.</Reveal>
        <div ref={lineRef} className="goldline final-divider" aria-hidden="true" />
        <Reveal delay={200} as="p" className="final-body">
          Dù là bữa trưa nhẹ, buổi hẹn tối hay bữa ăn gia đình, nhà hàng sẵn sàng gợi ý món hợp khẩu vị.
        </Reveal>
        <Reveal delay={280} className="final-actions">
          {/* Chưa có kênh đặt bàn thật -> href="#" (cập nhật sau) */}
          <a href="#" className="pill pill-gold">Đặt bàn ngay</a>
          <a href="#contact" className="pill pill-cream-outline">Xem địa điểm</a>
          <a href="#menu" className="pill pill-cream-outline">Xem thực đơn</a>
        </Reveal>
        <Reveal delay={340} as="p" className="final-hours">Mở cửa mỗi ngày từ 10:00 đến 22:00.</Reveal>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="footer">
      <svg className="footer-leaves" viewBox="0 0 1200 200" fill="none" aria-hidden="true" preserveAspectRatio="none">
        <path d="M0 160 C300 120 500 180 700 150 C900 120 1050 160 1200 130" stroke="var(--brand-gold)" strokeWidth="1" opacity="0.18" />
      </svg>
      <div className="footer-inner">
        <Reveal variant="soft" className="footer-brand">
          <div className="footer-logo-card">
            <span className="brand-wordmark" style={{ fontSize: '20px' }}>NHÀ HÀNG CHAY</span>
          </div>
          <p className="footer-blurb">
            Nhà hàng Chay — không gian chay ấm áp, phục vụ món chay sáng tạo từ rau củ,
            nấm và nguyên liệu tự nhiên trong nhịp ăn nhẹ nhàng.
          </p>
        </Reveal>

        <Reveal variant="soft" delay={90} className="footer-col">
          <h4 className="footer-h">Khám phá</h4>
          <a href="#story">Câu chuyện</a>
          <a href="#menu">Thực đơn</a>
          <a href="#space">Không gian</a>
          <a href="#reviews">Đánh giá</a>
          <a href="#contact">Liên hệ</a>
        </Reveal>

        <Reveal variant="soft" delay={180} className="footer-col footer-branches">
          <h4 className="footer-h">Liên hệ</h4>
          {BRAND_BRANCHES.map((b) => (
            <div key={b.id} className="footer-branch">
              <span className="footer-branch-name">{b.shortName}</span>
              <p>{b.address}</p>
              <a href={b.phoneHref}>{b.phone}</a>
            </div>
          ))}
        </Reveal>

        <Reveal variant="soft" delay={270} className="footer-col">
          <h4 className="footer-h">Giờ mở cửa</h4>
          <p>10:00 – 22:00</p>
          <p>Tất cả các ngày</p>
          <p>Giá tham khảo: 200.000đ – 300.000đ / người</p>
        </Reveal>
      </div>
      <Reveal variant="soft" delay={120} className="footer-bottom">
        <span>© 2026 Nhà hàng Chay. Phát triển bởi BBOTECH.</span>
        <span className="footer-tag"><Leaf size={13} color="var(--brand-leaf)" /> Ẩm thực chay · Phát triển bởi BBOTECH</span>
      </Reveal>
    </footer>
  );
}

Object.assign(window, { SpaceGallery, ReviewsSection, VisitSection, FinalCTA, Footer });