// Variation A — Editorial / HOSHINOYA-esque
// Real photography of 阿治古の宿.

const BOOKING_URL = 'https://www.booking.com/hotel/jp/smart-house-kominka.ja.html';

// ── Palette ────────────────────────────────────────────────────────────────
const C = {
  cream:       '#f4efe6',
  dark:        '#1a1613',
  stone:       '#ece4d4',
  accent:      '#a9714c',
  accentLight: '#d8a57f',
  footer:      '#14100d',
  border:      'rgba(26,22,19,0.22)',
  borderLight: 'rgba(244,239,230,0.25)',
};

// ── Typography tokens ──────────────────────────────────────────────────────
const aStyles = {
  root: {
    width: '100%',
    background: C.cream,
    color: C.dark,
    fontFamily: '"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif',
    fontSize: 14,
    lineHeight: 1.85,
    letterSpacing: '0.03em',
    overflow: 'hidden',
  },
  serif: {
    fontFamily: '"Shippori Mincho", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif',
    fontWeight: 500,
    letterSpacing: '0.05em',
  },
  mono: {
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    letterSpacing: '0.15em',
  },
};

// ── Helpers ────────────────────────────────────────────────────────────────
const photoBg = (src) => ({
  backgroundImage: `url(${src})`,
  backgroundSize: 'cover',
  backgroundPosition: 'center',
});

// ── Responsive context ─────────────────────────────────────────────────────
// Provides isMobile (< 768px) to all components without prop drilling.
const MediaCtx = React.createContext(false);
const useIsMobile = () => React.useContext(MediaCtx);

// ── Wrap: standard section + centred container ─────────────────────────────
// Automatically applies reduced padding on mobile.
function Wrap({ id, bg, color, maxWidth = 1240, style, children }) {
  const isMobile = useIsMobile();
  return (
    <section id={id} style={{ padding: isMobile ? '80px 24px' : '160px 48px', background: bg, color, ...style }}>
      <div style={{ maxWidth, margin: '0 auto' }}>
        {children}
      </div>
    </section>
  );
}

// ── Root ───────────────────────────────────────────────────────────────────
function Site() {
  const [lang, setLang] = React.useState(() => localStorage.getItem('ajiko-lang') || 'ja');
  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth < 768);

  React.useEffect(() => { localStorage.setItem('ajiko-lang', lang); }, [lang]);
  React.useEffect(() => {
    const h = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', h, { passive: true });
    return () => window.removeEventListener('resize', h);
  }, []);

  const t = COPY[lang];
  return (
    <MediaCtx.Provider value={isMobile}>
      <div style={aStyles.root}>
        <Nav t={t} lang={lang} setLang={setLang} />
        <Hero t={t} />
        <Concept t={t} />
        <Onsen t={t} />
        <Rooms t={t} />
        <Area t={t} />
      <Price t={t} />
      <Reviews t={t} />
      <Info t={t} />
        <Gallery />
        <Footer t={t} lang={lang} />
      </div>
    </MediaCtx.Provider>
  );
}

