/* 日瑩 — Homepage app (concise): hero · brand · services · work · ESG teaser · CTA. */
const { Button: HB, SectionLabel: HL } = window.JocundYearDesignSystem_ddfb11;
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakText, TweakToggle } = window;
const PH = window.JYPH;

const PROJ_MAP = { "品牌敘事": "story", "規律方格": "grid", "雜誌編輯": "editorial", "大圖輪播": "carousel" };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTitle": "每一份榮耀，都値得被珍藏",
  "projectLayout": "品牌敘事",
  "showTagline": true
} /*EDITMODE-END*/;

/* —— Hero carousel scenes (clipped inside the 日瑩 logo mask) —— */
const HERO_SLIDES = [
["客製化設計", "CUSTOM DESIGN", "assets/opt/hero-1.jpg", "mhero-1"],
["禮品包裝", "GIFT PACKAGING", "assets/opt/hero-2.jpg", "mhero-2"],
["用心相伴", "WITH CARE", "assets/opt/hero-3.jpg", "mhero-3"],
["品牌禮盒", "BRAND GIFT SET", "assets/opt/hero-4.jpg", "mhero-4"],
["節慶禮贈", "SEASONAL GIFTS", "assets/opt/hero-5.jpg", "mhero-5"],
["工藝加工", "CRAFT & CASTING", "assets/opt/hero-6.jpg", "mhero-6"]];

/* —— Hero: logo-mask brand banner —— */
function Hero({ title, showTagline }) {
  const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const n = HERO_SLIDES.length;
  const [i, setI] = React.useState(0);
  const go = (d) => setI((p) => (p + d + n) % n);
  React.useEffect(() => {
    if (reduced) return;
    const t = setInterval(() => setI((p) => (p + 1) % n), 5000);
    return () => clearInterval(t);
  }, [reduced, i, n]);
  const lines = title.split("，");
  const Arrow = ({ dir }) =>
  <svg width="20" height="7" viewBox="0 0 40 14" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: dir < 0 ? "scaleX(-1)" : "none" }}>
      <line x1="2" y1="7" x2="38" y2="7" /><path d="M31 1l7 6-7 6" />
    </svg>;
  return (
    <section className="jy-mhero">
      <div className="jy-mhero__grid" style={{ padding: "0px" }}>
        <div className="jy-mhero__left" data-reveal>
          <p className="jy-mhero__eye" style={{ fontSize: "13px", letterSpacing: "2.3px" }}>企業獎座・永續禮贈・品牌周邊</p>
          <h1 className="jy-mhero__title">{lines.map((s, idx, a) =>
            <React.Fragment key={idx}>{s}{idx < a.length - 1 ? <br /> : null}</React.Fragment>
            )}</h1>
          <span className="jy-mhero__rule" aria-hidden="true" />
          <p className="jy-mhero__sub">從想法，到一件値得珍藏的禮品</p>
        </div>

        <div className="jy-mhero__center">
          <div className="jy-mhero__mask">
            {HERO_SLIDES.map(([zh, en, src, sid], idx) =>
            <div key={sid} className={"jy-mhero__frame" + (idx === i ? " is-on" : "")}>
                <image-slot id={sid} shape="rect" fit="cover" src={window.jyAsset ? window.jyAsset(src) : src} placeholder={"拖入照片 · " + zh}
              style={{ display: "block", position: "absolute", inset: 0, width: "100%", height: "100%" }} />
              </div>
            )}
          </div>
          <div className="jy-mhero__controls">
            <button className="jy-mhero__arrow" onClick={() => go(-1)} aria-label="上一張"><Arrow dir={-1} /></button>
            <div className="jy-mhero__dots" role="tablist">
              {HERO_SLIDES.map(([zh], idx) =>
              <button key={idx} className={"jy-mhero__dot" + (idx === i ? " is-on" : "")} onClick={() => setI(idx)}
              aria-label={"第 " + (idx + 1) + " 張 · " + zh} aria-selected={idx === i} />
              )}
            </div>
            <button className="jy-mhero__arrow" onClick={() => go(1)} aria-label="下一張"><Arrow dir={1} /></button>
          </div>
        </div>

        <div className="jy-mhero__right">
          {showTagline ?
          <React.Fragment>
            <p className="jy-mhero__vtext">用心創造，<br />讓美好被記得</p>
            <span className="jy-mhero__vline" aria-hidden="true" />
            <span className="jy-mhero__vdot" aria-hidden="true" />
          </React.Fragment> :
          null}
        </div>
      </div>
    </section>);

}

