// Photo URLs (Unsplash) - chosen for Shonan/coastal craftsman feel
const PHOTOS = {
  hero: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2000&q=80",
  philosophy: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=80",
  svc1: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=1200&q=80",
  svc2: "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=1200&q=80",
  svc3: "https://images.unsplash.com/photo-1538688525198-9b88f6f53126?auto=format&fit=crop&w=1200&q=80",
  work1: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=80",
  work2: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1200&q=80",
  work3: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1200&q=80",
  work4: "https://images.unsplash.com/photo-1616594039964-ae9021a400a0?auto=format&fit=crop&w=1200&q=80",
  work5: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?auto=format&fit=crop&w=1200&q=80",
  baBefore: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=1600&q=80",
  baAfter: "https://images.unsplash.com/photo-1564540583246-934409427776?auto=format&fit=crop&w=1600&q=80",
};

// ============ NAV + DRAWER ============
function Nav({ scrolled, overPhoto, onBurger, drawerOpen }) {
  const cls = `nav ${scrolled ? "scrolled" : ""} ${overPhoto && !scrolled ? "over-photo" : ""}`;
  return (
    <header className={cls}>
      <a href="#top" className="nav-brand">
        <span className="nav-mark">CHOP SPACE</span>
        <span className="nav-sub">ZUSHI · KANAGAWA</span>
      </a>
      <nav className="nav-links">
        <a href="#philosophy">PHILOSOPHY</a>
        <a href="#services">SERVICES</a>
        <a href="#works">WORKS</a>
        <a href="#process">PROCESS</a>
        <a href="#area">AREA</a>
      </nav>
      <a href="#contact" className="nav-cta">CONTACT —&gt;</a>
      <button className={`nav-burger ${drawerOpen ? "open" : ""}`} onClick={onBurger} aria-label="menu">
        <span></span><span></span>
      </button>
    </header>
  );
}

function Drawer({ open, onClose }) {
  const items = [
    ["PHILOSOPHY", "想い", "#philosophy"],
    ["SERVICES", "事業内容", "#services"],
    ["WORKS", "施工事例", "#works"],
    ["PROCESS", "ご依頼の流れ", "#process"],
    ["AREA", "対応エリア", "#area"],
    ["CONTACT", "お問い合わせ", "#contact"],
  ];
  return (
    <div className={`drawer ${open ? "open" : ""}`}>
      <div className="drawer-links">
        {items.map(([en, jp, h]) => (
          <a key={h} href={h} onClick={onClose}>
            <span>{jp}</span>
            <small>{en}</small>
          </a>
        ))}
      </div>
      <div className="drawer-foot">
        <span>OPEN 9:00 – 18:00 / SUN CLOSED</span>
        <strong>046-845-6153</strong>
        <span>神奈川県逗子市</span>
      </div>
    </div>
  );
}

// ============ HERO ============
function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-img" style={{ backgroundImage: `url(${PHOTOS.hero})` }}></div>
      <div className="hero-corner-tl en">CHOP SPACE CO., LTD.</div>
      <div className="hero-corner-tr en">N 35.29° / E 139.58°<br/>ZUSHI · KANAGAWA</div>
      <div className="hero-content">
        <h1 className="hero-jp">
          この街にひらく、<br/>
          <em>あなたの場所を。</em>
        </h1>
        <div className="hero-meta">
          <span>STORE · OFFICE</span>
          <span className="line"></span>
          <span>RENOVATION</span>
          <span>CUSTOM — FURNITURE</span>
        </div>
      </div>
      <div className="hero-scroll">
        <span>SCROLL</span>
        <span className="bar"></span>
      </div>
    </section>
  );
}

// ============ MARQUEE ============
function Marquee() {
  const items = ["STORE RENOVATION", "OFFICE RENOVATION", "CUSTOM FURNITURE", "ZUSHI · KAMAKURA · HAYAMA · YOKOSUKA", "GOOGLE REVIEW 5.0", "BUILT IN ZUSHI"];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>{items.map((t, i) => <React.Fragment key={i}><b>{t}</b><span className="dot"></span></React.Fragment>)}</span>
        <span>{items.map((t, i) => <React.Fragment key={"b"+i}><b>{t}</b><span className="dot"></span></React.Fragment>)}</span>
      </div>
    </div>
  );
}

