const NOTES = [
  "タオルは当日、タオル交換場所にてお渡し致します。チケットを掲示の上、タオルをお受け取りください。",
  "タオルの引き換えは当日のみとなります。後日郵送はできかねます。",
  "会場内および会場周辺での場所取りは禁止とさせていただきます。シートや荷物等を置いての場所取り、長時間の待機、徹夜・早朝からの座り込み等はご遠慮ください。",
  "雨天時、観覧エリア内での傘の使用は禁止とさせていただきます。レインコート等の雨具をご用意ください。",
  "脚立、踏み台、台の上に乗っての観覧、肩車、高所から身を乗り出す行為など、周囲のお客様のご迷惑または危険となる行為は禁止いたします。安全が確保できないと判断した場合、イベントを一時中断または中止する場合がございます。",
  "出演者の入り待ち、出待ち、追いかけ行為等は禁止いたします。",
  "出演者へのプレゼント、ファンレター等の直接のお渡しおよびお預かりはできません。",
  "イベント中の写真撮影、動画撮影、録音、録画は禁止いたします。",
  "当日は主催者および関係者による写真・映像撮影が行われる場合がございます。撮影された写真・映像にお客様が映り込む場合があり、各種媒体、SNS等で使用される可能性がございます。あらかじめご了承ください。",
  "天候、災害、出演者の都合、その他やむを得ない事情により、イベントの内容変更・延期・中止となる場合がございます。その場合でも、会場までの交通費・宿泊費等の補償はいたしかねます。",
  "優先観覧エリア入場整理券および各種参加券の転売・譲渡・複製は禁止いたします。不正行為が発覚した場合は、整理券・参加券を無効とし、ご入場・ご参加をお断りする場合がございます。",
  "3歳以上のお子様は、優先観覧エリアへのご入場に「優先観覧エリア入場整理券」が必要となります。3歳未満のお子様は、整理券をお持ちの保護者1名につき1名までご同伴いただけます。",
  "会場内・外で発生した事故、盗難、紛失等について、主催者・会場・出演者は一切の責任を負いかねます。貴重品は各自で管理をお願いいたします。",
  "会場は商業施設内となります。他店舗や一般のお客様のご迷惑となる行為、通路を塞ぐ行為、大声での会話・騒音等はご遠慮ください。",
  "会場内ではスタッフの指示・誘導に従っていただきますようお願いいたします。スタッフの指示に従っていただけない場合、イベントへの参加をお断り、またはご退場いただく場合がございます。",
  "会場へのイベント内容に関する直接のお問い合わせはご遠慮ください。",
  "ゴミは各自でお持ち帰りいただくか、施設所定のゴミ箱をご利用ください。",
  "イベント内容およびスケジュールは予告なく変更となる場合がございます。あらかじめご了承ください。",
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "red"
}/*EDITMODE-END*/;

const ACCENTS = {
  red:    "#E53935",
  black:  "#111111",
  yellow: "#FFC107",
  blue:   "#0A66C2",
};

function SiteHeader(){
  return (
    <header className="site-hd">
      <div className="wrap site-hd-inner">
        <a href="https://uuum.jp/" className="logo" aria-label="UUUM">
          <img src="images/logo-uuum.svg" alt="UUUM" />
        </a>
      </div>
    </header>
  );
}

function ArticleHeader(){
  return (
    <>
      <div className="crumb">TOPICS</div>
      <div className="article-hd">
        <h1>リサイタルズ「1st Album『ドカンリボルバー2.66』リリース記念ミニリサイタル」開催決定！</h1>
        <div className="article-meta">
          <span className="date">2026/09/01</span>
          <span className="tag">TOPICS</span>
          <span className="tag">EVENT</span>
        </div>
      </div>
    </>
  );
}

