// 珈琲 コンパス — editorial natural HP
const { useState, useEffect, useRef } = React;

// ---------- Reveal-on-scroll ----------
function Reveal({ children, delay = 0, as: As = "div" }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => el.classList.add("is-in"), delay * 60);
        io.disconnect();
      }
    }, { threshold: 0.1 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className="reveal">{children}</As>;
}

// ---------- Bracket section header  [ 漢字 EN ] ----------
function BracketHead({ jp, en, align = "center" }) {
  return (
    <div className={`bhead bhead--${align}`}>
      <span className="bhead__br">[</span>
      <span className="bhead__jp">{jp}</span>
      <span className="bhead__en">{en}</span>
      <span className="bhead__br">]</span>
    </div>
  );
}

// ---------- Compass mark ----------
function CompassMark({ size = 36 }) {
  return (
    <svg viewBox="0 0 50 50" width={size} height={size} aria-hidden="true">
      <circle cx="25" cy="25" r="22" fill="none" stroke="currentColor" strokeWidth="1.2"/>
      <circle cx="25" cy="25" r="17" fill="none" stroke="currentColor" strokeWidth="0.4" strokeDasharray="1 2.5"/>
      <path d="M25 7.5 L27.6 25 L25 42.5 L22.4 25 Z" fill="currentColor"/>
      <circle cx="25" cy="25" r="1.6" fill="var(--bg)"/>
    </svg>
  );
}

// ---------- Nav ----------
function Nav() {
  const [open, setOpen] = useState(false);
  return (
    <nav className={`nav ${open ? "nav__open" : ""}`}>
      <a href="#top" className="nav__brand">
        <CompassMark/>
        <span className="nav__brand-jp">珈琲 コンパス</span>
        <span className="nav__brand-en">Kissaten・Coffee — SINCE 1983</span>
      </a>
      <div className="nav__links">
        <a href="#concept" onClick={() => setOpen(false)}>おみせのこと</a>
        <a href="#menu" onClick={() => setOpen(false)}>おしながき</a>
        <a href="#gallery" onClick={() => setOpen(false)}>しゃしん</a>
        <a href="#story" onClick={() => setOpen(false)}>40ねんの あゆみ</a>
        <a href="#news" onClick={() => setOpen(false)}>おたより</a>
        <a href="#access" onClick={() => setOpen(false)}>アクセス</a>
      </div>
      <button className="nav__burger" onClick={() => setOpen(o => !o)} aria-label="menu">
        <span/><span/><span/>
      </button>
    </nav>
  );
}

// ---------- Hero ----------
const HOURS = [
  { t: "08:00", l: "開店", lead: true },
  { t: "10:30", l: "モーニング" },
  { t: "12:00", l: "ランチ" },
  { t: "15:00", l: "おやつ" },
  { t: "18:00", l: "閉店" },
];

function Hero({ tweaks }) {
  return (
    <header className="hero" id="top">
      {/* corner kanji stamp like cafesteen logo mark */}
      <div className="hero__corner-kanji" aria-hidden="true">
        <span>わ</span><span>だ</span><span>や</span><span>ま</span><span>で</span>
      </div>

      {/* news strip top-left */}
      <div className="hero__news">
        <hr/>
        <h2 className="hero__news-title">{tweaks.newsHeadline || "夏の営業時間延長のお知らせ"}</h2>
        <span className="hero__news-meta">02 MAY. 2026 / NEWS</span>
      </div>

      {/* brand block (left, centered vertically) */}
      <div className="hero__brand">
        <span className="hero__brand-tag">Kissaten・Coffee &amp; Toast</span>
        <h1 className="hero__brand-name">コンパス</h1>
        <p className="hero__brand-addr">
          〒669-5202 兵庫県朝来市和田山町<br/>
          竹田字本町 12-3<br/>
          TEL. 079-672-XXXX<br/>
          OPEN. 8:00-18:00 ／ 水曜定休
        </p>
        <div className="hero__brand-sns">
          <a href="#" aria-label="Instagram"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></a>
          <a href="#" aria-label="Facebook"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 4h-3a3 3 0 0 0-3 3v3H5v3h3v8h3v-8h3l1-3h-4V7a1 1 0 0 1 1-1h3z"/></svg></a>
        </div>
      </div>

      {/* organic blob photo + side timeline */}
      <Reveal>
        <div className="hero__photo-wrap">
          <div className="hero__blob">
            <img src="images/new-exterior.jpg" alt="コンパス外観"/>
          </div>
          <div className="hero__times" aria-hidden="true">
            <div className="hero__times-line"/>
            {HOURS.map((h, i) => (
              <div key={i} className={`hero__time ${h.lead ? "is-lead" : ""}`}>
                <span className="hero__time-dot"/>
                <span className="hero__time-num">{h.t}</span>
                <span className="hero__time-label">{h.l}</span>
              </div>
            ))}
          </div>
        </div>
      </Reveal>

      {/* SINCE stamp + EN lead caption (bottom row) */}
      <div className="hero__bottom">
        <div className="hero__since">
          <svg className="hero__since-corner" viewBox="0 0 60 60" aria-hidden="true">
            <path d="M2 30 L2 2 L58 2" fill="none" stroke="currentColor" strokeWidth="1"/>
          </svg>
          <span className="hero__since-yr-label">SINCE</span>
          <span className="hero__since-yr">1983</span>
          <span className="hero__since-bot">わだやま で。</span>
        </div>
        <div className="hero__lead-en">
          <p className="hero__lead-en__h">One day of "KISSATEN COMPASS".</p>
          <p>Morning toast, hand-dripped coffee, simple set lunch.</p>
          <p>Forty years in this small Tajima town,</p>
          <p>opening at the same hour, closing at the same hour.</p>
        </div>
      </div>
    </header>
  );
}

