// One-page website showcase
// Shows what the customer's finished one-page site looks like
// uses globals: Icon

const SiteShowcase = () => (
  <section className="site-showcase" id="website">
    <div className="container">
      <div className="site-showcase__head reveal">
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>YOUR WEBSITE</div>
          <h2 className="h-section">
            一頁式網站，<br />
            服務清晰<em style={{ background: "linear-gradient(180deg, transparent 64%, var(--astra-accent) 64%)", fontStyle: "normal", padding: "0 4px" }}>一次到位</em>
          </h2>
        </div>
        <div>
          <p className="lead" style={{ margin: 0 }}>
            我們不只是預約系統。每位客戶都會有一個專屬一頁式網站——放上你的工作室空間、服務價位、作品集，所有預約按鈕直接接到你的 LINE。
          </p>
          <div className="site-showcase__includes">
            <div className="site-showcase__includes-item">
              <Icon name="check-circle" size={18} />
              <span><strong>工作室空間照</strong>・展示環境</span>
            </div>
            <div className="site-showcase__includes-item">
              <Icon name="check-circle" size={18} />
              <span><strong>服務項目與價位</strong>・清楚透明</span>
            </div>
            <div className="site-showcase__includes-item">
              <Icon name="check-circle" size={18} />
              <span><strong>作品集</strong>・可隨時上傳更新</span>
            </div>
            <div className="site-showcase__includes-item">
              <Icon name="check-circle" size={18} />
              <span><strong>LINE 預約按鈕</strong>・一鍵跳轉</span>
            </div>
          </div>
        </div>
      </div>

      <div className="site-showcase__wrap reveal reveal--d1">
        <div className="callout callout--1">
          <span className="dot"></span>
          <span>工作室空間照，展示風格</span>
        </div>
        <div className="callout callout--2">
          <span className="dot"></span>
          <span>服務價位透明，客人不用問</span>
        </div>
        <div className="browser">
          <div className="browser__bar">
            <div className="browser__dots">
              <div className="browser__dot"></div>
              <div className="browser__dot"></div>
              <div className="browser__dot"></div>
            </div>
            <div className="browser__url">
              <Icon name="shield" size={11} />
              astrayo.app/sasha-nail
            </div>
          </div>
          <div className="browser__body">
            <SiteMock />
          </div>
        </div>
      </div>
    </div>
  </section>
);

const SiteMock = () => (
  <img
    src="uploads/凝香v2 –.jpg"
    alt="凝香美學 · 客戶網站示範"
    style={{ width: "100%", display: "block" }}
  />
);

Object.assign(window, { SiteShowcase });