/* Home Color — sections (外帶手沖咖啡店) */
const { useState, useEffect, useRef } = React;

/* ============ NAV ============ */
function HCNav() {
  return (
    <nav className="hc-nav">
      <div className="hc-nav-inner">
        <a href="#top" className="hc-brand">
          <img src={HC_ASSETS.logo} alt="Home Color" />
          <span className="hc-brand-text">
            Home Color
            <small>POUR OVER · TAKEAWAY · EST. 2026</small>
          </span>
        </a>
        <div className="hc-nav-links">
          <a href="#about">關於我們</a>
          <a href="#drinks">飲品菜單</a>
          <a href="#visit">門市資訊</a>
          <a href="#news">最新消息</a>
        </div>
        <a href={HC_LINKS.onlineOrder} className="hc-nav-cta">線上點餐 →</a>
      </div>
    </nav>);

}

/* ============ HERO ============ */
function HCHero() {
  return (
    <section className="hc-hero" id="top">
      <div className="hc-container">
        <div className="hc-hero-grid">
          <div className="hc-reveal in">
            <div className="hc-eyebrow">A POUR-OVER TAKEAWAY · TAIPEI</div>
            <h1>
              帶一杯<br />
              <em>家</em>的顏色，<br />
              路上慢慢喝。
            </h1>
            <p className="hc-hero-sub">
              Home Color 是一間以手沖為主的外帶小店。
              我們相信好咖啡不需要久坐——點一杯帶著走，
              讓今天的通勤、散步、或一段路途，多一點屬於自己的色溫。
            </p>
            <div className="hc-hero-actions">
              <a href="#drinks" className="hc-btn hc-btn-primary">
                看今日菜單 <span className="arrow">→</span>
              </a>
              <a href="#visit" className="hc-btn hc-btn-ghost">
                前往門市 <span className="arrow">→</span>
              </a>
            </div>
            <dl className="hc-hero-meta">
              <div>
                <dt>SERVICE</dt>
                <dd>外帶外送</dd>
              </div>
              <div>
                <dt>OPEN DAILY</dt>
                <dd>07:00 — 16:00</dd>
              </div>
              <div>
                <dt>LOCATION</dt>
                <dd>萬華・康定路 330</dd>
              </div>
            </dl>
          </div>
          <div className="hc-hero-visual hc-reveal in">
            <img src={HC_ASSETS.storefrontHero} alt="Home Color 木質風格門市實景" />
            <div className="hc-hero-num">N°26</div>
            <div className="hc-hero-tag">STOREFRONT — 智能手沖 · SMART BREWING</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============ MARQUEE ============ */
function HCMarquee() {
  const items = ["讓好咖啡成為好習慣", "一杯好咖啡讓家更有味道"];
  return (
    <div className="hc-marquee">
      <div className="hc-marquee-track">
        <span>{items.map((t, i) => <React.Fragment key={i}>{t}</React.Fragment>)}</span>
        <span>{items.map((t, i) => <React.Fragment key={i + 100}>{t}</React.Fragment>)}</span>
      </div>
    </div>);

}

/* ============ ABOUT ============ */
function HCAbout() {
  return (
    <section id="about">
      <div className="hc-container">
        <div className="hc-section-head hc-reveal">
          <div className="label">— 01 / ABOUT</div>
          <h2>智能手沖，<br />把每一杯<em>精準萃取</em>，<br />變成回家的日常。</h2>
        </div>
        <div className="hc-about-grid">
          <div className="hc-about hc-reveal">
            <p>
              Home Color 開始於一個簡單的念頭——「希望每個經過的人，
              都能順手帶走一杯，屬於自己今天的味道」。
              我們不主張某一種沖煮才是對的，
              只想讓你知道：每一支豆子在不同的水溫、節奏與杯型下，
              都會展現出不同的色溫。
            </p>
            <div className="hc-about-quote">
              「咖啡不一定要坐下喝，<br />但每一杯都值得被認真對待。」
            </div>
            <p>
              店內所有豆子皆由店主親自挑選，每週與烘豆師對杯一次，
              依季節調整品項與烘焙度。
              點杯的同時，我們會跟你聊上一兩句——關於今天的豆子、關於天氣，
              然後祝你有個好的一天。
            </p>
            <div className="hc-about-pills">
              <span>SINCE 2026</span>
              <span>外帶外送</span>
              <span>附設等待區</span>
              <span>智能手沖 SMART BREWING</span>
              <span>QUALITY & RELIABILITY</span>
            </div>
          </div>
          <div className="hc-about-img hc-reveal">
            <img src={HC_ASSETS.brewingPoster} alt="Home Color 手沖、冷萃、現泡茶" loading="lazy" />
            <span className="hc-placeholder-tag">每一杯都用心沖煮 · 帶著溫暖與安心</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ============ DRINKS ============ */
function HCDrinks() {
  const [active, setActive] = useState("handbrew");
  const cat = HC_DRINKS[active];
  const keys = Object.keys(HC_DRINKS);

  const isIcedCat = (k) => k === "cold" || k === "coldtea";
  const toneFor = (catKey, i) => {
    if (catKey === "handbrew") return ["espresso", "cream", "milk", "iced"][i % 4];
    if (catKey === "aulait") return "milk";
    if (catKey === "hottea") return "cream";
    return "iced";
  };

  return (
    <section id="drinks">
      <div className="hc-container">
        <div className="hc-section-head hc-reveal">
          <div className="label">— 02 / MENU</div>
          <h2>SPECIALTY COFFEE<br />& <em>PREMIUM TEA</em></h2>
        </div>

        <div className="hc-drinks-tabs hc-reveal">
          {keys.map((k, i) =>
          <button
            key={k}
            className={"hc-tab" + (active === k ? " active" : "")}
            onClick={() => setActive(k)}>
            
              {HC_DRINKS[k].label}
              <small>0{i + 1}</small>
            </button>
          )}
        </div>

        <div className="hc-drinks-intro hc-reveal" key={"intro-" + active}>
          <p>{cat.desc}</p>
          <div className="meta">
            {cat.en.toUpperCase()}<br />
            {cat.items.length} ITEMS · UPDATED 2026.04
          </div>
        </div>

        <div className="hc-drinks-grid" key={"grid-" + active}>
          {cat.items.map((d, i) => {
            const iced = isIcedCat(active);
            return (
              <article className="hc-drink-card hc-reveal in" key={d.name} style={{ transitionDelay: `${i * 60}ms` }}>
                {d.recommend && <div className="hc-drink-rec">★ 店主推薦</div>}
                <div className="hc-drink-cup">
                  {d.img ?
                  <img src={d.img} alt={d.name} className="hc-drink-illust" loading="lazy" /> :
                  iced ?
                  <IcedCup tone={["#6B3F22", "#8A5430", "#A36038"][i % 3]} label={d.name} /> :
                  <TakeawayCup tone={toneFor(active, i)} size={d.priceL ? "L" : "M"} label={d.name} />
                  }
                </div>
                <div className="hc-drink-num">N°{String(i + 1).padStart(2, "0")} · {cat.en}</div>
                <h3 className="hc-drink-name">{d.name}</h3>
                <div className="hc-drink-en">{d.sub} · {d.en}</div>
                {d.roast && d.roast !== "—" &&
                <div className="hc-drink-roast">{d.roast}</div>
                }
                <div className="hc-drink-notes">
                  {d.notes.map((n) => <span key={n}>{n}</span>)}
                </div>
                <div className="hc-drink-foot">
                  <div className="hc-drink-prices">
                    {d.priceM != null &&
                    <span className="hc-price-pair"><em>M</em><b>{d.priceM}</b></span>
                    }
                    {d.priceL != null &&
                    <span className="hc-price-pair"><em>L</em><b>{d.priceL}</b></span>
                    }
                  </div>
                  <div className="hc-drink-process">NT$</div>
                </div>
              </article>);

          })}
        </div>
      </div>
    </section>);

}

/* ============ CUP SIZES ============ */
function HCCupSizes() {
  const sizes = [
  { code: "S", ml: "240ml", note: "濃縮・小品", h: 110, color: "#4A2C1A" },
  { code: "M", ml: "360ml", note: "經典標準杯", h: 140, color: "#B8753A" },
  { code: "L", ml: "480ml", note: "長飲・冰飲", h: 170, color: "#D89A5C" }];

  return (
    <section id="sizes" className="hc-sizes">
      <div className="hc-container">
        <div className="hc-section-head hc-reveal">
          <div className="label">— 03 / SIZES</div>
          <h2>選一個<em>剛剛好</em>的<br />帶走份量。</h2>
        </div>
        <div className="hc-sizes-grid">
          {sizes.map((s, i) =>
          <div className="hc-size-card hc-reveal" key={s.code} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="hc-size-illust">
                <CupSizeChart label={s.code} h={s.h} color={s.color} />
              </div>
              <div className="hc-size-meta">
                <div className="hc-size-code">{s.code}</div>
                <div className="hc-size-ml">{s.ml}</div>
                <div className="hc-size-note">{s.note}</div>
              </div>
            </div>
          )}
          <div className="hc-size-card hc-size-byo hc-reveal" style={{ transitionDelay: "240ms" }}>
            <div className="hc-size-illust" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
              <div style={{ fontFamily: "var(--hc-display)", fontStyle: "italic", fontSize: 56, color: "var(--hc-brand)" }}>BYO</div>
            </div>
            <div className="hc-size-meta">
              <div className="hc-size-code">自備杯</div>
              <div className="hc-size-ml">— 10 元</div>
              <div className="hc-size-note">給地球一點顏色看看</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============ VISIT ============ */
function HCVisit() {
  return (
    <section id="visit" className="hc-visit">
      <div className="hc-container">
        <div className="hc-section-head hc-reveal">
          <div className="label">— 04 / VISIT</div>
          <h2>路過的時候，<br /><em>順手帶一杯</em>。</h2>
        </div>
        <div className="hc-visit-grid">
          <div className="hc-visit-info hc-reveal">
            <dl>
              <dt>ADDRESS</dt>
              <dd>台北市萬華區康定路 330 號<br /><span style={{ opacity: 0.6, fontSize: 14 }}>捷運龍山寺站 步行 8 分鐘</span></dd>
              <dt>HOURS</dt>
              <dd>
                <div className="hc-visit-hours">
                  <div>MON–SUN</div><div>07:00 — 16:00</div>
                  <div>每日</div><div>歡迎來坐坐</div>
                </div>
              </dd>
              <dt>CONTACT</dt>
              <dd>homecolor330@home-color.com</dd>
              <dt>FORMAT</dt>
              <dd>外帶外送<br /><span style={{ opacity: 0.6, fontSize: 14 }}>附設等待區・無內用座位</span></dd>
            </dl>
            <div className="hc-visit-cta">
              <a className="hc-btn hc-btn-primary" href={HC_LINKS.maps} target="_blank" rel="noreferrer">Google Maps →</a>
              <a className="hc-btn hc-btn-ghost" href={HC_LINKS.mail}>寄信給我們</a>
            </div>
          </div>
          <a className="hc-visit-img hc-storefront-card hc-reveal" href={HC_LINKS.maps} target="_blank" rel="noreferrer" aria-label="在 Google Maps 開啟 Home Color 康定路 330 號">
            <img src={HC_ASSETS.storefrontVisit} alt="Home Color 康定路 330 號門市" loading="lazy" />
            <span className="hc-storefront-num">N°26</span>
            <span className="hc-placeholder-tag">康定路 330 號 · GOOGLE MAPS →</span>
          </a>
        </div>

        <div className="hc-waiting hc-reveal">
          <div className="hc-waiting-img">
            <img src={HC_ASSETS.waitingArea} alt="Home Color 等待區・木質暖光與長椅" loading="lazy" />
            <span className="hc-waiting-tag">SCENE — REAL WAITING AREA</span>
          </div>
          <div className="hc-waiting-text">
            <div className="label">— WAITING SPACE</div>
            <h3>外帶之外，<br />留一張椅子給你。</h3>
            <p>
              店內附設小型等待區，給點完餐想稍坐片刻、或是在等沖的你。
              我們希望你即使是來外帶，
              也能有一個短暫安放自己的地方。
            </p>
            <div className="hc-waiting-pills">
              <span>WOOD INTERIOR</span>
              <span>WARM LIGHTING</span>
              <span>4 SEATS</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============ NEWS ============ */
function HCNews() {
  return (
    <section id="news">
      <div className="hc-container">
        <div className="hc-section-head hc-reveal">
          <div className="label">— 05 / JOURNAL</div>
          <h2>最新<em>消息</em></h2>
        </div>
        <div className="hc-news-list">
          {HC_NEWS.map((n, i) =>
          <article className="hc-news-row hc-reveal" key={i} style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="hc-news-date">{n.date}</div>
              <div className="hc-news-tag">{n.tag}</div>
              <div className="hc-news-title">
                {n.title}
                <small>{n.excerpt}</small>
              </div>
              <div className="hc-news-arrow">→</div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ============ FOOTER ============ */
function HCFooter() {
  return (
    <footer className="hc-footer">
      <div className="hc-container">
        <div className="hc-footer-grid">
          <div>
            <div className="hc-footer-brand">
              <img src={HC_ASSETS.logo} alt="Home Color" />
              <p>把家的溫度，<br />倒進你的紙杯裡。</p>
            </div>
          </div>
          <div>
            <h4>EXPLORE</h4>
            <ul>
              <li><a href="#about">關於我們</a></li>
              <li><a href="#drinks">飲品菜單</a></li>
              <li><a href="#visit">門市資訊</a></li>
              <li><a href="#news">最新消息</a></li>
            </ul>
          </div>
          <div>
            <h4>VISIT</h4>
            <ul>
              <li>台北市萬華區康定路 330 號</li>
              <li>週一 — 週日</li>
              <li>07:00 — 16:00</li>
              <li>外帶外送・附設等待區</li>
            </ul>
          </div>
          <div>
            <h4>CONTACT</h4>
            <ul>
              <li><a href={HC_LINKS.mail}>homecolor330@home-color.com</a></li>
              <li><a href={HC_LINKS.instagram}>Instagram @homecolor.330</a></li>
              <li><a href={HC_LINKS.facebook}>Facebook / Home Color</a></li>
              <li><a href={HC_LINKS.line}>LINE 官方帳號</a></li>
            </ul>
          </div>
        </div>
        <div className="hc-footer-bottom">
          <div>© 2026 HOME COLOR COFFEE — ALL RIGHTS RESERVED</div>
          <div>DESIGNED WITH CARE · TAIPEI</div>
        </div>
      </div>
    </footer>);

}

function HCOnlineOrderFab() {
  return (
    <a className="hc-order-fab" href={HC_LINKS.onlineOrder} aria-label="線上點餐">
      <span className="hc-order-fab-icon">杯</span>
      <span>
        <strong>線上點餐</strong>
        <small>COMING SOON</small>
      </span>
    </a>);

}

Object.assign(window, { HCNav, HCHero, HCMarquee, HCAbout, HCDrinks, HCCupSizes, HCVisit, HCNews, HCFooter, HCOnlineOrderFab });