// ---------- Concept ----------
const FACES = [
  { img: "images/new-staff-trio.jpg", cap: "MASTER" },
  { img: "images/new-staff-couple.jpg", cap: "OKAMI" },
  { img: "images/new-entrance-family.jpg", cap: "REGULAR" },
  { img: "images/new-coasters.jpg", cap: "COASTER" },
];

function Concept() {
  return (
    <section id="concept" className="concept section">
      <BracketHead jp="わだやまで" en="CONCEPT"/>
      <Reveal>
        <h2 className="concept__title">
          あさは モーニング、<br/>
          ゆうがたは <em>コーヒー</em>を いっぱい。
        </h2>
      </Reveal>

      <div className="concept__avatars">
        {FACES.map((f, i) => (
          <Reveal key={i} delay={i + 1}>
            <div className="avatar">
              <div className="avatar__photo"><img src={f.img} alt={f.cap}/></div>
              <span className="avatar__cap">{f.cap}</span>
            </div>
          </Reveal>
        ))}
      </div>

      <div className="concept__cols">
        <div className="concept__hashtags">
          <span># KISSATEN</span>
          <span># COMPASS</span>
          <span># 1983 —</span>
        </div>
        <p className="concept__vert">
          ちいさな まちの、ちいさな きっさてん。<br/>
          ぐるりと ぼんやり、コーヒー いっぱい、<br/>
          あついトーストに ゆで玉子。
        </p>
        <p className="concept__vert">
          あさの ひかりが はいる カウンター。<br/>
          ゆうぐれの コーヒーの かおり。<br/>
          かわらない じかんが、ここに あります。
        </p>
        <p className="concept__vert">
          ひとりでも、ふたりでも、<br/>
          きょうも、いつも どおり。<br/>
          コンパスは、わだやまの まちかどで。
        </p>
      </div>
    </section>
  );
}

