/* app.jsx — どうぶつパンのおみせ homepage */
const { useState, useEffect, useRef } = React;

/* ---------- palettes (tweakable) ---------- */
const PALETTES = {
  konkari: { /* こんがり&ポップ */
    '--bg': '#FFF6E9', '--bg2': '#FBE9CE', '--card': '#FFFDF8', '--ink': '#5A3722', '--ink-soft': '#9A7B5E',
    '--bread': '#E0AA63', '--crust': '#B57636', '--choco': '#5A3722', '--muzzle': '#F3D9AE', '--cheek': '#F4A6A0', '--inner': '#C77A6E', '--nose': '#D98A8A',
    '--pig': '#F4B9C8', '--pig-d': '#E892A8', '--chick': '#F7D45C', '--beak': '#F0922E', '--frog': '#A6CF7E', '--frog-d': '#6FA24B', '--frog-cheek': '#F4A6A0',
    '--accent': '#EC6A52', '--accent-ink': '#fff',
  },
  pastel: { /* やわらかパステル */
    '--bg': '#FCF5FB', '--bg2': '#F3E7F4', '--card': '#FFFFFF', '--ink': '#6A5566', '--ink-soft': '#A695A4',
    '--bread': '#EBC08A', '--crust': '#CF9C63', '--choco': '#6A5566', '--muzzle': '#F7E6CF', '--cheek': '#F6B8C6', '--inner': '#E0A6B0', '--nose': '#E6A6B6',
    '--pig': '#F8CAD8', '--pig-d': '#EFA6BE', '--chick': '#FBE49A', '--beak': '#F3B05E', '--frog': '#BFE0A8', '--frog-d': '#94C277', '--frog-cheek': '#F6B8C6',
    '--accent': '#E58AB0', '--accent-ink': '#fff',
  },
  pop: { /* げんきビビッド */
    '--bg': '#FFF4DC', '--bg2': '#FFE2A8', '--card': '#FFFFFF', '--ink': '#3E2A1C', '--ink-soft': '#8A6E4E',
    '--bread': '#E7A84E', '--crust': '#AE6A28', '--choco': '#3E2A1C', '--muzzle': '#F6D79E', '--cheek': '#F58C82', '--inner': '#C76A5C', '--nose': '#D87A78',
    '--pig': '#FBAEC4', '--pig-d': '#F07AA0', '--chick': '#FFD23F', '--beak': '#FB8B24', '--frog': '#9BD45E', '--frog-d': '#5FA235', '--frog-cheek': '#F58C82',
    '--accent': '#E23E3E', '--accent-ink': '#fff',
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "konkari",
  "displayFont": "Hachi Maru Pop",
  "blush": true,
  "headline": "どうぶつパンの\nおみせ",
  "shopName": "ぱんやさん もぐもぐ"
}/*EDITMODE-END*/;

/* ---------- tiny decorative crumbs ---------- */
function Crumbs({ n = 14 }) {
  const items = React.useMemo(() => Array.from({ length: n }, (_, i) => ({
    left: (i * 53 % 100), top: (i * 37 % 100), s: 6 + (i * 7 % 10),
    c: ['var(--crust)', 'var(--accent)', 'var(--chick)', 'var(--frog-d)', 'var(--pig-d)'][i % 5],
    r: i % 3 === 0 ? '50%' : '2px', d: (i % 7) * 0.4,
  })), [n]);
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
      {items.map((c, i) => (
        <span key={i} className="db-float" style={{
          position: 'absolute', left: c.left + '%', top: c.top + '%', width: c.s, height: c.s,
          borderRadius: c.r, background: c.c, opacity: .22, animationDelay: c.d + 's',
          transform: `rotate(${i * 24}deg)`,
        }} />
      ))}
    </div>
  );
}

/* ---------- hero ---------- */
function Hero({ t }) {
  return (
    <header className="db-hero">
      <Crumbs n={16} />
      <div className="db-hero-inner">
        <div className="db-hero-copy">
          <span className="db-kicker">やきたて・てづくり</span>
          <h1 className="db-h1" style={{ whiteSpace: 'pre-line' }}>{t.headline}</h1>
          <p className="db-lead">こねこね、ぺったん。<br/>オーブンからでてきたら…<b>どうぶつ</b>に へんしん！<br/>こどもが だいすきな、たべるのが もったいない パンやさん。</p>
          <div className="db-hero-cta">
            <a href="#nakama" className="db-btn db-btn--big">なかまに あいにいく</a>
            <a href="#menu" className="db-btn db-btn--ghost">きょうの パン</a>
          </div>
        </div>
        <div className="db-hero-art">
          <div className="db-hero-plate">
            <div className="db-h-a db-h-a1"><AnimalBread type="bear" size={186} /></div>
            <div className="db-h-a db-h-a2"><AnimalBread type="rabbit" size={150} /></div>
            <div className="db-h-a db-h-a3"><AnimalBread type="frog" size={138} /></div>
            <div className="db-h-a db-h-a4"><AnimalBread type="chick" size={120} /></div>
          </div>
        </div>
      </div>
      <div className="db-wave" aria-hidden="true" />
    </header>
  );
}

