/* Coco Beauty Salon — section components */
const { useState, useEffect, useRef } = React;
const DS = window.CocoBeautySalonDesignSystem_2ddfde || {};
const DSButton = DS.Button;
const C = window.COCO;

/* smooth scroll to id */
function goTo(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: "smooth" });
}

/* A pill CTA built on the DS Button token grammar. Uses DS Button on light
   surfaces; a token-faithful anchor/button variant on dark photography. */
function Cta({ children, variant = "primary", onClick, href, className = "", icon, type = "button" }) {
  const cls = "btn btn-" + variant + " " + className;
  const inner = icon
    ? React.createElement(React.Fragment, null, React.createElement("i", { "data-lucide": icon }), children)
    : children;
  if (href) return <a className={cls} href={href} onClick={onClick}>{inner}</a>;
  return <button className={cls} type={type} onClick={onClick}>{inner}</button>;
}

const NAV_ITEMS = [
  ["Home", "top"], ["Services", "services"], ["Gallery", "gallery"],
  ["About", "signature"], ["Reviews", "reviews"], ["FAQ", "faq"], ["Contact", "contact"]
];

function Nav({ onMenu }) {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (solid ? " solid" : "")}>
      <a className="nav-brand" href="#top" onClick={(e) => { e.preventDefault(); goTo("top"); }}>
        <span className="bn">Coco Beauty Salon</span>
        <span className="bl">Houston, Texas</span>
      </a>
      <div className="nav-links">
        {NAV_ITEMS.map(([label, id]) => (
          <a key={id} href={"#" + id} onClick={(e) => { e.preventDefault(); goTo(id); }}>{label}</a>
        ))}
      </div>
      <div className="nav-right">
        <button className="btn-nav btn" type="button" onClick={() => goTo("booking")}>Book Now</button>
        <button className="hamburger" type="button" aria-label="Open menu" onClick={onMenu}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>
  );
}

function Drawer({ open, onClose }) {
  return (
    <div className={"drawer" + (open ? " open" : "")}>
      <div className="drawer-top">
        <span className="bn">Coco Beauty Salon</span>
        <button className="drawer-close" type="button" aria-label="Close menu" onClick={onClose}>
          <i data-lucide="x" style={{ width: 26, height: 26 }}></i>
        </button>
      </div>
      <div className="drawer-links">
        {NAV_ITEMS.map(([label, id]) => (
          <a key={id} href={"#" + id} onClick={(e) => { e.preventDefault(); onClose(); setTimeout(() => goTo(id), 260); }}>{label}</a>
        ))}
      </div>
      <div className="drawer-foot">
        <Cta variant="primary" onClick={() => { onClose(); setTimeout(() => goTo("booking"), 260); }}>Book Appointment</Cta>
        <div className="drawer-meta">
          {C.business.address1}<br />{C.business.address2}<br />{C.business.phone}
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <header className="hero" id="top">
      <div className="hero-bg"><img src={C.img.hero} alt="Coco Beauty Salon portrait" fetchpriority="high" /></div>
      <div className="hero-inner">
        <div className="eyebrow reveal" style={{ color: "var(--color-primary-on-dark)" }}>Coco Beauty Salon · Houston, Texas</div>
        <h1 className="h-display reveal d1">Beauty, care, and confidence in every detail</h1>
        <p className="lead reveal d2">Professional beauty services in Houston, designed to help every client feel polished, confident, and cared for.</p>
        <div className="hero-cta reveal d3">
          <Cta variant="on-dark" onClick={() => goTo("booking")}>Book Appointment</Cta>
          <Cta variant="ghost-dark" onClick={() => goTo("services")}>View Services</Cta>
        </div>
      </div>
      <div className="hero-scroll" aria-hidden="true">
        <span>Scroll</span><span className="line"></span>
      </div>
    </header>
  );
}

const TRUST_ICONS = ["map-pin", "sparkles", "calendar-heart", "hand-heart"];
function TrustBar() {
  return (
    <section className="trust">
      <div className="trust-grid">
        {C.trust.map((t, i) => (
          <div className="trust-item reveal" style={{ transitionDelay: i * 90 + "ms" }} key={i}><i data-lucide={TRUST_ICONS[i]}></i>{t}</div>
        ))}
      </div>
    </section>
  );
}

