// Tatava Studio, homepage sections: Nav, Proof, Services, Founder,
// HowItWorks, BookingBand, Footer, WhatsApp float, inline icon set.

const TDS = window.TATAVA_DATA;

/* ---------------- Icons (Lucide-style inline, 1.6px stroke) ---------------- */
const ICON_PATHS = {
  phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />,
  wind: <g><path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2" /><path d="M9.6 4.6A2 2 0 1 1 11 8H2" /><path d="M12.6 19.4A2 2 0 1 0 14 16H2" /></g>,
  users: <g><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></g>,
  leaf: <g><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></g>,
  shield: <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />,
  heart: <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />,
  moon: <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />,
  sun: <g><circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" /></g>,
  arrow: <g><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></g>,
  mail: <g><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></g>
};

function Icon({ name }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {ICON_PATHS[name]}
    </svg>);

}

const WA_PATH = "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.1-.198.05-.371-.025-.52-.074-.149-.668-1.612-.916-2.207-.241-.579-.486-.5-.668-.51l-.57-.01c-.197 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.064 2.875 1.213 3.074.149.198 2.095 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z";

/* ---------------- Nav (page-aware, with mobile drawer) ---------------- */
const PAGES = {
  home: "Tatava Homepage.html",
  stress: "Tatava Stress & Anxiety.html",
  book: "Tatava Booking.html",
  contact: "Tatava Contact.html",
  corporate: "Tatava Corporate.html",
  insights: "Tatava Insights.html"
};

// Resolve a nav target: same page -> #anchor, else file (optionally #anchor)
function navHref(current, page, anchor) {
  if (page === current) return anchor ? "#" + anchor : "#top";
  return PAGES[page] + (anchor ? "#" + anchor : "");
}

function NavMenu({ current }) {
  return (
    <>
      <a className={"nav__link" + (current === "stress" ? " is-active" : "")} href={navHref(current, "home", "services")}>Services</a>
      <a className="nav__link" href={navHref(current, "home", "about")}>About</a>
      <a className={"nav__link" + (current === "corporate" ? " is-active" : "")} href={navHref(current, "corporate")}>Corporate</a>
      <a className={"nav__link" + (current === "contact" ? " is-active" : "")} href={navHref(current, "contact")}>Contact</a>
    </>);

}

function Nav({ current = "home" }) {
  const [open, setOpen] = React.useState(false);

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

  return (
    <nav className="nav" data-screen-label="Navigation">
      <div className="container nav__inner">
        <a className="nav__logo" href={navHref(current, "home")} aria-label="Tatava Studio home">
          <img src="assets/mark-primary.svg" alt="" />
          <span className="logoType">
            <strong>TATAVA STUDIO</strong>
            <small>Simplifying Wellness</small>
          </span>
        </a>
        <div className="nav__links">
          <NavMenu current={current} />
          <a className="nav__phone" href={TDS.phoneHref}>
            <Icon name="phone" />
            <span>{TDS.phoneDisplay}</span>
          </a>
          <a className="btn btn--primary btn--sm" href={navHref(current, "book")}>Book a Session</a>
        </div>
        <div className="nav__mobile">
          <a className="nav__phoneBtn" href={TDS.phoneHref} aria-label="Call us"><Icon name="phone" /></a>
          <button className="nav__burger" onClick={() => setOpen(true)} aria-label="Open menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>

      <div className={"navDrawer" + (open ? " is-open" : "")} role="dialog" aria-modal="true" aria-hidden={!open}>
        <div className="navDrawer__scrim" onClick={() => setOpen(false)}></div>
        <div className="navDrawer__panel">
          <div className="navDrawer__top">
            <span className="logoType">
              <strong>TATAVA STUDIO</strong>
              <small>Simplifying Wellness</small>
            </span>
            <button className="navDrawer__close" onClick={() => setOpen(false)} aria-label="Close menu">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
            </button>
          </div>
          <div className="navDrawer__links" onClick={() => setOpen(false)}>
            <NavMenu current={current} />
          </div>
          <div className="navDrawer__foot">
            <a className="btn btn--primary" href={navHref(current, "book")}>Book a Session</a>
            <a className="nav__phone" href={TDS.phoneHref}><Icon name="phone" /> <span>{TDS.phoneDisplay}</span></a>
          </div>
        </div>
      </div>
    </nav>);

}

