// Main app: 日本麻雀連合 KDDI-style landing

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#EB5505",
  "secondaryColor": "#0F6E3D",
  "accentColor": "#B8893A",
  "textColor": "#1a1a1a",
  "palette": "orange",
  "bodyFont": "Noto Sans JP",
  "displayFont": "match",
  "background": "#ffffff",
  "lineColor": "#e4e4e4",
  "lineWidth": 1,
  "lineStyle": "solid",
  "editText": false,
  "layerMode": false,
  "texts": {},
  "layers": []
}/*EDITMODE-END*/;

const PALETTES = {
  orange:  { primaryColor:"#EB5505", secondaryColor:"#0F6E3D", accentColor:"#B8893A" },
  forest:  { primaryColor:"#0F6E3D", secondaryColor:"#B8893A", accentColor:"#E60012" },
  midnight:{ primaryColor:"#1E3A5F", secondaryColor:"#B8893A", accentColor:"#E60012" },
  crimson: { primaryColor:"#C8102E", secondaryColor:"#1a1a1a", accentColor:"#B8893A" },
  purple:  { primaryColor:"#6B2C8F", secondaryColor:"#D4A017", accentColor:"#E60012" },
};

// In-place editable text. When tweaks.editText is on, any wrapped string
// becomes contentEditable; on blur it persists to tweaks.texts[id].
let __editTextHandlers = null;
function Ed({ id, children, as: Tag = "span", ...rest }) {
  const handlers = __editTextHandlers || {};
  const { editing, get, set } = handlers;
  const value = get ? get(id, children) : children;
  if (!editing) {
    if (typeof value === "string" && value.includes("\n")) {
      return <Tag {...rest}>{value.split("\n").map((l,i)=>(
        <React.Fragment key={i}>{l}{i<value.split("\n").length-1&&<br/>}</React.Fragment>
      ))}</Tag>;
    }
    return <Tag {...rest}>{value}</Tag>;
  }
  return (
    <Tag
      {...rest}
      contentEditable
      suppressContentEditableWarning
      data-ed-id={id}
      onBlur={(e)=>set && set(id, e.currentTarget.innerText)}
      onKeyDown={(e)=>{ if(e.key==="Enter" && !e.shiftKey){ e.preventDefault(); e.currentTarget.blur(); } }}
      style={{ ...(rest.style||{}), outline:"1px dashed rgba(235,85,5,.6)", outlineOffset:2, cursor:"text", borderRadius:2 }}
    >{value}</Tag>
  );
}

const FONT_STACKS = {
  "Noto Sans JP":      `"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif`,
  "Zen Kaku Gothic":   `"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif`,
  "M PLUS 1":          `"M PLUS 1","Hiragino Kaku Gothic ProN",sans-serif`,
  "Shippori Mincho":   `"Shippori Mincho","Hiragino Mincho ProN",serif`,
  "Klee One":          `"Klee One","Hiragino Mincho ProN",serif`,
};

const HERO_SLIDES = [
  {
    eyebrow: "TOURNAMENT 2026",
    title: "第48回 全国麻雀選手権、\nエントリー受付開始。",
    sub: "全国47都道府県、3,200名規模のリアル競技大会。地区予選から日本武道館の決勝まで、四半世紀続く最高峰の舞台がはじまります。",
    cta: "大会エントリー",
    bg: "linear-gradient(115deg,#0a2e1b 0%,#0F6E3D 55%,#15924f 100%)",
    art: "a",
  },
  {
    eyebrow: "NEW SERVICE",
    title: "オンライン段位戦、\n四段への道が変わる。",
    sub: "AIによる打牌解析とリアルタイム実戦ログ。連合公認のオンライン段位制度がリニューアル。初段からプロ参加対局まで一気通貫で。",
    cta: "サービス詳細",
    bg: "linear-gradient(115deg,#1a1a1a 0%,#2a1a14 55%,#7a2b14 100%)",
    art: "b",
  },
  {
    eyebrow: "CULTURE",
    title: "麻雀を、健全なスポーツに。",
    sub: "日本麻雀連合は1978年の発足以来、公正な競技環境と次世代の育成を続けています。学校・地域・職域、それぞれの現場へ。",
    cta: "連合について",
    bg: "linear-gradient(115deg,#1f1810 0%,#3a2a17 55%,#B8893A 100%)",
    art: "c",
  },
];

