// hero.jsx — Hero section, intro prologue, plan chooser

function Hero() {
  const hero = window.HERO || {};
  const [y, setY] = React.useState(0);
  const isMobile = useIsMobile();
  React.useEffect(() => {
    const h = () => setY(window.scrollY);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  const descLines = (hero.description || '').split('\n');

  return (
    <section style={{
      position: 'relative', height: '100vh', minHeight: isMobile ? 600 : 720,
      overflow: 'hidden', background: '#1a1410',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        transform: `translateY(${y * 0.3}px) scale(1.06)`,
      }}>
        <img src={hero.image} alt=""
          style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.72)' }}/>
      </div>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to bottom, rgba(20,14,10,0.55) 0%, transparent 30%, transparent 60%, rgba(20,14,10,0.55) 100%)',
      }}/>

      {/* tagline — vertical on desktop, horizontal centered on mobile */}
      {isMobile ? (
        <div style={{
          position: 'absolute',
          top: 140,
          left: 0, right: 0,
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          color: '#F7F3E8', gap: 12,
        }}>
          <div style={{
            fontFamily: '"Noto Serif JP", serif',
            fontWeight: 500,
            fontSize: 'clamp(26px, 7vw, 36px)',
            letterSpacing: '0.28em',
            lineHeight: 2.2,
            textShadow: '0 4px 30px rgba(0,0,0,0.6)',
            textAlign: 'center',
          }}>
            {hero.titleLine1 || '急がない、贅沢。'}<br/>
            {hero.titleLine2 || '連泊の、過ごし方。'}
          </div>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif',
            fontStyle: 'italic',
            fontSize: 11, letterSpacing: '0.3em',
            color: 'rgba(247,243,232,0.65)',
          }}>{hero.enLabel || 'Renpaku. A Two-Night Stay.'}</div>
        </div>
      ) : (
        <div style={{
          position: 'absolute',
          right: 'clamp(40px, 7vw, 110px)',
          top: '50%', transform: 'translateY(-50%)',
          display: 'flex', flexDirection: 'row-reverse', gap: 36,
          writingMode: 'vertical-rl',
          color: '#F7F3E8',
        }}>
          <div style={{
            fontFamily: '"Noto Serif JP", serif',
            fontWeight: 500,
            fontSize: 'clamp(28px, 3.6vw, 48px)',
            letterSpacing: '0.32em',
            lineHeight: 1.8,
            textShadow: '0 4px 30px rgba(0,0,0,0.6)',
          }}>
            {hero.titleLine1 || '急がない、贅沢。'}<br/>
            {hero.titleLine2 || '連泊の、過ごし方。'}
          </div>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif',
            fontStyle: 'italic',
            fontSize: 14, letterSpacing: '0.36em',
            color: 'rgba(247,243,232,0.72)',
            paddingTop: 40,
            writingMode: 'horizontal-tb',
            transform: 'rotate(180deg)',
          }}>{hero.enLabel || 'Renpaku. A Two-Night Stay.'}</div>
        </div>
      )}

      {/* left: copy */}
      <div style={{
        position: 'absolute',
        left: isMobile ? 24 : 'clamp(24px, 4vw, 60px)',
        bottom: isMobile ? 72 : 88,
        color: '#F7F3E8',
        maxWidth: isMobile ? 'calc(100% - 48px)' : 380,
      }}>
        <div style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontStyle: 'italic',
          fontSize: 13, letterSpacing: '0.32em',
          color: 'rgba(247,243,232,0.75)',
          marginBottom: 22,
        }}>{hero.enEyebrow || '— Tatsuta Renpaku Plan —'}</div>
        <div style={{
          fontFamily: '"Noto Serif JP", serif',
          fontWeight: 300,
          fontSize: isMobile ? 13 : 15, lineHeight: 2.4,
          color: 'rgba(247,243,232,0.92)',
        }}>
          {descLines.map((line, i) => (
            <React.Fragment key={i}>
              {line}
              {i < descLines.length - 1 && <br/>}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div style={{
        position: 'absolute', left: '50%', bottom: 32,
        transform: 'translateX(-50%)',
        color: 'rgba(247,243,232,0.6)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontStyle: 'italic', fontSize: 11, letterSpacing: '0.32em',
        }}>scroll</div>
        <div style={{
          width: 1, height: 48,
          background: 'linear-gradient(to bottom, rgba(247,243,232,0.7), transparent)',
          animation: 'scP 2.2s ease-in-out infinite',
        }}/>
      </div>
      <style>{`
        @keyframes scP {
          0%,100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
          50%     { transform: scaleY(1);   transform-origin: top; opacity: 1;   }
        }
      `}</style>
    </section>
  );
}

function Prologue() {
  const pro = window.PROLOGUE || {};
  const isMobile = useIsMobile();
  const body = pro.body || '';
  const highlight = pro.highlight || '特別オプション';

  // ハイライト語をstrong化（改行も処理）
  const renderBody = () => {
    if (!body) return null;
    const parts = body.split(highlight);
    if (parts.length === 1) {
      return body.split('\n').map((line, i, arr) => (
        <React.Fragment key={i}>
          {line}
          {i < arr.length - 1 && <br/>}
        </React.Fragment>
      ));
    }
    const out = [];
    parts.forEach((part, idx) => {
      const lines = part.split('\n');
      lines.forEach((line, lidx) => {
        out.push(<React.Fragment key={`${idx}-${lidx}`}>{line}</React.Fragment>);
        if (lidx < lines.length - 1) out.push(<br key={`br-${idx}-${lidx}`}/>);
      });
      if (idx < parts.length - 1) {
        out.push(<strong key={`hl-${idx}`} style={{ color:'#6B5A3E', fontWeight:500 }}>{highlight}</strong>);
      }
    });
    return out;
  };

  return (
    <section id="prologue" style={{
      padding: isMobile ? '80px 24px' : '140px 40px 120px',
      background: '#F7F3E8', color: '#2B2620',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto',
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr', gap: isMobile ? 40 : 80,
        alignItems: 'center' }}>
        <div>
          <Photo src={pro.image} ratio={isMobile ? '16/9' : '3/4'} />
        </div>
        <div>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif',
            fontStyle: 'italic',
            fontSize: 12, letterSpacing: '0.4em',
            color: 'rgba(60,52,40,0.55)',
            marginBottom: 18,
          }}>— 01. Prologue —</div>
          <h2 style={{
            margin: 0,
            fontFamily: '"Noto Serif JP", serif',
            fontWeight: 400,
            fontSize: 'clamp(26px, 2.8vw, 38px)',
            letterSpacing: '0.18em',
            lineHeight: 2.0,
            color: '#2B2620',
          }}>
            {pro.titleLine1 || '連泊という、'}<br/>
            {pro.titleLine2 || 'ゆるやかな時間。'}
          </h2>
          <div style={{ width: 32, height: 1, background: 'rgba(60,52,40,0.4)', margin: '34px 0' }} />
          <p style={{
            margin: 0,
            fontFamily: '"Noto Serif JP", serif',
            fontWeight: 300,
            fontSize: 15, lineHeight: 2.4,
            color: 'rgba(43,38,32,0.85)',
          }}>
            {renderBody()}
          </p>
        </div>
      </div>
    </section>
  );
}

