// Mr. Hair Club — Mobile React App
// Mobile-first. Designed for 360-430px viewport widths.
// Renders inside a phone shell on desktop; full-screen on real phones.

const { useState, useEffect, useRef, useMemo } = React;
const C = window.COPY;
const TEAM = window.TEAM;
const BOOKING_URL = window.BOOKING_URL;
const WHATSAPP_URL = window.WHATSAPP_URL;
const MAPS_URL = window.MAPS_URL;
const IG_URL = window.IG_URL;
const USD_RATE = window.USD_RATE;
const fmtNum = window.fmtNum;
const REVIEWS = window.REVIEWS;

// ─────────────────────────────────────────────────────────────
// PRIMITIVES

function BrandLogo({ size = 1 }) {
  return (
    <div className="logo" style={{ "--logo-scale": size }}>
      <span className="logo-mr">MR.</span>
      <span className="logo-hair">HAIR</span>
      <span className="logo-club">club</span>
    </div>
  );
}

function BookLink({ children, secondary, small, block, className, onClick }) {
  const cls = ["btn", secondary ? "btn-ghost" : "btn-primary", small ? "btn-sm" : "", block ? "btn-block" : "", className || ""].filter(Boolean).join(" ");
  return (
    <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className={cls} onClick={onClick}>
      {children}
      <span className="btn-arrow" aria-hidden="true">→</span>
    </a>
  );
}