// ---------- Menu ----------
const MENU = {
  morning:  { jp: "あさ",       en: "MORNING",  note: "8:00 – 11:00 ／ あさの サービスタイム" },
  teishoku: { jp: "ていしょく", en: "TEISHOKU", note: "ごはん・おみそしる・つけもの 付き" },
  rice:     { jp: "丼・カレー", en: "DON & CURRY", note: "いっぱいで おなかいっぱい" },
  sand:     { jp: "サンド",     en: "SANDWICH", note: "コーヒー との あいしょう ばつぐん" },
  drink:    { jp: "ドリンク",   en: "DRINK",    note: "ていねいに、いっぱい ずつ" },
};
const MENU_ITEMS = {
  morning: [
    { name: "モーニングセットＡ",   en: "Morning Set A",  price: "¥550", desc: "あつあつの トースト、ゆで玉子、ミニサラダ、コーヒー。" },
    { name: "ホットサンドモーニング", en: "Hot Sand Morning", price: "¥650", desc: "フワッと あったまる ホットサンド、ミニサラダ、ドリンク。" },
    { name: "ココアセット",         en: "Cocoa Set",       price: "¥600", desc: "ぬくぬくの ココアと トースト。さむい あさに ぴったり。" },
    { name: "ミックスジュースセット", en: "Mix Juice Set",   price: "¥650", desc: "ピンクっぽい てづくりミックスジュースと トースト。" },
  ],
  teishoku: [
    { name: "とんかつ ていしょく",   en: "Tonkatsu",   price: "¥950",  desc: "サクッと あがった ころもに、てづくりソース。" },
    { name: "ハンバーグ ていしょく", en: "Hamburg",     price: "¥950",  desc: "ふわふわ ハンバーグに デミグラスソースを たっぷり。" },
    { name: "ミックスフライ",       en: "Mixed Fry",   price: "¥1,050", desc: "エビフライ・とんかつ・コロッケが ぜんぶ のった。" },
    { name: "からあげ ていしょく",   en: "Karaage",     price: "¥950",  desc: "ジューシーな からあげ、レモンを ぎゅっと。" },
  ],
  rice: [
    { name: "カツカレー",  en: "Katsu Curry", price: "¥980", desc: "コクのある カレーに サクサクの カツ。" },
    { name: "ソースカツ丼", en: "Sauce Katsu", price: "¥900", desc: "あまからソースが しみた カツが ごはんに のって。" },
    { name: "玉子とじ丼",  en: "Tamago Don",  price: "¥800", desc: "やさしい だしの きいた、ふわふわ 玉子とじ。" },
  ],
  sand: [
    { name: "ミックスサンド", en: "Mix Sand",    price: "¥650", desc: "玉子・ハム・きゅうりの ていばん。" },
    { name: "カツサンド",     en: "Katsu Sand",  price: "¥780", desc: "あつめの とんかつを はさんだ ボリュームたっぷり。" },
  ],
  drink: [
    { name: "ブレンドコーヒー",   en: "Blend Coffee", price: "¥450", desc: "コクと キレの バランス。コンパスの ていばん。" },
    { name: "ミックスジュース",   en: "Mix Juice",    price: "¥500", desc: "ピンクっぽい いろあいの てづくり。" },
    { name: "ココア",           en: "Cocoa",        price: "¥500", desc: "ぬくぬく あったまる、ホットココア。" },
  ],
};

const MENU_PHOTOS = {
  morning: "images/new-morning-set.jpg",
  teishoku: "images/new-tonkatsu.jpg",
  rice: "images/new-katsu-curry.jpg",
  sand: "images/new-mix-sand-coffee.jpg",
  drink: "images/new-coasters.jpg",
};

