/* global React, ReactDOM, GiftyData */
const { useState, useEffect } = React;

// Logo (full wordmark PNG) — used in sub-page navs, footers, and admin
function LogoMini({ size = 30, white = false }) {
  return (
    <img
      src="assets/logo.png"
      alt="Gifty"
      style={{
        height: size,
        width: "auto",
        display: "inline-block",
        verticalAlign: "middle",
        filter: white ? "invert(1)" : "none",
      }}
    />
  );
}

// Simple header used by sub-pages
function SubpageNav({ current }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="index.html" className="logo" aria-label="Gifty">
          <LogoMini size={28} />
        </a>
        <div className="nav-links">
          <a href="index.html#concept">Concept</a>
          <a href="index.html#services">Service</a>
          <a href="works.html" style={{ fontWeight: current === "works" ? 800 : 500 }}>Works</a>
          <a href="blog.html" style={{ fontWeight: current === "blog" ? 800 : 500 }}>Blog</a>
          <a href="index.html#profile">Profile</a>
          <a href="index.html#contact" className="nav-cta">お問い合わせ <span style={{ fontSize: 11 }}>→</span></a>
        </div>
      </div>
    </nav>
  );
}

function PageFooter() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="index.html" style={{ marginBottom: 18, display: "inline-block" }} aria-label="Gifty">
              <LogoMini size={36} />
            </a>
            <p style={{ fontSize: 13.5, color: "var(--ink-2)", maxWidth: 380, lineHeight: 1.95, marginTop: 18 }}>
              アイデアと仕組みで、ファンづくりを。生まれた余白で、自由と好きを楽しむ。<br />
              宮崎を拠点に、地域のお店と一緒に歩く伴走パートナー。
            </p>
          </div>
          <div>
            <h4>Service</h4>
            <ul>
              <li><a href="index.html#services">公式LINE構築・運用</a></li>
              <li><a href="index.html#services">Instagram 活用支援</a></li>
              <li><a href="index.html#services">業務効率化・システム</a></li>
            </ul>
          </div>
          <div>
            <h4>Site</h4>
            <ul>
              <li><a href="works.html">Works (実績)</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="index.html#profile">Profile</a></li>
              <li><a href="index.html#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href="index.html#contact">お問い合わせ</a></li>
              <li><a href="tel:08064795254">080-6479-5254</a></li>
              <li><a href="mailto:oda.eiki62@gmail.com">oda.eiki62@gmail.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Gifty — ODA EIKI</span>
          <span>BASED IN MIYAZAKI, JAPAN</span>
        </div>
      </div>
    </footer>
  );
}

// ===== Works listing =====
function WorksApp() {
  const [works, setWorks] = useState(GiftyData.getWorks());
  useEffect(() => {
    const onChange = () => setWorks(GiftyData.getWorks());
    window.addEventListener("gifty:cms-change", onChange);
    return () => window.removeEventListener("gifty:cms-change", onChange);
  }, []);

  return (
    <>
      <SubpageNav current="works" />
      <section className="subpage-hero">
        <div className="container">
          <span className="eyebrow">Works</span>
          <h1>WORKS <small>#ご支援・制作実績</small></h1>
          <p>公式LINE構築、Instagram運用、業務効率化まで。これまでにご一緒させていただいたお客様の事例をご紹介します。</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: "clamp(56px, 7vw, 80px)" }}>
        <div className="container">
          {works.length === 0 ? (
            <div className="empty-state">
              <h3>まだ実績はありません</h3>
              <p>管理画面から実績を追加できます。</p>
            </div>
          ) : (
            <div className="works-grid">
              {works.map((w) => (
                <a key={w.id} className="work-card" href={`work.html?id=${encodeURIComponent(w.id)}`}>
                  {w.images && w.images.length > 0 && (
                    <div className={`work-card-gallery ${w.images.length >= 2 ? "cols-2" : ""}`}>
                      {w.images.slice(0, 2).map((src, i) => (
                        <img key={i} src={src} alt="" loading="lazy" />
                      ))}
                    </div>
                  )}
                  <div className="work-card-body">
                    <div className="work-card-tags">
                      {(w.tags || []).map((t, i) => <span className="work-card-tag" key={i}>{t}</span>)}
                    </div>
                    <div className="work-card-client">{w.client}</div>
                    <div className="work-card-title">{w.title}</div>
                    {w.summary && <div className="work-card-summary">{w.summary}</div>}
                    <div className="work-card-foot">
                      <span>{w.category}</span>
                      <span>{w.createdAt || ""}</span>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          )}
        </div>
      </section>

      <PageFooter />
    </>
  );
}

// ===== Blog listing =====
function BlogApp() {
  const [posts, setPosts] = useState(GiftyData.getPosts());
  useEffect(() => {
    const onChange = () => setPosts(GiftyData.getPosts());
    window.addEventListener("gifty:cms-change", onChange);
    return () => window.removeEventListener("gifty:cms-change", onChange);
  }, []);

  return (
    <>
      <SubpageNav current="blog" />
      <section className="subpage-hero">
        <div className="container">
          <span className="eyebrow">Blog</span>
          <h1>BLOG <small>#お便り</small></h1>
          <p>日々の現場から得た気づきや、ファンづくり・余白づくりのヒント。気の向くままに、お便りのように綴っています。</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: "clamp(40px, 6vw, 64px)" }}>
        <div className="container" style={{ maxWidth: 1000 }}>
          {posts.length === 0 ? (
            <div className="empty-state">
              <h3>まだ記事はありません</h3>
              <p>管理画面から記事を追加できます。</p>
            </div>
          ) : (
            <div className="blog-list">
              {posts.map((p) => (
                <a key={p.id} className="blog-row" href={`post.html?id=${encodeURIComponent(p.id)}`}>
                  {p.cover ? (
                    <div className="blog-cover"><img src={p.cover} alt="" /></div>
                  ) : (
                    <div className="blog-cover empty">{(p.category || "B")[0]}</div>
                  )}
                  <div className="blog-body">
                    <div className="blog-meta-row">
                      {p.category && <span className="blog-cat">{p.category}</span>}
                      <span>{p.createdAt || ""}</span>
                    </div>
                    <div className="blog-title">{p.title}</div>
                    {p.excerpt && <div className="blog-excerpt">{p.excerpt}</div>}
                  </div>
                  <div className="blog-arrow">→</div>
                </a>
              ))}
            </div>
          )}
        </div>
      </section>

      <PageFooter />
    </>
  );
}