/* —— Brand intro (full-bleed banner) —— */
function Intro() {
  return (
    <section className="jy-aboutbanner" id="brand" style={{ margin: "59px 0px", gap: "1px" }}>
      <img className="jy-aboutbanner__photo" src={window.jyAsset ? window.jyAsset("assets/opt/sustain-banner.jpg") : "assets/opt/sustain-banner.jpg"} alt="" aria-hidden="true" />
      <div className="jy-aboutbanner__scrim" aria-hidden="true"></div>
      <div className="jy-wrap jy-aboutbanner__wrap" style={{ marginTop: "3px" }}>
        <div className="jy-aboutbanner__panel" data-reveal style={{ margin: "0px 0px 0px auto", textAlign: "right" }}>
          <HL index="01">關於日瑩 · About</HL>
          <p className="jy-intro__zh" style={{ fontWeight: "400", margin: "20px 0px 0px 0px" }}>永續初心，<br /><span style={{ fontWeight: 500 }}>厚植台灣未來。</span></p>
          <span className="jy-aboutbanner__rule" aria-hidden="true"></span>
          <p className="jy-intro__body" style={{ maxWidth: "480px", margin: "26px 0px 0px auto", lineHeight: "1.55", letterSpacing: "0.5px", fontSize: "15px" }}>自 1988 年起，深耕至今。多年來，日瑩專注於客製化禮品與獎項開發，透過創意提案、設計整合與穩定執行，為企業打造具有品牌價値的禮贈品—以設計連結企業與人，以禮品傳遞感謝與價値。</p>
          <div style={{ marginTop: "var(--space-7)" }}>
            <HB as="a" href="about.html" variant="secondary" style={{ padding: "0px 24px", borderWidth: "1px", margin: "0px" }}>認識日瑩 →</HB>
          </div>
        </div>
      </div>
    </section>);
}

/* —— Services —— */
const SERVICES = [
["客製化企業禮品", "Custom", "Corporate Gifts", "量身打造品牌專屬禮品，傳遞企業心意與價値。"],
["客製化獎座獎牌", "Trophies &", "Medals", "設計精緻獎座與獎牌，致敬每一份卓越成就。"],
["ESG 永續禮贈品", "Sustainable", "Gifting", "選用永續材質，實踐企業的環境承諾。"],
["活動紀念品", "Event", "Commemoratives", "為活動注入獨特意義，創造難忘的參與體驗。"],
["品牌周邊商品開發", "Brand", "Merchandise", "開發多元周邊商品，延伸品牌生活體驗。"],
["企業採購專案", "Corporate", "Procurement", "提供專業採購解決方案，滿足企業多元需求。"]];