// ============ PHILOSOPHY ============
function Philosophy() {
  return (
    <section className="philosophy" id="philosophy" data-screen-label="02 Philosophy">
      <div className="wrap philosophy-grid">
        <div>
          <div className="phil-eyebrow en">PHILOSOPHY / 01</div>
          <h2 className="phil-h">
            海風を受け、<br/>
            木と向き合う。<br/>
            <strong>場所の</strong>続きをつくる仕事。
          </h2>
          <p className="phil-body">
            逗子に拠点を置く、ひとり親方の小さな会社です。店舗・オフィスのリノベーションと、
            その空間に合わせた造作家具を、ひとつの手の内で仕上げる。海辺の街の湿度や光を知っているからこそ、
            10年先まで気持ちよく使える、丁寧な仕事ができると信じています。
          </p>
          <div className="phil-sig">
            代表 / 職人
            <small>FOUNDER &amp; CRAFTSMAN · ZUSHI</small>
          </div>
        </div>
        <div className="phil-img">
          <img src={PHOTOS.philosophy} alt="craftsman at work" className="bg-fill"/>
          <div className="phil-img-cap en">FIG.01 — ZUSHI ATELIER</div>
        </div>
        <div className="phil-stamp">
          HAND<br/>MADE<br/>
          <small>BY THE SEA</small>
        </div>
      </div>
    </section>
  );
}

// ============ SERVICES ============
function Services() {
  const rows = [
    {
      num: "01", en: "STORE — RENOVATION",
      jp: "店舗のリノベーション",
      body: "カフェ、美容室、小さなショップ。業態と動線に合わせ、「お客様を迎える最初の一秒」を丁寧につくります。原状回復や部分改装にも柔軟に対応。",
      tags: ["カフェ・飲食店", "美容室・サロン", "ショップ・アトリエ", "原状回復", "部分改装"],
      img: PHOTOS.svc1, tag: "STORE",
    },
    {
      num: "02", en: "INTERIOR — RENOVATION",
      jp: "内装リノベーション",
      body: "住宅・店舗の内装を、住む人・使う人の目線で丁寧につくり直します。壁・床・建具の張り替えから間取りの変更まで。古くなった空間に、もう一度息を吹き込む仕事です。",
      tags: ["住宅リノベ", "壁・床・建具", "間取り変更", "水まわり", "造作工事"],
      img: PHOTOS.svc2, tag: "INTERIOR",
    },
    {
      num: "03", en: "FURNITURE — MAKING",
      jp: "空間に合わせた家具",
      body: "既製品ではしっくりこない場所に、その空間のための一点ものを。カウンター、什器、ベンチ、棚。木のクセを読み、長く使うほど味わいが増す家具をつくります。",
      tags: ["造作家具", "オーダーメイド", "無垢材", "什器・カウンター", "棚・収納"],
      img: PHOTOS.svc3, tag: "FURNITURE",
    },
  ];
  return (
    <section className="services" id="services" data-screen-label="03 Services">
      <div className="wrap">
        <div className="svc-head">
          <div>
            <div className="num">SERVICES / 02</div>
            <h2>三つの仕事、<br/>一つの<em style={{fontStyle:"normal", color:"var(--clay-deep)"}}>暮らし</em>。</h2>
          </div>
          <p>外と内、そして家具。境目を分けずに考えるからこそ、家全体の調和が生まれます。
            必要な工程だけ、必要な分量で。私たちが大切にしているのは「足し算」ではなく「整える」設計です。</p>
        </div>

        {rows.map((r, i) => (
          <div className={`svc-row ${i % 2 ? "flip" : ""}`} key={r.num}>
            {i % 2 === 0 && <div className="svc-num en">— {r.num}</div>}
            <div className="svc-text">
              <h3><small className="en">{r.en}</small>{r.jp}</h3>
              <p>{r.body}</p>
              <ul>{r.tags.map(t => <li key={t}>{t}</li>)}</ul>
            </div>
            <div className="svc-img" data-tag={r.tag}>
              <img src={r.img} alt={r.jp} className="bg-fill"/>
            </div>
            {i % 2 === 1 && <div className="svc-num en">— {r.num}</div>}
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Drawer, Hero, Marquee, Philosophy, Services, PHOTOS });