/* ---------------- We Help You When strip ---------------- */
const WHLYW_TRIGGERS = [
"Your mind won't stop racing",
"Relationships feel like they're breaking",
"Grief has no name yet",
"Sleep keeps slipping away",
"The past keeps showing up",
"Life just feels too heavy"];


function ProofStrip() {
  return (
    <section className="proof whlyw" data-screen-label="We Help You When">
      <div className="proof__inner whlyw__inner" data-comment-anchor="0fd1010dbb-div-118-7">
        <span className="proof__label whlyw__heading">We Help You When</span>
        <div className="whlyw__viewport">
          <div className="whlyw__track">
            {WHLYW_TRIGGERS.map((t, i) =>
            <span key={"a" + i} className="whlyw__chip">{t}</span>
            )}
            {WHLYW_TRIGGERS.map((t, i) =>
            <span key={"b" + i} className="whlyw__chip" aria-hidden="true">{t}</span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- Services grid ---------------- */
function ServicesGrid() {
  return (
    <section className="sec" id="services" data-screen-label="Services grid">
      <div className="container">
        <div className="sec__head">
          <span className="eyebrow">What we work on</span>
          <h2 className="headline">Seven Ways In, One Steady <span className="hl">Approach</span></h2>
        </div>
        <div className="services">
          {TDS.services.map((s) =>
          <article className="service" key={s.id}>
              <div className="service__icon"><Icon name={s.icon} /></div>
              <h3>{s.name}</h3>
              <p>{s.desc}</p>
              <a className="service__more" href={s.href}>Read more <Icon name="arrow" /></a>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Founder bio ---------------- */
function FounderBio() {
  return (
    <section className="sec sec--cream" id="about" data-screen-label="Founder bio">
      <div className="container about">
        <div className="about__photo">
          <div className="ring"></div>
          <div className="img"><img src={TDS.founder.photo} alt="Aarti Ahuja, founder of Tatava Studio" /></div>
        </div>
        <div className="about__copy">
          <span className="eyebrow">A b o u t&nbsp;&nbsp;u s</span>
          <h2 className="headline">Therapy Built on Evidence, Delivered Like a <span className="hl">Conversation</span></h2>
          <p>{TDS.founder.bio}</p>
          <div className="about__creds">
            {TDS.founder.creds.map((c) => <span key={c}>{c}</span>)}
          </div>
          <a className="textlink" href="#approach">Learn our approach <Icon name="arrow" /></a>
        </div>
      </div>
    </section>);

}

/* ---------------- How sessions work (testimonial replacement) ---------------- */
function HowItWorks() {
  return (
    <section className="sec" id="approach" data-screen-label="How sessions work">
      <div className="container">
        <div className="sec__head">
          <span className="eyebrow">How sessions work</span>
          <h2 className="headline">Three Small Steps, at Your <span className="hl">Pace</span></h2>
        </div>
        <div className="steps">
          {TDS.steps.map((st) =>
          <div className="step" key={st.n}>
              <span className="step__num">{st.n}</span>
              <h3>{st.title}</h3>
              <p>{st.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Booking CTA band ---------------- */
function BookingBand() {
  const b = TDS.booking;
  return (
    <section className="bookband" id="book" data-screen-label="Booking CTA" data-comment-anchor="c7542b5eb5-section-207-5">
      <div className="container bookband__inner">
        <h2 className="headline">{b.headline.pre}<span className="hl">{b.headline.hl}</span>{b.headline.post}</h2>
        <p>{b.copy}</p>
        <a className="btn btn--on-navy" href="Tatava Booking.html">Book a session</a>
        <div className="bookband__contacts">
          <a href={TDS.phoneHref}><Icon name="phone" /> {TDS.phoneDisplay}</a>
          <a href={TDS.whatsappHref} target="_blank" rel="noopener">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={WA_PATH} /></svg>
            WhatsApp
          </a>
        </div>
        <p className="heroNote">Consultation By Appointment Only</p>
      </div>
    </section>);

}

/* ---------------- Footer, liquid glass over video ---------------- */
/* video src is attached only after window load, photo paints first */
function FooterVideo({ src }) {
  const [vsrc, setVsrc] = React.useState(
    document.readyState === "complete" ? src : null
  );
  React.useEffect(() => {
    if (vsrc) return undefined;
    const arm = () => setVsrc(src);
    if (document.readyState === "complete") { arm(); return undefined; }
    window.addEventListener("load", arm);
    return () => window.removeEventListener("load", arm);
  }, [src]);
  if (!vsrc) return null;
  return <video src={vsrc} autoPlay loop muted playsInline></video>;
}

const SOCIALS = [
{ label: "Facebook", d: <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /> },
{ label: "Twitter", d: <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /> },
{ label: "YouTube", d: <g><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" /><path d="m10 15 5-3-5-3z" /></g> },
{ label: "Instagram", d: <g><rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /></g> }];


function Footer({ current = "home", showCta = false }) {
  const b = TDS.booking;
  return (
    <footer className={"vfooter" + (showCta ? " vfooter--cta" : "")} data-screen-label="Footer">
      <div className="vfooter__bg" aria-hidden="true">
        <img src="assets/photo-mindful-class.jpg" alt="" />
        <FooterVideo src={TDS.footerVideoUrl}></FooterVideo>
        <div className="vfooter__tint" data-comment-anchor="b17a3f5975-div-239-9"></div>
      </div>
      <div className="container vfooter__wrap">
        {showCta &&
        <div className="vfooter__cta" id="book" data-screen-label="Booking CTA" data-comment-anchor="fc9b345790-div-244-9">
          <h2 className="headline">{b.headline.pre}<span className="hl">{b.headline.hl}</span>{b.headline.post}</h2>
          <p>{b.copy}</p>
          <a className="btn btn--on-navy" href="Tatava Booking.html">Book a session</a>
          <div className="bookband__contacts">
            <a href={TDS.phoneHref}><Icon name="phone" /> {TDS.phoneDisplay}</a>
            <a href={TDS.whatsappHref} target="_blank" rel="noopener">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={WA_PATH} /></svg>
              WhatsApp
            </a>
          </div>
          <p className="heroNote">Consultation By Appointment Only</p>
        </div>
        }
        <div className="liquid-glass vfooter__card fade-rise" data-comment-anchor="992e4337f0-div-242-9" style={{ padding: "31px", color: "rgb(255, 255, 255)", opacity: "0.64" }}>
          <div className="vfooter__grid">
            <div className="vfooter__brand">
              <a className="vfooter__logo" href={navHref(current, "home")} aria-label="Tatava Studio home">
                <img src="assets/mark-primary.svg" alt="" />
                <span>TATAVA STUDIO</span>
              </a>
              <p>A complete solution of well-being for the urban individual. Open to all individuals, genders &amp; identities.</p>
              <p className="vfooter__bhf">
                10% of corporate retainers support burn survivor rehabilitation,{" "}
                <a href="https://burnhealingfoundation.com" target="_blank" rel="noopener">Burn Healing Foundation</a>
              </p>
            </div>
            <div className="vfooter__cols">
              <div>
                <h4>Services</h4>
                {TDS.services.map((s) =>
                <a href={s.href} key={s.id}>{s.name}</a>
                )}
              </div>
              <div>
                <h4>Practice</h4>
                <a href={navHref(current, "home", "about")}>About</a>
                <a href={navHref(current, "insights")}>Insights</a>
                <a href={navHref(current, "corporate")}>Corporate</a>
                <a href={navHref(current, "contact")}>Contact</a>
                <a href={navHref(current, "book")}>Book a Session</a>
              </div>
              <div>
                <h4>Reach us</h4>
                <a href={TDS.phoneHref}>{TDS.phoneDisplay}</a>
                <a href="mailto:hello@tatavastudio.com">hello@tatavastudio.com</a>
                <span className="vfooter__addr">{TDS.address}<br />{TDS.hours}</span>
              </div>
            </div>
          </div>
          <div className="vfooter__bottom">
            <p>© 2026 Tatava, The Lifestyle Studio · <a href="#privacy">Privacy (DPDP)</a> · <a href="#terms">Terms</a></p>
            <div className="vfooter__social">
              <span>Stay connected:</span>
              {SOCIALS.map((s) =>
              <a key={s.label} href="#" aria-label={s.label}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">{s.d}</svg>
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
    </footer>);

}

/* ---------------- WhatsApp float ---------------- */
function WhatsAppFloat() {
  return (
    <a className="wa-float" href={TDS.whatsappHref} target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={WA_PATH} /></svg>
    </a>);

}

Object.assign(window, { Icon, Nav, NavMenu, navHref, PAGES, ProofStrip, ServicesGrid, FounderBio, HowItWorks, BookingBand, Footer, WhatsAppFloat, WA_PATH });