// ============ WORKS ============
function Works() {
  const trackRef = React.useRef(null);
  const [canL, setCanL] = React.useState(false);
  const [canR, setCanR] = React.useState(true);

  const update = () => {
    const el = trackRef.current; if (!el) return;
    setCanL(el.scrollLeft > 4);
    setCanR(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
  };
  React.useEffect(() => {
    const el = trackRef.current; if (!el) return;
    update();
    el.addEventListener("scroll", update);
    window.addEventListener("resize", update);
    return () => { el.removeEventListener("scroll", update); window.removeEventListener("resize", update); };
  }, []);

  const scroll = (dir) => {
    const el = trackRef.current; if (!el) return;
    el.scrollBy({ left: dir * (el.clientWidth * 0.7), behavior: "smooth" });
  };

  const items = [
    { t: "海辺のカフェ、全面リノベーション", e: "RENOVATION · ZUSHI", p: "2024", img: PHOTOS.work1, featured: true },
    { t: "美容室の内装リノベーション", e: "RENOVATION · KAMAKURA", p: "2024", img: PHOTOS.work2 },
    { t: "カフェのカウンター製作", e: "FURNITURE · HAYAMA", p: "2023", img: PHOTOS.work3 },
    { t: "海を眺めるオフィス", e: "RENOVATION · HAYAMA", p: "2023", img: PHOTOS.work4 },
    { t: "アトリエの本棚と什器", e: "FURNITURE · YOKOSUKA", p: "2023", img: PHOTOS.work5 },
  ];

  return (
    <section className="works" id="works" data-screen-label="04 Works">
      <div className="wrap">
        <div className="works-head">
          <div>
            <div className="eyebrow en">WORKS / 03</div>
            <h2>これまでの仕事。</h2>
          </div>
          <div className="works-nav">
            <button onClick={() => scroll(-1)} disabled={!canL} aria-label="prev">←</button>
            <button onClick={() => scroll(1)} disabled={!canR} aria-label="next">→</button>
          </div>
        </div>
      </div>

      <div className="works-scroller">
        <div className="works-track" ref={trackRef}>
          {items.map((w, i) => (
            <div className={`work-card ${w.featured ? "featured" : ""}`} key={i}>
              <div className="work-img"><img src={w.img} alt={w.t} className="bg-fill"/></div>
              <div className="work-meta">
                <div>
                  <div className="tag">{w.e}</div>
                  <h4 style={{marginTop:8}}>{w.t}</h4>
                </div>
                <p>{w.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="wrap">
        <BeforeAfter />
      </div>
    </section>
  );
}

function BeforeAfter() {
  const [c, setC] = React.useState(50); // % from right
  const ref = React.useRef(null);
  const drag = React.useRef(false);

  const move = (clientX) => {
    const r = ref.current.getBoundingClientRect();
    const pct = ((r.right - clientX) / r.width) * 100;
    setC(Math.max(2, Math.min(98, pct)));
  };
  const onDown = (e) => { drag.current = true; move(e.clientX ?? e.touches[0].clientX); };
  const onMove = (e) => { if (!drag.current) return; move(e.clientX ?? e.touches[0].clientX); };
  const onUp = () => { drag.current = false; };

  React.useEffect(() => {
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
    window.addEventListener("touchmove", onMove);
    window.addEventListener("touchend", onUp);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", onUp);
    };
  }, []);

  return (
    <div className="ba-block">
      <div className="ba-head">
        <div>
          <div className="eyebrow en">BEFORE / AFTER · 逗子市 Kカフェ · 全面リノベーション</div>
          <h3 style={{marginTop:8}}>店の空気を、もう一度。</h3>
        </div>
        <div className="eyebrow en">DRAG ↔</div>
      </div>
      <div
        className="ba" ref={ref}
        style={{ "--c": c + "%" }}
        onMouseDown={onDown} onTouchStart={onDown}
      >
        <div className="pane after" style={{ backgroundImage: `url(${PHOTOS.baAfter})` }}></div>
        <div className="pane before" style={{ backgroundImage: `url(${PHOTOS.baBefore})` }}></div>
        <div className="ba-tag before en">BEFORE</div>
        <div className="ba-tag after en">AFTER</div>
        <div className="ba-divider"></div>
        <div className="ba-handle">↔</div>
      </div>
    </div>
  );
}

// ============ TRUST ============
const MAPS_URL = "https://www.google.com/maps/place/CHOP+SPACE+Co.,Ltd./@35.3011432,139.6070906,926m/data=!3m2!1e3!4b1!4m6!3m5!1s0x6018478cb281ac49:0xde1d22977dcad258!8m2!3d35.3011432!4d139.6070906!16s%2Fg%2F11fm6kg2ms";

function Trust() {
  const reviews = [
    {
      stars: 5,
      text: "主人のお店（カフェ）のリノベーションと家具作成をお願いしました！カウンターや本棚、机など、元の雰囲気を活かしつつおしゃれに仕上げていただきました！！心地良い空間にしてくれてありがとうございます。お客さんも新鮮なようで、喜んでいます。",
      who: "西様", area: "/ カフェリノベ・家具",
    },
    {
      stars: 5,
      text: "階段下の収納扉を作ってもらいました。中がどのようになっているかわからない状態でも快く引き受けて頂きました。とても相談しやすく私のイメージも理解して頂き、お願いして良かったです。また何かありましたら、お願いしたいです。",
      who: "大野様", area: "/ 造作建具",
    },
    {
      stars: 5,
      text: "カフェカウンターの改装をお願いしました。素材の提案など、とても気に入ったできに仕上がりました。棚も廃材を使い、シャビーな仕上げでとても気に入ってます。",
      who: "ニシ様", area: "/ カフェカウンター改装",
    },
  ];
  return (
    <section className="trust" data-screen-label="05 Trust">
      <div className="wrap">
        <div className="trust-head">
          <div>
            <div className="eyebrow en">WHY CHOP SPACE / 04</div>
            <h2>近くにいる、<br/>顔の見える職人。</h2>
          </div>
          <p>地域の方々と長くお付き合いするための、私なりの当たり前。Googleレビュー全件で満点をいただいているのは、
            ひとつひとつの現場に丁寧に向き合ってきた結果だと思っています。</p>
        </div>

        <a href={MAPS_URL} target="_blank" rel="noopener noreferrer" className="trust-stats-link">
          <div className="trust-stats">
            <div className="trust-stat"><div className="v">5.0<small>/ 5</small></div><div className="l en">GOOGLE REVIEW</div></div>
            <div className="trust-stat"><div className="v">9<small>件</small></div><div className="l en">REVIEW COUNT</div></div>
            <div className="trust-stat"><div className="v">100<small>%</small></div><div className="l en">ONE CRAFTSMAN</div></div>
            <div className="trust-stat"><div className="v">3<small>種</small></div><div className="l en">SERVICES</div></div>
          </div>
        </a>

        <div className="reviews">
          {reviews.map((r, i) => (
            <div className="review" key={i}>
              <div className="stars">★★★★★</div>
              <p>「{r.text}」</p>
              <div className="who">
                <strong>{r.who}</strong><span>{r.area}</span>
                <a href={MAPS_URL} target="_blank" rel="noopener noreferrer" className="review-link en">Google Maps →</a>
              </div>
            </div>
          ))}
        </div>

        <div className="reviews-cta">
          <a href={MAPS_URL} target="_blank" rel="noopener noreferrer" className="maps-btn">
            <span>Googleマップで全件の口コミ・場所を見る</span>
            <span className="en">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ============ PROCESS ============
function Process() {
  const steps = [
    { n: "01", en: "INQUIRY", jp: "お問い合わせ", d: "お電話・フォームから。お気軽にご相談ください。" },
    { n: "02", en: "VISIT", jp: "現地調査", d: "実際に現場を拝見し、状態と要望を伺います。" },
    { n: "03", en: "PLAN", jp: "ご提案・お見積り", d: "最適なご提案と分かりやすいお見積りを。" },
    { n: "04", en: "WORK", jp: "施工", d: "近隣への配慮を欠かさず、丁寧に進めます。" },
    { n: "05", en: "AFTER", jp: "お引渡しと保証", d: "アフターメンテナンスまで責任を持って。" },
  ];
  return (
    <section className="process" id="process" data-screen-label="06 Process">
      <div className="wrap">
        <div className="process-head">
          <div className="eyebrow en">PROCESS / 05</div>
          <h2>ご依頼の流れ。</h2>
        </div>
        <div className="proc-track">
          {steps.map(s => (
            <div className="proc-step" key={s.n}>
              <div className="dot">{s.n}</div>
              <h4><small>{s.en}</small>{s.jp}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ AREA ============
function Area() {
  const areas = [
    { jp: "逗子市", en: "ZUSHI", km: "0 km" },
    { jp: "鎌倉市", en: "KAMAKURA", km: "5 km" },
    { jp: "葉山町", en: "HAYAMA", km: "3 km" },
    { jp: "横須賀市", en: "YOKOSUKA", km: "8 km" },
  ];
  return (
    <section className="area" id="area" data-screen-label="07 Area">
      <div className="wrap area-grid">
        <div>
          <div className="eyebrow en">SERVICE AREA / 06</div>
          <h2>湘南・三浦半島の<br/>4つの街へ。</h2>
          <p>逗子のアトリエから車で30分以内、地元と呼べる範囲を中心にお伺いしています。
            遠方からのご相談は、内容によって個別にご対応いたしますのでお気軽にお問合せください。</p>

          <div className="area-list">
            {areas.map(a => (
              <div className="area-item" key={a.en}>
                <h5>{a.jp}<small>{a.en}</small></h5>
                <span className="km en">— {a.km}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="area-map" style={{padding:0, overflow:"hidden"}}>
          <iframe
            title="CHOP SPACE 所在地 — 神奈川県逗子市沼間"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3254.528!2d139.5757!3d35.2944!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60185cf8c0000001%3A0x0!2z5aKo5aWz5biC5Yuu5ZGK77yS5LiB55uu77yR77yT77yX77yS4oiS77yR77yU!5e0!3m2!1sja!2sjp!4v1715248800000!5m2!1sja!2sjp"
            width="100%"
            height="100%"
            style={{border:0, display:"block", minHeight:"360px"}}
            allowFullScreen=""
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          ></iframe>
        </div>
      </div>
    </section>
  );
}

// ============ CONTACT ============
function Contact() {
  return (
    <section className="contact" id="contact" data-screen-label="08 Contact">
      <div className="wrap contact-grid">
        <div>
          <div className="eyebrow en">CONTACT / 07</div>
          <h2>まずは一度、<br/>お話を聞かせてください。<br/><strong>ご相談・お見積りは無料です。</strong></h2>
          <p className="lead">「直したい場所がぼんやりしていて」「何から相談すればいいか分からない」——そんな段階で大丈夫です。
            お電話一本、メール一通から、丁寧に伺います。</p>
          <div className="cta-row">
            <a href="tel:046-845-6153" className="cta-primary">CALL 046-845-6153 <span className="cta-arrow"></span></a>
            <a href="#" className="cta-secondary">CONTACT FORM <span className="cta-arrow"></span></a>
          </div>
        </div>

        <div className="contact-card">
          <div className="contact-row">
            <span className="k">TEL</span>
            <span className="v tel">046-845-6153<small>受付 9:00 – 18:00 / 日曜定休</small></span>
          </div>
          <div className="contact-row">
            <span className="k">EMAIL</span>
            <span className="v">— <small style={{letterSpacing:"0.18em"}}>お電話にてご確認ください</small></span>
          </div>
          <div className="contact-row">
            <span className="k">ADDRESS</span>
            <span className="v">神奈川県逗子市沼間２丁目１３７２−１５</span>
          </div>
          <div className="contact-row">
            <span className="k">HOURS</span>
            <span className="v">9:00 – 18:00<small>SUNDAY CLOSED</small></span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FOOTER + MOBILE CTA ============
function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <div className="mark">CHOP SPACE</div>
            <div className="sub">CO., LTD. · ZUSHI · KANAGAWA</div>
            <p>湘南・逗子から、店舗・オフィスのリノベーションと造作家具づくりを手がける、ひとり親方の会社です。</p>
          </div>
          <div>
            <h6>SITEMAP</h6>
            <ul>
              <li><a href="#philosophy">想い</a></li>
              <li><a href="#services">事業内容</a></li>
              <li><a href="#works">施工事例</a></li>
              <li><a href="#process">ご依頼の流れ</a></li>
            </ul>
          </div>
          <div>
            <h6>CONTACT</h6>
            <ul>
              <li><a href="tel:046-845-6153">046-845-6153</a></li>
              <li><a href="mailto:info@chopspace.co.jp">info@chopspace.co.jp</a></li>
              <li><a href="#contact">お問い合わせフォーム</a></li>
            </ul>
          </div>
          <div>
            <h6>HOURS / AREA</h6>
            <ul>
              <li><a>9:00 – 18:00 / 日曜定休</a></li>
              <li><a>逗子・鎌倉・葉山・横須賀</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bot">
          <span>© 2026 CHOP SPACE CO., LTD.</span>
          <span>BUILT IN ZUSHI · BY THE SEA</span>
        </div>
      </div>
    </footer>
  );
}

function MobileCTA() {
  return (
    <div className="mcta">
      <a href="tel:046-845-6153" className="tel">CALL <strong>046-845-6153</strong></a>
      <a href="#contact" className="form">お問い合わせ →</a>
    </div>
  );
}

Object.assign(window, { Works, BeforeAfter, Trust, Process, Area, Contact, Footer, MobileCTA });