// components.jsx — shared primitives for たつた連泊プランLP
// HP-style: Noto Serif JP ruled, generous whitespace, hairline dividers, muted earth.

function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  React.useEffect(() => {
    const h = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', h, { passive: true });
    return () => window.removeEventListener('resize', h);
  }, []);
  return isMobile;
}

// Photo element with caption
function Photo({ src, alt, height, ratio, caption, fit = 'cover' }) {
  const style = ratio ? { width: '100%', aspectRatio: ratio } : { width: '100%', height };
  return (
    <figure style={{ margin: 0 }}>
      <div style={{ ...style, overflow: 'hidden', background: '#e8e4d7' }}>
        <img src={src} alt={alt || ''} style={{
          width: '100%', height: '100%', objectFit: fit, display: 'block',
        }}/>
      </div>
      {caption && (
        <figcaption style={{
          marginTop: 10,
          fontFamily: '"Noto Serif JP", serif',
          fontSize: 11, letterSpacing: '0.2em',
          color: 'rgba(60,52,40,0.7)',
        }}>— {caption}</figcaption>
      )}
    </figure>
  );
}

// HP-style section heading: English eyebrow + Japanese title, thin hairlines
function SectionHeading({ eyebrow, title, sub, align = 'center', light = false }) {
  const ink   = light ? '#F7F3E8' : '#2B2620';
  const muted = light ? 'rgba(247,243,232,0.55)' : 'rgba(60,52,40,0.55)';
  const line  = light ? 'rgba(247,243,232,0.4)' : 'rgba(60,52,40,0.35)';
  return (
    <div style={{
      textAlign: align,
      display: 'flex', flexDirection: 'column',
      alignItems: align === 'center' ? 'center' : 'flex-start',
      gap: 22, color: ink,
    }}>
      <div style={{
        fontFamily: '"Cormorant Garamond", serif',
        fontSize: 13, letterSpacing: '0.42em',
        color: muted, textTransform: 'uppercase',
        fontStyle: 'italic',
      }}>{eyebrow}</div>
      <h2 style={{
        margin: 0,
        fontFamily: '"Noto Serif JP", serif',
        fontWeight: 400,
        fontSize: 'clamp(22px, 2.2vw, 30px)',
        letterSpacing: '0.18em',
        lineHeight: 1.8,
      }}>{title}</h2>
      <div style={{ width: 32, height: 1, background: line }} />
      {sub && (
        <p style={{
          margin: 0, maxWidth: 640,
          fontFamily: '"Noto Serif JP", serif',
          fontSize: 14, lineHeight: 2.2,
          color: light ? 'rgba(247,243,232,0.78)' : 'rgba(60,52,40,0.78)',
          fontWeight: 300,
        }}>{sub}</p>
      )}
    </div>
  );
}

// Top bar — minimal, mix-blend like HP
function TopBar() {
  const isMobile = useIsMobile();
  const site = window.SITE_INFO || {};
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 90,
      padding: isMobile ? '16px 20px' : '22px 40px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      color: '#F7F3E8',
      mixBlendMode: 'difference',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <span style={{
          fontFamily: '"Noto Serif JP", serif',
          fontWeight: 500, fontSize: isMobile ? 14 : 17, letterSpacing: '0.32em',
        }}>{site.siteNameJa || '湯ヶ島 たつた'}</span>
        <span style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontStyle: 'italic',
          fontSize: 10, letterSpacing: '0.3em', opacity: 0.7,
        }}>{site.siteNameEn || 'Yugashima Tatsuta'}</span>
      </div>
      {!isMobile && (
        <nav style={{
          display: 'flex', gap: 28,
          fontFamily: '"Cormorant Garamond", serif',
          fontStyle: 'italic',
          fontSize: 13, letterSpacing: '0.24em',
        }}>
          <a href="#prologue" style={navLink}>Prologue</a>
          <a href="#okomori"  style={navLink}>Day · In</a>
          <a href="#shuyu"    style={navLink}>Day · Out</a>
          <a href="#reserve"  style={navLink}>Reserve</a>
        </nav>
      )}
    </header>
  );
}
const navLink = { color: 'inherit', textDecoration: 'none', opacity: 0.9 };

// Floating reserve button
function FloatingCTA() {
  const site = window.SITE_INFO || {};
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const h = () => setOn(window.scrollY > 600);
    h(); window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <a href="#reserve" style={{
      position: 'fixed', right: 24, bottom: 24, zIndex: 100,
      padding: '16px 26px',
      background: '#2B2620', color: '#F7F3E8',
      fontFamily: '"Noto Serif JP", serif',
      fontWeight: 400, fontSize: 14, letterSpacing: '0.22em',
      textDecoration: 'none',
      boxShadow: '0 14px 40px rgba(43,38,32,0.25)',
      opacity: on ? 1 : 0,
      transform: on ? 'translateY(0)' : 'translateY(16px)',
      pointerEvents: on ? 'auto' : 'none',
      transition: 'opacity 300ms, transform 300ms',
    }}>{site.ctaLabel || '連 泊 を 予 約 す る →'}</a>
  );
}

Object.assign(window, { Photo, SectionHeading, TopBar, FloatingCTA, useIsMobile });