function Services() {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="svc-head">
          <div>
            <div className="eyebrow reveal">Our services</div>
            <h2 className="h-lg reveal d1" style={{ maxWidth: "16ch" }}>Every service, considered down to the detail</h2>
          </div>
          <p className="lead reveal d2">A full salon of hair, color, makeup, nails, brows, lashes, and skincare — each tailored to you in a calm, unhurried appointment.</p>
        </div>
        <div className="svc-grid">
          {C.services.map((s, i) => (
            <div className="svc-card reveal" style={{ transitionDelay: (i % 4) * 80 + "ms" }} key={s.name} onClick={() => goTo("booking")}>
              <span className="svc-num">{String(i + 1).padStart(2, "0")}</span>
              <img src={s.img} alt={s.name} loading="lazy" />
              <div className="svc-body">
                <h3>{s.name}</h3>
                <p>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const SIG = [
  ["user-round-check", "Personalized beauty care", "Every appointment starts with a short consultation, so the result is shaped around you — never a template."],
  ["coffee", "A warm, welcoming space", "A calm, unhurried salon where you can exhale. Good light, good company, and a chair that feels like a retreat."],
  ["gem", "Attention to detail", "The finish is where we obsess — the last curl, the clean line, the color that catches the light just right."],
  ["clock", "A calm, appointment-led pace", "We hold the right amount of time for your service, so nothing is rushed and everything is done well."]
];
function Signature() {
  return (
    <section className="section tile-parchment" id="signature">
      <div className="wrap">
        <div className="sig-grid">
          <div className="sig-img reveal"><img src={C.img.signature} alt="The Coco Beauty Salon experience" loading="lazy" /></div>
          <div>
            <div className="eyebrow reveal">The experience</div>
            <h2 className="h-lg reveal d1">Beauty that begins the moment you arrive</h2>
            <p className="lead reveal d2" style={{ marginTop: 18 }}>Coco Beauty Salon is built around one idea: that looking your best should also feel restful. Services designed around the person, in a space that welcomes you.</p>
            <ul className="sig-list">
              {SIG.map(([ic, h, p], i) => (
                <li className="reveal" style={{ transitionDelay: i * 70 + "ms" }} key={h}>
                  <span className="ic"><i data-lucide={ic}></i></span>
                  <div><h4>{h}</h4><p>{p}</p></div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Cinematic() {
  return (
    <section className="cine" id="film">
      <div className="cine-panel" data-parallax>
        <div className="cine-bg"><img src={C.img.cine2} alt="Beauty craft at Coco" loading="lazy" /></div>
        <div className="cine-content">
          <div className="cine-tag reveal">The Coco film</div>
          <div className="big reveal d1">Beauty, unhurried.</div>
          <p className="sub reveal d2">Slow mornings, warm light, and hands that take their time. This is what a visit to Coco feels like.</p>
        </div>
      </div>
      <div className="cine-panel" data-parallax>
        <div className="cine-bg"><img src={C.img.cine3} alt="Soft beauty detail" loading="lazy" /></div>
        <div className="cine-content">
          <div className="big reveal" style={{ marginLeft: "auto", textAlign: "right" }}>Confidence you can feel.</div>
          <p className="sub reveal d1" style={{ marginLeft: "auto", textAlign: "right" }}>From the first consultation to the final finish — a result that looks like you, only more so.</p>
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  return (
    <section className="section" id="gallery">
      <div className="wrap">
        <div className="svc-head">
          <div>
            <div className="eyebrow reveal">Gallery</div>
            <h2 className="h-lg reveal d1">A look at our work</h2>
          </div>
          <p className="lead reveal d2">Hair, color, makeup, nails, brows, lashes, skincare, and bridal beauty — a glimpse of the details we care about.</p>
        </div>
        <div className="gal-grid">
          {C.gallery.map((g, i) => (
            <div className={"gal-item reveal" + (i === 0 || i === 5 ? " tall" : "")} style={{ transitionDelay: (i % 4) * 70 + "ms" }} key={g.label}>
              <img src={g.img} alt={g.label} loading="lazy" />
              <span className="cap">{g.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Prices() {
  return (
    <section className="section tile-dark" id="prices">
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 52 }}>
          <div className="eyebrow reveal">Price preview</div>
          <h2 className="h-lg reveal d1" style={{ color: "var(--color-canvas)" }}>Transparent starting points</h2>
        </div>
        <div className="price-list reveal d1">
          {C.prices.map((p) => (
            <div className="price-cell" key={p.name}>
              <span className="pf">From</span>
              <span className="pv" data-count={p.from.replace(/[^0-9.]/g, "")}>{p.from}</span>
              <span className="pn">{p.name}</span>
            </div>
          ))}
        </div>
        <p className="price-note">Final pricing may vary based on service, consultation, and selected treatment.</p>
      </div>
    </section>
  );
}

function Reviews() {
  return (
    <section className="section tile-parchment" id="reviews">
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 52 }}>
          <div className="eyebrow reveal">Loved in Houston</div>
          <h2 className="h-lg reveal d1">What our clients say</h2>
        </div>
        <div className="rev-grid">
          {C.reviews.map((r, i) => (
            <div className="rev-card reveal" style={{ transitionDelay: i * 90 + "ms" }} key={r.name}>
              <div className="rev-stars">{[0,1,2,3,4].map((s) => <i key={s} data-lucide="star"></i>)}</div>
              <p className="rev-q">&ldquo;{r.quote}&rdquo;</p>
              <div className="rev-by">
                <img src={r.img} alt={r.name} loading="lazy" />
                <div><div className="rn">{r.name}</div><div className="rd">{r.detail}</div></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Booking() {
  const b = C.business;
  return (
    <section className="section book" id="booking" style={{ padding: "132px 0" }}>
      <div className="book-bg"><img src={C.img.book} alt="" aria-hidden="true" loading="lazy" /></div>
      <div className="book-inner wrap">
        <div className="eyebrow reveal" style={{ color: "var(--color-primary-on-dark)" }}>Booking</div>
        <h2 className="h-display reveal d1">Ready for your next beauty appointment?</h2>
        <p className="lead reveal d2">Reserve your chair in a few taps, or reach us directly — we'd love to welcome you to Coco Beauty Salon.</p>
        <div className="book-cta reveal d3">
          <Cta variant="on-dark" href={b.booking} icon="calendar-check">Book Now</Cta>
          <Cta variant="ghost-dark" href={"tel:" + b.phoneHref} icon="phone">Call Salon</Cta>
          <Cta variant="ghost-dark" href={"https://wa.me/" + b.whatsapp} icon="message-circle">WhatsApp</Cta>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="faq-grid">
          <div>
            <div className="eyebrow reveal">FAQ</div>
            <h2 className="h-lg reveal d1">Good to know</h2>
            <p className="lead reveal d2" style={{ marginTop: 16 }}>Everything you need before your first visit. Still curious? Give us a call.</p>
          </div>
          <div className="faq-list reveal d1">
            {C.faqs.map((f, i) => (
              <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
                <button className="faq-q" type="button" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                  {f.q}<span className="pm"></span>
                </button>
                <div className="faq-a" style={{ maxHeight: open === i ? "260px" : "0" }}><p>{f.a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const b = C.business;
  const mapSrc = "https://www.google.com/maps?q=" + encodeURIComponent("10209 Veterans Memorial Drive, Houston, Texas 77038") + "&output=embed";
  const submit = (e) => { e.preventDefault(); const btn = e.target.querySelector(".form-sent"); if (btn) btn.style.display = "block"; e.target.reset(); };
  return (
    <section className="section tile-parchment" id="contact">
      <div className="wrap">
        <div style={{ marginBottom: 52 }}>
          <div className="eyebrow reveal">Visit us</div>
          <h2 className="h-lg reveal d1">Come say hello</h2>
        </div>
        <div className="contact-grid">
          <div className="contact-info reveal">
            <div className="contact-block">
              <h3>Location</h3>
              <p>{b.address1}<br />{b.address2}</p>
            </div>
            <div className="contact-block">
              <h3>Contact</h3>
              <p><a href={"tel:" + b.phoneHref}>{b.phone}</a><br /><a href={b.booking}>Online booking</a></p>
            </div>
            <div className="contact-block">
              <h3>Opening hours</h3>
              {C.hours.map((h) => (<div className="hours-row" key={h.d}><span>{h.d}</span><span>{h.h}</span></div>))}
            </div>
            <div className="contact-block" style={{ borderBottom: "none" }}>
              <h3>Follow</h3>
              <div className="social-row">
                <a href="#" aria-label="Instagram"><i data-lucide="camera"></i></a>
                <a href="#" aria-label="Facebook"><i data-lucide="thumbs-up"></i></a>
                <a href="#" aria-label="TikTok"><i data-lucide="music-2"></i></a>
                <a href={"https://wa.me/" + b.whatsapp} aria-label="WhatsApp"><i data-lucide="message-circle"></i></a>
              </div>
            </div>
            <div className="map-wrap"><iframe title="Map to Coco Beauty Salon" data-src={mapSrc} loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe></div>
          </div>
          <div className="reveal d1">
            <form className="contact-form" onSubmit={submit}>
              <div className="form-row">
                <div className="field"><label>Name</label><input type="text" required placeholder="Your name" /></div>
                <div className="field"><label>Phone</label><input type="tel" placeholder="Your phone" /></div>
              </div>
              <div className="field"><label>Email</label><input type="email" required placeholder="you@email.com" /></div>
              <div className="field"><label>Service</label>
                <select defaultValue="">
                  <option value="" disabled>Choose a service</option>
                  {C.services.map((s) => <option key={s.name}>{s.name}</option>)}
                </select>
              </div>
              <div className="field"><label>Message</label><textarea placeholder="Tell us what you're looking for, and preferred dates."></textarea></div>
              <Cta variant="primary" type="submit">Request Appointment</Cta>
              <p className="form-note form-sent" style={{ display: "none", color: "var(--color-primary)" }}>Thank you — we'll be in touch shortly to confirm your appointment.</p>
              <p className="form-note">By submitting, you agree to be contacted about your appointment.</p>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

function FooterSection() {
  const b = C.business;
  const link = (id, label) => <a href={"#" + id} onClick={(e) => { e.preventDefault(); goTo(id); }}>{label}</a>;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand reveal">
            <div className="fn">Coco Beauty Salon</div>
            <p>Beauty, care, and confidence in every detail — in the heart of Houston, Texas.</p>
          </div>
          <div className="foot-col reveal d1">
            <h4>Services</h4>
            <ul>{C.services.slice(0, 6).map((s) => <li key={s.name}>{link("services", s.name)}</li>)}</ul>
          </div>
          <div className="foot-col reveal d2">
            <h4>Explore</h4>
            <ul>
              <li>{link("gallery", "Gallery")}</li>
              <li>{link("reviews", "Reviews")}</li>
              <li>{link("prices", "Pricing")}</li>
              <li>{link("faq", "FAQ")}</li>
              <li>{link("booking", "Book now")}</li>
            </ul>
          </div>
          <div className="foot-col reveal d3">
            <h4>Contact</h4>
            <ul>
              <li>{b.address1}</li>
              <li>{b.address2}</li>
              <li><a href={"tel:" + b.phoneHref}>{b.phone}</a></li>
              <li><a href={b.booking}>Online booking</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-word reveal">Coco</div>
        <div className="foot-legal reveal">
          <span>© {new Date().getFullYear()} Coco Beauty Salon · Houston, Texas</span>
          <span className="lk"><a href="#">Privacy Policy</a><a href="#">Terms of Service</a><a href="#">Accessibility</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Drawer, Hero, TrustBar, Services, Signature, Cinematic,
  Gallery, Prices, Reviews, Booking, FAQ, Contact, FooterSection
});