// Homepage-only section compositions, part 2: Dining, Corporate, Reviews,
// Newsletter. Depends on shared/vivaan-sections.jsx.

const { Button } = window.VivaanDesignSystem_b1c8ba;
const { PhotoBlock, PhotoSlideshow, HoverImageSwap, SectionLabel, EditorialHeading, BodyCopy } = window;

/* ---------------------------------------------------------------------- */
/* 5. Dining                                                               */
/* ---------------------------------------------------------------------- */

function DiningSection() {
  const wrap = { padding: "var(--space-2xl) var(--space-xl)", backgroundColor: "var(--vivaan-cream)", display: "flex", flexDirection: "column", gap: "var(--space-xl)" };
  const head = { display: "flex", flexDirection: "column", gap: 20, maxWidth: 620 };

  return (
    <section style={wrap} data-screen-label="dining">
      <div style={head}>
        <SectionLabel>Dining</SectionLabel>
        <EditorialHeading size={44} parts={[{ text: "Every table, " }, { text: "thoughtfully", italic: true }, { text: " prepared." }]} />
        <BodyCopy style={{ color: "var(--color-text-secondary)" }}>
          From leisurely breakfasts to elegant dinners, our restaurants bring together
          seasonal flavours, thoughtful hospitality and memorable moments throughout the day.
        </BodyCopy>
      </div>

      <PhotoSlideshow
        images={["assets/dining-room-1.jpg", "assets/dining-room-2.jpg"]}
        ratio="21 / 9"
        caption="The Dining Room"
      />

      <div className="dining-quote-grid">
        <video
          src="assets/culinary-philosophy.mp4"
          autoPlay
          loop
          muted
          playsInline
          style={{ width: "100%", aspectRatio: "1 / 1", objectFit: "cover", display: "block" }}
        />
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <SectionLabel>Culinary Philosophy</SectionLabel>
          <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: "clamp(19px, 3vw, 26px)", lineHeight: 1.4, margin: 0 }}>
            "We cook with the season, not against it — every plate is an invitation
            to slow down."
          </p>
          <div style={{ fontFamily: "var(--font-serif)", fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--color-text-secondary)" }}>
            Executive Chef
          </div>
        </div>
      </div>

      <div className="grid-3">
        <HoverImageSwap images={["assets/breakfast-1.png", "assets/breakfast-2.png"]} ratio="4 / 5" caption="Breakfast" />
        <HoverImageSwap images={["assets/lunch-1.png", "assets/lunch-2.png"]} ratio="4 / 5" caption="Lunch" />
        <HoverImageSwap images={["assets/dinner-1.png", "assets/dinner-2.png"]} ratio="4 / 5" caption="Dinner" />
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------- */
/* 6. Meetings & Conferences                                               */
/* ---------------------------------------------------------------------- */

const LAYOUTS = window.LAYOUTS;

const LayoutIcon = window.LayoutIcon;

function CorporateSection() {
  const wrap = { padding: "var(--space-2xl) var(--space-xl)", backgroundColor: "var(--color-surface-page)", display: "flex", flexDirection: "column", gap: "var(--space-xl)" };
  const head = { display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, flexWrap: "wrap" };
  const card = { display: "flex", flexDirection: "column", gap: 14, padding: "var(--space-md)", borderTop: "1px solid var(--color-border-hairline)" };

  return (
    <section style={wrap} data-screen-label="corporate">
      <div style={head}>
        <div style={{ display: "flex", flexDirection: "column", gap: 20, maxWidth: 620 }}>
          <SectionLabel>Meetings &amp; Conferences</SectionLabel>
          <EditorialHeading size={40} parts={[{ text: "Corporate gatherings, " }, { text: "elegantly", italic: true }, { text: " arranged." }]} />
          <BodyCopy style={{ color: "var(--color-text-secondary)" }}>
            From board meetings to grand conferences, The Vivaan offers versatile venues,
            luxury stays and seamless event planning.
          </BodyCopy>
        </div>
        <Button variant="outline-white" as="a" href="corporate.html" style={{ color: "var(--color-text-primary)", border: "1px solid var(--color-text-primary)" }}>
          Plan an Event
        </Button>
      </div>

      <div className="grid-2">
        <HoverImageSwap images={["assets/boardroom-1.png", "assets/boardroom-2.png"]} ratio="6 / 5" caption="Boardroom" />
        <HoverImageSwap images={["assets/conference-hall-1.png", "assets/conference-hall-2.png"]} ratio="6 / 5" caption="Conference Hall" />
      </div>

      <div className="grid-5">
        {LAYOUTS.map((l) => (
          <div key={l.name} style={card}>
            <LayoutIcon name={l.name} />
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 18 }}>{l.name}</div>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 13, color: "var(--color-text-secondary)" }}>{l.capacity}</div>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--vivaan-gold)" }}>{l.tag}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------- */
/* 7. Guest Reviews                                                        */
/* ---------------------------------------------------------------------- */

const TESTIMONIALS = window.TESTIMONIALS;

function ReviewsSection() {
  const [active, setActive] = React.useState("Wedding");
  const [index, setIndex] = React.useState(0);
  const list = TESTIMONIALS[active];

  // Reset to the first review whenever the category tab changes.
  React.useEffect(() => { setIndex(0); }, [active]);

  // Auto-rotate through the active category's reviews, slow luxury pace.
  React.useEffect(() => {
    if (!list || list.length < 2) return;
    const id = setInterval(() => {
      setIndex((v) => (v + 1) % list.length);
    }, 7000);
    return () => clearInterval(id);
  }, [active, list]);

  const wrap = { padding: "var(--space-2xl) var(--space-xl)", backgroundColor: "var(--vivaan-black)", color: "var(--color-text-on-dark)", display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--space-xl)", textAlign: "center" };
  const tabs = { display: "flex", gap: "var(--space-lg)", flexWrap: "wrap", justifyContent: "center" };
  const tab = (name) => ({
    fontFamily: "var(--font-serif)",
    fontSize: 12,
    letterSpacing: "0.12em",
    textTransform: "uppercase",
    color: name === active ? "var(--vivaan-gold)" : "rgba(255,255,255,0.5)",
    background: "none",
    border: "none",
    borderBottom: name === active ? "1px solid var(--vivaan-gold)" : "1px solid transparent",
    paddingBottom: 8,
    cursor: "pointer",
    transition: "color 0.2s ease",
  });
  const dot = (i) => ({
    width: i === index ? 20 : 8,
    height: 8,
    borderRadius: 4,
    border: "none",
    padding: 0,
    backgroundColor: i === index ? "var(--vivaan-gold)" : "rgba(255,255,255,0.3)",
    cursor: "pointer",
    transition: "all 0.3s ease",
  });

  const current = list[index];

  return (
    <section style={wrap} data-screen-label="reviews">
      <SectionLabel dark>Guest Reviews</SectionLabel>
      <div style={tabs}>
        {Object.keys(TESTIMONIALS).map((k) => (
          <button key={k} style={tab(k)} onClick={() => setActive(k)}>{k}</button>
        ))}
      </div>
      <p key={active + index} className="review-quote" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: "clamp(20px, 4vw, 32px)", lineHeight: 1.4, maxWidth: 760, margin: 0 }}>
        &ldquo;{current.quote}&rdquo;
      </p>
      <div style={{ fontFamily: "var(--font-serif)", fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)" }}
        dangerouslySetInnerHTML={{ __html: current.who }}
      />
      {current.meta ? (
        <div style={{ fontFamily: "var(--font-serif)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--vivaan-gold)" }}
          dangerouslySetInnerHTML={{ __html: current.meta }}
        />
      ) : null}
      {list.length > 1 ? (
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          {list.map((_, i) => (
            <button key={i} style={dot(i)} aria-label={"Show review " + (i + 1)} onClick={() => setIndex(i)} />
          ))}
        </div>
      ) : null}
    </section>
  );
}