/* ---------- tap-to-play animal card ---------- */
function NakamaCard({ a, i }) {
  const [jump, setJump] = useState(false);
  const [say, setSay] = useState(false);
  const tj = useRef(), ts = useRef();
  function play() {
    clearTimeout(tj.current); clearTimeout(ts.current);
    setJump(false); requestAnimationFrame(() => setJump(true));
    tj.current = setTimeout(() => setJump(false), 700);
    setSay(true); ts.current = setTimeout(() => setSay(false), 3200);
  }
  useEffect(() => () => { clearTimeout(tj.current); clearTimeout(ts.current); }, []);
  return (
    <button className="db-nk" onClick={play}>
      <span className={'db-bubble' + (say ? ' is-on' : '')}>{a.line}</span>
      <span className={'db-nk-art' + (jump ? ' is-jump' : '')}>
        <AnimalBread type={a.type} size={150} />
      </span>
      <span className="db-nk-name">{a.name}</span>
      <span className="db-nk-tag">{a.tag}</span>
      <span className="db-nk-hint">タップしてね</span>
    </button>
  );
}

function Nakama() {
  return (
    <section id="nakama" className="db-sec db-sec--alt">
      <div className="db-sec-head">
        <h2 className="db-h2">パンの なかまたち</h2>
        <p className="db-sub">タップすると ごあいさつ してくれるよ！</p>
      </div>
      <div className="db-nk-grid">
        {ANIMALS.map((a, i) => <NakamaCard key={a.type} a={a} i={i} />)}
      </div>
    </section>
  );
}

/* ---------- menu ---------- */
const PRICES = { bear: 240, rabbit: 220, cat: 200, pig: 260, chick: 230, frog: 250 };

const PHOTOS = {
  bear:   'https://images.unsplash.com/photo-1704382926921-c9e4b3c3c931?w=600&h=450&fit=crop&q=80',
  rabbit: 'https://images.unsplash.com/photo-1710220988673-ea5fdef36de4?w=600&h=450&fit=crop&q=80',
  cat:    'https://images.unsplash.com/photo-1588861472194-6883d8b5e552?w=600&h=450&fit=crop&q=80',
  pig:    'https://images.unsplash.com/photo-1575282253346-e5eb3a9f12d4?w=600&h=450&fit=crop&q=80',
  chick:  'https://images.unsplash.com/photo-1605704873349-631c8f0fa42c?w=600&h=450&fit=crop&q=80',
  frog:   'https://images.unsplash.com/photo-1612382182307-7c6f2fa03a0e?w=600&h=450&fit=crop&q=80',
  shop:   'https://images.unsplash.com/photo-1549407981-2e656af56b4b?w=900&h=600&fit=crop&q=80',
};
function MenuCard({ a }) {
  return (
    <div className="db-menu-card">
      <div className="db-menu-photo">
        {React.createElement('image-slot', {
          id: 'pan-' + a.type, shape: 'rounded', radius: '22',
          src: PHOTOS[a.type],
          placeholder: a.bread + 'の しゃしん',
          style: { width: '100%', height: '100%', display: 'block' },
        })}
        <span className="db-menu-chip"><AnimalBread type={a.type} size={56} /></span>
      </div>
      <div className="db-menu-info">
        <h3 className="db-menu-name">{a.name}の<br/>{a.bread}</h3>
        <div className="db-menu-row">
          <span className="db-menu-price"><b>{PRICES[a.type]}</b>えん</span>
          <span className="db-menu-tag">{a.tag}</span>
        </div>
      </div>
    </div>
  );
}
function Menu() {
  return (
    <section id="menu" className="db-sec">
      <div className="db-sec-head">
        <h2 className="db-h2">きょうの パン</h2>
        <p className="db-sub">まいにち やきたて。なくなりしだい おしまいです。</p>
      </div>
      <div className="db-menu-grid">
        {ANIMALS.map(a => <MenuCard key={a.type} a={a} />)}
      </div>
    </section>
  );
}

