// Footer — full brand footer with modals

function FooterModal({ title, onClose, children }) {
  return (
    <div style={{ position:"fixed", inset:0, background:"rgba(14,13,17,0.55)", zIndex:300, display:"flex", alignItems:"center", justifyContent:"center", padding:24 }}
      onClick={e => e.target === e.currentTarget && onClose()}>
      <div style={{ background:"#fff", borderRadius:20, padding:"32px", width:540, maxHeight:"80vh", overflowY:"auto", boxShadow:"0 8px 32px rgba(14,13,17,0.14)" }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:20 }}>
          <h2 style={{ margin:0, fontFamily:"Inter, sans-serif", fontWeight:900, fontSize:22, letterSpacing:"-0.02em", color:"#0E0D11" }}>{title}</h2>
          <button onClick={onClose} style={{ background:"transparent", border:"1px solid #E8E7E9", borderRadius:8, width:32, height:32, cursor:"pointer", fontSize:18, color:"#8A8990" }}>×</button>
        </div>
        <div style={{ fontFamily:"Inter, sans-serif", fontSize:14, color:"#4A4852", lineHeight:1.7 }}>{children}</div>
      </div>
    </div>
  );
}

const MODALS = {
  about: {
    title: "Бидний тухай",
    body: (
      <div>
        <p><b>N9NE</b> — Монголын Gen Z-ийн Y2K, retro-tech брэнд. Бид MP4 тоглуулагч, iPod, vintage iPhone болон бусад ретро технологийг хайрладаг хүмүүст зориулж ажилладаг.</p>
        <p>Mainstream биш. AirPods биш. <b>Wired only.</b></p>
        <p>Манай брэнд нь зүгээр нэг бараа зарах газар биш — <b>tribe-ийн гишүүнчлэл</b>. Та nine.ub9-д захиалга хийсэн тэр мөчөөс эхлэн манай хамт олны нэг хэсэг болно.</p>
        <p style={{ fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.15em", textTransform:"uppercase", color:"#8A8990" }}>UPGRADE YOUR LIFESTYLE · SINCE 2024</p>
      </div>
    ),
  },
  branch: {
    title: "Салбарын мэдээлэл",
    body: (
      <div>
        <p><b>Үндсэн салбар — Улаанбаатар</b></p>
        <p>Хаяг: Улаанбаатар хот, Сүхбаатар дүүрэг<br/>Ажлын цаг: Даваа–Бямба 10:00–20:00</p>
        <p><b>Утас:</b> <a href="tel:55161160" style={{ color:"#0E0D11" }}>55-16-11-60</a></p>
        <p><b>И-мэйл:</b> <a href="mailto:n9ne.ub@gmail.com" style={{ color:"#0E0D11" }}>n9ne.ub@gmail.com</a></p>
        <p><b>Instagram:</b> <a href="https://instagram.com/nine.ub9" target="_blank" style={{ color:"#0E0D11" }}>@nine.ub9</a></p>
        <p style={{ fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase", color:"#8A8990" }}>Орон нутгийн хүргэлт боломжтой · 3–5 ажлын өдөр</p>
      </div>
    ),
  },
  terms: {
    title: "Үйлчилгээний нөхцөл",
    body: (
      <div>
        <p><b>1. Захиалга</b><br/>Захиалга хийсний дараа бид 24 цагийн дотор баталгаажуулах холбоо барина. Бараа нь тоо хязгаартай тул хурдан захиалах нь зүйтэй.</p>
        <p><b>2. Баталгаа</b><br/>Бүх бараа 30 хоногийн сэтгэл ханамжийн баталгаатай. Техникийн гэмтэл гарсан тохиолдолд солих эсвэл буцаан авна.</p>
        <p><b>3. Буцаалт</b><br/>-50% болон хямдралтай бараа буцаалт хийгдэхгүй. Бусад бараанд 7 хоногийн дотор буцаах боломжтой.</p>
        <p><b>4. Хариуцлага</b><br/>N9NE нь хүргэлтийн явцад гарсан гэмтлийн хариуцлагыг хүлээхгүй. Хүргэлтийн компанийн даатгал хамаарна.</p>
      </div>
    ),
  },
  delivery: {
    title: "Хүргэлтийн нөхцөл",
    body: (
      <div>
        <p><b>Улаанбаатар хот:</b><br/>Бүх захиалгад үнэгүй хүргэлт.</p>
        <p><b>Хүргэлтийн хугацаа (УБ):</b><br/>Захиалга баталгаажсан өдрөөс хойш 1–2 ажлын өдөр.</p>
        <p><b>Орон нутаг:</b><br/>Улсын шуудан болон хувийн тээврийн компаниар хүргэнэ. Хугацаа: 3–5 ажлын өдөр.<br/>Бүх захиалгад үнэгүй хүргэлт.</p>
        <p><b>Pickup:</b><br/>Манай салбараас өөрийн биеэр авч болно. Үнэгүй.</p>
      </div>
    ),
  },
  payment: {
    title: "Төлбөрийн нөхцөл",
    body: (
      <div>
        <p><b>Бэлнээр:</b><br/>Хүргэлтийн үед жолоочид бэлнээр төлнө. Орон нутгийн захиалгад урьдчилгаа шаардагдана.</p>
        <p><b>Дансаар шилжүүлэх:</b><br/>M Bank: MN68003900(8734122395)<br/>Хүлээн авагч: MUNKHJARGAL<br/>Гүйлгээний утга: Таны нэр + утасны дугаар</p>
        <p><b>QPay / Social Pay:</b><br/>Удахгүй нэмэгдэнэ.</p>
        <p style={{ fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase", color:"#8A8990" }}>Урьдчилгаа төлбөр хийсний дараа захиалга баталгаажна.</p>
      </div>
    ),
  },
  contact: {
    title: "Холбоо барих",
    body: (
      <div>
        <p style={{ fontFamily:"JetBrains Mono, monospace", fontSize:13, letterSpacing:"0.06em", color:"#0E0D11" }}>📞 <a href="tel:55161160" style={{ color:"#0E0D11", fontWeight:700 }}>55-16-11-60</a></p>
        <p style={{ fontFamily:"JetBrains Mono, monospace", fontSize:13, letterSpacing:"0.06em", color:"#0E0D11" }}>✉ <a href="mailto:n9ne.ub@gmail.com" style={{ color:"#0E0D11", fontWeight:700 }}>n9ne.ub@gmail.com</a></p>
        <p style={{ fontFamily:"JetBrains Mono, monospace", fontSize:13, letterSpacing:"0.06em", color:"#0E0D11" }}>📸 <a href="https://instagram.com/nine.ub9" target="_blank" style={{ color:"#0E0D11", fontWeight:700 }}>@nine.ub9</a></p>
        <p>Даваа–Бямба · 10:00–20:00<br/>Лхагва гариг хагас өдрөөр ажиллана.</p>
        <p style={{ fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase", color:"#8A8990" }}>Хариу өгөх хугацаа: 2–4 цаг (ажлын цагаар)</p>
      </div>
    ),
  },
};

function Footer() {
  const [modal, setModal] = React.useState(null);

  const link = (key, label) => (
    <a style={ft.link} onClick={() => setModal(key)}>{label}</a>
  );

  return (
    <footer style={ft.bar}>
      {modal && MODALS[modal] && (
        <FooterModal title={MODALS[modal].title} onClose={() => setModal(null)}>
          {MODALS[modal].body}
        </FooterModal>
      )}

      <div style={ft.inner}>
        {/* Brand */}
        <div style={ft.col1}>
          <div style={ft.script}>nine.ub<span style={ft.nine}>9</span></div>
          <p style={ft.lead}>UPGRADE YOUR LIFESTYLE.<br/> MP4 · iPod <br/>Улаанбаатар, Монгол.</p>
          <div style={ft.socials}>
            <a href="https://instagram.com/nine.ub9" target="_blank" style={ft.social}>
              <Ic.Insta size={16}/> @nine.ub9
            </a>
          </div>
          <div style={{ marginTop:16, display:"flex", flexDirection:"column", gap:6 }}>
            <a href="tel:55161160" style={{ ...ft.social, fontSize:13 }}>📞 5516-1160</a>
            <a href="mailto:n9ne.ub@gmail.com" style={{ ...ft.social, fontSize:13 }}><span style={{fontSize:18}}>✉</span> n9ne.ub@gmail.com</a>
          </div>
        </div>

        {/* Info */}
        <div style={ft.col}>
          <span style={ft.lbl}>МЭДЭЭЛЭЛ</span>
          {link("about",    "Бидний тухай")}
          {link("delivery", "Хүргэлтийн нөхцөл")}
          {link("payment",  "Төлбөрийн нөхцөл")}
        </div>

        {/* Contact */}
        <div style={ft.col}>
        </div>
      </div>

      <div style={ft.giant}>NINE · UB · MMXXVI · NOT FOR EVERYONE</div>

      <div style={ft.foot}>
        <span>© 2026 N9NE. Бүх эрх хуулиар хамгаалагдсан.</span>
      </div>

      <div style={ft.verified}>
        <div style={ft.verifiedBadge}>
          <div style={ft.verifiedIcon}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0E0D11" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
              <polyline points="9 12 11 14 15 10"/>
            </svg>
          </div>
          <div>
            <div style={ft.verifiedTitle}>БАТАЛГААЖСАН</div>
            <div style={ft.verifiedSub}>Улсын бүртгэлээр баталгаажсан</div>
          </div>
        </div>
      </div>
    </footer>
  );
}

const ft = {
  bar: { background:"#1F1D23", color:"#fff", padding:"56px 0 0", marginTop:0 },
  inner: { maxWidth:1280, margin:"0 auto", padding:"0 24px", display:"grid", gridTemplateColumns:"1.4fr 1fr 1fr 1.2fr", gap:36 },
  col1: { display:"flex", flexDirection:"column", gap:10 },
  script: { fontFamily:"Caveat, cursive", fontWeight:700, fontSize:54, lineHeight:1, color:"#fff" },
  nine: { color:"#FF3B6F", fontSize:22, verticalAlign:"super" },
  lead: { margin:0, fontFamily:"Inter, sans-serif", fontSize:14, color:"rgba(255,255,255,0.7)", lineHeight:1.5 },
  socials: { marginTop:4, display:"flex", flexDirection:"column", gap:6 },
  social: { display:"inline-flex", alignItems:"center", gap:8, color:"#fff", fontFamily:"Inter, sans-serif", fontSize:14, fontWeight:500, cursor:"pointer", textDecoration:"none" },
  col: { display:"flex", flexDirection:"column", gap:10 },
  lbl: { fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.18em", textTransform:"uppercase", color:"rgba(255,255,255,0.45)" },
  link: { color:"rgba(255,255,255,0.85)", fontFamily:"Inter, sans-serif", fontSize:14, textDecoration:"none", cursor:"pointer" },
  note: { margin:0, fontFamily:"Inter, sans-serif", fontSize:13, color:"rgba(255,255,255,0.7)", lineHeight:1.5 },
  subscribe: { display:"flex", marginTop:6, border:"1px solid rgba(255,255,255,0.2)", borderRadius:12, overflow:"hidden" },
  subInput: { flex:1, background:"transparent", border:"none", outline:"none", padding:"12px 14px", color:"#fff", fontFamily:"Inter, sans-serif", fontSize:13 },
  subBtn: { background:"#FFEC42", color:"#0E0D11", border:"none", padding:"0 16px", cursor:"pointer" },
  giant: {
    textAlign:"center", padding:"60px 0 30px",
    fontFamily:"Inter, sans-serif", fontWeight:900, fontSize:"clamp(48px, 10vw, 160px)",
    letterSpacing:"-0.045em", lineHeight:0.95,
    background:"linear-gradient(180deg,#FFFFFF 0%,#C9C8CE 50%,#6E6D74 78%,#FFFFFF 100%)",
    WebkitBackgroundClip:"text", backgroundClip:"text", color:"transparent",
  },
  foot: { borderTop:"1px solid rgba(255,255,255,0.1)", padding:"18px 24px", display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:12, fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.15em", textTransform:"uppercase", color:"rgba(255,255,255,0.4)" },
  footLink: { color:"rgba(255,255,255,0.4)", textDecoration:"none", cursor:"pointer" },
  verified: { background:"#0E0D11", padding:"16px 24px", display:"flex", justifyContent:"center" },
  verifiedBadge: { display:"inline-flex", alignItems:"center", gap:12, background:"#1F1D23", border:"1px solid rgba(255,236,66,0.3)", borderRadius:12, padding:"10px 18px" },
  verifiedIcon: { width:36, height:36, background:"#45e2c8", borderRadius:8, display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0 },
  verifiedTitle: { fontFamily:"JetBrains Mono, monospace", fontWeight:700, fontSize:11, letterSpacing:"0.14em", textTransform:"uppercase", color:"#42fff9" },
  verifiedSub: { fontFamily:"Inter, sans-serif", fontSize:12, color:"rgba(255,255,255,0.5)", marginTop:2 },
};

window.Footer = Footer;