// ── Nav ────────────────────────────────────────────────────────────────────
function Nav({ t, lang, setLang }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isMobile = useIsMobile();

  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    h();
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  // Close drawer when switching to desktop
  React.useEffect(() => { if (!isMobile) setMenuOpen(false); }, [isMobile]);

  const opaque = scrolled || menuOpen;
  const navColor = opaque ? C.dark : C.cream;

  return (
    <>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 40,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: isMobile ? '14px 20px' : (scrolled ? '16px 32px' : '24px 40px'),
        background: opaque ? 'rgba(244,239,230,0.96)' : 'transparent',
        backdropFilter: opaque ? 'blur(14px)' : 'none',
        color: navColor,
        borderBottom: opaque ? '1px solid rgba(26,22,19,0.08)' : '1px solid transparent',
        transition: 'all 400ms ease',
      }}>
        {/* Logo */}
        <a href="#top" style={{ color: 'inherit', textDecoration: 'none', display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <div style={{ ...aStyles.serif, fontSize: isMobile ? 15 : 18, letterSpacing: '0.2em' }}>阿治古の宿</div>
          <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55 }}>AJIKO</div>
        </a>

        {isMobile ? (
          /* Mobile: lang toggle + hamburger */
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button onClick={() => setLang(lang === 'ja' ? 'en' : 'ja')}
              style={{ background: 'none', border: '1px solid currentColor', color: 'inherit', cursor: 'pointer', padding: '5px 10px', ...aStyles.mono, fontSize: 10, opacity: 0.8 }}>
              {lang === 'ja' ? 'EN' : 'JA'}
            </button>
            {/* Hamburger icon — animates to ✕ when open */}
            <button onClick={() => setMenuOpen(o => !o)}
              aria-label="メニュー"
              style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', padding: '6px 4px', display: 'flex', flexDirection: 'column', gap: 5 }}>
              {[0, 1, 2].map(n => (
                <span key={n} style={{
                  display: 'block', width: 22, height: 1.5, background: 'currentColor',
                  transform: menuOpen
                    ? (n === 0 ? 'translateY(6.5px) rotate(45deg)' : n === 2 ? 'translateY(-6.5px) rotate(-45deg)' : 'scaleX(0)')
                    : 'none',
                  transition: 'all 280ms ease',
                  transformOrigin: 'center',
                }} />
              ))}
            </button>
          </div>
        ) : (
          /* Desktop: nav links + controls */
          <div style={{ display: 'flex', gap: 26, alignItems: 'center', ...aStyles.mono, fontSize: 10, textTransform: 'uppercase' }}>
            {Object.entries(t.nav).map(([k, v]) => (
              <a key={k} href={`#${k}`} style={{ color: 'inherit', textDecoration: 'none', opacity: 0.85 }}>{v}</a>
            ))}
            <span style={{ opacity: 0.3 }}>|</span>
            <button onClick={() => setLang(lang === 'ja' ? 'en' : 'ja')}
              style={{ background: 'none', border: '1px solid currentColor', color: 'inherit', cursor: 'pointer', padding: '5px 10px', ...aStyles.mono, fontSize: 10, opacity: 0.8 }}>
              {lang === 'ja' ? 'EN' : 'JA'}
            </button>
            <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{
              padding: '9px 18px', background: C.dark, color: C.cream, textDecoration: 'none',
              ...aStyles.mono, fontSize: 10, letterSpacing: '0.25em',
            }}>{t.book}</a>
          </div>
        )}
      </nav>

      {/* Mobile slide-down drawer */}
      <div style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 39,
        background: 'rgba(244,239,230,0.97)', backdropFilter: 'blur(14px)',
        padding: '88px 32px 52px',
        transform: menuOpen ? 'translateY(0)' : 'translateY(-110%)',
        transition: 'transform 380ms cubic-bezier(0.4,0,0.2,1)',
        display: isMobile ? 'flex' : 'none',
        flexDirection: 'column',
      }}>
        {Object.entries(t.nav).map(([k, v]) => (
          <a key={k} href={`#${k}`} onClick={() => setMenuOpen(false)}
            style={{
              color: C.dark, textDecoration: 'none',
              ...aStyles.serif, fontSize: 22,
              padding: '18px 0', borderBottom: `1px solid ${C.border}`,
              display: 'block',
            }}>{v}</a>
        ))}
        <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" onClick={() => setMenuOpen(false)}
          style={{
            display: 'inline-block', marginTop: 36, padding: '14px 28px', alignSelf: 'flex-start',
            background: C.dark, color: C.cream, textDecoration: 'none',
            ...aStyles.mono, fontSize: 11, letterSpacing: '0.25em',
          }}>{t.book} →</a>
      </div>
    </>
  );
}