function SectionHead({ kicker, title, sub }) {
  return (
    <div className="sec-head">
      <div className="kicker">
        <span className="kicker-bar" />
        <span>{kicker}</span>
      </div>
      <h2 className="sec-title">{title}</h2>
      {sub && <p className="sec-sub">{sub}</p>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HEADER + DRAWER

function Header({ scrolled, onOpenMenu, lang, setLang }) {
  return (
    <header className={`m-header ${scrolled ? "is-scrolled" : ""}`}>
      <a href="#top" className="header-logo" aria-label="Mr. Hair Club">
        <BrandLogo size={0.78} />
      </a>
      <div className="m-header-right">
        <LangPill lang={lang} setLang={setLang} />
        <button
          className="hamburger"
          aria-label="menu"
          aria-expanded={false}
          onClick={onOpenMenu}
        >
          <span /><span /><span />
        </button>
      </div>
    </header>
  );
}

function LangPill({ lang, setLang }) {
  return (
    <div className="lang-pill" role="group" aria-label="language">
      {["pt", "en", "es"].map((l) => (
        <button
          key={l}
          className={lang === l ? "is-active" : ""}
          onClick={() => setLang(l)}
          aria-pressed={lang === l}
        >
          {l.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

function Drawer({ open, onClose, t, scrollTo }) {
  if (!open) return null;
  const links = [
    ["services", t.nav.services],
    ["team", t.nav.team],
    ["work", t.nav.work],
    ["club", t.nav.club],
    ["visit", t.nav.visit],
  ];
  return (
    <div className="m-drawer" role="dialog" aria-modal="true">
      <button
        className="hamburger m-drawer-close"
        aria-label="fechar menu"
        aria-expanded={true}
        onClick={onClose}
      >
        <span /><span /><span />
      </button>
      {links.map(([id, label]) => (
        <a
          key={id}
          href={`#${id}`}
          onClick={(e) => {
            e.preventDefault();
            onClose();
            scrollTo(id);
          }}
        >
          {label}
        </a>
      ))}
      <div className="m-drawer-foot">
        <BookLink block onClick={onClose}>{t.nav.book}</BookLink>
        <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-block" onClick={onClose}>
          WhatsApp <span className="btn-arrow">→</span>
        </a>
        <div className="m-drawer-meta">Djalma Ulrich, 163 · Copacabana</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO — text-forward, photo strip below

function Hero({ t, lang }) {
  return (
    <section className="hero" id="top">
      <div className="hero-text">
        <span className="hero-eyebrow">
          <span className="dot" />
          Copacabana · RJ · desde 2011
        </span>

        <h1 className="hero-title">
          <span className="hero-line">{t.hero.title1}</span>
          <span className="hero-line hero-line-accent">{t.hero.title2}</span>
          <span className="hero-line">{t.hero.title3}</span>
        </h1>

        <p className="hero-sub">{t.hero.sub}</p>

        <div className="hero-trust">
          <span className="hero-trust-star">★</span>
          <span className="hero-trust-rating">4.9</span>
          <span className="hero-trust-sep">·</span>
          <span className="hero-trust-count">{fmtNum(1512, lang)} {t.authority.reviews}</span>
          <span className="hero-trust-sep">·</span>
          <span className="hero-trust-source">Google</span>
        </div>

        <div className="hero-ctas">
          <BookLink block>{t.hero.primary}</BookLink>
          <a href="#services" className="btn btn-ghost btn-block">
            {t.hero.secondary}
            <span className="btn-arrow" aria-hidden="true">↓</span>
          </a>
        </div>
      </div>

      <HeroPhotoStrip lang={lang} />
    </section>
  );
}

function HeroPhotoStrip({ lang }) {
  const photos = [
    {
      src: "assets/work-real-01.webp",
      caption: lang === "pt" ? "Allan, cliente desde 2022" : lang === "es" ? "Allan, cliente desde 2022" : "Allan, regular since 2022",
    },
    {
      src: "assets/work-real-02.webp",
      caption: lang === "pt" ? "Equipe · joia da casa" : lang === "es" ? "Equipo · orgullo de la casa" : "The team, in their element",
    },
    {
      src: "assets/storefront.jpg",
      caption: lang === "pt" ? "Rua Djalma Ulrich, 163" : lang === "es" ? "Calle Djalma Ulrich, 163" : "Djalma Ulrich, 163",
    },
  ];
  return (
    <div className="hero-strip" aria-label="Galeria">
      <div className="hero-strip-scroll">
        {photos.map((p, i) => (
          <div className="hero-strip-card" key={i}>
            <img src={p.src} alt={p.caption} loading="lazy" />
            <div className="hero-strip-caption">{p.caption}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroStats({ t, lang }) {
  const totalCuts = TEAM.reduce((s, b) => s + b.cuts, 0);
  const items = [
    { big: "4.9★", small: "Google" },
    { big: fmtNum(1512, lang), small: t.authority.reviews },
    { big: fmtNum(Math.round(totalCuts / 1000)) + "k+", small: t.authority.cuts.split(" ")[0] },
    { big: "15", small: t.authority.years.split(" ")[0] },
  ];
  return (
    <div className="hero-stats">
      {items.map((it, i) => (
        <div className="hero-stat" key={i}>
          <div className="hero-stat-big">{it.big}</div>
          <div className="hero-stat-small">{it.small}</div>
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// STATUS CARD — replaces redundant quick actions; shows live open/closed

function computeStatus(lang) {
  // Hours: Mon-Sat 9-20, Sun closed (Rio time approx)
  const now = new Date();
  const day = now.getDay(); // 0 Sun, 6 Sat
  const mins = now.getHours() * 60 + now.getMinutes();
  const openMin = 9 * 60;
  const closeMin = 20 * 60;
  const isSun = day === 0;
  const isOpen = !isSun && mins >= openMin && mins < closeMin;
  const closesSoon = isOpen && mins >= closeMin - 60;

  const T = {
    pt: {
      open: "Aberto agora",
      closed: "Fechado",
      closesAt: "fecha às 20h",
      closesSoon: "fecha em breve",
      reopens: "abre amanhã às 9h",
      reopensMon: "abre segunda às 9h",
      hint: "Walk-ins aceitos quando há cadeira livre",
    },
    en: {
      open: "Open now",
      closed: "Closed",
      closesAt: "closes at 8pm",
      closesSoon: "closing soon",
      reopens: "opens tomorrow at 9am",
      reopensMon: "opens Monday at 9am",
      hint: "Walk-ins welcome when chairs are free",
    },
    es: {
      open: "Abierto ahora",
      closed: "Cerrado",
      closesAt: "cierra a las 20h",
      closesSoon: "cierra pronto",
      reopens: "abre mañana a las 9h",
      reopensMon: "abre el lunes a las 9h",
      hint: "Sin cita según disponibilidad",
    },
  }[lang];

  let subtitle = "";
  if (isOpen) subtitle = closesSoon ? T.closesSoon : T.closesAt;
  else if (isSun) subtitle = T.reopensMon;
  else subtitle = mins < openMin ? (lang === "pt" ? "abre às 9h" : lang === "es" ? "abre a las 9h" : "opens at 9am") : T.reopens;

  return { isOpen, label: isOpen ? T.open : T.closed, subtitle, hint: T.hint };
}

function StatusCard({ lang }) {
  const [s, setS] = useState(() => computeStatus(lang));
  useEffect(() => {
    setS(computeStatus(lang));
    const id = setInterval(() => setS(computeStatus(lang)), 60000);
    return () => clearInterval(id);
  }, [lang]);

  const callTxt = lang === "pt" ? "Ligar" : lang === "es" ? "Llamar" : "Call";
  return (
    <div className="status-card">
      <div className="status-left">
        <div className={`status-dot ${s.isOpen ? "is-open" : "is-closed"}`} aria-hidden="true" />
        <div>
          <div className="status-label">{s.label}</div>
          <div className="status-sub">{s.subtitle} · {s.hint}</div>
        </div>
      </div>
      <a href="tel:+552125230926" className="status-call" aria-label={callTxt}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <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" />
        </svg>
      </a>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// WHY

function Why({ t }) {
  return (
    <section className="m-section why" id="why">
      <SectionHead kicker={t.why.kicker} title={t.why.title} />
      <div className="why-list">
        {t.why.items.map((it, i) => (
          <div className="why-item" key={i}>
            <div className="why-n">{it.n}</div>
            <h3 className="why-t">{it.t}</h3>
            <p className="why-d">{it.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SERVICES — collapsible accordion with sticky group nav

function Services({ t, lang, showUsd = true }) {
  const groups = t.services.groups;
  // Track which groups are open. First open by default.
  const [open, setOpen] = useState(() => groups.map((_, i) => i === 0));
  const refs = useRef([]);

  const toggle = (i) => {
    setOpen((prev) => prev.map((v, j) => (j === i ? !v : v)));
  };

  const scrollToGroup = (i) => {
    setOpen((prev) => prev.map((v, j) => (j === i ? true : v)));
    requestAnimationFrame(() => {
      const el = refs.current[i];
      if (el) {
        const scroller = document.getElementById("phone-scroll");
        if (scroller) {
          scroller.scrollTo({ top: el.offsetTop - 110, behavior: "smooth" });
        }
      }
    });
  };

  return (
    <section className="m-section services" id="services">
      <SectionHead kicker={t.services.kicker} title={t.services.title} sub={t.services.sub} />
      <div className="svc-chips">
        {groups.map((g, i) => (
          <button
            key={i}
            className="svc-chip"
            onClick={() => scrollToGroup(i)}
          >
            {g.name}
          </button>
        ))}
      </div>
      <div className="svc-acc">
        {groups.map((g, gi) => (
          <div className={`svc-group ${open[gi] ? "is-open" : ""}`} key={gi} ref={(el) => (refs.current[gi] = el)}>
            <button
              className="svc-group-head"
              onClick={() => toggle(gi)}
              aria-expanded={open[gi]}
            >
              <span className="svc-group-n">0{gi + 1}</span>
              <span className="svc-group-name">{g.name}</span>
              <span className="svc-group-count">{g.items.length}</span>
              <span className="svc-group-chevron" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M6 9l6 6 6-6" />
                </svg>
              </span>
            </button>
            {open[gi] && (
              <div className="svc-rows">
                {g.items.map(([name, dur, price], i) => (
                  <a
                    key={i}
                    href={BOOKING_URL}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="svc-row"
                  >
                    <div className="svc-name">{name}</div>
                    <div className="svc-dur">{dur}</div>
                    <div className="svc-price">
                      <span className="svc-brl">R$ {price}</span>
                      {showUsd && <span className="svc-usd">~USD {Math.round(price / USD_RATE)}</span>}
                    </div>
                    <span className="svc-row-arrow" aria-hidden="true">→</span>
                  </a>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// TEAM — horizontal carousel

function Team({ t, lang }) {
  const totalCuts = TEAM.reduce((s, b) => s + b.cuts, 0);
  const scrollRef = useRef(null);
  const [idx, setIdx] = useState(0);

  const onScroll = () => {
    const el = scrollRef.current;
    if (!el) return;
    const cardWidth = el.firstChild?.offsetWidth || 1;
    const gap = 14;
    const i = Math.round(el.scrollLeft / (cardWidth + gap));
    setIdx(Math.min(i, TEAM.length - 1));
  };

  return (
    <section className="m-section team" id="team">
      <SectionHead kicker={t.team.kicker} title={t.team.title} />

      <div className="team-banner">
        <div className="team-banner-big">{fmtNum(totalCuts, lang)}+</div>
        <div className="team-banner-small">
          {lang === "pt" && "cortes feitos. Seis barbeiros. Todos com nota 5,00."}
          {lang === "en" && "cuts performed. Six barbers. All rated 5.00."}
          {lang === "es" && "cortes realizados. Seis barberos. Todos con 5,00."}
        </div>
      </div>

      <div className="team-scroll" ref={scrollRef} onScroll={onScroll}>
        {TEAM.map((b) => (
          <BarberCard key={b.id} barber={b} t={t} lang={lang} />
        ))}
      </div>

      <div className="carousel-dots">
        {TEAM.map((_, i) => (
          <span key={i} className={`carousel-dot ${i === idx ? "is-active" : ""}`} />
        ))}
      </div>
    </section>
  );
}

function BarberCard({ barber, t, lang }) {
  const hasPhoto = barber.id !== "sebastian";
  return (
    <article className="barber">
      <div className="barber-photo">
        {hasPhoto ? (
          <>
            <div className="barber-radial" />
            <img src={barber.photo} alt={barber.name} loading="lazy" />
          </>
        ) : (
          <div className="barber-photo-empty">
            <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2.5">
              <circle cx="50" cy="38" r="14" />
              <path d="M22 86 C 22 66, 36 56, 50 56 C 64 56, 78 66, 78 86" />
            </svg>
          </div>
        )}
        <div className="barber-rating">
          <span className="barber-star">★</span>
          <span className="barber-rating-n">{barber.rating.toFixed(2)}</span>
        </div>
      </div>
      <div className="barber-body">
        <div className="barber-head">
          <h3 className="barber-name">{barber.name}</h3>
          <div className="barber-role">{t.team.role}</div>
        </div>
        <div className="barber-stat">
          <span className="barber-stat-n">{fmtNum(barber.cuts, lang)}</span>
          <span className="barber-stat-l">{t.team.cuts}</span>
        </div>
        <p className="barber-bio">{t.team.bios[barber.name]}</p>
        <div className="barber-tags">
          {barber.tags.map((tag) => (
            <span className="barber-tag" key={tag}>{t.team.tags[tag]}</span>
          ))}
        </div>
        <BookLink small className="barber-cta" block>
          {t.team.bookWith} {barber.name}
        </BookLink>
      </div>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────
// WORK

function Work({ t }) {
  const tags = ["all", "cuts", "beards", "interior", "before"];
  const [filter, setFilter] = useState("all");

  // Mobile bento: 2 cols, first cell spans 2 cols (hero), then alternating spans
  const spans = [
    "span-2-col",       // big hero
    "",
    "span-2-row",       // tall
    "",
    "",
    "span-2-col",       // wide
    "",
    "",
  ];

  return (
    <section className="m-section work" id="work">
      <SectionHead kicker={t.work.kicker} title={t.work.title} sub={t.work.sub} />

      <div className="work-tags-wrap">
        <div className="work-tags" role="tablist">
          {tags.map((tag) => (
            <button
              key={tag}
              role="tab"
              aria-selected={filter === tag}
              className={`work-tag ${filter === tag ? "is-active" : ""}`}
              onClick={() => setFilter(tag)}
            >
              {t.work.tags[tag]}
            </button>
          ))}
        </div>
      </div>

      <div className="work-grid">
        {t.work.slots.slice(0, 8).map((s, i) => {
          const hide = filter !== "all" && s.tag !== filter;
          const realSrc = window.WORK_PHOTOS && window.WORK_PHOTOS[s.id];
          return (
            <div
              key={s.id}
              className={`work-cell ${spans[i] || ""} ${hide ? "is-hidden" : ""}`}
            >
              <image-slot
                id={`m-${s.id}`}
                shape="rounded"
                radius="6"
                src={realSrc || undefined}
                placeholder={s.label}
              ></image-slot>
              <div className="work-cell-tag">{t.work.tags[s.tag]}</div>
            </div>
          );
        })}
      </div>

      <div className="work-foot">
        <a href={IG_URL} target="_blank" rel="noopener noreferrer" className="link-arrow">
          {t.work.cta} <span>→</span>
        </a>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CLUB

function Club({ t, lang }) {
  const [tab, setTab] = useState("flex");
  const plans = tab === "flex" ? t.club.flex : t.club.essencial;
  return (
    <section className="m-section club" id="club">
      <div className="club-bg" />
      <SectionHead kicker={t.club.kicker} title={t.club.title} sub={t.club.sub} />

      <div className="club-tabs" role="tablist">
        <button
          role="tab"
          aria-selected={tab === "flex"}
          className={`club-tab ${tab === "flex" ? "is-active" : ""}`}
          onClick={() => setTab("flex")}
        >
          <span className="club-tab-pre">FLEX</span>
          <span className="club-tab-price">R$ 109+</span>
        </button>
        <button
          role="tab"
          aria-selected={tab === "essencial"}
          className={`club-tab ${tab === "essencial" ? "is-active" : ""}`}
          onClick={() => setTab("essencial")}
        >
          <span className="club-tab-pre">ESSENCIAL</span>
          <span className="club-tab-price">R$ 129+</span>
        </button>
      </div>

      <div className="plan-scroll">
        {plans.map((p, i) => (
          <div className={`plan ${p.hot ? "plan-hot" : ""}`} key={i}>
            {p.hot && <div className="plan-badge">{t.club.most}</div>}
            <div className="plan-name">{p.name}</div>
            <div className="plan-price">
              <span className="plan-price-currency">R$</span>
              <span className="plan-price-amount">{p.price}</span>
              <span className="plan-price-period">{t.club.monthly}</span>
            </div>
            <div className="plan-section">
              <div className="plan-section-label">{t.club.days}</div>
              <div className="plan-section-val">{p.days}</div>
            </div>
            <div className="plan-section">
              <div className="plan-section-label">{t.club.includes}</div>
              <ul className="plan-list">
                {p.inc.map((it, j) => (
                  <li key={j}><span className="plan-check">✓</span>{it}</li>
                ))}
              </ul>
            </div>
            {p.save && <div className="plan-save">{p.save}</div>}
            <a
              href={BOOKING_URL}
              target="_blank"
              rel="noopener noreferrer"
              className={`btn ${p.hot ? "btn-primary" : "btn-ghost"} plan-cta`}
            >
              {t.club.subscribe}
              <span className="btn-arrow">→</span>
            </a>
          </div>
        ))}
      </div>

      <p className="club-compare">{t.club.compare}</p>
      <p className="club-note">{t.club.note}</p>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// REVIEWS

function Reviews({ t, lang }) {
  const items = (REVIEWS[lang] || []).filter((r) => !r.placeholder);
  // Limit to 6 cards on mobile
  const limit = items.slice(0, 6);

  return (
    <section className="m-section reviews" id="reviews">
      <SectionHead kicker={t.reviews.kicker} title={t.reviews.title} sub={t.reviews.sub} />

      <div className="review-scroll">
        {limit.map((r, i) => (
          <ReviewCard key={i} r={r} lang={lang} />
        ))}
      </div>

      <div className="reviews-foot">
        <div className="reviews-big">
          <span className="reviews-big-n">4.9</span>
          <span className="reviews-big-star">★</span>
        </div>
        <div className="reviews-foot-text">
          <div>{fmtNum(1512, lang)} {t.authority.reviews} · Google</div>
          <a
            href="https://www.google.com/search?q=Mr+Hair+Club+Copacabana"
            target="_blank"
            rel="noopener noreferrer"
            className="link-arrow"
          >
            {t.reviews.cta} <span>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function ReviewCard({ r, lang }) {
  const [expanded, setExpanded] = useState(false);
  const moreLabel = lang === "pt" ? "ler mais" : lang === "es" ? "leer más" : "read more";
  const lessLabel = lang === "pt" ? "recolher" : lang === "es" ? "contraer" : "less";
  const long = r.text.length > 180;

  const beforeLabel = lang === "en" ? "Before" : lang === "es" ? "Antes" : "Antes";
  const afterLabel = lang === "en" ? "After" : lang === "es" ? "Después" : "Depois";

  let photoEl = null;
  if (r.combinedBeforeAfter && r.photo) {
    photoEl = (
      <div className="review-photo">
        <img src={r.photo} alt="" loading="lazy" />
        <span className="review-ba-label">{beforeLabel}</span>
        <span className="review-ba-label review-ba-bottom">{afterLabel}</span>
      </div>
    );
  } else if (r.photos && r.photos.length > 0) {
    photoEl = (
      <div className="review-photo">
        <img src={r.photos[0]} alt="" loading="lazy" />
        {r.beforeAfter && <span className="review-ba-label">{beforeLabel}</span>}
      </div>
    );
  } else if (r.photo) {
    photoEl = (
      <div className="review-photo">
        <img src={r.photo} alt="" loading="lazy" />
      </div>
    );
  }

  return (
    <article className={`review ${expanded ? "is-expanded" : ""}`}>
      {photoEl}
      <div className="review-body">
        <div className="review-stars" aria-label="5 stars">★★★★★</div>
        <p className="review-text">"{r.text}"</p>
        {long && (
          <button className="review-more" onClick={() => setExpanded((v) => !v)}>
            {expanded ? lessLabel : moreLabel}
          </button>
        )}
        <div className="review-meta">
          <span className="review-name">{r.name}</span>
          <span>·</span>
          <span>{r.date}</span>
        </div>
      </div>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────
// VISIT

function Visit({ t, lang }) {
  const openLabel = lang === "pt" ? "Abrir no Google Maps" : lang === "es" ? "Abrir en Google Maps" : "Open in Google Maps";
  return (
    <section className="m-section visit" id="visit">
      <SectionHead kicker={t.location.kicker} title={t.location.title} sub={t.location.sub} />

      <a href={MAPS_URL} target="_blank" rel="noopener noreferrer" className="visit-map static">
        <div className="visit-map-static-bg" aria-hidden="true">
          {/* schematic streets — Copacabana grid */}
          <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
            <defs>
              <linearGradient id="sea" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#0a2a36" />
                <stop offset="1" stopColor="#062028" />
              </linearGradient>
            </defs>
            <rect width="400" height="500" fill="#0a1218" />
            {/* beach band */}
            <rect x="300" y="0" width="100" height="500" fill="url(#sea)" />
            <rect x="285" y="0" width="15" height="500" fill="#1a2530" />
            {/* avenues */}
            <g stroke="#1f2a36" strokeWidth="22" strokeLinecap="square">
              <line x1="260" y1="0" x2="260" y2="500" />
              <line x1="180" y1="0" x2="180" y2="500" />
              <line x1="100" y1="0" x2="100" y2="500" />
            </g>
            <g stroke="#1f2a36" strokeWidth="14" strokeLinecap="square">
              <line x1="0" y1="80" x2="285" y2="80" />
              <line x1="0" y1="180" x2="285" y2="180" />
              <line x1="0" y1="280" x2="285" y2="280" />
              <line x1="0" y1="380" x2="285" y2="380" />
            </g>
            {/* highlighted street (Djalma Ulrich) */}
            <line x1="0" y1="245" x2="285" y2="245" stroke="#2BA5C7" strokeWidth="3" strokeOpacity="0.5" />
          </svg>
          {/* pin */}
          <div className="visit-map-pin">
            <div className="visit-map-pin-pulse" />
            <div className="visit-map-pin-dot" />
          </div>
        </div>
        <div className="visit-map-overlay">
          <BrandLogo size={0.5} />
          <div className="visit-map-addr">Djalma Ulrich, 163</div>
          <div className="visit-map-open">{openLabel} <span>→</span></div>
        </div>
      </a>

      <div className="visit-block">
        <div className="visit-label">{t.location.hours}</div>
        <div className="visit-val">{t.location.hoursWeek}</div>
        <div className="visit-val visit-val-dim">{t.location.hoursSun}</div>
      </div>

      <div className="visit-block">
        <div className="visit-label">{t.location.phone}</div>
        <a href="tel:+552125230926" className="visit-val visit-val-link">
          +55 21 2523-0926
        </a>
      </div>

      <div className="visit-block">
        <div className="visit-label">{t.location.walk}</div>
        <ul className="visit-walk">
          {t.location.walkFrom.map(([place, time], i) => (
            <li key={i}>
              <span className="visit-walk-place">{place}</span>
              <span className="visit-walk-time">{time}</span>
            </li>
          ))}
        </ul>
      </div>

      <div className="visit-ctas">
        <a href={MAPS_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-block">
          {t.location.directions} <span className="btn-arrow">→</span>
        </a>
        <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-block">
          {t.location.whatsapp} <span className="btn-arrow">→</span>
        </a>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FINAL CTA + FOOTER

function FinalCta({ t }) {
  return (
    <section className="final-cta">
      <div className="final-cta-bg" />
      <div className="final-cta-inner">
        <h2 className="final-cta-title">{t.finalCta.title}</h2>
        <p className="final-cta-sub">{t.finalCta.sub}</p>
        <BookLink block>{t.finalCta.book}</BookLink>
      </div>
    </section>
  );
}

function Footer({ t, lang, setLang }) {
  return (
    <footer className="footer">
      <div className="footer-brand">
        <BrandLogo size={0.9} />
        <p className="footer-tag">{t.footer.tagline}</p>
      </div>
      <div className="footer-cols">
        <div className="footer-col">
          <div className="footer-col-h">{t.footer.sections.nav}</div>
          <a href="#services">{t.nav.services}</a>
          <a href="#team">{t.nav.team}</a>
          <a href="#club">{t.nav.club}</a>
          <a href="#visit">{t.nav.visit}</a>
        </div>
        <div className="footer-col">
          <div className="footer-col-h">{t.footer.sections.visit}</div>
          <div className="footer-meta">{t.footer.address}</div>
          <div className="footer-meta">{t.footer.hours}</div>
          <a href="tel:+552125230926">+55 21 2523-0926</a>
        </div>
        <div className="footer-col">
          <div className="footer-col-h">{t.footer.sections.follow}</div>
          <a href={IG_URL} target="_blank" rel="noopener noreferrer">@mrhairclub</a>
          <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">WhatsApp</a>
          <a href={MAPS_URL} target="_blank" rel="noopener noreferrer">Google Maps</a>
        </div>
        <div className="footer-col">
          <div className="footer-col-h">Idioma</div>
          <LangPill lang={lang} setLang={setLang} />
        </div>
      </div>
      <div className="footer-bot">
        <div>© 2026 Mr. Hair Club</div>
        <div>{t.footer.rights}</div>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────
// BOTTOM TAB BAR (sticky)

function TabBar({ t, lang }) {
  return (
    <nav className="tabbar" aria-label="ações rápidas">
      <a href="tel:+552125230926" className="tab" aria-label={lang === "pt" ? "Ligar" : lang === "es" ? "Llamar" : "Call"}>
        <span className="tab-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <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" />
          </svg>
        </span>
        <span className="tab-label">{lang === "pt" ? "Ligar" : lang === "es" ? "Llamar" : "Call"}</span>
      </a>
      <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="tab">
        <span className="tab-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 12a9 9 0 1 1-3.5-7.1L21 4l-1 3.7A9 9 0 0 1 21 12z" />
            <path d="M8 11c0 4 3 6 7 6l1.5-2-2.5-1-1 1c-1.5-.5-2.5-1.5-3-3l1-1-1-2.5L8 9.5C8 10 8 10.5 8 11z" />
          </svg>
        </span>
        <span className="tab-label">WhatsApp</span>
      </a>
      <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="tab tab-primary">
        <span className="tab-primary-inner">
          <span className="tab-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="5" width="18" height="16" rx="2" />
              <path d="M3 9h18M8 3v4M16 3v4" />
              <path d="M12 14l2 2 4-4" />
            </svg>
          </span>
          <span className="tab-label tab-label-primary">{t.nav.book}</span>
        </span>
      </a>
      <a href={MAPS_URL} target="_blank" rel="noopener noreferrer" className="tab">
        <span className="tab-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 21s7-7.5 7-12a7 7 0 1 0-14 0c0 4.5 7 12 7 12z" />
            <circle cx="12" cy="9" r="2.5" />
          </svg>
        </span>
        <span className="tab-label">{lang === "pt" ? "Rota" : lang === "es" ? "Ruta" : "Route"}</span>
      </a>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// APP

function App() {
  const [lang, setLang] = useState("pt");
  const [scrolled, setScrolled] = useState(false);
  const [progress, setProgress] = useState(0);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const scrollerRef = useRef(null);
  const t = C[lang];

  useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const onScroll = () => {
      setScrolled(el.scrollTop > 32);
      const max = el.scrollHeight - el.clientHeight;
      setProgress(max > 0 ? Math.min(1, el.scrollTop / max) : 0);
    };
    onScroll();
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, []);

  // Lock body scroll when drawer is open (real mobile)
  useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    if (drawerOpen) el.style.overflow = "hidden";
    else el.style.overflow = "";
  }, [drawerOpen]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    const scroller = scrollerRef.current;
    if (el && scroller) {
      scroller.scrollTo({ top: el.offsetTop - 50, behavior: "smooth" });
    }
  };

  return (
    <>
      <div className="phone-scroll" id="phone-scroll" ref={scrollerRef}>
        <Header
          scrolled={scrolled}
          onOpenMenu={() => setDrawerOpen(true)}
          lang={lang}
          setLang={setLang}
        />
        <div className="scroll-progress" aria-hidden="true" style={{ transform: `scaleX(${progress})` }} />
        <Hero t={t} lang={lang} />
        <StatusCard lang={lang} />
        <Why t={t} />
        <Services t={t} lang={lang} />
        <Team t={t} lang={lang} />
        <Work t={t} />
        <Club t={t} lang={lang} />
        <Reviews t={t} lang={lang} />
        <Visit t={t} lang={lang} />
        <FinalCta t={t} />
        <Footer t={t} lang={lang} setLang={setLang} />
        <TabBar t={t} lang={lang} />
      </div>
      <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} t={t} scrollTo={scrollTo} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("phone-mount")).render(<App />);