/* global React */
const { useState: useState3, useEffect: useEffect3 } = React;

// ========== Voice (Works preview from CMS) ==========
function Voice() {
  const [works, setWorks] = useState3(() => (window.GiftyData ? window.GiftyData.getWorks() : []));
  useEffect3(() => {
    if (!window.GiftyData) return;
    const onChange = () => setWorks(window.GiftyData.getWorks());
    window.addEventListener("gifty:cms-change", onChange);
    return () => window.removeEventListener("gifty:cms-change", onChange);
  }, []);

  const preview = works.slice(0, 3);

  return (
    <section id="voice" className="section">
      <div className="container">
        <Reveal>
          <div className="section-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, maxWidth: "100%" }}>
            <div>
              <span className="eyebrow">Works</span>
              <h2 style={{ marginTop: 18 }}>ご支援・<br />制作実績。</h2>
              <p style={{ maxWidth: 620 }}>これまでにご一緒させていただいた、ファンに愛されるお店づくりの記録。LINE・SNS・業務効率化まで、温度感そのままにご紹介します。</p>
            </div>
            <a href="works.html" className="btn btn-ghost">すべての実績を見る</a>
          </div>
        </Reveal>

        {preview.length === 0 ? (
          <div className="empty-state" style={{ background: "var(--bg-alt)" }}>
            <h3>準備中</h3>
            <p>実績は順次追加してまいります。</p>
          </div>
        ) : (
          <div className="works-grid">
            {preview.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 || []).slice(0, 3).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>
  );
}

// ========== Profile ==========
function Profile() {
  const strengths = [
    {
      num: "Strength / 01",
      title: "広く、深い、IT全般の知識",
      desc: "元Web制作の経験を起点に、SNS・システム・デザインまで横断的に。一人で見られるからこそ、ブランドの温度感を保てます。",
    },
    {
      num: "Strength / 02",
      title: "“話を聞く”が、いちばん好き",
      desc: "ヒアリングはツールではなく、ほとんど本能。表面的な課題ではなく、その奥にある事情まで一緒に降りていきます。",
    },
    {
      num: "Strength / 03",
      title: "隣に座って、一緒に進む",
      desc: "上からも下からもなく、横並びで。一緒に悩み、一緒に試し、うまくいったら一緒に喜ぶ。そんな伴走を大切にしています。",
    },
  ];
  const creds = [
    ["2018–", "地元の信用金庫へ入社"],
    ["2020–", "プログラミングの勉強を開始"],
    ["2022–", "Web制作・プログラミング教室の立ち上げ"],
    ["2024–", "『Gifty』として独立、現在へ"],
  ];
  return (
    <section id="profile" className="section profile">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <span className="eyebrow">Profile</span>
            <h2 style={{ marginTop: 18 }}>効率よりも、<br />「<span className="rb" style={{ fontWeight: 900 }}>余白</span>」から生まれる豊かさを。</h2>
          </div>
        </Reveal>
        <div className="profile-grid">
          <Reveal>
            <div className="profile-photo">
              <img src="assets/eiki-portrait.jpg" alt="小田 英輝" />
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div>
              <div className="profile-name">
                <span className="ja">小田 英輝</span>
                <span className="en">ODA EIKI / Founder of Gifty</span>
              </div>
              <div className="profile-role">Counselor-Style IT Partner — based in Miyazaki</div>
              <div className="profile-bio">
                <p>僕が仕事をする上で何よりも大切にしているのは、社長や代表者様との「<strong>フィーリング</strong>」です。ビジネスは長く続くからこそ、お互いの価値観が合い、長期的なお付き合いができる方とだけ一緒にお仕事をしたいと思っています。</p>
                <p>僕自身の人生のテーマは、<strong>「好きな人と、好きな時に、好きなことをやる」</strong>こと。だからこそ、息を詰めて最短距離で成果だけを追い求めるようなやり方はしません。人生や仕事において「遊ぶ時間」や「余白」は、絶対に欠かせないものだと信じているからです。</p>
                <p>効率だけを重視するのではなく、一緒に悩みを共有し、時には一緒に寄り道をしながら進んでいく。その寄り道から生まれる発見や豊かさこそが、長く愛されるお店づくり(ブランド)に繋がっていくと思っています。</p>
                <p>あなたのビジネスの良き理解者として、人間らしく、温かい伴走支援をお約束します。</p>
              </div>

              <div className="profile-strengths">
                {strengths.map((s, i) => (
                  <div className="strength-item" key={i}>
                    <span className="num">{s.num}</span>
                    <h4>{s.title}</h4>
                    <p>{s.desc}</p>
                  </div>
                ))}
              </div>

              <div className="profile-credentials">
                {creds.map((c, i) => (
                  <div className="cred-row" key={i}>
                    <span className="year">{c[0]}</span>
                    <span>{c[1]}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ========== FAQ ==========
function FAQ() {
  const [open, setOpen] = useState3(0);
  const items = [
    {
      q: "宮崎以外からの相談でも大丈夫ですか?",
      a: "もちろんです。宮崎を拠点にしていますが、オンラインで全国対応しています。ZoomやLINEでヒアリングを行い、必要な場合のみ現地訪問しています。",
    },
    {
      q: "ITの知識がまったくないのですが、ついていけますか?",
      a: "むしろ「まったく分からない」というところからのご相談がほとんどです。専門用語は使わず、お店の言葉で話します。分からないことは、何度でも聞き返してください。",
    },
    {
      q: "本業が忙しくて、打ち合わせの時間が取りにくいです。",
      a: "営業時間外のご対応や、LINEでのテキストやり取り中心の進行など、ご都合に合わせて柔軟に組みます。「準備に時間が取れない」「資料がない」状態からのスタートも大丈夫です。",
    },
    {
      q: "公式LINEはまだ持っていません。何から始めればいいですか?",
      a: "ご安心ください。アカウント開設からお手伝いします。まずは30分ほど、お店のことを聞かせてください。そこから、必要なことを一緒に整理していきます。",
    },
    {
      q: "数字を伸ばすコンサルとは何が違うのですか?",
      a: "Giftyは「数字を追い続ける」ことを目的にしていません。あなたの好きなお店づくりを続けられる状態を整えるのが役割です。結果として数字も付いてきますが、優先順位はあくまで“余白”です。",
    },
    {
      q: "途中で合わないと感じたらどうなりますか?",
      a: "気を遣わず、いつでも仰ってください。継続伴走は月単位でご解約・休止できますし、最低契約期間の縛りもありません。合わないと感じる関係を続けるのは、お互いにとって良くないと考えています。",
    },
  ];
  return (
    <section id="faq" className="section">
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal>
          <div className="section-head">
            <span className="eyebrow">FAQ</span>
            <h2 style={{ marginTop: 18 }}>よくいただく、ご質問。</h2>
          </div>
        </Reveal>
        <Reveal>
          <div className="faq-list">
            {items.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="q-mark">Q.</span>
                  <span className="q-text">{it.q}</span>
                  <span className="faq-icon">+</span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{it.a}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Voice, Profile, FAQ });