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

// ========== Reveal on scroll ==========
function Reveal({ children, delay = 0, className = "" }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Fallback: show after a short delay even if IO doesn't fire
    const fallback = setTimeout(() => setSeen(true), 1200 + delay);
    if (typeof IntersectionObserver === "undefined") {
      setSeen(true);
      return () => clearTimeout(fallback);
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            clearTimeout(fallback);
            setTimeout(() => setSeen(true), delay);
            io.unobserve(el);
          }
        });
      },
      { threshold: 0.05, rootMargin: "0px 0px -40px 0px" }
    );
    io.observe(el);
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, [delay]);
  return (
    <div ref={ref} className={`reveal ${seen ? "in" : ""} ${className}`}>
      {children}
    </div>
  );
}

// ========== Logo (matches business card / square logo) ==========
// ========== Logo ==========
function Logo({ size = 28 }) {
  return (
    <img
      src="assets/logo.png"
      alt="Gifty"
      style={{
        height: size,
        width: "auto",
        display: "inline-block",
        verticalAlign: "middle",
      }}
    />
  );
}

// ========== Nav ==========
function Nav({ onContactClick }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#top" aria-label="Gifty"><Logo size={30} /></a>
        <div className="nav-links">
          <a href="#concept">Concept</a>
          <a href="#services">Service</a>
          <a href="works.html">Works</a>
          <a href="blog.html">Blog</a>
          <a href="#profile">Profile</a>
          <a href="#contact" className="nav-cta" onClick={(e) => { e.preventDefault(); onContactClick(); }}>
            お問い合わせ
            <span style={{ fontSize: 11 }}>→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

// ========== Hero ==========
function Hero() {
  return (
    <section id="top" className="hero">
      <div className="hero-deco" aria-hidden="true">Gifty</div>
      <div className="container hero-typo">
        <div className="hero-eyebrow-row">
          <span className="eyebrow">Gifty — based in MIYAZAKI</span>
          <span className="hero-line-meta">
            <span className="hero-line-meta-bar"></span>
            <span>FOR LOCAL SHOPS &amp; CREATORS</span>
          </span>
        </div>

        <h1 className="hero-headline">
          <span className="hl-row hl-row-1">
            アイデアと
            <span className="band">
              <span className="c1">し</span><span className="c3">く</span><span className="c4">み</span>
            </span>
            で、
          </span>
          <span className="hl-row hl-row-2">
            ファンに<span className="rb-stroke">愛される</span>
          </span>
          <span className="hl-row hl-row-3">
            お店づくりを。
          </span>
        </h1>

        <div className="hero-tagline">
          あなたの悩みに寄り添い、一緒に解決する<span className="rb" style={{ fontWeight: 900 }}>伴走型サポート</span>。
        </div>

        <div className="hero-body-row">
          <p className="hero-sub">
            アイデアと仕組みでファンを育て、忙しい毎日に「<strong>余白</strong>」を生み出します。
          </p>
          <div className="hero-cta-stack">
            <a href="#contact" className="btn btn-primary">
              <span>無料で相談する</span>
              <span>→</span>
            </a>
            <a href="#concept" className="btn btn-ghost">Giftyの想いを読む</a>
          </div>
        </div>

        <div className="hero-services">
          <div className="hero-service">
            <div className="hs-num">01</div>
            <div className="hs-body">
              <div className="hs-label">SERVICE</div>
              <div className="hs-title">公式LINE構築・運用</div>
              <div className="hs-tag">ファンづくり</div>
            </div>
            <div className="hs-dot c1"></div>
          </div>
          <div className="hero-service">
            <div className="hs-num">02</div>
            <div className="hs-body">
              <div className="hs-label">SERVICE</div>
              <div className="hs-title">Instagram 活用支援</div>
              <div className="hs-tag">認知・ブランディング</div>
            </div>
            <div className="hs-dot c4"></div>
          </div>
          <div className="hero-service">
            <div className="hs-num">03</div>
            <div className="hs-body">
              <div className="hs-label">SERVICE</div>
              <div className="hs-title">業務効率化・システム</div>
              <div className="hs-tag">余白の創出</div>
            </div>
            <div className="hs-dot c6"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== Marquee ==========
function Marquee() {
  const items = [
    "アイデアと、しくみで。",
    "公式LINE 構築・運用",
    "Instagram 活用支援",
    "業務効率化・システム",
    "宮崎 / オンライン全国対応",
    "一緒に悩み、一緒に解決する。",
    "ファンに、愛されるお店へ。",
  ];
  const row = (
    <div className="marquee-item" aria-hidden="false">
      {items.map((t, i) => (
        <React.Fragment key={i}>
          <span>{t}</span>
          <span className="sep"></span>
        </React.Fragment>
      ))}
    </div>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row}{row}
      </div>
    </div>
  );
}

// ========== Concept ==========
function Concept() {
  const phil = [
    {
      num: "PHILOSOPHY / 01",
      cls: "c1",
      en: "Counselor Style",
      title: "悩みの“背景”まで、一緒に潜る。",
      desc: "Giftyは課題解決の業者ではなく、心の重荷を一緒に下ろすパートナーでありたい。表面的なToDoではなく、なぜそれが滞っているのか。その背景まで丁寧に聞かせてください。話しているうちに、自分でも見えていなかった答えが見つかることがあります。",
    },
    {
      num: "PHILOSOPHY / 02",
      cls: "c3",
      en: "Freedom & Space",
      title: "数字より、自由な時間を。",
      desc: "売上を必死に追うことが、いつしか目的になっていませんか。Giftyが大切にしているのは「好きな人と、やりたいことをやる」ための余白。ITで生まれた時間を、家族との夕食や、新しい商品の試作に。あなたの“余白”を一緒に守ります。",
    },
    {
      num: "PHILOSOPHY / 03",
      cls: "c4",
      en: "Welcome the Detour",
      title: "寄り道から、生まれるもの。",
      desc: "最短距離が正解とは限りません。雑談から生まれたアイデア、回り道で出会ったお客様、効率化からあえて外した手仕事。感謝と助け合いをベースに、寄り道から生まれる豊かさを大切にしたい。だから、急かしません。",
    },
    {
      num: "PHILOSOPHY / 04",
      cls: "c6",
      en: "Role of Each",
      title: "本業は、あなたが。ITは、僕が。",
      desc: "あなたが本業に100％注ぎ込めるように、僕はITとSNSの全部を肩代わりします。「自分でもやらなきゃ」と思わなくて大丈夫。広く深い知識でカバーするので、苦手なことは丸ごと預けてください。役割を分けることで、両方が前に進めます。",
    },
  ];
  return (
    <section id="concept" className="section concept">
      <div className="container">
        <Reveal>
          <div className="concept-intro">
            <span className="eyebrow">Concept</span>
            <h2 style={{ marginTop: 28 }}>
              「やらなきゃ」を手放し、<br />
              「<span className="band"><span className="c1">や</span><span className="c2">り</span><span className="c4">た</span><span className="c5">い</span></span>」に没頭する。
            </h2>
            <p>
              「インスタやLINE、やったほうがいいのは分かってるんだけど…」<br />
              これまで、そんな経営者さんの悩みをたくさん聞いてきました。<br /><br />
              苦手なことや、時間がなくてできないことは、僕に任せてください。一緒に仕組みを作り、少しずつ成果が出てくると、苦痛だった「やらなきゃ」が、ファンと繋がる「やりたい」に変わっていきます。<br /><br />
              本業もSNSも、もっと無理なく楽しめるペースを一緒に見つけましょう。
            </p>
          </div>
        </Reveal>

        <div className="philosophy-grid">
          {phil.map((p, i) => (
            <Reveal key={i} delay={i * 70}>
              <div className="philosophy-item">
                <span className={`philosophy-num ${p.cls}`}><span className="dot"></span>{p.num}</span>
                <h3>
                  <span className="en">{p.en}</span>
                  {p.title}
                </h3>
                <p>{p.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reveal, Nav, Hero, Marquee, Concept, Logo });