// sections-a standalone — resolves work.imgKey -> window.__resources[key]
const { useRef: useRefA, useState: useStateA, useEffect: useEffectA } = React;

function Stats(){
  return (
    <section className="section tight dark" style={{padding: "0"}} id="stats">
      <div className="stats">
        <Reveal className="stat">
          <div className="stat-num">30<span className="unit">YEARS</span></div>
          <div className="stat-label">30年以上の施工実績</div>
          <div className="stat-en">SINCE ESTABLISHMENT</div>
        </Reveal>
        <Reveal className="stat" delay={120}>
          <div className="stat-num">500<span className="unit">+</span></div>
          <div className="stat-label">対応件数 500件以上</div>
          <div className="stat-en">PROJECTS DELIVERED</div>
        </Reveal>
        <Reveal className="stat" delay={240}>
          <div className="stat-num">0<span className="unit">YEN</span></div>
          <div className="stat-label">相談・見積もり無料</div>
          <div className="stat-en">FREE CONSULTATION</div>
        </Reveal>
      </div>
    </section>
  );
}

function Service(){
  return (
    <section className="section" id="service">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">SERVICE</div>
          <h2 className="section-title">できること、<span style={{color:"var(--gold-soft)"}}>すべて。</span></h2>
          <p className="section-lead">住まいに関わるあらゆる工事を、自社で一貫して承ります。小さな修繕も、大規模な改修も、同じ姿勢で。</p>
        </Reveal>
        <Reveal delay={120}>
          <div className="svc-grid">
            {SERVICES.map((s, i) => (
              <div className="svc-item" key={s.idx}>
                <div className="svc-num">— {s.idx}</div>
                <div className="svc-icon">{icons[iconByIdx[i]]}</div>
                <div className="svc-title-en">{s.en}</div>
                <div className="svc-title-jp">{s.jp}</div>
                <p className="svc-desc">{s.desc}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Reason(){
  return (
    <section className="section dark" id="reason">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow dark">REASON</div>
          <h2 className="section-title on-dark">選ばれている、<span style={{color:"var(--gold)"}}>三つの理由。</span></h2>
          <p className="section-lead on-dark">派手な売り文句はありません。ただ、当たり前のことを当たり前に。それを積み重ねてきました。</p>
        </Reveal>
        <div className="reason-list">
          {REASONS.map((r, i) => (
            <Reveal key={r.num} className="reason" delay={i * 120}>
              <div className="reason-num">{r.num}</div>
              <div className="reason-body">
                <h3>{r.jp}</h3>
                <p>{r.desc}</p>
              </div>
              <div className="reason-tag">— {r.tag}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Works(){
  const railRef = useRefA(null);
  const scrollBy = (dir) => {
    const rail = railRef.current; if(!rail) return;
    const step = Math.min(rail.clientWidth * 0.8, 560);
    rail.scrollBy({ left: dir * step, behavior: "smooth" });
  };
  return (
    <section className="section" id="works">
      <div className="wrap">
        <Reveal>
          <div className="works-header">
            <div>
              <div className="eyebrow">WORKS</div>
              <h2 className="section-title">施工事例</h2>
              <p className="section-lead">実際の現場から。写真は横にスライドしてご覧いただけます。</p>
            </div>
            <div className="works-nav">
              <button className="works-arrow" aria-label="前へ" onClick={() => scrollBy(-1)}><Arrow style={{transform:"rotate(180deg)", width:18, height:18}}/></button>
              <button className="works-arrow" aria-label="次へ" onClick={() => scrollBy(1)}><Arrow style={{width:18, height:18}}/></button>
            </div>
          </div>
        </Reveal>
      </div>

      <div className="carousel" ref={railRef}>
        {WORKS.map((w, i) => (
          <Reveal className={`work-card ${w.kind === "ba" ? "wide" : ""}`} delay={i * 60} key={i}>
            {w.kind === "ba" ? (
              <div className="work-ba">
                <div className="ba-cell">
                  <span className="ba-tag">{w.beforeLabel || "BEFORE"}</span>
                  {w.beforeImg
                    ? <img src={w.beforeImg} alt="" loading="lazy" />
                    : <Placeholder label={w.beforeLabel} />}
                </div>
                <div className="ba-cell">
                  <span className="ba-tag after">{w.afterLabel || "AFTER"}</span>
                  {w.afterImg
                    ? <img src={w.afterImg} alt="" loading="lazy" />
                    : <Placeholder label={w.afterLabel} />}
                </div>
              </div>
            ) : (
              <div className="work-media">
                {w.img
                  ? <img src={w.img} alt="" loading="lazy" />
                  : <Placeholder label={w.phLabel || "施工写真"} />}
              </div>
            )}
            <div className="work-meta">
              <span className="work-cat">— {w.cat}</span>
              <span className="work-idx">WORKS / {String(i+1).padStart(2,"0")}</span>
            </div>
            <h3 className="work-title">{w.jp}</h3>
            <p className="work-desc">{w.desc}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Stats, Service, Reason, Works });