// Plan chooser — two cards, same price
function PlanChoose() {
  const isMobile = useIsMobile();
  return (
    <section id="plans" style={{
      padding: isMobile ? '80px 24px' : '140px 40px',
      background: '#EFEADB',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <SectionHeading
          eyebrow="— 02. Two Ways —"
          title="連泊の二つの過ごし方"
        />

        <div style={{ marginTop: isMobile ? 48 : 80, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 36 }}>
          {PLANS.map((p) => (
            <div key={p.id} style={{
              textDecoration: 'none', color: 'inherit',
              background: '#F7F3E8',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ position: 'relative', overflow: 'hidden' }}>
                <Photo src={p.coverImage} ratio="4/3" />
                <div style={{
                  position: 'absolute', top: 20, left: 20,
                  width: 54, height: 54,
                  background: '#F7F3E8',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: '"Noto Serif JP", serif',
                  fontSize: 26, fontWeight: 500, color: '#2B2620',
                  letterSpacing: '0.04em',
                }}>{p.kanji}</div>
              </div>
              <div style={{ padding: isMobile ? '24px 20px 28px' : '36px 36px 40px' }}>
                <div style={{
                  fontFamily: '"Cormorant Garamond", serif',
                  fontStyle: 'italic',
                  fontSize: 13, letterSpacing: '0.3em',
                  color: 'rgba(60,52,40,0.6)',
                  marginBottom: 10,
                }}>{p.en}</div>
                <h3 style={{
                  margin: 0,
                  fontFamily: '"Noto Serif JP", serif',
                  fontWeight: 400, fontSize: 28,
                  letterSpacing: '0.22em', lineHeight: 1.4,
                  color: '#2B2620',
                }}>{p.kana}</h3>
                <div style={{ width: 24, height: 1, background: 'rgba(60,52,40,0.35)', margin: '22px 0 20px' }} />
                <p style={{
                  margin: 0,
                  fontFamily: '"Noto Serif JP", serif',
                  fontWeight: 500, fontSize: 17,
                  letterSpacing: '0.08em', lineHeight: 2,
                  color: '#6B5A3E',
                }}>{p.tagline}</p>
                <p style={{
                  margin: '16px 0 14px',
                  fontFamily: '"Noto Serif JP", serif',
                  fontWeight: 300, fontSize: 14,
                  lineHeight: 2.1,
                  color: 'rgba(43,38,32,0.78)',
                }}>{p.body}</p>
                {p.note && (
                  <p style={{
                    margin: '0 0 24px',
                    fontFamily: '"Noto Serif JP", serif',
                    fontWeight: 300, fontSize: 11,
                    lineHeight: 1.9, letterSpacing: '0.04em',
                    color: 'rgba(107,90,62,0.9)',
                  }}>{p.note}</p>
                )}
                <div style={{
                  display: 'flex', flexWrap: 'wrap', gap: 8,
                }}>
                  {(p.keywords || []).map(k => (
                    <span key={k} style={{
                      fontFamily: '"Noto Serif JP", serif',
                      fontWeight: 300,
                      fontSize: 11, letterSpacing: '0.18em',
                      color: 'rgba(60,52,40,0.7)',
                      padding: '4px 10px',
                      border: '1px solid rgba(60,52,40,0.25)',
                    }}>{k}</span>
                  ))}
                </div>
                <div style={{
                  marginTop: 32, paddingTop: 20,
                  borderTop: '1px solid rgba(60,52,40,0.18)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                }}>
                  <span style={{
                    fontFamily: '"Noto Serif JP", serif',
                    fontWeight: 300, fontSize: 12,
                    color: 'rgba(60,52,40,0.6)', letterSpacing: '0.12em',
                  }}>{p.priceLabel}</span>
                  <a href={`#${p.id}`} style={{
                    fontFamily: '"Cormorant Garamond", serif',
                    fontStyle: 'italic',
                    fontSize: 14, letterSpacing: '0.22em',
                    color: '#6B5A3E',
                    textDecoration: 'none',
                  }}>Read more →</a>
                </div>
                <a href={p.reserveUrl || '#'} target="_blank" rel="noopener noreferrer" style={{
                  display: 'block',
                  margin: isMobile ? '28px 0 0' : '28px 36px 36px',
                  padding: '16px',
                  background: '#2B2620',
                  color: '#F7F3E8',
                  fontFamily: '"Noto Serif JP", serif',
                  fontWeight: 400, fontSize: 14, letterSpacing: '0.28em',
                  textAlign: 'center',
                  textDecoration: 'none',
                }}>ご 予 約 は こ ち ら</a>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

// プロモーションバナー（サマーセール等の期間限定キャンペーン）
// 表示・非表示はACFで切替可能。レスポンシブ幅にも対応
function PromoBanner() {
  const banner = window.PROMO_BANNER || {};
  if (!banner.enabled || !banner.image) {
    return null;
  }
  const widthPercent = banner.widthPercent || 50;
  const widthPercentMobile = banner.widthPercentMobile || 95;
  const breakpoint = banner.breakpoint || 768;
  const bgColor = banner.bgColor || '#F7F3E8';
  const padding = banner.padding || '60px 40px';
  const paddingMobile = banner.paddingMobile || '32px 16px';
  const url = banner.url || '#';
  const alt = banner.alt || '';
  const newTab = banner.openInNewTab !== false;
  const wrapClass = 'tatsuta-renpaku-lp-v8-promo-wrap';
  const linkClass = 'tatsuta-renpaku-lp-v8-promo-link';
  const responsiveCss = `
    .${wrapClass} { padding: ${padding}; }
    .${linkClass} { display: inline-block; width: ${widthPercent}%; }
    @media (max-width: ${breakpoint}px) {
      .${wrapClass} { padding: ${paddingMobile}; }
      .${linkClass} { width: ${widthPercentMobile}%; }
    }
  `;
  return (
    <div className={wrapClass} style={{ background: bgColor, textAlign: 'center' }}>
      <style>{responsiveCss}</style>
      <a
        href={url}
        target={newTab ? '_blank' : '_self'}
        rel={newTab ? 'noopener noreferrer' : undefined}
        className={linkClass}
      >
        <img
          src={banner.image}
          alt={alt}
          style={{ width: '100%', display: 'block' }}
        />
      </a>
    </div>
  );
}

Object.assign(window, { Hero, Prologue, PlanChoose, PromoBanner });