/* ---------------------------------------------------------------------- */
/* 8. Stay Updated (newsletter)                                            */
/* ---------------------------------------------------------------------- */

function NewsletterSection() {
  const [email, setEmail] = React.useState("");
  const [consent, setConsent] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const wrap = { padding: "var(--space-2xl) var(--space-xl)", backgroundColor: "var(--vivaan-cream)", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 24 };
  const inputRowClass = "newsletter-row";
  const input = { flex: 1, border: "none", borderBottom: "1px solid var(--color-border-hairline)", background: "transparent", fontFamily: "var(--font-serif)", fontSize: 15, padding: "10px 0", outline: "none" };
  const consentRow = { display: "flex", alignItems: "flex-start", gap: 10, maxWidth: 480, textAlign: "left" };

  return (
    <section style={wrap} data-screen-label="newsletter">
      <SectionLabel>Newsletter</SectionLabel>
      <h2 style={{ fontFamily: "var(--font-serif)", fontSize: 36, fontWeight: 400, margin: 0 }}>Stay Updated</h2>
      <BodyCopy style={{ maxWidth: 480, color: "var(--color-text-secondary)" }}>
        Be the first to receive exclusive offers, wedding inspirations, seasonal
        experiences and special events from The Vivaan.
      </BodyCopy>
      {sent ? (
        <div style={{ fontFamily: "var(--font-serif)", fontSize: 14, color: "var(--vivaan-gold)" }}>
          Thank you — you're on the list.
        </div>
      ) : (
        <React.Fragment>
          <div className={inputRowClass} style={{ marginTop: 8 }}>
            <input style={input} type="email" placeholder="Email address" value={email} onChange={(e) => setEmail(e.target.value)} />
            <Button variant="filled-gold" onClick={() => email && consent && setSent(true)}>Submit</Button>
          </div>
          <label style={consentRow}>
            <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} style={{ marginTop: 4 }} />
            <span style={{ fontFamily: "var(--font-serif)", fontSize: 12, color: "var(--color-text-secondary)" }}>
              I agree to receive communications from The Vivaan and understand I can unsubscribe at any time.
            </span>
          </label>
        </React.Fragment>
      )}
    </section>
  );
}

Object.assign(window, { DiningSection, LAYOUTS, CorporateSection, TESTIMONIALS, ReviewsSection, NewsletterSection });