// Sections: Pains, Reasons, Services, Works, Pricing, Flow, FAQ, CTA

// ─── 悩み ───────────────────────────────────────────────────────────────────
function Pains() {
  const items = [
    { icon: "question", text: "何から始めればいいか\n分からない" },
    { icon: "users", text: "制作会社が多くて\n選べない" },
    { icon: "yen", text: "費用や納期が\n不安" },
    { icon: "monitor", text: "自社で更新・運用\nできるか不安" },
    { icon: "trend", text: "成果につながるサイトに\nしたい" },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-soft-2)" }}>
      <div className="container">
        <Reveal><h2 className="section-title">こんなお悩み<span className="accent">ありませんか？</span></h2></Reveal>
        <div style={{ display: "grid", gap: 16 }} className="pains-grid">
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="card" style={{ padding: "28px 18px", textAlign: "center", height: "100%", background: "var(--surface)" }}>
                <span style={{
                  width: 56, height: 56, borderRadius: 16, margin: "0 auto 14px",
                  display: "grid", placeItems: "center",
                  background: "var(--primary-100)", color: "var(--primary-600)",
                }}>
                  <Icon name={it.icon} size={28} />
                </span>
                <div style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.7, whiteSpace: "pre-line", fontWeight: 500 }}>{it.text}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 選ばれる理由 ───────────────────────────────────────────────────────────