function LeadImage(){
  return (
    <div className="lead-img" role="img" aria-label="リサイタルズ ミニリサイタル キービジュアル">
      <img
        src="images/kv.jpg"
        alt="1st Album『ドカンリボルバー2.66』リリース記念ミニリサイタル"
        loading="eager"
      />
    </div>
  );
}

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(()=>{
    const c = ACCENTS[t.accent] || ACCENTS.red;
    document.documentElement.style.setProperty('--accent', c);
    document.querySelectorAll('.creator-chip .dot').forEach(el => el.style.background = c);
  },[t.accent]);

  // Hover override using accent — inject once
  React.useEffect(()=>{
    let s = document.getElementById('__accent-style');
    if(!s){ s = document.createElement('style'); s.id='__accent-style'; document.head.appendChild(s); }
    const c = ACCENTS[t.accent] || ACCENTS.red;
    s.textContent = `
      .creator-chip .dot{background:${c} !important}
    `;
  },[t.accent]);

  return (
    <>
      <SiteHeader/>

      <main>
        <div className="article-wrap">
          <ArticleHeader/>
          <LeadImage/>

          <div className="body">
            <p className="intro">
              東海オンエアのてつや・しばゆー・としみつによる音楽ユニット「リサイタルズ」が、1st Album「ドカンリボルバー2.66」のリリースを記念し、地元・愛知県岡崎市にてミニリサイタルを開催します！
            </p>

            <h2 className="sec">イベントタイトル</h2>
            <p>1st Album「ドカンリボルバー2.66」リリース記念ミニリサイタル</p>

            <h2 className="sec">日程／会場</h2>
            <div className="venue-block">
              <dl className="row"><dt>日程</dt><dd>2026年9月19日(土)</dd></dl>
              <dl className="row">
                <dt>会場</dt>
                <dd>
                  <a href="https://mitsui-shopping-park.com/mop/okazaki/" target="_blank" rel="noopener">三井アウトレットパーク 岡崎 OKAZAKIステージMARKET</a><br/>
                  〒444-8590 愛知県岡崎市舞木町金森200
                </dd>
              </dl>
              <div className="session-cards">
                <div className="session-card">
                  <span className="badge">1部</span>
                  <div className="times">OPEN 12:00 / START 13:00</div>
                </div>
                <div className="session-card">
                  <span className="badge">2部</span>
                  <div className="times">OPEN 15:00 / START 16:00</div>
                </div>
              </div>
            </div>
            <ul className="notes-list" style={{marginTop:14}}>
              <li>上記の開場・開演時間は、優先整理券（優先エリア入場チケット）をご購入いただいた方向けのご案内となります。</li>
            </ul>

            <h2 className="sec">出演者</h2>
            <p>リサイタルズ</p>

            <h2 className="sec">チケット料金</h2>
            <dl className="kv">
              <div>
                <dt>優先エリア入場券</dt>
                <dd>
                  <b>¥3,000(税込)</b>
                </dd>
              </div>
            </dl>
            <ul className="notes-list">
              <li>マフラータオル付き</li>
              <li className="warn">3歳未満入場不可／3歳以上有料</li>
            </ul>

            <h2 className="sec">チケット販売</h2>
            <div className="sales-step">
              <h3>一般販売（先着）</h3>
              <div className="meta">
                <a className="url" href="https://l-tike.com/event/mevent/?mid=793299" target="_blank" rel="noopener">https://l-tike.com/event/mevent/?mid=793299</a>
                <div><b>販売開始：</b>2026年9月2日(水) 10:00〜</div>
                <div><b>プレイガイド：</b>ローチケ</div>
                <div><b>購入方法：</b>WEB受付［PC／携帯］、電話受付、店頭販売</div>
              </div>
            </div>

            <h2 className="sec">イベント参加に関する注意事項</h2>
            <ul className="notes-list">
              {NOTES.map((n,i)=> <li key={i}>{n}</li>)}
            </ul>
            <p style={{fontSize:13.5,color:'#444',marginTop:12}}>皆様に安全にイベントをお楽しみいただくため、ご理解とご協力のほどよろしくお願いいたします。</p>

            <h2 className="sec">お問い合わせ先</h2>
            <div className="contact-block">
              <h3>本公演に関するお問い合わせ</h3>
              <dl className="item">
                <dt>企画／制作</dt>
                <dd>
                  株式会社KIOKJAPAN<br/>
                  <a href="mailto:info@kiokjapan.jp">info@kiokjapan.jp</a>
                </dd>
              </dl>
              <dl className="item">
                <dt>主催</dt>
                <dd>UUUM株式会社</dd>
              </dl>
            </div>

            <h2 className="sec">1st Album「ドカンリボルバー2.66」リリース情報</h2>
            <p>
              8月26日（水）に発売された待望の1stアルバム！デビュー曲「俺らリサイタルズ」や爽快サマーチューン「888月 〜夏にも程がある〜」などの人気曲に加え、待望の新曲も贅沢に詰め込んだ全8曲を収録。<br/>
              これまでの歩みと最新の進化を一度に体感できる、まさに”爆発的”な1枚となっています。
            </p>
            <dl className="kv">
              <div>
                <dt>発売日</dt>
                <dd>2026年8月26日（水）</dd>
              </div>
              <div>
                <dt>販売商品</dt>
                <dd>通常盤 3,300円（税込） ／ 王道グッズセット 8,800円（税込）</dd>
              </div>
              <div>
                <dt>収録曲</dt>
                <dd>全8曲（俺らリサイタルズ、ギガメガドン、888月〜夏にも程がある〜、他）</dd>
              </div>
            </dl>
            <div className="faq-link">
              ※アルバムの詳細や各販売サイトについては、<a href="https://uuum.jp/posts/1071093" target="_blank" rel="noopener">こちらの記事</a>をご確認ください。
            </div>

          </div>
        </div>
      </main>

      <footer>
        <div className="wrap">
          <div className="foot">
            <a className="logo" href="https://uuum.jp/" aria-label="UUUM">
              <img src="images/logo-uuum.svg" alt="UUUM" />
            </a>
            <div className="copy">Copyright © UUUM Co.,Ltd. All rights reserved.</div>
          </div>
        </div>
      </footer>

      <TweaksPanel>
        <TweakSection label="アクセントカラー" />
        <TweakColor
          label="Accent"
          value={ACCENTS[t.accent]}
          options={Object.values(ACCENTS)}
          onChange={(v)=>{
            const k = Object.keys(ACCENTS).find(key => ACCENTS[key] === v) || 'red';
            setTweak('accent', k);
          }}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);