/* ---------- how it's made ---------- */
const STEPS = [
  { n: '1', t: 'こねこね', d: 'こむぎこと ぎゅうにゅうを まぜて、ちからを こめて こねます。' },
  { n: '2', t: 'ねかせる', d: 'あたたかい おへやで ぷっくり ふくらむまで まちます。' },
  { n: '3', t: 'かたちづくり', d: 'おみみや おはなを つけて、どうぶつの かおに します。' },
  { n: '4', t: 'やくぞ！', d: 'オーブンで こんがり。いいにおいが してきたら できあがり♪' },
];
function Steps() {
  return (
    <section className="db-sec db-sec--alt">
      <div className="db-sec-head">
        <h2 className="db-h2">パンが できるまで</h2>
        <p className="db-sub">ぜんぶ てづくり。あさ いちばんから やいています。</p>
      </div>
      <div className="db-steps">
        {STEPS.map((s, i) => (
          <div className="db-step" key={s.n}>
            <div className="db-step-num">{s.n}</div>
            <h3 className="db-step-t">{s.t}</h3>
            <p className="db-step-d">{s.d}</p>
            {i < STEPS.length - 1 && <span className="db-step-arrow" aria-hidden="true">→</span>}
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- shop info ---------- */
function Shop({ t }) {
  return (
    <section id="shop" className="db-sec">
      <div className="db-shop">
        <div className="db-shop-photo">
          {React.createElement('image-slot', {
            id: 'shopfront', shape: 'rounded', radius: '26',
            src: PHOTOS.shop,
            placeholder: 'おみせの しゃしん',
            style: { width: '100%', height: '100%', display: 'block' },
          })}
        </div>
        <div className="db-shop-info">
          <h2 className="db-h2" style={{ marginTop: 0 }}>おみせの こと</h2>
          <p className="db-shop-lead">{t.shopName} は、まちの ちいさな パンやさん。<br/>おやこで えらぶ じかんも、ごちそうです。</p>
          <dl className="db-info">
            <div><dt>あいているひ</dt><dd>かようび 〜 にちようび</dd></div>
            <div><dt>じかん</dt><dd>あさ 8:00 〜 ゆうがた 18:00</dd></div>
            <div><dt>おやすみ</dt><dd>げつようび</dd></div>
            <div><dt>ばしょ</dt><dd>みどりまち 3-2-1 もぐもぐビル 1かい</dd></div>
          </dl>
          <a href="#" className="db-btn db-btn--big">ちずを みる</a>
        </div>
      </div>
    </section>
  );
}

/* ---------- nav + footer ---------- */
function Nav({ t }) {
  return (
    <nav className="db-nav">
      <a href="#top" className="db-logo">
        <span className="db-logo-face"><AnimalBread type="bear" size={42} /></span>
        <span>{t.shopName}</span>
      </a>
      <div className="db-nav-links">
        <a href="#nakama">なかま</a>
        <a href="#menu">メニュー</a>
        <a href="#shop">おみせ</a>
        <a href="レシピ.html" style={{color:'var(--accent)',fontWeight:900}}>レシピ</a>
      </div>
    </nav>
  );
}
function Footer({ t }) {
  return (
    <footer className="db-foot">
      <div className="db-foot-animals">
        {ANIMALS.map(a => <AnimalBread key={a.type} type={a.type} size={64} />)}
      </div>
      <p className="db-foot-name">{t.shopName}</p>
      <p className="db-foot-small">きょうも たべてくれて ありがとう。© {t.shopName}</p>
    </footer>
  );
}

/* ---------- app ---------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    const root = document.documentElement;
    const p = PALETTES[t.palette] || PALETTES.konkari;
    Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v));
    root.style.setProperty('--font-display', `"${t.displayFont}", "Zen Maru Gothic", sans-serif`);
    root.style.setProperty('--cheek-show', t.blush ? '.85' : '0');
  }, [t.palette, t.displayFont, t.blush]);

  return (
    <div id="top">
      <Nav t={t} />
      <Hero t={t} />
      <Nakama />
      <Menu />
      <Steps />
      <Shop t={t} />
      <Footer t={t} />

      <TweaksPanel>
        <TweakSection label="いろ・フォント" />
        <TweakRadio label="カラー" value={t.palette}
          options={[{ value: 'konkari', label: 'こんがり' }, { value: 'pastel', label: 'パステル' }, { value: 'pop', label: 'げんき' }]}
          onChange={(v) => setTweak('palette', v)} />
        <TweakSelect label="みだしフォント" value={t.displayFont}
          options={['Hachi Maru Pop', 'Yusei Magic', 'Zen Maru Gothic', 'Mochiy Pop One']}
          onChange={(v) => setTweak('displayFont', v)} />
        <TweakToggle label="ほっぺ（チーク）" value={t.blush}
          onChange={(v) => setTweak('blush', v)} />
        <TweakSection label="ことば" />
        <TweakText label="みせの なまえ" value={t.shopName}
          onChange={(v) => setTweak('shopName', v)} />
        <TweakRow label="みだし">
          <textarea className="twk-field" rows={2} value={t.headline}
            style={{ resize: 'vertical', fontFamily: 'inherit' }}
            onChange={(e) => setTweak('headline', e.target.value)} />
        </TweakRow>
      </TweaksPanel>
    </div>
  );
}

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