function Reasons() {
  const items = [
    { icon: "chat",    no: "01", title: "丁寧なヒアリングと提案力",   desc: "お客様の課題や目的を深く理解し、最適なプランをご提案します。" },
    { icon: "monitor", no: "02", title: "分かりやすい説明と安心の進行", desc: "専門用語を使わず、進捗を丁寧にご報告。初めての方でも安心です。" },
    { icon: "sparkles",no: "03", title: "高品質なデザインと技術力",     desc: "見やすく使いやすいデザインと、確かな技術で形にします。" },
    { icon: "headset", no: "04", title: "公開後も安心のサポート体制",   desc: "更新代行やサポートの年間契約など、長く伴走します。" },
  ];
  return (
    <section id="reasons" className="section">
      <div className="container">
        <Reveal><div style={{ textAlign: "center", marginBottom: 16 }}><span className="eyebrow">Why us</span></div></Reveal>
        <Reveal delay={60}><h2 className="section-title">当社が選ばれる<span className="accent">理由</span></h2></Reveal>
        <div style={{ display: "grid", gap: 20 }} className="reasons-grid">
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="card card-hover" style={{ padding: 28, height: "100%", position: "relative" }}>
                <div style={{
                  position: "absolute", top: 18, right: 22, fontFamily: "var(--font-en)",
                  fontWeight: 700, color: "color-mix(in oklab, var(--primary-600) 18%, transparent)",
                  fontSize: 32, letterSpacing: "-0.02em",
                }}>{it.no}</div>
                <span style={{
                  width: 56, height: 56, borderRadius: 14,
                  display: "grid", placeItems: "center",
                  background: "linear-gradient(135deg, var(--primary-600), var(--primary-500))",
                  color: "#fff", marginBottom: 18,
                }}>
                  <Icon name={it.icon} size={28} />
                </span>
                <h3 style={{ fontSize: 17, margin: "0 0 10px", fontWeight: 700, color: "var(--fg)", lineHeight: 1.5 }}>{it.title}</h3>
                <p style={{ margin: 0, fontSize: 13, color: "var(--fg-3)", lineHeight: 1.85 }}>{it.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── サービス ───────────────────────────────────────────────────────────────
function Services() {
  const items = [
    { icon: "globe",   img: "images/svc-hp.png",      href: "service-hp.html",      title: "ホームページ制作", desc: "コーポレートサイトやブランドサイトを制作します。", points: ["コーポレート", "ブランディング", "採用"] },
    { icon: "monitor", img: "images/svc-lp.png",      href: "service-lp.html",      title: "ランディングページ制作", desc: "商品・サービスの魅力を効果的に伝えます。", points: ["LP設計", "コピーライティング", "A/Bテスト"] },
    { icon: "search",  img: "images/svc-seo.png",     href: "service-seo.html",     title: "SEO・集客支援", desc: "検索エンジンからの流入を増やす施策を行います。", points: ["内部対策", "コンテンツ", "計測設計"] },
    { icon: "shield",  img: "images/svc-support.png", href: "service-support.html", title: "保守・運用サポート", desc: "更新・バックアップ・セキュリティまで安心。", points: ["更新代行", "保守監視", "定例MTG"] },
  ];
  return (
    <section id="services" className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <Reveal><div style={{ textAlign: "center", marginBottom: 16 }}><span className="eyebrow">Services</span></div></Reveal>
        <Reveal delay={60}><h2 className="section-title">サービス<span className="accent">一覧</span></h2></Reveal>
        <div style={{ display: "grid", gap: 16 }} className="svc-grid">
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 80}>
              <a href={it.href} className="card card-hover" style={{
                display: "flex", flexDirection: "column", height: "100%",
                background: "var(--surface)", overflow: "hidden",
              }}>
                <div style={{ aspectRatio: "16/10", overflow: "hidden", position: "relative" }}>
                  <img src={it.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                  <span style={{
                    position: "absolute", top: 14, left: 14,
                    width: 40, height: 40, borderRadius: 10,
                    background: "rgba(255,255,255,0.95)", color: "var(--primary-600)",
                    display: "grid", placeItems: "center", boxShadow: "var(--shadow-sm)",
                  }}>
                    <Icon name={it.icon} size={20} />
                  </span>
                </div>
                <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                <h3 style={{ fontSize: 16, margin: 0, fontWeight: 700, color: "var(--fg)" }}>{it.title}</h3>
                <p style={{ margin: 0, fontSize: 13, color: "var(--fg-3)", lineHeight: 1.8 }}>{it.desc}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: "auto 0 0", display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {it.points.map((p) => (
                    <li key={p} style={{
                      fontSize: 11, padding: "3px 9px", borderRadius: 999,
                      background: "var(--primary-50)", color: "var(--primary-600)", fontWeight: 600,
                    }}>{p}</li>
                  ))}
                </ul>
                <div style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--primary-600)", fontWeight: 600, fontSize: 13, marginTop: 6 }}>
                  詳しく見る <Icon name="arrow-right" size={14} />
                </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 制作実績 ─────────────────────────────────────────────────────────────
function Works() {
  const items = [
    { tag: "ブランドサイト",     subtag: "デザイン業",      title: "LUCENT Web Agency",  img: "images/work-1.png" },
    { tag: "ブランドサイト",     subtag: "ライフスタイル",  title: "LUXORA Studio",      img: "images/work-2.png" },
    { tag: "コーポレートサイト", subtag: "Web制作・SaaS",   title: "WEBVISTA Agency",    img: "images/work-3.png" },
    { tag: "ECサイト",           subtag: "ライフスタイル",  title: "BrightWave Inc.",    img: "images/work-4.png" },
    { tag: "サービスサイト",     subtag: "Web制作・IT",     title: "NEXUS Creative",     img: "images/work-5.png" },
  ];
  const trackRef = React.useRef(null);
  const scrollBy = (d) => trackRef.current?.scrollBy({ left: d, behavior: "smooth" });
  const [lightboxIndex, setLightboxIndex] = React.useState(null);
  const closeLightbox = () => setLightboxIndex(null);
  const prevImage = () => setLightboxIndex((i) => (i - 1 + items.length) % items.length);
  const nextImage = () => setLightboxIndex((i) => (i + 1) % items.length);

  React.useEffect(() => {
    if (lightboxIndex === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") closeLightbox();
      else if (e.key === "ArrowLeft") prevImage();
      else if (e.key === "ArrowRight") nextImage();
    };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [lightboxIndex]);

  return (
    <section id="works" className="section">
      <div className="container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 12 }}>
          <Reveal><div>
            <span className="eyebrow">Works</span>
            <h2 style={{ fontSize: "clamp(28px, 3.2vw, 40px)", margin: "8px 0 0", fontWeight: 700, letterSpacing: "-0.01em" }}>
              制作<span style={{ color: "var(--primary-600)" }}>実績</span>
            </h2>
          </div></Reveal>
          <Reveal delay={80}>
            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
              <a href="#" className="btn-ghost" style={{ fontWeight: 600, color: "var(--primary-600)", fontSize: 14 }}>一覧を見る →</a>
              <button onClick={() => scrollBy(-340)} className="works-arr" aria-label="prev"><Icon name="arrow-left" size={18} /></button>
              <button onClick={() => scrollBy(340)}  className="works-arr" aria-label="next"><Icon name="arrow-right" size={18} /></button>
            </div>
          </Reveal>
        </div>

        <div ref={trackRef} className="works-track" style={{
          display: "grid", gridAutoFlow: "column", gridAutoColumns: "minmax(280px, 1fr)",
          gap: 20, overflowX: "auto", scrollSnapType: "x mandatory", paddingBottom: 12,
          gridTemplateColumns: `repeat(${items.length}, minmax(280px, 1fr))`,
        }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 60}>
              <button onClick={() => setLightboxIndex(i)} className="card card-hover work-card" style={{
                display: "block", overflow: "hidden", scrollSnapAlign: "start",
                padding: 0, textAlign: "left", cursor: "zoom-in", width: "100%", font: "inherit", color: "inherit",
              }}>
                <div style={{ aspectRatio: "16/10", overflow: "hidden", position: "relative" }}>
                  <img src={it.img} alt={it.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform .6s cubic-bezier(0.2, 0.7, 0.2, 1)" }} />
                  <div style={{ position: "absolute", inset: 0, boxShadow: "inset 0 0 0 1px rgba(15,26,46,0.06)", pointerEvents: "none" }} />
                  <span className="work-zoom" style={{
                    position: "absolute", top: 12, right: 12,
                    width: 36, height: 36, borderRadius: 999,
                    background: "rgba(255,255,255,0.92)", color: "var(--fg)",
                    display: "grid", placeItems: "center",
                    boxShadow: "0 4px 12px rgba(0,0,0,0.12)",
                    opacity: 0, transform: "translateY(-4px)",
                    transition: "opacity .25s, transform .25s",
                  }}>
                    <Icon name="search" size={16} />
                  </span>
                </div>
                <div style={{ padding: "18px 20px 22px" }}>
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 10 }}>
                    <span style={{ fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: "var(--primary-600)", color: "#fff", fontWeight: 600, letterSpacing: "0.02em" }}>{it.tag}</span>
                    <span style={{ fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: "var(--bg-soft)", color: "var(--fg-2)", fontWeight: 600, letterSpacing: "0.02em", border: "1px solid var(--border)" }}>{it.subtag}</span>
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: "var(--fg)", letterSpacing: "-0.005em" }}>{it.title}</div>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
      {lightboxIndex !== null && (
        <div onClick={closeLightbox} style={{
          position: "fixed", inset: 0, zIndex: 1000,
          background: "rgba(8, 14, 30, 0.88)",
          backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
          display: "flex", flexDirection: "column",
          animation: "lb-fade .25s ease-out",
        }}>
          {/* top bar */}
          <div onClick={(e) => e.stopPropagation()} style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: "20px 28px", color: "#fff",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ fontSize: 11, padding: "4px 10px", borderRadius: 999, background: "rgba(255,255,255,0.16)", fontWeight: 600, letterSpacing: "0.04em" }}>
                {items[lightboxIndex].tag}
              </span>
              <span style={{ fontSize: 12, color: "rgba(255,255,255,0.7)", fontWeight: 500 }}>
                {items[lightboxIndex].subtag}
              </span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
              <span style={{ fontSize: 13, color: "rgba(255,255,255,0.7)", fontFamily: "var(--font-en)", letterSpacing: "0.05em" }}>
                {String(lightboxIndex + 1).padStart(2, "0")} / {String(items.length).padStart(2, "0")}
              </span>
              <button onClick={closeLightbox} aria-label="閉じる" style={{
                width: 40, height: 40, borderRadius: 999, border: "1px solid rgba(255,255,255,0.2)",
                background: "rgba(255,255,255,0.05)", color: "#fff",
                display: "grid", placeItems: "center",
              }}>
                <Icon name="x" size={20} />
              </button>
            </div>
          </div>

          {/* image */}
          <div className="lb-image-wrap" style={{
            flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
            padding: "0 80px 20px", minHeight: 0,
          }}>
            <div onClick={(e) => e.stopPropagation()} style={{
              maxWidth: "min(1280px, 92vw)", maxHeight: "100%",
              borderRadius: 12, overflow: "hidden",
              boxShadow: "0 30px 80px rgba(0,0,0,0.6)",
              animation: "lb-zoom .3s cubic-bezier(0.2, 0.7, 0.2, 1)",
            }}>
              <img src={items[lightboxIndex].img} alt={items[lightboxIndex].title}
                style={{ display: "block", width: "100%", maxHeight: "calc(100vh - 200px)", objectFit: "contain", background: "#fff" }} />
            </div>
          </div>

          {/* prev / next */}
          <button onClick={(e) => { e.stopPropagation(); prevImage(); }} aria-label="前へ" style={{
            position: "absolute", left: 20, top: "50%", transform: "translateY(-50%)",
            width: 52, height: 52, borderRadius: 999,
            border: "1px solid rgba(255,255,255,0.18)", background: "rgba(255,255,255,0.06)",
            color: "#fff", display: "grid", placeItems: "center", backdropFilter: "blur(6px)",
          }}>
            <Icon name="arrow-left" size={22} />
          </button>
          <button onClick={(e) => { e.stopPropagation(); nextImage(); }} aria-label="次へ" style={{
            position: "absolute", right: 20, top: "50%", transform: "translateY(-50%)",
            width: 52, height: 52, borderRadius: 999,
            border: "1px solid rgba(255,255,255,0.18)", background: "rgba(255,255,255,0.06)",
            color: "#fff", display: "grid", placeItems: "center", backdropFilter: "blur(6px)",
          }}>
            <Icon name="arrow-right" size={22} />
          </button>

          {/* caption */}
          <div onClick={(e) => e.stopPropagation()} style={{
            padding: "16px 28px 28px", textAlign: "center", color: "#fff",
          }}>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: "-0.005em" }}>
              {items[lightboxIndex].title}
            </div>
          </div>
        </div>
      )}
      <style>{`
        .works-track::-webkit-scrollbar { height: 6px; }
        .works-track::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
        .works-arr { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); display: grid; place-items: center; transition: all .15s; }
        .works-arr:hover { background: var(--primary-600); color: #fff; border-color: var(--primary-600); }
        .work-card:hover .work-zoom { opacity: 1 !important; transform: translateY(0) !important; }
        .work-card:hover img { transform: scale(1.05); }
        @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes lb-zoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
      `}</style>
    </section>
  );
}

