// daysection.jsx — Day timeline for okomori & shuyu, seasonal spots, closing

function DaySection({ plan, entries, index }) {
  const isOko = plan.id === 'okomori';
  const isMobile = useIsMobile();
  return (
    <section id={plan.id} style={{
      padding: isMobile ? '80px 24px 60px' : '160px 40px 140px',
      background: isOko ? '#F7F3E8' : '#EFEADB',
      color: '#2B2620',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* watermark kanji */}
      <div style={{
        position: 'absolute',
        right: isOko ? 'auto' : -30, left: isOko ? -30 : 'auto',
        top: 120,
        fontFamily: '"Noto Serif JP", serif',
        fontWeight: 400,
        fontSize: isMobile ? 'clamp(120px, 30vw, 200px)' : 'clamp(220px, 32vw, 480px)',
        color: 'rgba(107,90,62,0.08)',
        lineHeight: 0.85,
        pointerEvents: 'none', userSelect: 'none',
      }}>{plan.kanji}</div>

      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
        <SectionHeading
          eyebrow={`— 0${index} · A Day ${isOko ? 'Within' : 'Around'} —`}
          title={plan.id === 'shuyu' ? 'トゥクトゥクで周遊。' : `${plan.kana}の、一日。`}
          sub={isOko
            ? '一歩も外へ出なくていい日。館内の湯と、本と、食だけで、一日が満ちる。'
            : '小さな三輪車で、天城の懐へ。風を切りながら、自分のペースで巡る一日。'}
        />

        <div style={{ marginTop: isMobile ? 60 : 100 }}>
          {entries.map((e, i) => (
            <TimelineRow key={i} entry={e} index={i}
              side={i % 2 === 0 ? 'left' : 'right'} isLast={i === entries.length - 1}
              bg={isOko ? '#F7F3E8' : '#EFEADB'} />
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 60 }}>
          <span style={{
            display: 'inline-block',
            padding: '12px 32px',
            background: 'transparent',
            border: '1px solid rgba(60,52,40,0.3)',
            fontFamily: '"Noto Serif JP", serif',
            fontWeight: 400, fontSize: 13,
            letterSpacing: '0.32em',
            color: 'rgba(60,52,40,0.75)',
          }}>そ し て 、 ま た 朝 へ</span>
        </div>
      </div>
    </section>
  );
}

function TimelineRow({ entry, index, side, isLast, bg = '#F7F3E8' }) {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  const isMobile = useIsMobile();
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      ([e]) => e.isIntersecting && setInView(true),
      { threshold: 0.15 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const isLeft = side === 'left';

  if (isMobile) {
    return (
      <div ref={ref} style={{
        display: 'flex',
        paddingBottom: isLast ? 0 : 48,
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(30px)',
        transition: 'opacity 700ms ease, transform 700ms ease',
      }}>
        {/* Left: spine */}
        <div style={{ width: 64, flexShrink: 0, position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{
            position: 'absolute', left: '50%', transform: 'translateX(-0.5px)',
            top: index === 0 ? 34 : 0,
            bottom: isLast ? 34 : -48,
            width: 1, background: 'rgba(107,90,62,0.3)',
          }} />
          <div style={{
            position: 'relative', zIndex: 1,
            marginTop: 8, flexShrink: 0,
            width: 52, height: 52, borderRadius: '50%',
            background: bg,
            border: '1px solid rgba(107,90,62,0.45)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: '"Noto Serif JP", serif',
            fontWeight: 400, fontSize: 12, letterSpacing: '0.04em',
            color: '#6B5A3E',
          }}>{entry.time}</div>
        </div>
        {/* Right: content */}
        <div style={{ flex: 1, paddingLeft: 16 }}>
          {entry.highlight && (
            <div style={{
              fontFamily: '"Cormorant Garamond", serif',
              fontStyle: 'italic', fontSize: 11, letterSpacing: '0.24em',
              color: '#8C7142', marginBottom: 8, paddingTop: 14,
            }}>★ signature</div>
          )}
          <Photo src={entry.image} ratio="4/3" caption={entry.caption} />
          <TextBlock entry={entry} align="left" />
        </div>
      </div>
    );
  }

  return (
    <div ref={ref} style={{
      display: 'grid',
      gridTemplateColumns: '1fr 100px 1fr',
      gap: 0,
      marginTop: index === 0 ? 0 : 80,
      opacity: inView ? 1 : 0,
      transform: inView ? 'translateY(0)' : 'translateY(30px)',
      transition: 'opacity 700ms ease, transform 700ms ease',
    }}>
      {/* Left side — photo when isLeft, text when !isLeft */}
      <div style={{ gridColumn: 1, paddingRight: 40,
                    display: 'flex', justifyContent: 'flex-end' }}>
        {isLeft
          ? <div style={{ maxWidth: 440, width: '100%' }}>
              <Photo src={entry.image} ratio="4/3" caption={entry.caption} />
            </div>
          : <TextBlock entry={entry} align="right" />
        }
      </div>

      {/* Center — time marker */}
      <div style={{ gridColumn: 2, position: 'relative',
                    display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        {/* vertical line */}
        <div style={{
          position: 'absolute', left: '50%', top: 0, bottom: isLast ? '50%' : -80,
          width: 1, background: 'rgba(107,90,62,0.3)',
          transform: 'translateX(-0.5px)',
        }}/>
        <div style={{
          position: 'relative',
          marginTop: 24,
          width: 64, height: 64, borderRadius: 64,
          background: '#F7F3E8',
          border: '1px solid rgba(107,90,62,0.45)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: '"Noto Serif JP", serif',
          fontWeight: 400, fontSize: 14, letterSpacing: '0.04em',
          color: '#6B5A3E',
        }}>{entry.time}</div>
        {entry.highlight && (
          <div style={{
            marginTop: 8,
            fontFamily: '"Cormorant Garamond", serif',
            fontStyle: 'italic', fontSize: 11, letterSpacing: '0.24em',
            color: '#8C7142',
          }}>★ signature</div>
        )}
      </div>

      {/* Right */}
      <div style={{ gridColumn: 3, paddingLeft: 40 }}>
        {isLeft
          ? <TextBlock entry={entry} align="left" />
          : <div style={{ maxWidth: 440 }}>
              <Photo src={entry.image} ratio="4/3" caption={entry.caption} />
            </div>
        }
      </div>
    </div>
  );
}

function TextBlock({ entry, align }) {
  return (
    <div style={{
      textAlign: align, paddingTop: 30,
      maxWidth: 440,
      marginLeft: align === 'left' ? 0 : 'auto',
    }}>
      {entry.tuk && (
        <div style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontStyle: 'italic',
          fontSize: 11, letterSpacing: '0.24em',
          color: 'rgba(107,90,62,0.7)',
          marginBottom: 10,
        }}>Tuk-Tuk · {entry.tuk} min</div>
      )}
      <h4 style={{
        margin: 0,
        fontFamily: '"Noto Serif JP", serif',
        fontWeight: 500, fontSize: 22,
        letterSpacing: '0.12em', lineHeight: 1.8,
        color: '#2B2620',
      }}>{entry.title}</h4>
      <div style={{
        width: 24, height: 1, background: 'rgba(107,90,62,0.4)',
        margin: align === 'right' ? '22px 0 22px auto' : '22px 0',
      }}/>
      <p style={{
        margin: 0, whiteSpace: 'pre-line',
        fontFamily: '"Noto Serif JP", serif',
        fontWeight: 300, fontSize: 14, lineHeight: 2.3,
        color: 'rgba(43,38,32,0.85)',
      }}>{entry.body}</p>
    </div>
  );
}

// Seasonal spots row (ties into Shuyu plan narrative)
function SeasonalSpots() {
  const isMobile = useIsMobile();
  return (
    <section style={{
      padding: isMobile ? '80px 24px' : '140px 40px',
      background: '#2B2620', color: '#F7F3E8',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <SectionHeading
          light
          eyebrow="— 04. Around Amagi —"
          title="季節ごとに、巡りたい場所"
          sub="トゥクトゥクの行き先は、季節でも変わります。ご予約時にお気軽にご相談ください。"
        />
        <div style={{
          marginTop: isMobile ? 48 : 80,
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: isMobile ? 20 : 28,
        }}>
          {SEASONAL_SPOTS.map(s => (
            <div key={s.label}>
              <div style={{ aspectRatio: '3/4', overflow: 'hidden' }}>
                <img src={s.image} alt=""
                  style={{ width: '100%', height: '100%', objectFit: 'cover',
                           filter: 'brightness(0.92)' }} />
              </div>
              <div style={{ marginTop: 18 }}>
                <h5 style={{
                  margin: 0,
                  fontFamily: '"Noto Serif JP", serif',
                  fontWeight: 500, fontSize: isMobile ? 14 : 18,
                  letterSpacing: '0.16em',
                }}>{s.label}</h5>
                <div style={{
                  marginTop: 6,
                  fontFamily: '"Noto Serif JP", serif',
                  fontWeight: 300, fontSize: 12,
                  letterSpacing: '0.12em',
                  color: 'rgba(247,243,232,0.65)',
                }}>{s.sub}</div>
                <div style={{
                  marginTop: 10,
                  fontFamily: '"Cormorant Garamond", serif',
                  fontStyle: 'italic', fontSize: 11,
                  letterSpacing: '0.24em',
                  color: 'rgba(247,243,232,0.5)',
                }}>Tuk · approx {s.km} km</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqSection() {
  const [open, setOpen] = React.useState(0);
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '80px 24px' : '140px 40px', background: '#F7F3E8' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <SectionHeading eyebrow="— 05. Q & A —" title="よくあるご質問" />
        <div style={{ marginTop: isMobile ? 48 : 72 }}>
          {FAQ.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid rgba(60,52,40,0.18)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', padding: '26px 0',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
                  fontFamily: '"Noto Serif JP", serif',
                  fontWeight: 500, fontSize: isMobile ? 14 : 16, letterSpacing: '0.1em',
                  color: '#2B2620',
                }}>
                  <span>{f.q}</span>
                  <span style={{
                    fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                    fontSize: 18, color: '#8C7142',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform 260ms',
                    flexShrink: 0, marginLeft: 12,
                  }}>+</span>
                </button>
                <div style={{ maxHeight: isOpen ? 600 : 0, overflow: 'hidden',
                              transition: 'max-height 320ms ease' }}>
                  <div style={{
                    padding: '0 0 26px',
                    fontFamily: '"Noto Serif JP", serif',
                    fontWeight: 300, fontSize: 14, lineHeight: 2.2,
                    color: 'rgba(43,38,32,0.78)',
                    whiteSpace: 'pre-line',
                  }}>{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Reserve() {
  const r = window.RESERVE_DATA || {};
  const isMobile = useIsMobile();
  return (
    <section id="reserve" style={{
      padding: isMobile ? '80px 24px 60px' : '160px 40px 140px',
      background: '#1a1410', color: '#F7F3E8',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.22,
      }}>
        <img src={r.image} alt=""
          style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.6)' }}/>
      </div>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to bottom, rgba(26,20,16,0.8), rgba(26,20,16,0.95))',
      }}/>
      <div style={{ position: 'relative', maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
        <SectionHeading
          light
          eyebrow="— 06. Reserve —"
          title="連泊プラン、受付開始"
        />

        <div style={{
          marginTop: 60,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24,
          maxWidth: 760, marginLeft: 'auto', marginRight: 'auto',
        }}>
          {PLANS.map((p) => (
            <div key={p.id} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              padding: isMobile ? '28px 24px' : '36px 40px',
              border: '1px solid rgba(247,243,232,0.25)',
            }}>
              <div style={{
                fontFamily: '"Noto Serif JP", serif',
                fontWeight: 400, fontSize: 15,
                letterSpacing: '0.28em',
                color: 'rgba(247,243,232,0.85)',
                marginBottom: 10,
              }}>{p.kana}</div>
              <div style={{
                fontFamily: '"Noto Serif JP", serif',
                fontWeight: 300, fontSize: isMobile ? 36 : 46,
                letterSpacing: '0.04em', lineHeight: 1,
                color: '#F7F3E8',
              }}>¥ {p.reservePrice}<span style={{ fontSize: 16, marginLeft: 4, color: 'rgba(247,243,232,0.7)' }}>〜</span></div>
              <div style={{
                marginTop: 12,
                fontFamily: '"Noto Serif JP", serif',
                fontWeight: 300, fontSize: 12,
                letterSpacing: '0.18em',
                color: 'rgba(247,243,232,0.7)',
              }}>{r.priceUnitLabel || '二泊一名あたり'}</div>
              <div style={{
                marginTop: 4,
                fontFamily: '"Noto Serif JP", serif',
                fontWeight: 300, fontSize: 11,
                letterSpacing: '0.14em',
                color: 'rgba(247,243,232,0.55)',
              }}>{(window.PRICE || {}).subNote}</div>
              <a href={p.reserveUrl || '#'} target="_blank" rel="noopener noreferrer" style={{
                marginTop: 28,
                display: 'block', width: '100%',
                padding: '16px 0',
                background: '#F7F3E8', color: '#2B2620',
                fontFamily: '"Noto Serif JP", serif', fontWeight: 400,
                fontSize: 13, letterSpacing: '0.28em',
                textAlign: 'center',
                textDecoration: 'none',
              }}>ご 予 約 は こ ち ら</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const site = window.SITE_INFO || {};
  const isMobile = useIsMobile();
  return (
    <footer style={{
      padding: isMobile ? '24px 20px' : '32px 40px',
      background: '#100c0a',
      color: 'rgba(247,243,232,0.5)',
      display: 'flex', justifyContent: 'space-between',
      fontFamily: '"Cormorant Garamond", serif',
      fontStyle: 'italic',
      fontSize: 11, letterSpacing: '0.24em',
      flexWrap: 'wrap', gap: 12,
    }}>
      <div>{site.copyright || '© 2026 Yugashima Tatsuta'}</div>
      <div>{site.footerEn || 'Renpaku Landing · 2026'}</div>
    </footer>
  );
}

Object.assign(window, { DaySection, SeasonalSpots, FaqSection, Reserve, Footer });