// ── Hero ───────────────────────────────────────────────────────────────────
function Hero({ t }) {
  const slides = [PHOTOS.sunset, PHOTOS.garden, PHOTOS.corridor, PHOTOS.bathWater];
  const [i, setI] = React.useState(0);
  const isMobile = useIsMobile();

  React.useEffect(() => {
    const id = setInterval(() => setI(s => (s + 1) % slides.length), 5600);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="top" style={{ position: 'relative', height: '100vh', minHeight: isMobile ? 580 : 720, overflow: 'hidden', background: C.dark }}>
      {slides.map((src, idx) => (
        <div key={idx} style={{
          position: 'absolute', inset: 0,
          opacity: idx === i ? 1 : 0,
          transform: idx === i ? 'scale(1.05)' : 'scale(1)',
          transition: 'opacity 2000ms ease, transform 8000ms ease',
          ...photoBg(src),
        }} />
      ))}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,22,19,0.35) 0%, rgba(26,22,19,0.1) 38%, rgba(26,22,19,0.75) 100%)' }} />

      {/* Bottom text block */}
      <div style={{
        position: 'absolute',
        left: isMobile ? 24 : 48,
        bottom: isMobile ? 48 : 96,
        right: isMobile ? 24 : 48,
        color: C.cream,
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: isMobile ? 'flex-end' : 'space-between',
        alignItems: isMobile ? 'flex-start' : 'flex-end',
        gap: isMobile ? 24 : 48,
      }}>
        <div style={{ maxWidth: 680 }}>
          <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.85, marginBottom: 18, textTransform: 'uppercase' }}>
            {t.brand}
          </div>
          <h1 style={{
            ...aStyles.serif,
            fontSize: isMobile ? 'clamp(36px, 10vw, 54px)' : 'clamp(52px, 7vw, 92px)',
            lineHeight: 1.1, margin: 0, fontWeight: 400,
          }}>
            {t.name}
          </h1>
          <div style={{ ...aStyles.serif, fontSize: 12, letterSpacing: '0.4em', opacity: 0.75, marginTop: 14 }}>
            — {t.nameRuby} —
          </div>
          {!isMobile && (
            <div style={{ marginTop: 32, fontSize: 13, lineHeight: 2, whiteSpace: 'pre-line', opacity: 0.9, maxWidth: 620 }}>
              {t.heroLead}
            </div>
          )}
        </div>

        {/* Slide indicators + CTA */}
        <div style={{
          display: 'flex',
          flexDirection: isMobile ? 'row' : 'column',
          alignItems: isMobile ? 'center' : 'flex-end',
          justifyContent: isMobile ? 'space-between' : undefined,
          width: isMobile ? '100%' : 'auto',
          gap: 18,
        }}>
          <div style={{ display: 'flex', gap: 8 }}>
            {slides.map((_, idx) => (
              <button key={idx} onClick={() => setI(idx)} style={{
                width: idx === i ? 36 : 12, height: 2, border: 'none',
                background: idx === i ? C.cream : 'rgba(244,239,230,0.35)',
                padding: 0, cursor: 'pointer', transition: 'all 400ms',
              }} />
            ))}
          </div>
          <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{
            display: 'inline-block',
            padding: isMobile ? '11px 20px' : '16px 32px',
            border: '1px solid rgba(244,239,230,0.65)',
            color: C.cream, textDecoration: 'none',
            ...aStyles.mono, fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
          }}>
            {t.book} →
          </a>
        </div>
      </div>

      {/* Vertical location text — desktop only */}
      {!isMobile && (
        <div style={{ position: 'absolute', top: 120, right: 48, color: C.cream, ...aStyles.mono, fontSize: 10, opacity: 0.7, writingMode: 'vertical-rl' }}>
          AJIRO · ATAMI · SHIZUOKA
        </div>
      )}
    </section>
  );
}

// ── Shared section header ──────────────────────────────────────────────────
function SectionHead({ kicker, title, align = 'left', light = false }) {
  const isMobile = useIsMobile();
  return (
    <header style={{ textAlign: isMobile ? 'left' : align, marginBottom: isMobile ? 40 : 56 }}>
      <div style={{ ...aStyles.mono, fontSize: 10, letterSpacing: '0.4em', opacity: light ? 0.6 : 0.55, marginBottom: 18, textTransform: 'uppercase' }}>
        {kicker}
      </div>
      <h2 style={{
        ...aStyles.serif,
        fontSize: isMobile ? 'clamp(26px, 6vw, 34px)' : 'clamp(32px, 4.2vw, 50px)',
        lineHeight: 1.35, margin: 0, fontWeight: 400, whiteSpace: 'pre-line',
      }}>
        {title}
      </h2>
    </header>
  );
}