function WorkVisual({ tone, title }) {
  const palettes = [
    ["#1e3a8a", "#3b62c9"],
    ["#0e3b6b", "#5b8def"],
    ["#0b3a3a", "#3aa39b"],
    ["#3a2356", "#7d5fb8"],
    ["#582015", "#c47964"],
  ];
  const [a, b] = palettes[tone % palettes.length];
  return (
    <div style={{
      aspectRatio: "16 / 10", position: "relative",
      background: `linear-gradient(135deg, ${a}, ${b})`, color: "#fff",
      display: "grid", placeItems: "center", overflow: "hidden",
    }}>
      <svg width="100%" height="100%" viewBox="0 0 320 200" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.18 }}>
        <defs><pattern id={`p${tone}`} width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0 20L20 0" stroke="#fff" strokeWidth="0.6"/></pattern></defs>
        <rect width="320" height="200" fill={`url(#p${tone})`} />
      </svg>
      <div style={{ textAlign: "center", padding: 18 }}>
        <div style={{ fontFamily: "var(--font-en)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.75 }}>Project</div>
        <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4, letterSpacing: "-0.01em" }}>{title}</div>
      </div>
    </div>
  );
}

// ─── 理念 ────────────────────────────────────────────────────────────────
function Philosophy() {
  const paragraphs = [
    "私たちは、初めてホームページを作る個人事業主の方にも安心してご相談いただけるよう、一人ひとりのお客様に寄り添ったホームページ制作を大切にしています。",
    "まずは丁寧なヒアリングを通じて、お客様の想いや人柄、サービスの強みを深く理解することから始めます。そのうえで、見る人に信頼感を与え、問い合わせや集客につながるホームページを、お客様と一緒に形にしていきます。",
    "名刺代わりとしても安心してご紹介いただけるよう、見た目の美しさだけでなく、伝わり方や使いやすさにもこだわり、理想のサイト作りをサポートいたします。",
  ];

  return (
    <section id="philosophy" className="section tight" style={{
      background: "linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%)",
    }}>
      <div className="container" style={{ maxWidth: 800 }}>
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: 16 }}>
            <span className="eyebrow">Our Philosophy</span>
          </div>
        </Reveal>
        <Reveal delay={60}>
          <h2 className="section-title">
            私たちの<span className="accent">想い</span>
          </h2>
        </Reveal>

        <Reveal delay={120}>
          <div style={{ position: "relative", padding: "0 8px" }}>
            {/* 装飾クォート */}
            <div style={{
              position: "absolute",
              top: -24,
              left: -8,
              fontFamily: "var(--font-en)",
              fontSize: 120,
              lineHeight: 1,
              color: "var(--primary-100)",
              fontWeight: 800,
              userSelect: "none",
              pointerEvents: "none",
              zIndex: 0,
            }}>"</div>

            <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", gap: 24 }}>
              {paragraphs.map((p, i) => (
                <p key={i} style={{
                  margin: 0,
                  fontSize: i === 0 ? 16 : 15,
                  color: i === 0 ? "var(--fg)" : "var(--fg-2)",
                  lineHeight: 2,
                  fontWeight: i === 0 ? 600 : 400,
                  letterSpacing: "0.01em",
                }}>{p}</p>
              ))}
            </div>

            {/* 署名 */}
            <div style={{
              marginTop: 36,
              display: "flex",
              alignItems: "center",
              gap: 12,
            }}>
              <div style={{ height: 1, flex: 1, background: "var(--border-strong)" }} />
              <div style={{ textAlign: "right" }}>
                <div style={{ fontSize: 11, color: "var(--fg-4)", letterSpacing: "0.1em", marginBottom: 4 }}>ITtechWorks 代表</div>
                <div style={{ fontSize: 22, fontWeight: 600, color: "var(--fg)", letterSpacing: "0.08em", fontFamily: "'Klee One', cursive" }}>白石 智</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Pains, Reasons, Philosophy, Services, Works });