// sections.jsx — SideNav + Hero matching original koyo-gr.com layout

const { useEffect, useRef, useState } = React;

// ── SHARED ICONS ─────────────────────────────────────────────────────
function IconArrow() {
  return (
    <svg viewBox="0 0 32 12" width="22" height="8" style={{display:'inline-block',verticalAlign:'middle'}}>
      <line x1="0" y1="6" x2="28" y2="6" stroke="currentColor" strokeWidth="1"/>
      <polyline points="22,1 28,6 22,11" fill="none" stroke="currentColor" strokeWidth="1"/>
    </svg>
  );
}

function IconExternal() {
  return (
    <svg viewBox="0 0 12 12" width="10" height="10" style={{display:'inline-block',verticalAlign:'middle',marginLeft:4}}>
      <path d="M5 1H1v10h10V7M7 1h4v4M4 8l7-7" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

// ── SIDE NAVIGATION (左固定サイドバー) ──────────────────────────────
function SideNav({ currentPath }) {
  const [menuOpen, setMenuOpen] = useState(false);

  const links = [
    { href: '/',        label: 'HOME' },
    { href: '/concept', label: '私たちの想い' },
    { href: '/company', label: '会社概要' },
    { href: '/news',    label: '新着情報' },
    { href: '/contact', label: 'お問い合わせ' },
  ];

  const go = (e, href) => {
    e.preventDefault();
    if (window._navigate) window._navigate(href);
    setMenuOpen(false);
  };

  return (
    <>
    <style>{`
      :root {
        --sidebar-w: 220px;
        --gold: #c8a826;
        --gold-dark: #a88a18;
        --text: #333;
        --text-light: #666;
        --line: #e0dbd0;
        --bg: #fff;
        --green: #4a7c3f;
        --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
        --f-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
      }
      *, *::before, *::after { box-sizing: border-box }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: var(--f-sans);
        color: var(--text);
        background: #fff;
        -webkit-font-smoothing: antialiased;
      }
      a { color: inherit; text-decoration: none; }
      img { max-width: 100%; display: block; }
      button { font: inherit; cursor: pointer; border: none; }

      /* ── Sidebar ── */
      #sidenav {
        position: fixed; top: 0; left: 0;
        width: var(--sidebar-w); height: 100vh;
        background: #fff;
        border-right: 1px solid var(--line);
        display: flex; flex-direction: column;
        z-index: 100; overflow-y: auto;
      }
      #sidenav .logo-area {
        padding: 28px 20px 16px;
        border-bottom: 1px solid var(--line);
        text-align: center;
      }
      #sidenav .logo-area img { width: 90px; margin: 0 auto; }
      #sidenav .tagline {
        padding: 20px 0;
        font-family: var(--f-serif);
        font-size: 13px; font-weight: 500;
        line-height: 2.1; letter-spacing: .06em;
        color: var(--text);
        writing-mode: vertical-rl;
        margin: 0 auto;
      }
      #sidenav nav { margin-top: auto; border-top: 1px solid var(--line); }
      #sidenav nav ul { list-style: none; margin: 0; padding: 0; }
      #sidenav nav ul li a {
        display: block; padding: 13px 22px;
        font-family: var(--f-serif); font-size: 13px;
        letter-spacing: .08em; color: #444;
        border-bottom: 1px solid var(--line);
        transition: background .2s, padding-left .2s;
      }
      #sidenav nav ul li a:hover { background: #f9f5ec; padding-left: 28px; }
      #sidenav .recruit-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        background: var(--gold); color: #fff;
        padding: 16px; font-family: var(--f-serif);
        font-size: 13px; font-weight: 500; letter-spacing: .1em;
        width: 100%; transition: background .2s;
      }
      #sidenav .recruit-btn:hover { background: var(--gold-dark); }
      #sidenav .recruit-btn svg { width: 18px; height: 18px; fill: #fff; }

      /* モバイル用ハンバーガーメニュー */
      #mobile-header {
        display: none;
        position: fixed; top: 0; left: 0; right: 0;
        height: 56px; background: #fff;
        border-bottom: 1px solid var(--line);
        align-items: center; justify-content: space-between;
        padding: 0 16px; z-index: 110;
      }
      #mobile-header .m-logo img { height: 32px; }
      #mobile-header .m-burger {
        background: none; padding: 8px;
        display: flex; flex-direction: column; gap: 5px;
      }
      #mobile-header .m-burger span {
        display: block; width: 22px; height: 1.5px;
        background: #333; transition: transform .3s;
      }
      .mobile-menu-overlay {
        display: none;
        position: fixed; inset: 0; z-index: 105;
        background: rgba(255,255,255,.96);
        flex-direction: column; padding: 72px 24px 24px;
      }
      .mobile-menu-overlay.is-open { display: flex; }
      .mobile-menu-overlay nav ul { list-style: none; margin: 0; padding: 0; }
      .mobile-menu-overlay nav ul li a {
        display: block; padding: 18px 0;
        font-family: var(--f-serif); font-size: 20px;
        border-bottom: 1px solid var(--line); color: #333;
      }

      @media (max-width: 900px) {
        #sidenav { display: none; }
        #mobile-header { display: flex; }
      }

      /* ── Main layout ── */
      #main-wrap {
        margin-left: var(--sidebar-w);
      }
      @media (max-width: 900px) {
        #main-wrap { margin-left: 0; padding-top: 56px; }
      }
    `}</style>

    {/* 固定左サイドバー */}
    <div id="sidenav">
      <div className="logo-area">
        <img src="assets/logo_koyo_gr.png" alt="古窯グループ" />
      </div>
      <div className="tagline">今日、この瞬間に、最高の山形を。</div>
      <nav>
        <ul>
          {links.map(l => (
            <li key={l.href}><a href={l.href} onClick={(e) => go(e, l.href)} style={currentPath === l.href || (l.href==='/' && currentPath==='') ? {fontWeight:'600',color:'#333'} : {}}>{l.label}</a></li>
          ))}
        </ul>
        <button className="recruit-btn" onClick={(e) => go(e, '/recruit')}>
          <svg viewBox="0 0 512 512"><path d="M284.811,248.432c-14.806,10.36-32.797,16.458-52.194,16.458c-19.406,0-37.398-6.097-52.203-16.458c-25.887,11.109-41.796,30.661-51.5,47.922c-12.88,22.902-2.784,55.289,19.497,55.289c22.272,0,84.206,0,84.206,0s61.934,0,84.206,0c22.282,0,32.377-32.387,19.488-55.289C326.617,279.093,310.707,259.541,284.811,248.432z"/><path d="M232.617,243.228c38.036,0,68.862-30.834,68.862-68.861v-16.495c0-38.036-30.826-68.862-68.862-68.862s-68.862,30.826-68.862,68.862v16.495C163.755,212.394,194.581,243.228,232.617,243.228z"/><path d="M497.329,441.927l-75.836-73.882c65.265-90.806,57.141-218.443-24.454-300.037c-90.669-90.678-238.177-90.678-328.845,0c-90.678,90.668-90.678,238.195-0.009,328.862c81.613,81.605,209.25,89.72,300.074,24.427l73.855,75.826c15.645,18.886,38.748,20,56.602,2.137C516.598,481.423,516.205,457.563,497.329,441.927z M100.471,364.577c-72.969-72.978-72.969-191.304,0-264.265c72.978-72.978,191.295-72.978,264.274,0c72.97,72.97,72.979,191.287,0.009,264.273C291.785,437.545,173.449,437.545,100.471,364.577z"/></svg>
          採用情報
        </button>
      </nav>
    </div>

    {/* モバイルヘッダー */}
    <div id="mobile-header">
      <div className="m-logo"><img src="assets/logo_koyo_gr.png" alt="古窯グループ" /></div>
      <button className="m-burger" onClick={() => setMenuOpen(!menuOpen)}>
        <span/><span/><span/>
      </button>
    </div>
    {menuOpen && (
      <div className={`mobile-menu-overlay ${menuOpen ? 'is-open' : ''}`}>
        <nav>
          <ul>
            {links.map(l => (
              <li key={l.href}><a href={l.href} onClick={(e) => go(e, l.href)}>{l.label}</a></li>
            ))}
            <li><a href="/recruit" onClick={(e) => go(e, "/recruit")}>採用情報</a></li>
          </ul>
        </nav>
      </div>
    )}
    </>
  );
}

// ── HERO (フルスクリーンスライダー) ──────────────────────────────────
function Hero() {
  const slides = [
    { img: 'assets/img_main01.jpg', label: '', logos: [] },
    { img: 'assets/img_main02.jpg', label: '泊まる', logos: [
      { src: 'assets/logo_koyo.png', alt: '日本の宿 古窯' },
      { src: 'assets/logo_yusa.png', alt: 'ゆさ' },
      { src: 'assets/logo_mori.png', alt: '森の音' },
      { src: 'assets/logo_ban.png',  alt: '萬国屋' },
    ]},
    { img: 'assets/img_main03.jpg', label: '味わう', logos: [
      { src: 'assets/logo_prin.png', alt: '山形プリン' },
    ]},
    { img: 'assets/img_main04.jpg', label: '体験する', logos: [
      { src: 'assets/logo_wedd.png', alt: 'KOYO Wedding' },
    ]},
  ];
  const [idx, setIdx] = useState(0);
  const [prev, setPrev] = useState(null);

  useEffect(() => {
    const t = setInterval(() => {
      setIdx(i => { setPrev(i); return (i + 1) % slides.length; });
    }, 5500);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="top" style={{ position:'relative', height:'100vh', overflow:'hidden', minHeight:500 }}>
      <style>{`
        .hero-slide {
          position: absolute; inset: 0;
          background-size: cover; background-position: center;
          opacity: 0; transition: opacity 1.4s ease;
        }
        .hero-slide.is-active { opacity: 1; }
        .hero-slide.is-prev { opacity: 0; }
        .hero-slide::after {
          content: ''; position: absolute; inset: 0;
          background: linear-gradient(to right, rgba(0,0,0,.18) 0%, rgba(0,0,0,.04) 60%);
        }
        .hero-boxs {
          position: absolute; left: 32px; bottom: 60px; z-index: 2;
          color: #fff;
        }
        .hero-boxs .label {
          font-family: var(--f-serif); font-size: clamp(28px,3.5vw,48px);
          font-weight: 500; letter-spacing: .12em;
          text-shadow: 0 2px 12px rgba(0,0,0,.3);
          margin-bottom: 18px;
        }
        .hero-boxs .logos { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
        .hero-boxs .logos img { height: 28px; filter: brightness(0) invert(1); opacity: .9; }
        .hero-dots {
          position: absolute; right: 28px; bottom: 32px; z-index: 2;
          display: flex; gap: 8px;
        }
        .hero-dots .dot {
          width: 28px; height: 2px; background: rgba(255,255,255,.45);
          transition: background .3s, width .3s;
          cursor: pointer; border: none; padding: 0;
        }
        .hero-dots .dot.on { background: #fff; width: 44px; }
      `}</style>

      {slides.map((s, i) => (
        <div
          key={i}
          className={`hero-slide ${i === idx ? 'is-active' : i === prev ? 'is-prev' : ''}`}
          style={{ backgroundImage: `url(${s.img})` }}
        >
          {s.label && (
            <div className="hero-boxs">
              <div className="label">{s.label}</div>
              <div className="logos">
                {s.logos.map(l => <img key={l.alt} src={l.src} alt={l.alt} />)}
              </div>
            </div>
          )}
        </div>
      ))}

      <div className="hero-dots">
        {slides.map((_, i) => (
          <button key={i} className={`dot ${i === idx ? 'on' : ''}`} onClick={() => { setPrev(idx); setIdx(i); }} />
        ))}
      </div>
    </section>
  );
}

// ── CONCEPT ──────────────────────────────────────────────────────────
function Concept() {
  return (
    <section id="concept">
      <style>{`
        .sec-intr { padding: 80px 0; background: #fff; }
        .sec-intr .inner { max-width: 1100px; margin: 0 auto; padding: 0 48px;
          display: flex; gap: 64px; align-items: center; }
        @media(max-width:780px){ .sec-intr .inner { flex-direction: column-reverse; padding: 0 24px; gap: 36px; } }
        .sec-intr .photo { flex: 0 0 420px; }
        @media(max-width:780px){ .sec-intr .photo { flex: none; width: 100%; } }
        .sec-intr .photo img { width: 100%; }
        .sec-intr .body { flex: 1; }
        .sec-intr .body .catch {
          font-family: var(--f-serif); font-size: clamp(20px,2vw,26px);
          font-weight: 500; line-height: 1.9; letter-spacing: .04em;
          color: #333; margin-bottom: 24px;
        }
        .sec-intr .body .txt { font-size: 14.5px; line-height: 2.1; color: #555; margin-bottom: 32px; }
        .btn-basic {
          display: inline-block; padding: 13px 28px;
          border: 1px solid #333; color: #333;
          font-family: var(--f-serif); font-size: 13px;
          letter-spacing: .12em; transition: background .25s, color .25s;
        }
        .btn-basic:hover { background: #333; color: #fff; }
        .main-title {
          text-align: center; margin-bottom: 40px;
          padding: 0 24px;
        }
        .main-title .jp {
          display: block;
          font-family: var(--f-serif); font-size: clamp(22px,2.4vw,30px);
          font-weight: 500; letter-spacing: .12em; color: #333;
        }
        .main-title .en {
          display: block;
          font-family: 'Crimson Text', 'Cormorant Garamond', Georgia, serif;
          font-style: italic; font-size: clamp(14px,1.5vw,18px);
          color: #888; letter-spacing: .2em; margin-top: 6px;
        }
      `}</style>
      <div className="sec-intr">
        <div className="inner">
          <div className="photo">
            <img src="assets/img_intr.jpg" alt="私たちの想い" />
          </div>
          <div className="body">
            <p className="catch">
              山形の地で楽しく働くことそのものが、<br />
              自然とお客様の感動や喜びに変わっていく。
            </p>
            <p className="txt">
              私達はこれまで"山形"という地域そのものを商品として、この地域の良さを発信し、山形の価値を高めたいという強い想いで仕事をしています。この土地ならではの人、風景、食べ物、この土地での様々な体験がお客様の感動につながるため、私達は自信を持って山形の魅力を提供し、どうすれば上手に伝わるかを常々考え仕事をしています。
            </p>
            <a className="btn-basic" href="#concept-detail">私たちの想い</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FACILITIES ───────────────────────────────────────────────────────
const FACILITIES = [
  { id:'koyo',     cat:'stay',  catJa:'泊まる',   name:'日本の宿 古窯',      img:'assets/img_koyo.jpg', logo:'assets/logo_koyo.png',
    catch:'伝統が薫るおもてなしの宿',
    desc:'プロが選ぶ旅館百選TOP10に選ばれ続けるおもてなしの温泉宿。温泉の泉質は「三大美人泉質」として知られています。',
    site:'https://www.koyoga.com/', map:'https://goo.gl/maps/YsLUdVPRm1crGf9u6' },
  { id:'yusa',     cat:'stay',  catJa:'泊まる',   name:'悠湯の郷 ゆさ',      img:'assets/img_yusa.jpg', logo:'assets/logo_yusa.png',
    catch:'蔵王連峰の雄大な姿を臨む絶景',
    desc:'蔵王連峰の雄大な姿を臨む絶景大浴場が自慢の宿。旅館の温かさとホテルの快適さをテーマに安らぎのひとときを提供致します。',
    site:'https://www.dosayusa.jp/', map:'https://goo.gl/maps/eAAiYK8weQrKR2nY9' },
  { id:'morinone', cat:'stay',  catJa:'泊まる',   name:'おやど 森の音',      img:'assets/img_mori.jpg', logo:'assets/logo_mori.png',
    catch:'今日はここで、深呼吸',
    desc:'緩やかな坂の上、木製の重い扉を開くと、目に飛び込む中庭の光。豊かな自然、いのちを癒す宿をどうぞ思いのまま、お愉しみください。',
    site:'http://www.mori-ne.com/', map:'https://goo.gl/maps/ZDfE9CsLtik7njcW6' },
  { id:'bankokuya',cat:'stay',  catJa:'泊まる',   name:'あつみ温泉 萬国屋',  img:'assets/img_ban.jpg',  logo:'assets/logo_ban.png',
    catch:'創業三百余年の歴史を持つ老舗旅館',
    desc:'温海岳や温海川など、あつみの自然に囲まれた萬国屋。松尾芭蕉、与謝野晶子など文人墨客が数多く訪れ、詩歌や小説にうたわれました。',
    site:'http://www.bankokuya.jp/', map:'https://goo.gl/maps/XrHh92xMqPkXbhke8' },
  { id:'purin',    cat:'food',  catJa:'味わう',   name:'山形プリン',          img:'assets/img_prin.jpg', logo:'assets/logo_prin.png',
    catch:'新鮮素材を使用したプリン専門店',
    desc:'地元かみのやまで、山形県産の素材を活かした「美味しいスイーツをつくりたい」という想いから菓子づくりが始まりました。',
    site:'https://yamagata-purin.com/', map:'https://goo.gl/maps/Cb9GRtQZZBhP9hYx9' },
  { id:'wedding',  cat:'exp',   catJa:'体験する', name:'KOYO Wedding',       img:'assets/img_wedd.jpg', logo:'assets/logo_wedd.png',
    catch:'雅楽の音色が鳴り響く、神前式場',
    desc:'日本の伝統美を体感する雰囲気たっぷりの和風ウェディング。和風旅館ならではの落ち着いた結婚式は、ゲストにも大好評です。',
    site:'https://www.koyoga.com/wedding/', map:'https://goo.gl/maps/5F8LVeBzsjfJXWF39' },
];

function Facilities() {
  const groups = [
    { id: 'stay', label: '泊まる' },
    { id: 'food', label: '味わう' },
    { id: 'exp',  label: '体験する' },
  ];
  return (
    <section id="facilities" style={{ padding:'80px 0', background:'#f9f5ec' }}>
      <style>{`
        .fac-wrap { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
        @media(max-width:780px){ .fac-wrap { padding: 0 20px; } }
        .fac-cat-label {
          font-family: var(--f-serif); font-size: 18px; font-weight: 500;
          letter-spacing: .1em; color: #fff; padding: 10px 24px;
          margin-bottom: 24px; display: inline-block;
        }
        .fac-cat-stay { background: #4a7c3f; }
        .fac-cat-food { background: #c87b3a; }
        .fac-cat-exp  { background: #7a5a8a; }
        .fac-group { margin-bottom: 52px; }
        .fac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 32px; }
        .fac-card { background: #fff; }
        .fac-card .vis { aspect-ratio: 4/3; overflow: hidden; }
        .fac-card .vis img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s; }
        .fac-card:hover .vis img { transform: scale(1.05); }
        .fac-card .body { padding: 20px 22px; }
        .fac-card .fac-logo { height: 28px; margin-bottom: 12px; object-fit: contain; object-position: left; }
        .fac-card .catch { font-family: var(--f-serif); font-size: 15px; font-weight: 500;
          color: #333; margin-bottom: 10px; line-height: 1.6; }
        .fac-card .desc { font-size: 13px; color: #666; line-height: 1.9; margin-bottom: 16px; }
        .fac-card .btns { display: flex; gap: 10px; }
        .fac-card .btns a {
          flex: 1; padding: 9px; text-align: center;
          font-size: 12px; letter-spacing: .08em;
          border: 1px solid #888; color: #444;
          transition: background .2s, color .2s;
        }
        .fac-card .btns a:hover { background: #333; color: #fff; border-color: #333; }
        .fac-card .btns a.site { background: #333; color: #fff; border-color: #333; }
        .fac-card .btns a.site:hover { background: #555; }
      `}</style>
      <div className="fac-wrap">
        <h3 className="main-title">
          <span className="jp">グループ施設</span>
          <em className="en">Group Facility</em>
        </h3>
        {groups.map(g => {
          const items = FACILITIES.filter(f => f.cat === g.id);
          if (!items.length) return null;
          return (
            <div key={g.id} className="fac-group">
              <span className={`fac-cat-label fac-cat-${g.id}`}>{g.label}</span>
              <div className="fac-grid">
                {items.map(f => (
                  <div key={f.id} className="fac-card" id={f.id}>
                    <div className="vis"><img src={f.img} alt={f.name} loading="lazy" /></div>
                    <div className="body">
                      <img className="fac-logo" src={f.logo} alt={f.name} />
                      <p className="catch">{f.catch}</p>
                      <p className="desc">{f.desc}</p>
                      <div className="btns">
                        <a className="site" href={f.site} target="_blank" rel="noopener noreferrer">施設サイト</a>
                        <a href={f.map} target="_blank" rel="noopener noreferrer">地図を見る</a>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

Object.assign(window, { SideNav, Hero, Concept, Facilities, IconArrow, IconExternal });