// ── Concept ────────────────────────────────────────────────────────────────
function Concept({ t }) {
  const isMobile = useIsMobile();
  return (
    <Wrap id="concept" bg={C.cream}>
      <SectionHead kicker={t.concept.kicker} title={t.concept.title} align="center" />
      <p style={{ textAlign: isMobile ? 'left' : 'center', maxWidth: 640, margin: `0 auto ${isMobile ? 48 : 96}px`, lineHeight: 2.15, whiteSpace: 'pre-line', opacity: 0.82 }}>
        {t.concept.lead}
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 32 : 56 }}>
        {t.concept.points.map((p, idx) => (
          <div key={idx} style={{ paddingTop: 28, borderTop: `1px solid ${C.border}` }}>
            <div style={{ ...aStyles.serif, fontSize: 18, color: C.accent, marginBottom: 14 }}>{p.n}</div>
            <div style={{ ...aStyles.serif, fontSize: isMobile ? 19 : 22, marginBottom: 12 }}>{p.k}</div>
            <div style={{ fontSize: 13, lineHeight: 2.05, opacity: 0.8 }}>{p.v}</div>
          </div>
        ))}
      </div>
    </Wrap>
  );
}

// ── Onsen ──────────────────────────────────────────────────────────────────
function Onsen({ t }) {
  const isMobile = useIsMobile();
  return (
    <section id="onsen" style={{ background: C.dark, color: C.cream }}>
      {/* Main: image + text */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', alignItems: 'stretch' }}>
        <div style={{ ...photoBg(PHOTOS.bathWater), minHeight: isMobile ? 260 : 640 }} />
        <div style={{ padding: isMobile ? '48px 24px' : '120px 64px' }}>
          <SectionHead kicker={t.onsen.kicker} title={t.onsen.title} light />
          <p style={{ lineHeight: 2.1, opacity: 0.9, marginBottom: 36, fontSize: 14 }}>{t.onsen.lead}</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, paddingTop: 32, borderTop: `1px solid ${C.borderLight}` }}>
            {t.onsen.meta.map((m, i) => (
              <div key={i}>
                <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55, marginBottom: 8 }}>{m.k}</div>
                <div style={{ ...aStyles.serif, fontSize: isMobile ? 17 : 20 }}>{m.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Secondary: bath-wide photo + ritual text */}
      {isMobile ? (
        <>
          <div style={{ ...photoBg(PHOTOS.bathWide), height: 220 }} />
          <div style={{ padding: '36px 24px', borderTop: '1px solid rgba(244,239,230,0.12)' }}>
            <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55, marginBottom: 14 }}>— THE RITUAL</div>
            <div style={{ ...aStyles.serif, fontSize: 19, lineHeight: 1.75, opacity: 0.92 }}>
              湯上がりに畳でごろり。<br />
              この動線は、一棟貸しの特権。
            </div>
          </div>
        </>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
          <div style={{ ...photoBg(PHOTOS.bathWide), height: 420 }} />
          <div style={{ padding: '56px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderLeft: '1px solid rgba(244,239,230,0.12)' }}>
            <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55, marginBottom: 14 }}>— THE RITUAL</div>
            <div style={{ ...aStyles.serif, fontSize: 22, lineHeight: 1.7, opacity: 0.92 }}>
              湯上がりに畳でごろり。<br />
              この動線は、一棟貸しの特権。
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// ── Rooms ──────────────────────────────────────────────────────────────────
function Rooms({ t }) {
  const isMobile = useIsMobile();
  return (
    <section id="rooms" style={{ padding: isMobile ? '80px 0' : '160px 0', background: C.cream }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: isMobile ? '0 24px' : '0 48px' }}>
        <SectionHead kicker={t.rooms.kicker} title={t.rooms.title} />
        <p style={{ maxWidth: 560, lineHeight: 2.1, opacity: 0.82, marginBottom: isMobile ? 40 : 80 }}>{t.rooms.lead}</p>
      </div>

      {/* Floor plan */}
      <div style={{
        maxWidth: 1240, margin: `${isMobile ? 40 : 64}px auto`,
        padding: isMobile ? '0 24px' : '0 48px',
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 32 : 64,
          alignItems: 'center',
          padding: isMobile ? '32px 24px' : '56px 64px',
          background: C.stone,
        }}>
          <div>
            <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55, marginBottom: 14, textTransform: 'uppercase', letterSpacing: '0.4em' }}>Floor Plan</div>
            <div style={{ ...aStyles.serif, fontSize: isMobile ? 18 : 22, marginBottom: 20, lineHeight: 1.5 }}>
              1階・2階 間取り図
            </div>
            <div style={{ fontSize: 12, lineHeight: 2.2, opacity: 0.75 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 24px' }}>
                {[
                  { f: '1F', r: 'LDK 約12帖' },
                  { f: '1F', r: '和室 8帖 × 2' },
                  { f: '1F', r: '広縁・玄関' },
                  { f: '1F', r: '浴室・洗面脱衣' },
                  { f: '2F', r: '和室 8帖 × 2' },
                  { f: '2F', r: '和室 4帖' },
                  { f: '2F', r: '広縁・バルコニー' },
                  { f: '2F', r: '収納・納戸 × 複数' },
                ].map((row, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
                    <span style={{ ...aStyles.mono, fontSize: 9, color: C.accent, opacity: 0.9 }}>{row.f}</span>
                    <span>{row.r}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div style={{ background: '#fff', padding: 12 }}>
            <img src={PHOTOS.floorplan} alt="阿治古の宿 間取り図" style={{ width: '100%', height: 'auto', display: 'block' }} />
          </div>
        </div>
      </div>

      {/* Photo grid */}
      {isMobile ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '0 4px' }}>
          <div style={{ height: 260, ...photoBg(PHOTOS.dining) }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
            <div style={{ height: 170, ...photoBg(PHOTOS.tatamiL) }} />
            <div style={{ height: 170, ...photoBg(PHOTOS.bedroom) }} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
            <div style={{ height: 170, ...photoBg(PHOTOS.corridor) }} />
            <div style={{ height: 170, ...photoBg(PHOTOS.tatamiTV) }} />
          </div>
          <div style={{ height: 200, ...photoBg(PHOTOS.garden) }} />
        </div>
      ) : (
        <>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 4, padding: '0 4px' }}>
            <div style={{ height: 560, ...photoBg(PHOTOS.dining) }} />
            <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 4 }}>
              <div style={photoBg(PHOTOS.tatamiL)} />
              <div style={photoBg(PHOTOS.bedroom)} />
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, padding: '4px 4px 0' }}>
            {[PHOTOS.corridor, PHOTOS.tatamiTV, PHOTOS.garden].map((src, i) => (
              <div key={i} style={{ height: 340, ...photoBg(src) }} />
            ))}
          </div>
        </>
      )}

      {/* Stats */}
      <div style={{
        maxWidth: 1240, margin: `${isMobile ? 40 : 64}px auto 0`,
        padding: isMobile ? '0 24px' : '0 48px',
        display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
        gap: isMobile ? 20 : 32,
      }}>
        {t.rooms.stats.map((s, i) => (
          <div key={i} style={{ borderTop: `1px solid ${C.border}`, paddingTop: 22 }}>
            <div style={{ ...aStyles.serif, fontSize: isMobile ? 36 : 44, lineHeight: 1 }}>
              {s.n}<span style={{ fontSize: 12, opacity: 0.6, marginLeft: 5 }}>{s.u}</span>
            </div>
            <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55, marginTop: 10, textTransform: 'uppercase' }}>{s.en}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Area ───────────────────────────────────────────────────────────────────
function Area({ t }) {
  const isMobile = useIsMobile();
  return (
    <Wrap id="area" bg={C.stone}>
      <SectionHead kicker={t.area.kicker} title={t.area.title} />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.3fr', gap: isMobile ? 36 : 80, marginTop: 8 }}>
        <p style={{ lineHeight: 2.15, opacity: 0.82, whiteSpace: 'pre-line', margin: 0 }}>{t.area.lead}</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
          <div style={{ height: isMobile ? 150 : 260, ...photoBg(PHOTOS.port) }} />
          <div style={{ height: isMobile ? 150 : 260, ...photoBg(PHOTOS.himono) }} />
          <div style={{ height: isMobile ? 150 : 260, ...photoBg(PHOTOS.sunset), gridColumn: 'span 2' }} />
        </div>
      </div>
      <div style={{
        marginTop: isMobile ? 40 : 72,
        borderTop: `1px solid ${C.border}`, paddingTop: 32,
        display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
        gap: 24,
      }}>
        {t.area.spots.map((s, i) => (
          <div key={i}>
            <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55 }}>0{i + 1}</div>
            <div style={{ ...aStyles.serif, fontSize: isMobile ? 16 : 20, marginTop: 10 }}>{s.k}</div>
            <div style={{ fontSize: 12, opacity: 0.7, marginTop: 4 }}>{s.v}</div>
          </div>
        ))}
      </div>
    </Wrap>
  );
}