const NEWS_ITEMS = [
  { date:"2026.05.10", cat:"お知らせ", catKey:"alert", title:"第48回 全国麻雀選手権 地区予選 開催要項を公開しました", palette:"green", pattern:"row" },
  { date:"2026.05.08", cat:"イベント", catKey:"event", title:"札幌・名古屋・福岡で「公認指導員養成講座」を6月より順次開講", palette:"navy", pattern:"tower" },
  { date:"2026.05.02", cat:"メディア", catKey:"media", title:"NHK BSプレミアム『麻雀プロの一手』第3シーズン、放送決定", palette:"red", pattern:"single" },
  { date:"2026.04.28", cat:"プレスリリース", catKey:"alert", title:"オンライン段位戦リニューアル、累計会員12万人を突破しました", palette:"ink", pattern:"scatter" },
];

const NOTICES = [
  { date:"2026.05.11", text:"【重要】システムメンテナンスのお知らせ（5月18日 2:00〜6:00）" },
  { date:"2026.05.09", text:"会員カード更新手続きの一部地域における遅延について" },
];

const PICKUPS = [
  { cat:"FEATURE", title:"四人で囲む、\n静かな時間。", sub:"全国の連合公認雀荘マップ、リニューアル公開。", palette:"cream", pattern:"scatter" },
  { cat:"REPORT", title:"プロ雀士という生き方。", sub:"第一線で戦う4名のロングインタビュー。", palette:"green", pattern:"tower" },
  { cat:"GUIDE", title:"はじめての段位認定。", sub:"初段試験のリアルと、合格者の打牌譜から学ぶ。", palette:"gold", pattern:"row" },
];

const SERVICES = [
  { icon:"trophy", name:"競技・大会", en:"Tournament", desc:"全国選手権・リーグ戦・段位戦、年間320を超える公式競技を運営。" },
  { icon:"school", name:"教室・スクール", en:"School", desc:"初心者向けから指導員養成まで、全国168教室で対面講座を開講。" },
  { icon:"play", name:"オンライン対局", en:"Online Play", desc:"連合公認プラットフォームで段位戦・プロ対局・配信を提供。" },
  { icon:"ranking", name:"段位・認定", en:"Ranking", desc:"統一基準の段位制度。初段からプロ位まで、確かな実力を可視化。" },
  { icon:"shop", name:"連合ショップ", en:"Shop", desc:"競技牌・全自動卓・点数表・教本など、公認規格品を全国へ。" },
  { icon:"users", name:"会員・コミュニティ", en:"Members", desc:"全国12万人の会員制度。地区サークルと交流イベントを運営。" },
  { icon:"doc", name:"ルール・規定", en:"Rules", desc:"日本麻雀連合公式競技規定 第14版。点数・反則・進行を統一。" },
  { icon:"phone", name:"法人・自治体", en:"Business", desc:"健康麻雀の導入支援、社内大会・地域大会の運営代行を承ります。" },
];

const MOSAIC = [
  { en:"ABOUT", jp:"連合について", palette:"green", pattern:"scatter", feat:true },
  { en:"HISTORY", jp:"半世紀の歩み", palette:"ink", pattern:"row" },
  { en:"LEADERSHIP", jp:"理事・組織体制", palette:"gold", pattern:"single" },
  { en:"CULTURE", jp:"健全な麻雀文化", palette:"red", pattern:"tower" },
  { en:"PRESS", jp:"報道関係の方へ", palette:"navy", pattern:"row" },
];

