// heritage/sections.jsx — Story timeline, press, dining, testimonial

// ─── Heritage Story with Timeline ───────────────────────────────
function HeritageStory({ theme, mobile }) {
  const [activeYear, setActiveYear] = React.useState(0);
  const listRef = React.useRef(null);
  const px = mobile ? 24 : 56;

  React.useEffect(() => {
    const items = listRef.current?.querySelectorAll('[data-year-idx]') || [];
    if (!items.length) return;
    const io = new IntersectionObserver((entries) => {
      const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
      if (visible[0]) setActiveYear(Number(visible[0].target.dataset.yearIdx));
    }, { rootMargin: '-30% 0px -50% 0px' });
    items.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <section id="heritage" style={{ background: theme.cream, padding: `${theme.sp(160)}px ${px}px ${theme.sp(120)}px`, position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {/* intro */}
        <div data-reveal style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1.6fr',
          gap: mobile ? 24 : 96,
          marginBottom: mobile ? 48 : 96,
          alignItems: 'flex-end',
        }}>
          <div>
            <Caps size={10} color={theme.oxblood} ls={0.3} style={{ fontFamily: theme.sans }}>Chapter I · The Story</Caps>
            <Rule color={theme.ink} w={36} opacity={0.35} style={{ marginTop: 14 }} />
          </div>
          <h2 style={{
            fontFamily: theme.serif, fontSize: 'clamp(36px, 5.5vw, 80px)',
            lineHeight: 1.0, fontWeight: 400, color: theme.ink,
            margin: 0, letterSpacing: '-0.02em',
          }}>
            Here is where we <em style={{ fontStyle: 'italic', color: theme.oxblood }}>tell your story.</em>
          </h2>
        </div>

        {mobile ? (
          // ── Mobile: just the timeline list ──
          <div ref={listRef}>
            {TIMELINE.map((t, i) => (
              <div key={t.year} data-year-idx={i} data-reveal
                style={{
                  padding: '28px 0',
                  borderTop: i === 0 ? `1px solid ${theme.ink}22` : 'none',
                  borderBottom: `1px solid ${theme.ink}15`,
                  display: 'grid', gridTemplateColumns: '64px 1fr',
                  gap: 20, alignItems: 'flex-start',
                }}>
                <Caps size={11} color={theme.oxblood} ls={0.16} style={{ fontFamily: theme.sans, fontWeight: 600 }}>
                  {t.year}
                </Caps>
                <div>
                  <div style={{ fontFamily: theme.serif, fontSize: 20, color: theme.ink, marginBottom: 6 }}>{t.title}</div>
                  <div style={{ fontFamily: theme.serif, fontSize: 15, fontStyle: 'italic', lineHeight: 1.55, color: `${theme.ink}cc` }}>
                    {t.body}
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          // ── Desktop: 3-col with sticky year + photo ──
          <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
            {/* sticky year */}
            <div style={{ position: 'sticky', top: 120 }}>
              <div style={{ position: 'relative', height: 360 }}>
                {TIMELINE.map((t, i) => (
                  <div key={t.year} style={{ position: 'absolute', inset: 0, opacity: i === activeYear ? 1 : 0, transition: 'opacity .5s ease' }}>
                    <div style={{ fontFamily: theme.serif, fontSize: 96, lineHeight: 1, color: theme.oxblood, letterSpacing: '-0.02em' }}>{t.year}</div>
                    <div style={{ fontFamily: theme.serif, fontStyle: 'italic', fontSize: 24, color: theme.ink, marginTop: 16 }}>{t.title}</div>
                    <Rule color={theme.ink} w={36} opacity={0.4} style={{ marginTop: 18 }} />
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24, fontFamily: theme.sans, fontSize: 11, color: `${theme.ink}77`, letterSpacing: '0.08em' }}>
                {TIMELINE.length} chapters · scroll →
              </div>
            </div>

            {/* timeline list */}
            <div ref={listRef}>
              {TIMELINE.map((t, i) => (
                <div key={t.year} data-year-idx={i} data-reveal
                  style={{
                    padding: '32px 0',
                    borderTop: i === 0 ? `1px solid ${theme.ink}22` : 'none',
                    borderBottom: `1px solid ${theme.ink}15`,
                    display: 'grid', gridTemplateColumns: '80px 1fr',
                    gap: 24, alignItems: 'flex-start',
                    opacity: i === activeYear ? 1 : 0.42,
                    transition: 'opacity .4s ease',
                  }}>
                  <Caps size={11} color={i === activeYear ? theme.oxblood : theme.ink} ls={0.16} style={{ fontFamily: theme.sans, fontWeight: i === activeYear ? 600 : 500 }}>
                    {t.year}
                  </Caps>
                  <div>
                    <div style={{ fontFamily: theme.serif, fontSize: 22, color: theme.ink, marginBottom: 6 }}>{t.title}</div>
                    <div style={{ fontFamily: theme.serif, fontSize: 16, fontStyle: 'italic', lineHeight: 1.55, color: `${theme.ink}cc` }}>
                      {t.body}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* photo column */}
            <div data-reveal data-reveal-delay="1" style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 24 }}>
              <div style={{ aspectRatio: '3 / 4', overflow: 'hidden', position: 'relative' }}>
                <img src={img('vintageRoom', 800)} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'sepia(0.15) contrast(0.98)' }} alt="" />
                <PhotoKey label="story_1" />
              </div>
              <div style={{ background: theme.oxblood, color: theme.cream, padding: '28px 24px' }}>
                <Caps size={9} color={theme.cream} ls={0.24} style={{ fontFamily: theme.sans, opacity: 0.75 }}>1891 → 2026</Caps>
                <div style={{ fontFamily: theme.serif, fontSize: 64, lineHeight: 1, marginTop: 8 }}>134</div>
                <div style={{ fontFamily: theme.serif, fontStyle: 'italic', fontSize: 15, marginTop: 6, opacity: 0.9 }}>years, four generations,<br />one family.</div>
              </div>
              <div style={{ aspectRatio: '3 / 4', overflow: 'hidden', position: 'relative' }}>
                <img src={img('story2', 800)} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="" />
                <PhotoKey label="story_2" />
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Press strip ────────────────────────────────────────────────
function PressStrip({ theme, mobile }) {
  const px = mobile ? 24 : 56;

  return (
    <section style={{ background: theme.sand, padding: `${theme.sp(72)}px ${px}px` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div data-reveal style={{ textAlign: 'center', marginBottom: 40 }}>
          <Caps size={10} color={theme.oxblood} ls={0.32} style={{ fontFamily: theme.sans }}>Here is where we write testimonials</Caps>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : `repeat(${PRESS.length}, 1fr)`,
          gap: mobile ? 24 : 32,
          alignItems: 'center',
        }}>
          {PRESS.map((p, i) => (
            <div key={p.name} data-reveal data-reveal-delay={String(Math.min(4, i + 1))} style={{ textAlign: 'center', position: 'relative' }}>
              <div style={{ fontFamily: theme.serif, fontStyle: 'italic', fontSize: 18, color: theme.ink, letterSpacing: '-0.005em' }}>{p.name}</div>
              <div style={{ fontFamily: theme.serif, fontSize: 13, fontStyle: 'italic', color: `${theme.ink}aa`, marginTop: 10, lineHeight: 1.5 }}>{p.quote}</div>
              {!mobile && i < PRESS.length - 1 && (
                <div style={{ position: 'absolute', right: -16, top: '20%', bottom: '20%', width: 1, background: `${theme.ink}22` }} />
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Dining ─────────────────────────────────────────────────────
function Dining({ theme, mobile }) {
  const [active, setActive] = React.useState(0);
  const cur = DINING[active];
  const px = mobile ? 24 : 56;

  return (
    <section id="dining" style={{ background: theme.cream, padding: `${theme.sp(160)}px ${px}px ${theme.sp(140)}px` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div data-reveal style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1.6fr',
          gap: mobile ? 24 : 96,
          marginBottom: mobile ? 40 : 80,
          alignItems: 'flex-end',
        }}>
          <div>
            <Caps size={10} color={theme.oxblood} ls={0.3} style={{ fontFamily: theme.sans }}>Chapter III · At the Table</Caps>
            <Rule color={theme.ink} w={36} opacity={0.35} style={{ marginTop: 14 }} />
          </div>
          <h2 style={{
            fontFamily: theme.serif, fontSize: 'clamp(36px, 5.5vw, 76px)',
            lineHeight: 1.0, fontWeight: 400, color: theme.ink,
            margin: 0, letterSpacing: '-0.02em',
          }}>
            Long lunches, <em style={{ fontStyle: 'italic', color: theme.oxblood }}>high tea</em>,<br />
            and a single malt at dusk.
          </h2>
        </div>

        <div data-reveal style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1.2fr 1fr',
          gap: mobile ? 32 : 64,
          alignItems: 'flex-start',
        }}>
          <div style={{ position: 'relative' }}>
            <div style={{ aspectRatio: '4 / 5', overflow: 'hidden', position: 'relative' }}>
              {DINING.map((d, i) => (
                <img key={d.name} src={img(d.image, 1200)} loading="lazy"
                  style={{
                    position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                    opacity: i === active ? 1 : 0, transition: 'opacity .6s ease',
                  }} alt="" />
              ))}
              <PhotoKey label={`dining_${active + 1}`} />
            </div>
            {!mobile && (
              <div style={{ position: 'absolute', bottom: -28, left: -28, background: theme.cream, padding: '18px 22px', border: `1px solid ${theme.ink}22` }}>
                <Caps size={9} color={theme.oxblood} ls={0.24} style={{ fontFamily: theme.sans }}>Plate {['II', 'III', 'IV'][active]}</Caps>
                <div style={{ fontFamily: theme.serif, fontStyle: 'italic', fontSize: 15, color: theme.ink, marginTop: 4 }}>{cur.name}.</div>
              </div>
            )}
          </div>

          <div style={{ marginTop: mobile ? 0 : 0 }}>
            {DINING.map((d, i) => (
              <button key={d.name}
                onClick={() => setActive(i)}
                onMouseEnter={() => !mobile && setActive(i)}
                style={{
                  display: 'block', width: '100%', textAlign: 'left',
                  padding: '28px 0', cursor: 'pointer',
                  background: 'transparent', border: 'none',
                  borderTop: i === 0 ? `1px solid ${theme.ink}22` : 'none',
                  borderBottom: `1px solid ${theme.ink}15`,
                  fontFamily: 'inherit', color: theme.ink,
                  opacity: i === active ? 1 : 0.55,
                  transition: 'opacity .3s ease',
                }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                  <h3 style={{ fontFamily: theme.serif, fontSize: mobile ? 26 : 32, fontWeight: 400, color: theme.ink, margin: 0, letterSpacing: '-0.01em' }}>
                    {i === active && <span style={{ color: theme.oxblood, marginRight: 12 }}>—</span>}
                    {d.name}
                  </h3>
                  <Caps size={10} color={theme.ink} ls={0.18} style={{ fontFamily: theme.sans, opacity: 0.6 }}>0{i + 1}</Caps>
                </div>
                <div style={{ fontFamily: theme.serif, fontStyle: 'italic', fontSize: 14, color: `${theme.ink}99`, marginBottom: 10 }}>{d.hours}</div>
                <div style={{ fontFamily: theme.sans, fontSize: 14, color: `${theme.ink}cc`, lineHeight: 1.6, maxWidth: 460 }}>{d.body}</div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Testimonial / Guest letter ─────────────────────────────────
function Testimonial({ theme, mobile }) {
  const px = mobile ? 24 : 56;

  return (
    <section style={{ background: theme.ink, color: theme.cream, padding: `${theme.sp(140)}px ${px}px` }}>
      <div style={{ maxWidth: 920, margin: '0 auto', textAlign: 'center' }}>
        <div data-reveal>
          <Caps size={10} color={theme.gilt} ls={0.3} style={{ fontFamily: theme.sans }}>A letter, recently received</Caps>
        </div>
        <blockquote data-reveal data-reveal-delay="1" style={{
          fontFamily: theme.serif, fontSize: 'clamp(22px, 3.4vw, 44px)',
          lineHeight: 1.3, fontStyle: 'italic', fontWeight: 400,
          color: theme.cream, margin: '32px 0 40px', letterSpacing: '-0.01em',
        }}>
          "{TESTIMONIAL.body}"
        </blockquote>
        <div data-reveal data-reveal-delay="2">
          <Rule color={theme.gilt} w={32} opacity={0.6} />
          <div style={{ fontFamily: theme.serif, fontSize: 18, color: theme.cream, marginTop: 18 }}>
            {TESTIMONIAL.signature}
          </div>
          {TESTIMONIAL.context && (
            <Caps size={10} color={theme.cream} ls={0.24} style={{ fontFamily: theme.sans, opacity: 0.55, display: 'block', marginTop: 8 }}>
              {TESTIMONIAL.context}
            </Caps>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── Tours ──────────────────────────────────────────────────────
function HeritageTours({ theme, mobile }) {
  const [active, setActive] = React.useState(0);
  const cur = TOURS[active];
  const px = mobile ? 24 : 56;

  return (
    <section id="tours" style={{ background: theme.ink, color: theme.cream, padding: `${theme.sp(160)}px ${px}px ${theme.sp(140)}px` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {/* header */}
        <div data-reveal style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1.6fr',
          gap: mobile ? 24 : 96,
          marginBottom: mobile ? 40 : 80,
          alignItems: 'flex-end',
        }}>
          <div>
            <Caps size={10} color={theme.gilt} ls={0.3} style={{ fontFamily: theme.sans }}>The Estate & Beyond</Caps>
            <Rule color={theme.cream} w={36} opacity={0.25} style={{ marginTop: 14 }} />
          </div>
          <h2 style={{
            fontFamily: theme.serif, fontSize: 'clamp(36px, 5.5vw, 76px)',
            lineHeight: 1.0, fontWeight: 400, color: theme.cream,
            margin: 0, letterSpacing: '-0.02em',
          }}>
            Let us take you around <em style={{ fontStyle: 'italic', color: theme.gilt }}>tea country.</em>
          </h2>
        </div>

        {/* tour list + image */}
        <div data-reveal style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1.2fr',
          gap: mobile ? 32 : 64,
          alignItems: 'flex-start',
        }}>
          {/* tours list */}
          <div>
            {TOURS.map((t, i) => (
              <button key={t.name}
                onClick={() => setActive(i)}
                onMouseEnter={() => !mobile && setActive(i)}
                style={{
                  display: 'block', width: '100%', textAlign: 'left',
                  padding: '28px 0', cursor: 'pointer',
                  background: 'transparent', border: 'none',
                  borderTop: i === 0 ? `1px solid ${theme.cream}22` : 'none',
                  borderBottom: `1px solid ${theme.cream}15`,
                  fontFamily: 'inherit', color: theme.cream,
                  opacity: i === active ? 1 : 0.45,
                  transition: 'opacity .3s ease',
                }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                  <h3 style={{ fontFamily: theme.serif, fontSize: mobile ? 24 : 28, fontWeight: 400, color: theme.cream, margin: 0, letterSpacing: '-0.01em' }}>
                    {i === active && <span style={{ color: theme.gilt, marginRight: 10 }}>—</span>}
                    {t.name}
                  </h3>
                  <Caps size={9} color={theme.cream} ls={0.18} style={{ fontFamily: theme.sans, opacity: 0.5 }}>{t.tag}</Caps>
                </div>
                <Caps size={9} color={theme.gilt} ls={0.2} style={{ fontFamily: theme.sans, marginBottom: 10, display: 'block' }}>{t.duration}</Caps>
                <div style={{ fontFamily: theme.sans, fontSize: 14, color: `${theme.cream}bb`, lineHeight: 1.65 }}>{t.body}</div>
              </button>
            ))}
            <div style={{ marginTop: 32 }}>
              <button style={{
                background: 'transparent', color: theme.cream,
                border: `1px solid ${theme.cream}55`, padding: '16px 32px',
                fontFamily: theme.sans, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
                cursor: 'pointer', fontWeight: 500, transition: 'border .2s, background .2s',
              }}
              onClick={() => window._openConcierge?.()}
              onMouseEnter={(e) => { e.currentTarget.style.background = theme.gilt; e.currentTarget.style.borderColor = theme.gilt; e.currentTarget.style.color = theme.ink; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = `${theme.cream}55`; e.currentTarget.style.color = theme.cream; }}>
                Enquire about a tour
              </button>
            </div>
          </div>

          {/* image */}
          <div style={{ position: 'relative' }}>
            <div style={{ aspectRatio: '4 / 5', overflow: 'hidden', position: 'relative' }}>
              {TOURS.map((t, i) => (
                <img key={t.name} src={img(t.image, 1200)} loading="lazy"
                  style={{
                    position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                    opacity: i === active ? 1 : 0, transition: 'opacity .6s ease',
                    filter: 'brightness(0.88)',
                  }} alt="" />
              ))}
              <PhotoKey label={`tours_${active + 1}`} />
            </div>
            {/* caption card */}
            <div style={{
              position: mobile ? 'static' : 'absolute',
              bottom: mobile ? 'auto' : -28, right: mobile ? 'auto' : -28,
              marginTop: mobile ? 16 : 0,
              background: theme.oxblood, color: theme.cream, padding: '20px 24px',
              maxWidth: mobile ? '100%' : 240,
            }}>
              <Caps size={9} color={theme.cream} ls={0.24} style={{ fontFamily: theme.sans, opacity: 0.7 }}>{cur.tag}</Caps>
              <div style={{ fontFamily: theme.serif, fontStyle: 'italic', fontSize: 15, marginTop: 6, lineHeight: 1.4 }}>{cur.name}.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HeritageStory = HeritageStory;
window.PressStrip = PressStrip;
window.HeritageTours = HeritageTours;
window.Dining = Dining;
window.Testimonial = Testimonial;