// ── Price ──────────────────────────────────────────────────────────────────
function Price({ t }) {
  const isMobile = useIsMobile();
  return (
    <Wrap id="price" bg={C.dark} color={C.cream}>
      <SectionHead kicker={t.price.kicker} title={t.price.title} align="center" light />
      <p style={{ textAlign: 'center', maxWidth: 560, margin: '0 auto', lineHeight: 2.2, opacity: 0.8, whiteSpace: 'pre-line', fontSize: 14 }}>
        {t.price.lead}
      </p>
      <div style={{ textAlign: 'center', marginTop: isMobile ? 48 : 64 }}>
        <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 16,
            padding: isMobile ? '18px 36px' : '24px 64px',
            background: C.accent, color: C.cream, textDecoration: 'none',
            ...aStyles.mono, fontSize: 11, letterSpacing: '0.35em', textTransform: 'uppercase',
          }}>
          {t.book} on Booking.com <span style={{ fontSize: 16 }}>→</span>
        </a>
        <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.45, marginTop: 20, letterSpacing: '0.2em' }}>
          booking.com にて空室確認・ご予約いただけます
        </div>
      </div>
    </Wrap>
  );
}

// ── Reviews ────────────────────────────────────────────────────────────────
function Reviews({ t }) {
  const isMobile = useIsMobile();
  return (
    <Wrap id="reviews" bg={C.stone}>
      <SectionHead kicker={t.reviews.kicker} title={t.reviews.title} align="center" />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 16, marginTop: 8 }}>
        {REVIEWS.map((r, i) => (
          <div key={i} style={{
            background: C.cream,
            padding: '32px 28px',
            display: 'flex', flexDirection: 'column', gap: 20,
            borderTop: `3px solid ${C.accent}`,
          }}>
            {/* Opening quote mark */}
            <div style={{ ...aStyles.serif, fontSize: 56, lineHeight: 0.7, color: C.accent, opacity: 0.25 }}>"</div>
            <p style={{ fontSize: 13, lineHeight: 2.1, opacity: 0.88, margin: 0, whiteSpace: 'pre-line', flexGrow: 1 }}>
              {r.text}
            </p>
            <div style={{ ...aStyles.mono, fontSize: 9, opacity: 0.4, letterSpacing: '0.2em', borderTop: `1px solid ${C.border}`, paddingTop: 16 }}>
              ★★★★★ · {t.reviews.source}
            </div>
          </div>
        ))}
      </div>
    </Wrap>
  );
}