// ===== Blog detail (single post) =====
function PostApp() {
  const params = new URLSearchParams(location.search);
  const id = params.get("id");
  const post = id ? GiftyData.getPost(id) : null;

  if (!post) {
    return (
      <>
        <SubpageNav current="blog" />
        <section className="section">
          <div className="container empty-state">
            <h3>記事が見つかりません</h3>
            <p><a href="blog.html" style={{ textDecoration: "underline" }}>Blog一覧に戻る</a></p>
          </div>
        </section>
        <PageFooter />
      </>
    );
  }

  return (
    <>
      <SubpageNav current="blog" />
      <section className="section">
        <div className="container">
          <div className="blog-detail">
            <a href="blog.html" className="work-detail-back">← Blog一覧に戻る</a>
            {post.cover ? (
              <div className="blog-detail-cover"><img src={post.cover} alt="" /></div>
            ) : (
              <div className="blog-detail-cover empty">{(post.category || "B")[0]}</div>
            )}
            <div className="blog-detail-meta">
              {post.category && <span style={{ background: "#000", color: "#fff", padding: "4px 10px", borderRadius: 999, letterSpacing: "0.12em", marginRight: 10 }}>{post.category}</span>}
              <span>{post.createdAt || ""}</span>
            </div>
            <h1>{post.title}</h1>
            <div className="blog-detail-body">{post.body || post.excerpt}</div>
          </div>
        </div>
      </section>
      <PageFooter />
    </>
  );
}

// ===== Work detail =====
function WorkApp() {
  const params = new URLSearchParams(location.search);
  const id = params.get("id");
  const work = id ? GiftyData.getWork(id) : null;

  if (!work) {
    return (
      <>
        <SubpageNav current="works" />
        <section className="section">
          <div className="container empty-state">
            <h3>実績が見つかりません</h3>
            <p><a href="works.html" style={{ textDecoration: "underline" }}>Works一覧に戻る</a></p>
          </div>
        </section>
        <PageFooter />
      </>
    );
  }

  return (
    <>
      <SubpageNav current="works" />
      <section className="section">
        <div className="container">
          <div className="work-detail">
            <a href="works.html" className="work-detail-back">← Works一覧に戻る</a>
            <div className="work-detail-head">
              <div className="work-detail-tags">
                {(work.tags || []).map((t, i) => <span className="work-card-tag" key={i}>{t}</span>)}
              </div>
              <div className="work-card-client" style={{ marginBottom: 12 }}>{work.client}</div>
              <h1>{work.title}</h1>
              {work.summary && <div className="work-detail-summary">{work.summary}</div>}
            </div>
            <div className="work-detail-images">
              {(work.images || []).map((src, i) => (
                <img key={i} src={src} alt={`${work.client} 画像 ${i + 1}`} />
              ))}
            </div>
          </div>
        </div>
      </section>
      <PageFooter />
    </>
  );
}

Object.assign(window, { WorksApp, BlogApp, PostApp, WorkApp, SubpageNav, PageFooter, LogoMini });