/* Contact + Footer */
function Contact() {
  // NOTE: contact handles below are PLACEHOLDERS — replace with the real ones.
  const channels = [
    ["mail", "Email", "hello@aromaticpet.tw", "mailto:hello@aromaticpet.tw"],
    ["message-circle", "LINE", "@aromaticpet", "#"],
    ["instagram", "Instagram", "@aromaticpet", "#"],
  ];
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="contact reveal">
          <span className="eyebrow" style={{ color: "#cbbfa9" }}>Contact · 聯絡我們</span>
          <h2>想為毛孩挑一支配方，<br />或有任何想說的話？</h2>
          <p>留言給我們，會由真人溫柔回覆你。也歡迎在這些地方找到抱毛。</p>
          <div className="contact-rows">
            {channels.map(([icon, label, value, href]) => (
              <a className="contact-card" href={href} key={label}>
                <span className="cc-ic"><Icon name={icon} className="lc-24" /></span>
                <span className="cc-text">
                  <span className="cc-label">{label}</span>
                  <span className="cc-value">{value}</span>
                </span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  // NOTE: 社群連結、信箱、LINE/IG 帳號為 PLACEHOLDER，請換成真實資料。
  const socials = [
    ["instagram", "Instagram", "#"],
    ["message-circle", "LINE", "#"],
    ["mail", "Email", "mailto:hello@aromaticpet.tw"],
  ];
  const cols = [
    ["商品", [
      ["乾洗澡慕斯", "#mousse"],
      ["洗毛精", "#shampoo"],
      ["天然成分", "#ingredients"],
      ["使用方式", "#how"],
    ]],
    ["聯絡", [
      ["hello@aromaticpet.tw", "mailto:hello@aromaticpet.tw"],
      ["LINE　@aromaticpet", "#"],
      ["Instagram　@aromaticpet", "#"],
    ]],
  ];
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="brand" style={{ gap: 12 }}>
              <img src="assets/logo.png" alt="" style={{ width: 40, height: 40 }} />
              <span className="cn">抱毛 Aromatic Pet</span>
            </div>
            <p>台灣製造的寵物天然清潔保養品牌，走精油植萃、溫柔療癒的路線，陪你一起好好照顧牠。</p>
            <div className="footer-social">
              {socials.map(([icon, label, href]) => (
                <a className="soc" href={href} key={label} aria-label={label}>
                  <Icon name={icon} className="lc-16" />
                </a>
              ))}
            </div>
          </div>
          {cols.map(([h, items]) => (
            <div className="footer-col" key={h}>
              <h5>{h}</h5>
              {items.map(([label, href]) => (
                <a href={href} key={label}>{label}</a>
              ))}
            </div>
          ))}
        </div>
        <div className="footer-base">
          <span>© 2026 抱毛 Aromatic Pet · 台灣製造</span>
          <nav className="footer-legal">
            <a href="#">隱私權政策</a>
            <a href="#">退換貨說明</a>
          </nav>
          <span>Made gently in Taiwan</span>
        </div>
      </div>
    </footer>
  );
}

window.Contact = Contact;
window.Footer = Footer;