const { useState, useEffect, useRef } = React;

/* -------- ICONS -------- */
const IconInstagram = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...props}>
    <rect x="3" y="3" width="18" height="18" rx="5" />
    <circle cx="12" cy="12" r="4" />
    <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" />
  </svg>
);
const IconFacebook = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...props}>
    <path d="M14 8h2.5V5H14c-2 0-3.5 1.4-3.5 3.5V11H8v3h2.5v7H14v-7h2.4l.6-3H14V8.6c0-.4.3-.6.7-.6Z" />
  </svg>
);
const IconPhone = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...props}>
    <path d="M5 4h3l1.5 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 1.5V17a2 2 0 0 1-2 2A14 14 0 0 1 3 5a2 2 0 0 1 2-1Z" />
  </svg>
);
const IconMessage = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...props}>
    <path d="M4 5h16v11H8l-4 4Z" />
  </svg>
);
const IconPin = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...props}>
    <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12Z" />
    <circle cx="12" cy="10" r="2.5" />
  </svg>
);

/* -------- NAV -------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const handle = (id) => (e) => {
    e.preventDefault();
    setOpen(false);
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
    <nav className={"nav " + (scrolled ? "scrolled" : "") + (open ? " menu-open" : "")}>
      <a href="#home" className="nav-brand" onClick={handle("home")}>
        <img src="assets/aces-logo.png" alt="Ace's Jewelry — luxury gold jewelry boutique in Brownsville, TX" className="nav-logo" />
        <div className="nav-brand-text">
          <span className="tag">Brownsville · RGV</span>
        </div>
      </a>
      <div className="nav-links">
        <a className="link essential" href="#home" onClick={handle("home")}>Home</a>
        <a className="link essential" href="#collection" onClick={handle("collection")}>Collection</a>
        <a className="link" href="#about" onClick={handle("about")}>About</a>
        <a className="link" href="#contact" onClick={handle("contact")}>Contact</a>
        <span className="nav-divider" />
        <a className="nav-social" href="https://www.instagram.com/acesjewelryy" target="_blank" rel="noreferrer" aria-label="Instagram"><IconInstagram /></a>
        <a className="nav-social" href="https://www.facebook.com/p/Aces-Jewelry-61554190379513/" target="_blank" rel="noreferrer" aria-label="Facebook"><IconFacebook /></a>
      </div>
      <button
        className={"nav-burger " + (open ? "open" : "")}
        onClick={() => setOpen((o) => !o)}
        aria-label={open ? "Close menu" : "Open menu"}
        aria-expanded={open}
      >
        <span /><span /><span />
      </button>
    </nav>

    <div className={"mobile-drawer " + (open ? "open" : "")} aria-hidden={!open}>
      <div className="mobile-drawer-inner">
        <a href="#home" onClick={handle("home")}>Home</a>
        <a href="#collection" onClick={handle("collection")}>Collection</a>
        <a href="#about" onClick={handle("about")}>About</a>
        <a href="#contact" onClick={handle("contact")}>Contact</a>
        <div className="mobile-drawer-rule" />
        <a href="tel:+19562431558" className="mobile-drawer-cta" onClick={() => setOpen(false)}>Call (956) 243‑1558</a>
        <div className="mobile-drawer-social">
          <a href="https://www.instagram.com/acesjewelryy" target="_blank" rel="noreferrer" aria-label="Instagram"><IconInstagram /></a>
          <a href="https://www.facebook.com/p/Aces-Jewelry-61554190379513/" target="_blank" rel="noreferrer" aria-label="Facebook"><IconFacebook /></a>
        </div>
      </div>
    </div>
    </>
  );
}

/* -------- HERO -------- */
const VIDEOS = [
  { src: "assets/diamondcross.mp4", label: "14K gold diamond cross pendant" },
  { src: "assets/heartpendant.mp4?v=3", label: "14K gold heart pendant locket" },
  { src: "assets/moonnecklace.mp4", label: "14K gold crescent moon necklace" },
  { src: "assets/hoopearrings.mp4", label: "14K gold bamboo hoop earrings" },
];