const QLINKS = [
  { icon:"calendar", label:"大会カレンダー" },
  { icon:"card", label:"会員カード再発行" },
  { icon:"doc", label:"競技規定 第14版" },
  { icon:"trophy", label:"段位認定試験" },
  { icon:"phone", label:"お問い合わせ" },
  { icon:"globe", label:"地区連合一覧" },
];

const NAV_ITEMS = [
  { jp:"競技・大会", en:"Tournament", mm:[
    {h:"全国大会",l:["全国麻雀選手権","王者決定戦","女流名人戦","学生選手権"]},
    {h:"リーグ・段位",l:["A-1リーグ","プロリーグ","段位認定戦","オンライン段位戦"]},
    {h:"地区大会",l:["北海道・東北","関東","中部・北陸","関西","中国・四国","九州・沖縄"]},
    {h:"参加",l:["エントリー方法","参加規約","結果アーカイブ"]},
  ]},
  { jp:"教室・段位", en:"School & Rank", mm:[
    {h:"教室",l:["公認教室を探す","オンライン講座","指導員養成"]},
    {h:"段位",l:["段位制度の概要","認定試験","認定登録"]},
    {h:"学習",l:["公式教本","打牌譜ライブラリ","用語辞典"]},
    {h:"対象別",l:["初心者向け","学生向け","健康麻雀"]},
  ]},
  { jp:"会員サービス", en:"Members", mm:[
    {h:"入会",l:["入会の流れ","年会費・特典","ファミリー会員"]},
    {h:"マイページ",l:["ログイン","会員カード","段位・実績"]},
    {h:"コミュニティ",l:["地区サークル","交流イベント","掲示板"]},
    {h:"サポート",l:["変更手続き","退会","よくある質問"]},
  ]},
  { jp:"連合について", en:"About", mm:[
    {h:"組織",l:["理念・沿革","組織体制","理事・役員"]},
    {h:"活動",l:["健全麻雀の推進","次世代育成","地域貢献"]},
    {h:"情報公開",l:["事業報告","財務情報","定款・規程"]},
    {h:"関連団体",l:["国際連盟（IMC）","加盟プロ団体"]},
  ]},
  { jp:"法人・自治体", en:"Business", mm:[
    {h:"導入",l:["健康麻雀プログラム","社員向けレッスン","地域大会運営"]},
    {h:"協賛・スポンサー",l:["協賛メニュー","広告掲載","事例"]},
    {h:"報道関係",l:["プレスリリース","取材依頼","ロゴ・素材"]},
    {h:"お問い合わせ",l:["法人窓口","資料請求"]},
  ]},
];

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [heroIdx, setHeroIdx] = React.useState(0);
  const [openMenu, setOpenMenu] = React.useState(null);
  const [newsTab, setNewsTab] = React.useState("all");

  // wire the Ed helper to current tweaks
  __editTextHandlers = {
    editing: !!t.editText,
    get: (id, fallback) => (t.texts && t.texts[id] != null) ? t.texts[id] : fallback,
    set: (id, val) => setTweak('texts', { ...(t.texts||{}), [id]: val }),
  };

  // Apply tweaks live as CSS variables
  React.useEffect(()=>{
    const r = document.documentElement.style;
    r.setProperty('--orange', t.primaryColor);
    r.setProperty('--green', t.secondaryColor);
    r.setProperty('--gold', t.accentColor);
    r.setProperty('--ink', t.textColor);
    r.setProperty('--line', t.lineColor);
    r.setProperty('--font-jp', FONT_STACKS[t.bodyFont] || FONT_STACKS["Noto Sans JP"]);
    const dispKey = t.displayFont === "match" ? t.bodyFont : t.displayFont;
    r.setProperty('--font-display-jp', FONT_STACKS[dispKey] || FONT_STACKS[t.bodyFont] || FONT_STACKS["Noto Sans JP"]);
    r.setProperty('--bg', t.background);
    const soft = t.background === "#ffffff" ? "#f4f4f4"
               : t.background === "#faf7f1" ? "#f1ece0"
               : t.background === "#f4f4f0" ? "#e9e9e2"
               : "#f4f4f4";
    r.setProperty('--bg-soft', soft);
    // Border style overrides (rule lines)
    let styleEl = document.getElementById('__rule-overrides');
    if (!styleEl) {
      styleEl = document.createElement('style');
      styleEl.id = '__rule-overrides';
      document.head.appendChild(styleEl);
    }
    styleEl.textContent = `
      .svc-tile, .news-tabs, .news-tab, .util, .hdr, .nav-item, .megamenu, .qlinks, .qlink,
      .mm-col h4, .notice {
        border-color: ${t.lineColor} !important;
      }
      .svc-tile { border-width: ${t.lineWidth}px !important; border-style: ${t.lineStyle} !important; }
      .qlinks { background: ${t.lineColor} !important; gap: ${t.lineWidth}px !important; }
      .news-tabs, .util, .hdr, .notice { border-bottom-width: ${t.lineWidth}px !important; border-bottom-style: ${t.lineStyle} !important; }
      .news-tab.is-active { border-bottom-color: var(--orange) !important; }
    `;
  }, [t.primaryColor, t.secondaryColor, t.accentColor, t.textColor, t.bodyFont, t.displayFont,
      t.background, t.lineColor, t.lineWidth, t.lineStyle]);

  // auto-advance hero
  React.useEffect(()=>{
    const id = setInterval(()=>setHeroIdx(i=>(i+1)%HERO_SLIDES.length), 6000);
    return ()=>clearInterval(id);
  },[]);

  const slide = HERO_SLIDES[heroIdx];

  return (
    <div onClick={()=>setOpenMenu(null)}>
      {/* Utility bar */}
      <div className="util">
        <div className="wrap util-inner">
          <a href="#">個人</a>
          <span className="sep"/>
          <a href="#">法人・自治体</a>
          <span className="sep"/>
          <a href="#">プレス</a>
          <span className="sep"/>
          <a href="#">採用情報</a>
          <span className="sep"/>
          <a href="#" className="lang"><Icon name="globe"/>JP / EN</a>
          <div className="search">
            <Icon name="search"/>
            <input placeholder="サイト内検索"/>
          </div>
        </div>
      </div>

      {/* Header */}
      <header className="hdr" onClick={e=>e.stopPropagation()}>
        <div className="wrap hdr-inner">
          <a className="brand" href="#" onClick={e=>t.editText&&e.preventDefault()}>
            <div className="brand-mark"><Ed id="brand.mark">麻</Ed></div>
            <div className="brand-text">
              <Ed id="brand.jp" className="brand-jp">日本麻雀連合</Ed>
              <Ed id="brand.en" className="brand-en">Japan Mahjong Union</Ed>
            </div>
          </a>
          <nav className="nav">
            {NAV_ITEMS.map((n,i)=>(
              <div key={i} className={`nav-item ${openMenu===i?"is-open":""}`}
                   onMouseEnter={()=>setOpenMenu(i)}
                   onClick={()=>setOpenMenu(openMenu===i?null:i)}>
                <span className="nav-jp">{n.jp}</span>
                <span className="nav-en">{n.en}</span>
              </div>
            ))}
            <div className="nav-cta">
              <a className="btn-login" href="#">ログイン</a>
              <a className="btn-join" href="#">入会する <Icon name="arrow"/></a>
            </div>
          </nav>
        </div>
        {openMenu!==null && (
          <div className="megamenu" onMouseLeave={()=>setOpenMenu(null)}>
            <div className="wrap">
              <div>
                <div className="mm-title">
                  <small>{NAV_ITEMS[openMenu].en}</small>
                  {NAV_ITEMS[openMenu].jp}
                </div>
                <p style={{fontSize:12,color:"#767676",lineHeight:1.7,marginTop:14}}>
                  日本麻雀連合の{NAV_ITEMS[openMenu].jp}に関する情報をまとめてご覧いただけます。
                </p>
              </div>
              <div className="mm-cols">
                {NAV_ITEMS[openMenu].mm.map((c,i)=>(
                  <div key={i} className="mm-col">
                    <h4>{c.h}</h4>
                    <ul>{c.l.map((x,j)=><li key={j}><a href="#">{x}</a></li>)}</ul>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Hero */}
      <section className="hero">
        <div className="hero-track" style={{transform:`translateX(-${heroIdx*100}%)`}}>
          {HERO_SLIDES.map((s,i)=>(
            <div key={i} className="hero-slide">
              <div className="hero-bg" style={{background:s.bg}}/>
              <div className="hero-art"><HeroTilesArt variant={s.art}/></div>
              <div className="wrap hero-content">
                <div className="hero-text">
                  <div className="hero-eyebrow"><span className="dot"/><Ed id={`hero.${i}.eyebrow`}>{s.eyebrow}</Ed></div>
                  <Ed as="h1" id={`hero.${i}.title`} className="hero-title">{s.title}</Ed>
                  <Ed as="p" id={`hero.${i}.sub`} className="hero-sub">{s.sub}</Ed>
                  <a className="hero-cta" href="#" onClick={e=>t.editText&&e.preventDefault()}>
                    <Ed id={`hero.${i}.cta`}>{s.cta}</Ed><span className="arr"><Icon name="arrow"/></span>
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="hero-nav">
          <div style={{display:"flex",alignItems:"center"}}>
            <div className="hero-dots">
              {HERO_SLIDES.map((_,i)=>(
                <button key={i} className={i===heroIdx?"is-active":""} onClick={()=>setHeroIdx(i)}/>
              ))}
            </div>
            <span className="hero-count">{String(heroIdx+1).padStart(2,"0")} / {String(HERO_SLIDES.length).padStart(2,"0")}</span>
          </div>
          <div className="hero-arrows">
            <button onClick={()=>setHeroIdx(i=>(i-1+HERO_SLIDES.length)%HERO_SLIDES.length)} aria-label="prev">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m15 6-6 6 6 6"/></svg>
            </button>
            <button onClick={()=>setHeroIdx(i=>(i+1)%HERO_SLIDES.length)} aria-label="next">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m9 6 6 6-6 6"/></svg>
            </button>
          </div>
        </div>
      </section>

      {/* Notice strip */}
      <div className="notice">
        <div className="wrap notice-inner">
          <div className="notice-label"><Icon name="alert"/>重要なお知らせ</div>
          <div className="notice-list">
            {NOTICES.map((n,i)=>(
              <div key={i} className="notice-item">
                <span className="date">{n.date}</span>
                <a href="#">{n.text}</a>
              </div>
            ))}
          </div>
          <a className="notice-more" href="#">一覧 <Icon name="arrow"/></a>
        </div>
      </div>

      {/* News & Topics */}
      <section className="section">
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-title">
              <Ed id="sec.news.en" className="sec-en">News & Topics</Ed>
              <Ed as="h2" id="sec.news.jp" className="sec-jp" style={{color:"rgb(217, 69, 69)"}}>ニュース・ｊｆｄさｊｆｋｄｌｓ；ｆさ</Ed>
            </div>
            <a className="sec-link" href="#"><Ed id="sec.news.link">ニュース一覧</Ed> <span className="arr"/></a>
          </div>
          <div className="news-tabs">
            {[["all","すべて"],["release","プレスリリース"],["event","イベント"],["media","メディア"],["alert","お知らせ"]].map(([k,l])=>(
              <button key={k} className={`news-tab ${newsTab===k?"is-active":""}`} onClick={()=>setNewsTab(k)}>{l}</button>
            ))}
          </div>
          <div className="news-list">
            {NEWS_ITEMS.map((n,i)=>(
              <a key={i} className="news-card" href="#">
                <div className="news-thumb"><TileField palette={n.palette} pattern={n.pattern}/></div>
                <div className="news-meta">
                  <span className="news-date">{n.date}</span>
                  <span className={`news-cat ${n.catKey}`}>{n.cat}</span>
                </div>
                <p className="news-headline">{n.title}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Pickup */}
      <section className="section soft tight">
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-title">
              <Ed id="sec.pickup.en" className="sec-en">Pickup</Ed>
              <Ed as="h2" id="sec.pickup.jp" className="sec-jp">注目の特集</Ed>
            </div>
            <a className="sec-link" href="#"><Ed id="sec.pickup.link">特集一覧</Ed> <span className="arr"/></a>
          </div>
          <div className="pickup-grid">
            {PICKUPS.map((p,i)=>(
              <a key={i} className="pickup-card" href="#">
                <div className="pickup-bg"><TileField palette={p.palette} pattern={p.pattern}/></div>
                <div className="pickup-arr"><Icon name="arrow"/></div>
                <div className="pickup-inner">
                  <span className="pickup-cat">{p.cat}</span>
                  <h3 className="pickup-title">{p.title.split("\n").map((x,j)=><React.Fragment key={j}>{x}{j<p.title.split("\n").length-1&&<br/>}</React.Fragment>)}</h3>
                  <p className="pickup-sub">{p.sub}</p>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Services */}
      <section className="section">
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-title">
              <Ed id="sec.svc.en" className="sec-en">Services</Ed>
              <Ed as="h2" id="sec.svc.jp" className="sec-jp">サービス・事業</Ed>
            </div>
            <a className="sec-link" href="#"><Ed id="sec.svc.link">事業一覧</Ed> <span className="arr"/></a>
          </div>
          <div className="svc-grid">
            {SERVICES.map((s,i)=>(
              <a key={i} className="svc-tile" href="#">
                <div className="svc-icon"><Icon name={s.icon}/></div>
                <h3 className="svc-name">{s.name}<small>{s.en}</small></h3>
                <p className="svc-desc">{s.desc}</p>
                <div className="svc-foot"><span>詳しく見る</span><span className="arr">›</span></div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* About mosaic */}
      <section className="section soft tight">
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-title">
              <Ed id="sec.about.en" className="sec-en">About Us</Ed>
              <Ed as="h2" id="sec.about.jp" className="sec-jp">日本麻雀連合について</Ed>
            </div>
            <a className="sec-link" href="#"><Ed id="sec.about.link">連合情報トップ</Ed> <span className="arr"/></a>
          </div>
          <div className="mosaic">
            {MOSAIC.map((m,i)=>(
              <a key={i} className={`mosaic-card ${m.feat?"feat":""} ${m.wide?"wide":""}`} href="#">
                <div className="bg"><TileField palette={m.palette} pattern={m.pattern}/></div>
                <span className="en">{m.en}</span>
                <h3 className="jp">{m.jp}</h3>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section className="cta-band">
        <div className="wrap cta-inner">
          <div>
            <Ed id="cta.eyebrow" className="cta-eyebrow">SUSTAINABILITY</Ed>
            <Ed as="h2" id="cta.h" className="cta-h">{"麻雀を、次の100年へ。\n健全な競技文化を、地域とともに。"}</Ed>
            <Ed as="p" id="cta.p" className="cta-p">日本麻雀連合は、健康麻雀・学校教育・地域コミュニティを軸に、麻雀の文化的価値を未来へつなぐ取り組みを続けています。2030年までに加盟教室1,000箇所、健康麻雀プログラム参加者50万人を目標に。</Ed>
            <div className="cta-actions">
              <a className="cta-btn" href="#" onClick={e=>t.editText&&e.preventDefault()}><Ed id="cta.btn1">取り組みを見る</Ed> <Icon name="arrow"/></a>
              <a className="cta-btn ghost" href="#" onClick={e=>t.editText&&e.preventDefault()}><Ed id="cta.btn2">レポートをダウンロード</Ed></a>
            </div>
          </div>
          <div className="cta-art">
            <svg viewBox="0 0 400 280" xmlns="http://www.w3.org/2000/svg" style={{width:"100%",height:"100%"}}>
              <g transform="translate(60,40) rotate(-10)" opacity="0.95"><TileFace symbol="hatsu"/></g>
              <g transform="translate(150,30) rotate(0)" opacity="0.95"><TileFace symbol="chun"/></g>
              <g transform="translate(240,40) rotate(8)" opacity="0.95"><TileFace symbol="haku"/></g>
              <g transform="translate(100,160) rotate(-5)" opacity="0.85"><TileFace symbol="ton"/></g>
              <g transform="translate(180,165)" opacity="0.85"><TileFace symbol="nan"/></g>
              <g transform="translate(260,160) rotate(5)" opacity="0.85"><TileFace symbol="sha"/></g>
            </svg>
          </div>
        </div>
      </section>

      {/* Quicklinks */}
      <section className="section tight">
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-title">
              <span className="sec-en">Quick Links</span>
              <h2 className="sec-jp">よく使われるサービス</h2>
            </div>
          </div>
          <div className="qlinks">
            {QLINKS.map((q,i)=>(
              <a key={i} className="qlink" href="#">
                <Icon name={q.icon}/>
                <span>{q.label}</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="foot">
        <div className="foot-top">
          <div className="wrap">
            <div className="foot-brand">
              <div style={{display:"flex",alignItems:"center",gap:14}}>
                <div className="brand-mark">麻</div>
                <div className="brand-text">
                  <span className="brand-jp">日本麻雀連合</span>
                  <span className="brand-en">Japan Mahjong Union</span>
                </div>
              </div>
              <p>1978年設立。全国12万人の会員と公認教室168ヶ所を擁する、日本最大の麻雀競技団体です。</p>
              <div className="foot-social">
                <a href="#" aria-label="X"><Icon name="x"/></a>
                <a href="#" aria-label="YouTube"><Icon name="yt"/></a>
                <a href="#" aria-label="Instagram"><Icon name="ig"/></a>
              </div>
            </div>
            <div className="foot-cols">
              <div className="foot-col">
                <h5>競技・大会</h5>
                <ul><li><a href="#">全国麻雀選手権</a></li><li><a href="#">プロリーグ</a></li><li><a href="#">段位認定戦</a></li><li><a href="#">大会カレンダー</a></li><li><a href="#">結果アーカイブ</a></li></ul>
              </div>
              <div className="foot-col">
                <h5>会員サービス</h5>
                <ul><li><a href="#">入会案内</a></li><li><a href="#">マイページ</a></li><li><a href="#">会員カード</a></li><li><a href="#">地区サークル</a></li><li><a href="#">よくある質問</a></li></ul>
              </div>
              <div className="foot-col">
                <h5>連合について</h5>
                <ul><li><a href="#">理念・沿革</a></li><li><a href="#">組織体制</a></li><li><a href="#">事業報告</a></li><li><a href="#">健全麻雀の推進</a></li><li><a href="#">採用情報</a></li></ul>
              </div>
              <div className="foot-col">
                <h5>サポート</h5>
                <ul><li><a href="#">お問い合わせ</a></li><li><a href="#">プレスリリース</a></li><li><a href="#">資料請求</a></li><li><a href="#">アクセス</a></li><li><a href="#">サイトマップ</a></li></ul>
              </div>
            </div>
          </div>
        </div>
        <div className="wrap foot-bot">
          <div>© 1978–2026 Japan Mahjong Union. All rights reserved.</div>
          <div className="links">
            <a href="#">利用規約</a>
            <a href="#">プライバシーポリシー</a>
            <a href="#">情報セキュリティ</a>
            <a href="#">特定商取引法</a>
          </div>
        </div>
      </footer>

      <TweaksPanel>
        <TweakSection label="レイヤー編集" />
        <TweakToggle label="レイヤーモード" value={!!t.layerMode}
          onChange={v=>setTweak('layerMode', v)}/>
        <TweakToggle label="既存の文字を編集" value={!!t.editText}
          onChange={v=>setTweak('editText', v)}/>
        {(t.editText || t.layerMode) && (
          <TweakButton onClick={()=>{
            if (t.editText) setTweak('texts', {});
            if (t.layerMode) setTweak('layers', []);
          }}>編集をリセット</TweakButton>
        )}

        <TweakSection label="カラーパレット" />
        <TweakSelect label="プリセット" value={t.palette}
          options={["orange","forest","midnight","crimson","purple"]}
          onChange={v=>{
            const p = PALETTES[v] || PALETTES.orange;
            setTweak({ palette: v, ...p });
          }}/>
        <TweakColor label="プライマリ" value={t.primaryColor}
          options={["#EB5505","#E60012","#0F6E3D","#1E3A5F","#B8893A","#6B2C8F","#C8102E"]}
          onChange={v=>setTweak({ primaryColor: v, palette: "custom" })}/>
        <TweakColor label="セカンダリ" value={t.secondaryColor}
          options={["#0F6E3D","#1E3A5F","#B8893A","#6B2C8F","#1a1a1a","#D4A017"]}
          onChange={v=>setTweak({ secondaryColor: v, palette: "custom" })}/>
        <TweakColor label="アクセント" value={t.accentColor}
          options={["#B8893A","#D4A017","#E60012","#0F6E3D","#6B2C8F","#1E3A5F"]}
          onChange={v=>setTweak({ accentColor: v, palette: "custom" })}/>
        <TweakColor label="文字色" value={t.textColor}
          options={["#1a1a1a","#2c2c2c","#3a2614","#1E3A5F","#0F6E3D"]}
          onChange={v=>setTweak('textColor', v)}/>
        <TweakColor label="背景" value={t.background}
          options={["#ffffff","#faf7f1","#f4f4f0","#1a1a1a"]}
          onChange={v=>setTweak('background', v)}/>

        <TweakSection label="罫線" />
        <TweakColor label="罫線色" value={t.lineColor}
          options={["#e4e4e4","#cfcfcf","#1a1a1a","#EB5505","#0F6E3D","#B8893A"]}
          onChange={v=>setTweak('lineColor', v)}/>
        <TweakSlider label="罫線の太さ" value={t.lineWidth} min={0} max={6} unit="px"
          onChange={v=>setTweak('lineWidth', v)}/>
        <TweakRadio label="罫線の形" value={t.lineStyle}
          options={["solid","dashed","dotted"]}
          onChange={v=>setTweak('lineStyle', v)}/>

        <TweakSection label="フォント" />
        <TweakSelect label="本文フォント" value={t.bodyFont}
          options={["Noto Sans JP","Zen Kaku Gothic","M PLUS 1","Shippori Mincho","Klee One"]}
          onChange={v=>setTweak('bodyFont', v)}/>
        <TweakSelect label="見出しフォント" value={t.displayFont}
          options={["match","Noto Sans JP","Zen Kaku Gothic","M PLUS 1","Shippori Mincho","Klee One"]}
          onChange={v=>setTweak('displayFont', v)}/>

        <TweakSection label="ヒーロー" />
        <TweakRadio label="表示スライド" value={String(heroIdx)} options={["0","1","2"]}
          onChange={v=>setHeroIdx(parseInt(v))}/>
      </TweaksPanel>

      <LayerEditor
        layers={t.layers || []}
        setLayers={(ls)=>setTweak('layers', ls)}
        enabled={!!t.layerMode}
      />
    </div>
  );
}

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