function ServiceIcon({ i }) {
  const O = "#e8651e",K = "#46464a",B = "none";
  const ln = { fill: "none", stroke: K, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const ac = { fill: "none", stroke: O, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const icons = [
  <g key="gift">
      <rect x="8" y="24" width="68" height="68" fill={B} />
      <rect x="28" y="50" width="80" height="56" {...ln} />
      <line x1="28" y1="72" x2="108" y2="72" {...ln} />
      <line x1="68" y1="50" x2="68" y2="106" {...ln} />
      <path d="M68 50 C68 36 46 36 50 48 C52 55 64 53 68 50 Z" {...ac} />
      <path d="M68 50 C68 36 90 36 86 48 C84 55 72 53 68 50 Z" {...ac} />
    </g>,
  <g key="trophy">
      <circle cx="86" cy="40" r="24" fill={B} />
      <path d="M40 46 L100 46 A30 24 0 0 1 40 46 Z" {...ln} />
      <line x1="70" y1="70" x2="70" y2="86" {...ln} />
      <path d="M56 86 L84 86 L88 98 L52 98 Z" {...ln} />
      <path d="M100 46 A30 24 0 0 1 82 67" {...ac} />
    </g>,
  <g key="esg">
      <path d="M70 26 A32 32 0 1 0 102 58" {...ln} />
      <path d="M102 58 l-13 -2 m13 2 l-2 13" {...ln} />
      <path d="M58 80 C53 61 70 45 89 43 C87 64 79 82 58 80 Z" {...ac} />
      <path d="M62 75 C70 65 80 54 86 47" {...ac} />
    </g>,
  <g key="spark">
      <path d="M70 26 C72.5 52 78.5 58 104 60 C78.5 62 72.5 68 70 94 C67.5 68 61.5 62 36 60 C61.5 58 67.5 52 70 26 Z" {...ln} />
      <path d="M104 30 C105 39 106 40 115 41 C106 42 105 43 104 52 C103 43 102 42 93 41 C102 40 103 39 104 30 Z" {...ac} />
    </g>,
  <g key="bag">
      <rect x="58" y="46" width="52" height="54" fill={B} />
      <rect x="40" y="50" width="46" height="54" {...ln} />
      <path d="M52 50 A11 11 0 0 1 74 50" {...ln} />
      <path d="M86 78 A22 22 0 0 1 64 104" {...ac} />
    </g>,
  <g key="people">
      <path d="M38 100 A33 33 0 0 1 104 100 Z" fill={B} />
      <circle cx="46" cy="62" r="8" {...ln} />
      <path d="M33 94 A15 15 0 0 1 58 84" {...ln} />
      <circle cx="94" cy="62" r="8" {...ln} />
      <path d="M82 84 A15 15 0 0 1 107 94" {...ln} />
      <circle cx="70" cy="52" r="11" {...ln} />
      <path d="M49 98 A22 21 0 0 1 91 98" {...ln} />
      <path d="M67 65 L73 65 L70 70 Z" {...ac} />
      <path d="M70 70 L66 78 L70 90 L74 78 Z" {...ac} />
    </g>];

  return (
    <svg viewBox="0 0 140 120" className="jy-svc2__svg" role="img" aria-hidden="true">
      {icons[i]}
    </svg>);

}

function Services() {
  return (
    <section className="jy-sec jy-sec--tight jy-svc2-sec" id="services" style={{ padding: "0px 0px 20px" }}>
      <div className="jy-wrap jy-svc2">
        <div className="jy-svc2__head" data-reveal>
          <HL index="02">服務範疇 · What We Make</HL>
          <h2 className="jy-svc2__title">讓每一份心意，<br />成為値得珍藏的禮品。</h2>
          <span className="jy-svc2__rule" aria-hidden="true"></span>
        </div>
        <div className="jy-svc2__lead" data-reveal data-reveal-d="1" style={{ margin: "20px 0px 47px" }}>
          <p className="jy-svc2__sub">從設計、選品到交付，為企業打造有溫度的禮贈體驗。</p>
          <HB as="a" href="contact.html" variant="primary" style={{ margin: "0px 50px 0px 0px" }}>洽談您的專案 →</HB>
        </div>
        <div className="jy-svc2__grid">
          {SERVICES.map(([zh, en1, en2, desc], i) =>
          <div className="jy-svc2__item" data-reveal data-reveal-d={i % 3 + 1} key={zh} style={{ padding: "0px 0px 40px 25px" }}>
              <div className="jy-svc2__top" style={{ margin: "40px 0px 0px" }}>
                <span className="jy-svc2__num">{String(i + 1).padStart(2, "0")}</span>
                <span className="jy-svc2__vrule" aria-hidden="true"></span>
                <div className="jy-svc2__icon"><img src={(window.jyAsset ? window.jyAsset : (x) => x)("assets/svc-icon-" + (i + 1) + ".png")} alt="" aria-hidden="true" /></div>
                <div className="jy-svc2__titles">
                  <h3 className="jy-svc2__zh">{zh}</h3>
                  <p className="jy-svc2__en">{en1}<br />{en2}</p>
                </div>
              </div>
              <p className="jy-svc2__desc" style={{ margin: "15px 0px 0px", width: "236px" }}>{desc}</p>
            </div>)}
        </div>
      </div>
    </section>);

}

/* —— Sustainability teaser: full-bleed banner + ESG feature strip —— */
const ESG_FEATURES = [
["環保獎牌", "採用環保材質製作", "兼顧榮耀與永續價値"],
["再生材料獎座", "回收再生材料製成", "減少資源消耗與浪費"],
["FSC 木質禮品", "選用 FSC 認證木材", "支持永續森林管理"],
["RPET 產品", "使用 RPET 再生寶特瓶", "減少廢棄物再生利用"],
["永續包裝", "採用可回收包材", "降低環境影響"]];

function SustainTeaser() {
  return (
    <section className="jy-esg2" id="esg">
      <div className="jy-esg2__banner" style={{ borderStyle: "none", opacity: "1" }}>
        <img className="jy-esg2__photo" src={window.jyAsset ? window.jyAsset("assets/opt/esg-banner.jpg") : "assets/opt/esg-banner.jpg"} alt="" aria-hidden="true" />
        <div className="jy-esg2__scrim" aria-hidden="true"></div>
        <div className="jy-wrap jy-esg2__overlay">
          <div className="jy-esg2__panel" data-reveal>
            <HL index="04">永續 · Sustainability</HL>
            <h2 className="jy-esg2__title">讓榮譽與環保，<br />在同一件作品中並存</h2>
            <p className="jy-esg2__lead" style={{ lineHeight: "1.7" }}>近年積極投入 ESG 與環保材質開發，<br />推出環保獎牌與永續禮品系列，<br />將設計美學與循環材料結合。</p>
            <div className="jy-esg2__cta">
              <HB as="a" href="sustainability.html" variant="primary">了解永續承諾 →</HB>
            </div>
          </div>
        </div>
      </div>
      <div className="jy-esg2__features">
        <div className="jy-wrap-w jy-esg2__frow">
          {ESG_FEATURES.map(([zh, l1, l2], i) =>
          <div className="jy-esg2__feat" data-reveal data-reveal-d={i % 4 + 1} key={zh}>
              <div className="jy-esg2__ic"><img src={(window.jyAsset ? window.jyAsset : (x) => x)("assets/esg-icon-" + (i + 1) + ".png")} alt="" aria-hidden="true" /></div>
              <div className="jy-esg2__ftxt">
                <h3 className="jy-esg2__fzh" style={{ fontFamily: "Inter", fontWeight: "500", padding: "0px" }}>{zh}</h3>
                <p className="jy-esg2__fdesc" style={{ margin: "10px 0px 0px", fontSize: "13px", fontWeight: "400" }}>{l1}<br />{l2}</p>
              </div>
            </div>)}
        </div>
      </div>
    </section>);

}

/* —— CTA —— */
function CTABand() {
  return (
    <section className="jy-sec jy-statement jy-statement--cta">
      <div className="jy-wrap" data-reveal>
        <p className="jy-statement__q" style={{ fontWeight: "400", color: "var(--ink-900)" }}>以設計承載心意，<br />以設計成就價値。<br />做成一件値得珍藏的作品。</p>
        <div style={{ display: "flex", gap: "var(--space-3)", justifyContent: "center", marginTop: "var(--space-6)", flexWrap: "wrap" }}>
          <HB as="a" href="contact.html" variant="primary" size="lg">索取報價</HB>
          <HB as="a" href="about.html" variant="secondary" size="lg">認識日瑩 →</HB>
        </div>
      </div>
    </section>);

}

/* —— App —— */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {window.initReveal();});
  return (
    <div className="jy">
      <window.JYSiteChrome active={null} />
      <main>
        <Hero title={t.heroTitle} showTagline={t.showTagline} />
        <Intro />
        <Services />
        <window.JYProjects layout={PROJ_MAP[t.projectLayout] || "story"} />
        <SustainTeaser />
      </main>
      <window.JYFreeLayer page="home" />
      <window.JYTextEdit page="home" />
      <window.JYFooter />

      <TweaksPanel>
        <TweakSection label="首頁變化 · Layout" />
        <TweakRadio label="作品呈現" value={t.projectLayout} options={Object.keys(PROJ_MAP)} onChange={(v) => setTweak("projectLayout", v)} />
        <TweakSection label="Hero" />
        <TweakText label="主標題" value={t.heroTitle} onChange={(v) => setTweak("heroTitle", v)} />
        <TweakToggle label="顯示直排標語" value={t.showTagline} onChange={(v) => setTweak("showTagline", v)} />
      </TweaksPanel>
    </div>);

}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);