// ── Info ───────────────────────────────────────────────────────────────────
function Info({ t }) {
  const isMobile = useIsMobile();
  return (
    <Wrap id="info" bg={C.cream} maxWidth={1040}>
      <SectionHead kicker={t.info.kicker} title={t.info.title} />
      <div style={{ marginTop: 32 }}>
        {t.info.items.map((it, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '260px 1fr',
            gap: isMobile ? 10 : 48,
            padding: '28px 0',
            borderTop: `1px solid ${C.border}`,
            borderBottom: i === t.info.items.length - 1 ? `1px solid ${C.border}` : 'none',
          }}>
            <div style={{ ...aStyles.serif, fontSize: isMobile ? 14 : 17, opacity: isMobile ? 0.65 : 1 }}>{it.k}</div>
            <div style={{ fontSize: 13, lineHeight: 2, opacity: 0.85 }}>{it.v}</div>
          </div>
        ))}
      </div>
    </Wrap>
  );
}

// ── Gallery ────────────────────────────────────────────────────────────────
function Gallery() {
  const isMobile = useIsMobile();
  const imgs = [PHOTOS.bedroom, PHOTOS.bathWide, PHOTOS.tatamiTV, PHOTOS.garden, PHOTOS.corridor, PHOTOS.dining];
  return (
    <section id="gallery" style={{ background: C.dark }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 4 }}>
        {imgs.map((src, i) => (
          <div key={i} style={{ height: isMobile ? 190 : 340, ...photoBg(src) }} />
        ))}
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────
function Footer({ t, lang }) {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: C.footer, color: C.cream,
      padding: isMobile ? '56px 24px 40px' : '88px 48px 56px',
      borderTop: '1px solid rgba(244,239,230,0.12)',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : '1.2fr 1fr 1fr',
        gap: isMobile ? 32 : 48,
      }}>
        {/* Brand */}
        <div style={{ gridColumn: isMobile ? 'span 2' : 'auto' }}>
          <div style={{ ...aStyles.serif, fontSize: isMobile ? 22 : 26 }}>阿治古の宿</div>
          <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55, marginTop: 10 }}>AJIKO NO YADO</div>
          <div style={{ fontSize: 12, lineHeight: 2, opacity: 0.75, marginTop: 20 }}>
            {t.footer.addr}<br />
            {t.footer.since}
          </div>
        </div>

        {/* Explore */}
        <div>
          <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55, marginBottom: 14 }}>EXPLORE</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 12 }}>
            {Object.entries(t.nav).map(([k, v]) => (
              <a key={k} href={`#${k}`} style={{ color: 'inherit', textDecoration: 'none', opacity: 0.8 }}>{v}</a>
            ))}
          </div>
        </div>

        {/* Book — mobile: show here instead of separate column */}
        {isMobile && (
          <div>
            <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55, marginBottom: 14 }}>BOOK</div>
            <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer"
              style={{
                display: 'inline-block', padding: '10px 18px',
                border: '1px solid rgba(244,239,230,0.4)', color: 'inherit', textDecoration: 'none',
                ...aStyles.mono, fontSize: 10, letterSpacing: '0.25em',
              }}>{t.book} →</a>
          </div>
        )}

        {/* Book — desktop only */}
        {!isMobile && (
          <div>
            <div style={{ ...aStyles.mono, fontSize: 10, opacity: 0.55, marginBottom: 14 }}>BOOK</div>
            <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer"
            style={{
              display: 'inline-block', padding: '12px 22px',
                border: '1px solid rgba(244,239,230,0.4)', color: 'inherit', textDecoration: 'none',
                ...aStyles.mono, fontSize: 10, letterSpacing: '0.3em',
              }}>{t.book} →</a>
          </div>
        )}
      </div>

      <div style={{
        maxWidth: 1240, margin: `${isMobile ? 40 : 56}px auto 0`,
        paddingTop: 24, borderTop: '1px solid rgba(244,239,230,0.12)',
        display: 'flex', flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'space-between', gap: isMobile ? 6 : 0,
        ...aStyles.mono, fontSize: 10, opacity: 0.55,
      }}>
        <div>© 2026 AJIKO NO YADO</div>
        <div>AJIRO · ATAMI · SHIZUOKA — JAPAN</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Site });