function Hero() {
  const [idx, setIdx] = useState(0);
  const refs = useRef([]);

  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % VIDEOS.length), 7000);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    refs.current.forEach((v, i) => {
      if (!v) return;
      if (i === idx) {
        v.currentTime = 0;
        v.play().catch(() => {});
      }
    });
  }, [idx]);

  const handle = (id) => (e) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <section id="home" className="hero">
      <div className="hero-videos">
        {VIDEOS.map((v, i) => (
          <video
            key={v.src}
            ref={(el) => (refs.current[i] = el)}
            className={i === idx ? "active" : ""}
            src={v.src}
            aria-label={v.label}
            autoPlay
            muted
            loop
            playsInline
            preload="auto"
          />
        ))}
      </div>
      <div className="hero-overlay" />
      <div className="hero-content">
        <div className="hero-eyebrow"><span className="dash" /> Est. Brownsville · Rio Grande Valley <span className="dash" /></div>
        <h1>Exclusively Sourced<br /><em>Luxury Gold</em></h1>
        <p className="hero-sub">Hand-selected pieces from trusted partners across Texas. Custom sourcing, repairs &amp; cleaning available in Brownsville, RGV.</p>
        <div className="hero-ctas">
          <a className="btn" href="#collection" onClick={handle("collection")}>Shop the Collection <span className="arrow" /></a>
          <a className="btn btn-ghost" href="#contact" onClick={handle("contact")}>Become a Wholesale Partner <span className="arrow" /></a>
        </div>
      </div>

      <div className="hero-dots">
        {VIDEOS.map((_, i) => (
          <div
            key={i}
            className={"hero-dot " + (i === idx ? "active" : "")}
            onClick={() => setIdx(i)}
          />
        ))}
      </div>

      <div className="hero-scroll">Scroll · 956.243.1558</div>
    </section>
  );
}

/* -------- COLLECTION -------- */
const PIECES = [
  { cls: "c1 ph p1", cat: "Pendants", name: "Diamond Cross", meta: "14K Gold · Iced", badge: "Signature", idx: "01" },
  { cls: "c2 ph p2", cat: "Earrings", name: "Bamboo Hoops", meta: "10K · 2.5\"", badge: "Best Seller", idx: "02" },
  { cls: "c3 ph p3", cat: "Pendants", name: "Heart Locket", meta: "14K · Engravable", badge: "New", idx: "03" },
  { cls: "c4 ph p4", cat: "Necklaces", name: "Crescent Moon", meta: "14K Cuban Link", badge: null, idx: "04" },
  { cls: "c5 ph p5", cat: "Chains", name: "Cuban Link", meta: "10–14K · 18\"–30\"", badge: "Sourced", idx: "05" },
  { cls: "c6 ph p6", cat: "Rings", name: "Signet Ace", meta: "14K · Hand-Selected", badge: null, idx: "06" },
];