function Menu() {
  const [tab, setTab] = useState("morning");
  const cat = MENU[tab];
  return (
    <section id="menu" className="menu section">
      <BracketHead jp="食べる" en="MENU"/>
      <div className="menu__feature">
        <div className="menu__vert menu__vert--l">ゆったり、おいしい じかん。</div>
        <Reveal>
          <div className="menu__blob"><img src={MENU_PHOTOS[tab]} alt={cat.jp}/></div>
        </Reveal>
        <div className="menu__vert menu__vert--r">こころも、おなかも、しあわせ。</div>
      </div>

      <div className="menu__tabs">
        {Object.entries(MENU).map(([key, m]) => (
          <button key={key} onClick={() => setTab(key)} className={`menu__tab ${tab === key ? "is-active" : ""}`}>
            {m.jp}
            <span className="menu__tab-en">{m.en}</span>
          </button>
        ))}
      </div>
      <p className="menu__note">※ {cat.note}</p>

      <div className="menu__list">
        {MENU_ITEMS[tab].map((it, i) => (
          <Reveal key={`${tab}-${i}`} delay={i % 4}>
            <div className="menu-item">
              <div className="menu-item__head">
                <h3 className="menu-item__name">{it.name}</h3>
                <span className="menu-item__dots"/>
                <span className="menu-item__price">{it.price}</span>
              </div>
              <span className="menu-item__en">{it.en}</span>
              <p className="menu-item__desc">{it.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---------- Gallery ----------
const GALLERY_THUMBS = [
  "images/new-interior.jpg",
  "images/new-interior-2.jpg",
  "images/new-entrance-family.jpg",
  "images/new-staff-couple.jpg",
  "images/new-menu-board.jpg",
  "images/new-coasters.jpg",
];

function Gallery() {
  return (
    <section id="gallery" className="gallery section">
      <div className="gallery__head">
        <BracketHead jp="たのしむ" en="GALLERY" align="left"/>
        <div className="gallery__bubble">
          <p>木の カウンター、すりガラス の まど、<br/>1983ねんから かわらない、<br/>あたたかい くうき。</p>
        </div>
      </div>

      <Reveal>
        <div className="gallery__hero">
          <img src="images/new-interior.jpg" alt="店内"/>
          <div className="gallery__card">
            <h3>INTERIOR</h3>
            <p>ひとりでも、なじみの ひととでも。木の カウンター席と、4人がけの テーブル席。きょうも かわらず、おなじ いす、おなじ じかん。</p>
          </div>
          <div className="gallery__hero-tag">INTERIOR</div>
        </div>
      </Reveal>

      <div className="gallery__strip">
        {GALLERY_THUMBS.map((src, i) => (
          <div key={i} className="gallery__thumb">
            <img src={src} alt=""/>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- Story (40 years timeline) ----------
const STORY = [
  { yr: "1983", title: "わだやま に ひらく", body: "JR和田山駅まえに、マスターと おかみで ちいさな きっさてんを はじめました。" },
  { yr: "1992", title: "モーニング はじめる", body: "あさの トースト＋ゆで玉子セットが 評判に。8時の 開店じかんは いまも かわらず。" },
  { yr: "2008", title: "ていしょく メニュー", body: "ハンバーグ・とんかつなど、てづくりの ていしょくを はじめました。" },
  { yr: "2018", title: "おみせ リフォーム", body: "カウンターを そのままに、いすと しょうめいを あたらしく。" },
  { yr: "2023", title: "40 しゅうねん", body: "おかげさまで、40ねん。ことしも おなじ じかんに あけて、おなじ じかんに しめます。" },
];

function Story() {
  return (
    <section id="story" className="story section">
      <BracketHead jp="40ねんの あゆみ" en="STORY"/>
      <div className="story__display" aria-hidden="true">SINCE&nbsp;1983</div>
      <div className="story__list">
        {STORY.map((s, i) => (
          <Reveal key={s.yr} delay={i}>
            <div className="story-item">
              <span className="story-item__yr">{s.yr}</span>
              <div>
                <h3 className="story-item__title">{s.title}</h3>
                <p className="story-item__body">{s.body}</p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---------- News ----------
const NEWS = [
  { date: "2026-04-26", weather: "はれ", title: "やまの みどりが きれいです",
    body: "きょうの わだやまは ぽかぽか。アイスコーヒーが よく うれる きせつに なりました。",
    img: "images/new-tajima-view.jpg" },
  { date: "2026-04-22", weather: "くもり", title: "モーニングは あさ11じまで",
    body: "あさの サンドイッチに ミックスジュースを そえて。たまには こういう ひも あります。",
    img: "images/new-morning-jus.jpg" },
  { date: "2026-04-18", weather: "あめ", title: "あめの ひの ハンバーグ",
    body: "あめの ひは てづくり ハンバーグ ていしょくが よく でます。やっぱり ぬくぬく。",
    img: "images/new-hamburg-closeup.jpg" },
  { date: "2026-04-12", weather: "はれ", title: "あたらしい コースター",
    body: "ひさしぶりに コースターを あたらしく。よくみると ロゴが ちょっとずつ ちがう ねんだいもの。",
    img: "images/new-coasters.jpg" },
];
function fmtDate(iso) {
  const d = new Date(iso);
  const m = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"][d.getMonth()];
  return `${String(d.getDate()).padStart(2,"0")} ${m}. ${d.getFullYear()}`;
}

function News() {
  return (
    <section id="news" className="news section">
      <BracketHead jp="しらせ" en="NEWS"/>
      <div className="news__grid">
        {NEWS.slice(0, 4).map((n, i) => (
          <Reveal key={n.date} delay={i % 2}>
            <article className="news-card">
              <div className="news-card__photo"><img src={n.img} alt={n.title}/></div>
              <div className="news-card__meta">
                <span className="news-card__date">{fmtDate(n.date)}</span>
                <span className="news-card__sep">／</span>
                <span className="news-card__weather">{n.weather}</span>
              </div>
              <h3 className="news-card__title">{n.title}</h3>
              <p className="news-card__body">{n.body}</p>
              <a className="news-card__more" href="#">続きを読む</a>
            </article>
          </Reveal>
        ))}
      </div>
      <div className="news__cta-wrap">
        <a className="news__cta" href="#news">NEWS LIST</a>
      </div>
    </section>
  );
}

// ---------- Access ----------
const STEPS = [
  { i: "01", t: "JR和田山駅 改札を出て、左手へ。" },
  { i: "02", t: "ロータリーを右へ、商店街の方向。" },
  { i: "03", t: "商店街を3分ほど、まっすぐ。" },
  { i: "04", t: "緑の屋根の建物が目印です。" },
  { i: "05", t: "「珈琲 コンパス」の看板で到着。" },
];

function Access() {
  return (
    <section id="access" className="access section">
      <BracketHead jp="行く" en="ACCESS"/>
      <div className="access__top">
        <div className="access__photo"><img src="images/new-exterior.jpg" alt="コンパス外観"/></div>
        <div className="access__info">
          <span className="access__tag">Kissaten・Coffee</span>
          <h3 className="access__name">珈琲 コンパス</h3>
          <p className="access__addr">
            〒669-5202 兵庫県朝来市和田山町 竹田字本町 12-3<br/>
            TEL. 079-672-XXXX ／ OPEN. 8:00-18:00 ／ 水曜定休<br/>
            最寄駅：JR和田山駅 ／ 駐車場 あり（3台）／ お問い合わせ こちら
          </p>
          <div className="access__sns">
            <a href="#" aria-label="Instagram"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></a>
            <a href="#" aria-label="Facebook"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 4h-3a3 3 0 0 0-3 3v3H5v3h3v8h3v-8h3l1-3h-4V7a1 1 0 0 1 1-1h3z"/></svg></a>
          </div>
        </div>
        <div className="access__since">
          <svg className="access__since-corner" viewBox="0 0 60 60" aria-hidden="true">
            <path d="M2 30 L2 2 L58 2" fill="none" stroke="currentColor" strokeWidth="1"/>
          </svg>
          <span className="access__since-lab">SINCE</span>
          <span className="access__since-yr">1983</span>
          <span className="access__since-bot">わだやま で。</span>
        </div>
      </div>

      <div className="access__bottom">
        <div className="access__map">
          <iframe
            title="map"
            src="https://www.google.com/maps?q=JR%E5%92%8C%E7%94%B0%E5%B1%B1%E9%A7%85&output=embed"
            width="100%" height="100%"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            style={{border:0}}
          />
        </div>
        <div className="access__route">
          <div className="access__route-head">
            和田山駅から<br/>コンパスまでの道順<br/><span>（徒歩 3分）</span>
          </div>
          <div className="access__route-grid">
            {STEPS.map((s, i) => (
              <div key={s.i} className="route-step">
                <div className="route-step__num">{s.i}</div>
                <p className="route-step__text">{s.t}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Foot() {
  return (
    <footer className="foot">
      <div className="foot__copy">
        COPYRIGHT © KISSATEN COMPASS — WADAYAMA, TAJIMA, HYOGO — ALL RIGHTS RESERVED.
      </div>
    </footer>
  );
}

// ---------- Tweaks ----------
function Tweaks({ tweaks, setTweaks, onClose }) {
  const set = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };
  return (
    <div className="tweaks">
      <div className="tweaks__head">
        <h3>Tweaks</h3>
        <button className="tweaks__close" onClick={onClose}>×</button>
      </div>
      <div className="tweaks__group">
        <label>テーマ</label>
        <div className="tweaks__chips">
          {[["default","ナチュラル"],["warm","あたたかめ"],["cool","おちついた"]].map(([v,l]) => (
            <button key={v} className={tweaks.theme === v ? "on" : ""} onClick={() => set("theme", v)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweaks__group">
        <label>ヒーロー画像の形</label>
        <div className="tweaks__chips">
          {[["blob","ブロブ"],["oval","たまご"],["round","まる"],["soft","やわらか"]].map(([v,l]) => (
            <button key={v} className={tweaks.heroShape === v ? "on" : ""} onClick={() => set("heroShape", v)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweaks__group">
        <label>NEWSのみだし</label>
        <input type="text" value={tweaks.newsHeadline} onChange={e => set("newsHeadline", e.target.value)}/>
      </div>
    </div>
  );
}

// ---------- App ----------
function App({ initialTweaks }) {
  const [tweaks, setTweaks] = useState(initialTweaks);
  const [tweaksVisible, setTweaksVisible] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === "__activate_edit_mode") setTweaksVisible(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksVisible(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme || "default");
    document.documentElement.setAttribute("data-hero-shape", tweaks.heroShape || "blob");
  }, [tweaks.theme, tweaks.heroShape]);

  return (
    <>
      <Nav/>
      <Hero tweaks={tweaks}/>
      <Concept/>
      <Menu/>
      <Gallery/>
      <Story/>
      <News/>
      <Access/>
      <Foot/>
      {tweaksVisible && (
        <Tweaks tweaks={tweaks} setTweaks={setTweaks} onClose={() => {
          setTweaksVisible(false);
          window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
        }}/>
      )}
    </>
  );
}

window.App = App;