// Nav + Hero
// uses globals: Icon, Phone, LineChat

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className="nav">
      <div className="nav__inner">
        <a href="#" className="nav__brand">
          <img src="design-system/logo-black.svg" alt="AstraYo" />
        </a>
        <div className="nav__links">
          <a href="#features">功能特色</a>
          <a href="#website">一頁式網站</a>
          <a href="#flow">預約流程</a>
          <a href="#pricing">方案價格</a>
          <a href="#faq">常見問題</a>
        </div>
        <button className="nav__hamburger" onClick={() => setOpen(!open)} aria-label="選單">
          <Icon name={open ? "x" : "menu"} size={22} />
        </button>
      </div>
      {open && (
        <div className="nav__mobile-menu">
          <a href="#features" onClick={() => setOpen(false)}>功能特色</a>
          <a href="#website" onClick={() => setOpen(false)}>一頁式網站</a>
          <a href="#flow" onClick={() => setOpen(false)}>預約流程</a>
          <a href="#pricing" onClick={() => setOpen(false)}>方案價格</a>
          <a href="#faq" onClick={() => setOpen(false)}>常見問題</a>
        </div>
      )}
    </nav>
  );
};

const Hero = ({ tagline, dark, lineMockup }) => (
  <section className={`hero ${dark ? "is-dark" : ""}`}>
    <div className="container">
      <div className="hero__grid">
        <div className="hero__copy">
          <div className="eyebrow hero__eyebrow reveal">FOR 美甲・美睫・美容工作室</div>
          <h1 className="h-display reveal reveal--d1">
            {tagline.split("，").map((part, i, arr) => (
              <React.Fragment key={i}>
                {i === arr.length - 1 ? <em>{part}</em> : part}
                {i < arr.length - 1 && <>，<br /></>}
              </React.Fragment>
            ))}
          </h1>
          <p className="lead hero__lead reveal reveal--d2">
            一頁式網站＋LINE 預約系統，一次幫你開好。客人看完作品、價位，馬上就能在 LINE 上選日期、選老師、選服務、下訂金，三分鐘搞定。
          </p>
          <div className="hero__cta reveal reveal--d3">
            <a href="https://line.me/R/ti/p/@656tlwkn" target="_blank" rel="noopener" className="btn btn--primary btn--lg">
              <Icon name="line" size={18} /> 加 LINE 了解更多
            </a>
            <a href="#flow" className="btn btn--ghost btn--lg">
              看預約流程 <Icon name="arrow-right" size={16} />
            </a>
          </div>
          <div className="hero__meta reveal reveal--d4">
<span className="hero__meta-item"><Icon name="check" size={14} /> 14 天免費試用</span>
            <span className="hero__meta-item"><Icon name="check" size={14} /> 串接你現有 LINE 官方帳號</span>
          </div>
        </div>

        {lineMockup && (
          <div className="hero__visual reveal reveal--d2">
            <div className="hero__accent-blob"></div>
            <div className="hero__lime-dot"></div>

            <div className="hero__hint hero__hint--top">
              <span className="dot"></span>
              <span>客人在 LINE 點「預約」</span>
            </div>
            <div className="hero__hint hero__hint--bot">
              <Icon name="check-circle" size={16} style={{ color: "#06C755" }} />
              <span>付款完成・自動提醒</span>
            </div>

            <div className="hero__phone">
              <Phone>
                <LineChat>
                  <div className="line-bubble">
                    您好～歡迎來到 AstraYo Nail<br />
                    請點下方按鈕開始預約 ✨
                  </div>
                  <div className="line-card">
                    <div className="line-card__media">凝膠美甲</div>
                    <div className="line-card__body">
                      <div className="line-card__title">選擇日期與服務</div>
                      <div className="line-card__row">
                        <Icon name="calendar" size={12} />
                        <span>5/30（六）11:00</span>
                      </div>
                      <div className="line-card__row" style={{ marginTop: 4 }}>
                        <Icon name="user" size={12} />
                        <span>指定：Sasha 老師</span>
                      </div>
                      <div className="line-card__btn">開始預約 →</div>
                    </div>
                  </div>
                  <div className="line-bubble line-bubble--me">
                    我要預約 5/30 11:00<br />凝膠＋手部保養
                  </div>
                  <div className="line-bubble__time">09:46</div>
                </LineChat>
              </Phone>
            </div>
          </div>
        )}
      </div>
    </div>
  </section>
);

// Mint trust strip — quick value props (not testimonials, since user said no social proof)
const TrustBar = () => (
  <div className="trust">
    <div className="container">
      <div className="trust__inner">
        <div className="trust__item reveal">
          <span className="num trust__n">3 分鐘</span>
          <span className="trust__l">客人完成預約付款</span>
        </div>
        <div className="trust__divider"></div>
        <div className="trust__item reveal reveal--d1">
          <span className="num trust__n">0 來回</span>
          <span className="trust__l">不用私訊喬時間</span>
        </div>
        <div className="trust__divider"></div>
        <div className="trust__item reveal reveal--d2">
          <span className="num trust__n">24h</span>
          <span className="trust__l">自動提醒・防爽約</span>
        </div>
        <div className="trust__divider"></div>
        <div className="trust__item reveal reveal--d3">
          <span className="num trust__n">$0</span>
          <span className="trust__l">串接你現有官方帳號</span>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { Nav, Hero, TrustBar });