function Collection() {
  return (
    <section id="collection" className="collection">
      <div className="section-head">
        <div className="eyebrow">The Collection</div>
        <h2 className="section-title">Heirlooms in <em>solid gold</em>, hand-selected for the way you wear them.</h2>
        <p className="section-lede">From everyday classics to statement pieces, every item is exclusively sourced from our trusted partners across Texas — claimed for our vault, then yours. Inquire about availability, sizing, and special requests.</p>
      </div>
      <div className="collection-grid">
        {PIECES.map((p, i) => (
          <article key={i} className={"card " + p.cls.split(" ")[0]} aria-label={`${p.name} — ${p.cat}, ${p.meta}`}>
            <div className={"ph " + p.cls.split(" ").slice(1).join(" ")} role="img" aria-label={`${p.name} — ${p.meta} ${p.cat.toLowerCase()} from Ace's Jewelry`}>
              <div className="sheen" style={{ "--sx": (20 + (i*13)%60)+"%", "--sy": (30 + (i*23)%50)+"%" }} />
              <div className="object"><span>{p.name} — Photo</span></div>
            </div>
            <div className="veil" />
            {p.badge && <div className="badge">{p.badge}</div>}
            <div className="index">— {p.idx}</div>
            <div className="meta">
              <div className="meta-l">
                <div className="cat">{p.cat}</div>
                <h3 className="name">{p.name.split(" ").map((w, j, arr) => j === arr.length-1 ? <em key={j}>{w}</em> : w + " ")}</h3>
              </div>
              <div className="meta-r">{p.meta}</div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* -------- ABOUT -------- */
function About() {
  return (
    <section id="about" className="about">
      <div className="about-wrap">
        <div className="about-visual">
          <div className="logo-mark">
            <img src="assets/aces-logo.png" alt="Ace's Jewelry gold ring and diamond logo mark" />
          </div>
          <div className="stamp">
            <span>Curated · Sourced</span>
            Brownsville, TX
          </div>
        </div>
        <div className="about-copy">
          <div className="eyebrow">Our Story</div>
          <h2>Real luxury gold, <em>without leaving the Valley.</em></h2>
          <p><strong>Ace's Jewelry was built on one simple belief</strong> — the RGV deserves access to real luxury gold without leaving home. We hand-select every piece from our trusted network of partners across Texas, including McAllen and Houston, so you never have to compromise on quality or style.</p>
          <p>Can't find the chain you're looking for? <strong>We'll source it.</strong> Need a repair or cleaning? <strong>We've got you.</strong> Every piece we carry has been personally chosen for its craftsmanship, quality, and beauty — because your gold should be nothing less than perfect.</p>
          <p>All sales are final. Why? Because every piece we bring into our collection is exclusively sourced and claimed — once it leaves our vault, it's yours. <strong>We don't recirculate luxury.</strong></p>
          <div className="about-stats">
            <div className="about-stat">
              <div className="num">RGV</div>
              <div className="lbl">Born &amp; Based</div>
            </div>
            <div className="about-stat">
              <div className="num">TX</div>
              <div className="lbl">Sourced Statewide</div>
            </div>
            <div className="about-stat">
              <div className="num">1‑of‑1</div>
              <div className="lbl">Claimed Pieces</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- CONTACT -------- */
function Contact() {
  return (
    <section id="contact" className="contact">
      <div className="contact-inner">
        <div className="section-head">
          <div className="eyebrow">Get in Touch</div>
          <h2 className="section-title">Stop by, slide in, <em>or give us a ring.</em></h2>
          <p className="section-lede">We answer every call, message, and DM personally — usually same day. Sourcing requests, repairs, and cleanings welcome.</p>
        </div>

        <div className="contact-grid">
          <a className="contact-card primary" href="tel:+19562431558">
            <div className="icon"><IconPhone /></div>
            <div className="label">Call or Text</div>
            <div className="value">(956) 243‑1558</div>
            <div className="desc">Talk to us directly. Sourcing requests, sizing, repairs — we'll text photos back the same day.</div>
            <div className="cta">Tap to call <span className="arrow" /></div>
          </a>

          <a className="contact-card" href="https://www.instagram.com/acesjewelryy" target="_blank" rel="noreferrer">
            <div className="icon"><IconInstagram /></div>
            <div className="label">Instagram</div>
            <div className="value">@acesjewelryy</div>
            <div className="desc">New arrivals, exclusive drops, and pieces freshly claimed from our partners. DMs open.</div>
            <div className="cta">Follow on IG <span className="arrow" /></div>
          </a>

          <a className="contact-card" href="https://www.facebook.com/p/Aces-Jewelry-61554190379513/" target="_blank" rel="noreferrer">
            <div className="icon"><IconFacebook /></div>
            <div className="label">Facebook</div>
            <div className="value">Ace's Jewelry</div>
            <div className="desc">Reviews from across the Valley, store updates, and our holiday hours. Message us anytime.</div>
            <div className="cta">Visit our page <span className="arrow" /></div>
          </a>
        </div>

        <div className="contact-hours">
          <div>
            <h4>Visit the Shop</h4>
            <div className="addr-line">
              Downtown Brownsville<br />
              Cameron County, TX
            </div>
            <div className="addr-sub">
              <IconPin style={{ width: 12, height: 12, display: "inline", verticalAlign: "middle", marginRight: 8, color: "var(--gold)" }} />
              Walk‑ins welcome — call ahead for sourcing &amp; private viewings
            </div>
          </div>
          <div>
            <h4>Hours</h4>
            <div className="row"><span className="day">Monday – Friday</span><span className="hrs">10:00 AM — 7:00 PM</span></div>
            <div className="row"><span className="day">Saturday</span><span className="hrs">10:00 AM — 8:00 PM</span></div>
            <div className="row"><span className="day">Sunday</span><span className="hrs">By Appointment</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- FOOTER -------- */
function Footer() {
  const handle = (id) => (e) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <footer>
      <div className="footer-top">
        <div className="footer-brand">
          <img src="assets/aces-logo.png" alt="Ace's Jewelry — Brownsville, TX" className="footer-logo" />
          <div className="tagline">Curated luxury gold for the Rio Grande Valley — exclusively sourced, never recirculated.</div>
        </div>
        <div className="footer-col">
          <h5>Explore</h5>
          <ul>
            <li><a href="#home" onClick={handle("home")}>Home</a></li>
            <li><a href="#collection" onClick={handle("collection")}>Collection</a></li>
            <li><a href="#about" onClick={handle("about")}>About</a></li>
            <li><a href="#contact" onClick={handle("contact")}>Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Connect</h5>
          <ul>
            <li><a href="tel:+19562431558">(956) 243‑1558</a></li>
            <li><a href="https://www.instagram.com/acesjewelryy" target="_blank" rel="noreferrer">@acesjewelryy</a></li>
            <li><a href="https://www.facebook.com/p/Aces-Jewelry-61554190379513/" target="_blank" rel="noreferrer">Facebook</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>The Vault</h5>
          <p>
            Brownsville, TX<br />
            Cameron County · RGV<br />
            <br />
            Mon – Fri · 10–7<br />
            Saturday · 10–8<br />
            Sunday · By Appt.
          </p>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2025 Ace's Jewelry · All Rights Reserved</span>
        <span className="dotted">
          Solid Gold <span className="dot" /> Hand Selected <span className="dot" /> RGV Curated
        </span>
        <span>All sales final · Site by the vault</span>
      </div>
    </footer>
  );
}

/* -------- APP -------- */
function App() {
  return (
    <>
      <Nav />
      <Hero />
      <Collection />
      <About />
      <Contact />
      <Footer />
    </>
  );
}

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