// Mr. Hair Club — main React app
// Single-page site, trilingual, scroll-based with anchored sections.

const { useState, useEffect, useMemo, useRef } = 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;

// ───────────────────────────────────────────────────────────────────────────
// TWEAK DEFAULTS
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": "cyan",
  "density": "comfortable",
  "showUsd": true,
  "heroBg": "glow",
  "heroTreatment": "duotone",
  "heroComposition": "fullbleed",
  "heroLayout": "dense",
  "language": "pt"
}/*EDITMODE-END*/;

const HUE_OPTIONS = {
  cyan:   { name: "Electric cyan",  c1: "#2BA5C7", c2: "#56C7E3", c3: "#0F4F60" },
  azure:  { name: "Brand azure",    c1: "#3A8FE0", c2: "#6BB5F5", c3: "#1A4A82" },
  teal:   { name: "Deep teal",      c1: "#19B5A2", c2: "#5FD9C8", c3: "#0E5249" },
  amber:  { name: "Hot amber",      c1: "#E89B3C", c2: "#F5C275", c3: "#7A4E15" },
};

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

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

function SectionLabel({ kicker, title, sub, align }) {
  return (
    <div className={`sec-head ${align === "center" ? "sec-head-center" : ""}`}>
      <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>
  );
}

// Brand logo built from type
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>
  );
}

// Striped placeholder for missing imagery
function PhotoPlaceholder({ label, aspect = "4/5" }) {
  return (
    <div className="photo-ph" style={{ aspectRatio: aspect }}>
      <span className="photo-ph-label">{label}</span>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// HEADER

function Header({ lang, setLang, t, scrolled }) {
  const [open, setOpen] = useState(false);
  const links = [
    ["services", t.nav.services],
    ["team", t.nav.team],
    ["casa", t.nav.casa],
    ["club", t.nav.club],
    ["visit", t.nav.visit],
  ];
  return (
    <header className={`header ${scrolled ? "header-scrolled" : ""}`}>
      <div className="header-inner">
        <a href="#top" className="header-logo" aria-label="Mr. Hair Club home">
          <BrandLogo size={0.7} />
        </a>
        <nav className="header-nav" aria-label="primary">
          {links.map(([id, label]) => (
            <a key={id} href={`#${id}`}>{label}</a>
          ))}
        </nav>
        <div className="header-right">
          <LangSwitcher lang={lang} setLang={setLang} />
          <BookLink small>{t.nav.book}</BookLink>
          <button
            className="hamburger"
            aria-label="menu"
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
          >
            <span /><span /><span />
          </button>
        </div>
      </div>
      {open && (
        <div className="mobile-menu">
          {links.map(([id, label]) => (
            <a key={id} href={`#${id}`} onClick={() => setOpen(false)}>{label}</a>
          ))}
          <BookLink>{t.nav.book}</BookLink>
        </div>
      )}
    </header>
  );
}

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

// ───────────────────────────────────────────────────────────────────────────
// HERO

function Hero({ t, lang, heroBg, heroLayout, heroTreatment, heroComposition }) {
  const minimal = heroLayout === "minimal";
  const split = heroComposition === "split";
  const HP = window.__heroPhotos || {};
  const photoSrc = heroBg === "storefront" ? (HP.storefront || "assets/storefront.jpg")
               : heroBg === "interior"     ? (HP.interior || "assets/hero-interior.jpg")
               : null; // glow

  return (
    <section
      className={`hero hero-${heroLayout} hero-comp-${heroComposition} hero-tone-${heroTreatment}`}
      id="top"
    >
      <div className={`hero-bg hero-bg-${heroBg}`}>
        {photoSrc ? (
          <image-slot
            id="hero-photo"
            shape="rect"
            src={photoSrc}
            fit="cover"
            placeholder="Arraste uma foto do salão ou de um corte (1920×1080 ideal)"
          ></image-slot>
        ) : (
          <div className="hero-bg-painted" />
        )}
        {heroTreatment === "duotone" && <div className="hero-duotone-veil" />}
        <div className="hero-bg-veil" />
        <div className="hero-bg-glow" />
        <div className="hero-bg-grain" />
      </div>

      <div className="hero-inner">
        {minimal ? (
          <h1 className="hero-title hero-title-minimal">
            <span className="hero-line">{t.hero.title1}</span>
            <span className="hero-line">
              <span className="hero-line-accent">{t.hero.title2}</span>
              {" "}{t.hero.title3}
            </span>
          </h1>
        ) : (
          <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>
        )}

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

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

        {!minimal && <AuthorityBar t={t} lang={lang} />}
      </div>

      <div className="hero-corner-mark" aria-hidden="true">
        <div className="hero-corner-since">
          {lang === "pt" && "desde"}
          {lang === "en" && "since"}
          {lang === "es" && "desde"}
        </div>
        <div className="hero-corner-year">2011</div>
        <div>RJ · BR</div>
      </div>
    </section>
  );
}

// Thin authority strip used in minimal hero mode (sits between Hero and Why)
function AuthorityStrip({ t, lang }) {
  return (
    <div className="authority-strip">
      <AuthorityBar t={t} lang={lang} />
    </div>
  );
}

function AuthorityBar({ t, lang }) {
  const totalCuts = TEAM.reduce((s, b) => s + b.cuts, 0);
  const items = [
    { big: "4.9★", small: t.authority.rating },
    { big: fmtNum(1512, lang), small: t.authority.reviews },
    { big: fmtNum(totalCuts, lang) + "+", small: t.authority.cuts },
    { big: "15", small: t.authority.years },
  ];
  return (
    <div className="authority">
      {items.map((it, i) => (
        <div className="authority-cell" key={i}>
          <div className="authority-big">{it.big}</div>
          <div className="authority-small">{it.small}</div>
        </div>
      ))}
    </div>
  );
}

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

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

// ───────────────────────────────────────────────────────────────────────────
// SERVICES

function Services({ t, lang, showUsd }) {
  return (
    <section className="section services" id="services">
      <SectionLabel kicker={t.services.kicker} title={t.services.title} sub={t.services.sub} />

      <div className="services-table">
        {t.services.groups.map((g, gi) => (
          <div className="svc-group" key={gi}>
            <div className="svc-group-head">
              <span className="svc-group-n">0{gi + 1}</span>
              <h3 className="svc-group-name">{g.name}</h3>
              <span className="svc-group-rule" />
            </div>
            <div className="svc-rows">
              {g.items.map(([name, dur, price], i) => (
                <div className="svc-row" key={i}>
                  <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>
                  <BookLink small secondary>{t.services.book}</BookLink>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// TEAM

function Team({ t, lang }) {
  const totalCuts = TEAM.reduce((s, b) => s + b.cuts, 0);
  return (
    <section className="section team" id="team">
      <SectionLabel kicker={t.team.kicker} title={t.team.title} sub={t.team.sub} />

      <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-grid">
        {TEAM.map((b) => (
          <BarberCard key={b.id} barber={b} t={t} lang={lang} />
        ))}
      </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">
          {t.team.bookWith} {barber.name}
        </BookLink>
      </div>
    </article>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// WORK / GALLERY (user-fillable image slots)

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

  // Bento grid spans — paired with slot order. Keeps composition visually rhythmic.
  const spans = [
    { c: "span 2", r: "span 2" }, // big
    { c: "span 1", r: "span 1" },
    { c: "span 1", r: "span 2" }, // tall
    { c: "span 2", r: "span 1" }, // wide
    { c: "span 1", r: "span 1" },
    { c: "span 1", r: "span 1" },
    { c: "span 1", r: "span 1" },
    { c: "span 2", r: "span 1" }, // wide
    { c: "span 1", r: "span 1" },
    { c: "span 1", r: "span 1" },
  ];

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

      <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 className="work-grid">
        {t.work.slots.map((s, i) => {
          const hide = filter !== "all" && s.tag !== filter;
          const sp = spans[i] || { c: "span 1", r: "span 1" };
          const realSrc = window.WORK_PHOTOS && window.WORK_PHOTOS[s.id];
          return (
            <div
              key={s.id}
              className={`work-cell ${hide ? "is-hidden" : ""}`}
              style={{ gridColumn: sp.c, gridRow: sp.r }}
            >
              <image-slot
                id={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 (Subscription)

function Club({ t, lang }) {
  const [tab, setTab] = useState("flex");
  const plans = tab === "flex" ? t.club.flex : t.club.essencial;
  const compareText = tab === "flex"
    ? (t.club.compareFlex || t.club.compare)
    : (t.club.compareEssencial || t.club.compare);
  return (
    <section className="section club" id="club">
      <div className="club-bg" />
      <SectionLabel 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-sub">{t.club.tab1.split("·")[1]?.trim()}</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-sub">{t.club.tab2.split("·")[1]?.trim()}</span>
          <span className="club-tab-price">R$ 129+</span>
        </button>
      </div>

      <div className="plan-grid">
        {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>
            {p.forWho && <div className="plan-for-who">{p.forWho}</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">{compareText}</p>
      <p className="club-note">{t.club.note}</p>
    </section>
  );
}

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

const REVIEWS = window.REVIEWS;

function Reviews({ t, lang }) {
  const items = REVIEWS[lang] || [];
  const hasPlaceholders = items.some((r) => r.placeholder);
  const withPhoto = items.filter((r) => !r.placeholder && (r.photo || (r.photos && r.photos.length)));
  const textOnly = items.filter((r) => r.placeholder || !(r.photo || (r.photos && r.photos.length)));

  const renderCard = (r, i) => (
    <article className={`review ${r.placeholder ? "review-placeholder" : ""} ${(r.photo || r.photos) ? "review-has-photo" : ""}`} key={i}>
      {r.combinedBeforeAfter && r.photo ? (
        <div className="review-photo review-photo-single review-photo-ba-combined">
          <img src={r.photo} alt="" loading="lazy" />
          <span className="review-ba-label review-ba-top">
            {lang === "en" ? "Before" : lang === "es" ? "Antes" : "Antes"}
          </span>
          <span className="review-ba-label review-ba-bottom">
            {lang === "en" ? "After" : lang === "es" ? "Después" : "Depois"}
          </span>
        </div>
      ) : r.photos && r.photos.length > 1 ? (
        <div className="review-photos review-photos-stack">
          {r.photos.map((p, j) => (
            <div key={j} className="review-photo">
              <img src={p} alt="" loading="lazy" />
              {r.beforeAfter && (
                <span className="review-ba-label">
                  {j === 0
                    ? (lang === "en" ? "Before" : lang === "es" ? "Antes" : "Antes")
                    : (lang === "en" ? "After"  : lang === "es" ? "Después" : "Depois")}
                </span>
              )}
            </div>
          ))}
        </div>
      ) : r.photo ? (
        <div className="review-photo review-photo-single">
          <img src={r.photo} alt="" loading="lazy" />
        </div>
      ) : null}
      <div className="review-stars" aria-label="5 stars">★★★★★</div>
      <p className="review-text">{r.placeholder ? r.text : `“${r.text}”`}</p>
      <div className="review-meta">
        <span className="review-name">{r.name}</span>
        <span className="review-dot">·</span>
        <span className="review-date">{r.date}</span>
      </div>
    </article>
  );

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

      {hasPlaceholders && (
        <div className="reviews-pending">
          {lang === "pt" && "Reviews reais em português ainda não importados. Os cards abaixo são placeholders — substituir antes do launch."}
          {lang === "es" && "Reseñas reales en español aún no importadas. Los cards abajo son placeholders — sustituir antes del lanzamiento."}
        </div>
      )}

      {withPhoto.length > 0 && (
        <div className="reviews-grid reviews-grid-photo">
          {withPhoto.map(renderCard)}
        </div>
      )}

      {textOnly.length > 0 && (
        <div className="reviews-grid reviews-grid-text">
          {textOnly.map(renderCard)}
        </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>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// VISIT / LOCATION

function Visit({ t }) {
  return (
    <section className="section visit" id="visit">
      <SectionLabel kicker={t.location.kicker} title={t.location.title} sub={t.location.sub} />

      <div className="visit-grid">
        <div className="visit-info">
          <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">
              {t.location.directions} <span className="btn-arrow">→</span>
            </a>
            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
              {t.location.whatsapp} <span className="btn-arrow">→</span>
            </a>
          </div>
        </div>

        <div className="visit-map">
          <iframe
            title="Mr. Hair Club location"
            src="https://maps.google.com/maps?q=Rua+Djalma+Ulrich+163+Copacabana+Rio+de+Janeiro&z=16&output=embed"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />
          <div className="visit-map-overlay">
            <BrandLogo size={0.5} />
            <div className="visit-map-addr">Djalma Ulrich, 163</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// FINAL CTA

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>{t.finalCta.book}</BookLink>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// FOOTER

function Footer({ t, lang, setLang }) {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">
          <BrandLogo size={1} />
          <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="#casa">{t.nav.casa}</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>
      </div>

      <div className="footer-bot">
        <div>© 2026 Mr. Hair Club. {t.footer.rights}</div>
        <LangSwitcher lang={lang} setLang={setLang} />
      </div>
    </footer>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// STICKY MOBILE BOOK BUTTON

function StickyBook({ t }) {
  return (
    <a
      href={BOOKING_URL}
      target="_blank"
      rel="noopener noreferrer"
      className="sticky-book"
    >
      <span>{t.nav.book}</span>
      <span className="sticky-book-arrow">→</span>
    </a>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// TWEAKS PANEL

function Tweaks({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSelect } = window;
  if (!TweaksPanel) return null;

  const accentPalettes = Object.entries(HUE_OPTIONS).map(([k, v]) => [v.c1, v.c2, v.c3]);
  const accentKeys = Object.keys(HUE_OPTIONS);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          label="Brand color"
          value={HUE_OPTIONS[tweaks.accentHue] ? [HUE_OPTIONS[tweaks.accentHue].c1, HUE_OPTIONS[tweaks.accentHue].c2, HUE_OPTIONS[tweaks.accentHue].c3] : accentPalettes[0]}
          options={accentPalettes}
          onChange={(palette) => {
            const i = accentPalettes.findIndex((p) => p[0] === palette[0]);
            if (i >= 0) setTweak("accentHue", accentKeys[i]);
          }}
        />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio
          label="Density"
          value={tweaks.density}
          options={[{ value: "tight", label: "Tight" }, { value: "comfortable", label: "Comfortable" }]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakRadio
          label="Hero layout"
          value={tweaks.heroLayout}
          options={[{ value: "dense", label: "Denso" }, { value: "minimal", label: "Minimal" }]}
          onChange={(v) => setTweak("heroLayout", v)}
        />
        <TweakRadio
          label="Hero background"
          value={tweaks.heroBg}
          options={[
            { value: "interior", label: "Salão" },
            { value: "storefront", label: "Fachada" },
            { value: "glow", label: "Glow" },
          ]}
          onChange={(v) => setTweak("heroBg", v)}
        />
        <TweakRadio
          label="Tratamento"
          value={tweaks.heroTreatment}
          options={[
            { value: "standard", label: "Padrão" },
            { value: "duotone", label: "Duotone cyan" },
          ]}
          onChange={(v) => setTweak("heroTreatment", v)}
        />
        <TweakRadio
          label="Composição"
          value={tweaks.heroComposition}
          options={[
            { value: "fullbleed", label: "Full-bleed" },
            { value: "split", label: "Split" },
          ]}
          onChange={(v) => setTweak("heroComposition", v)}
        />
      </TweakSection>
      <TweakSection title="Content">
        <TweakToggle
          label="Show USD prices"
          value={tweaks.showUsd}
          onChange={(v) => setTweak("showUsd", v)}
        />
        <TweakSelect
          label="Default language"
          value={tweaks.language}
          options={[
            { value: "pt", label: "Português" },
            { value: "en", label: "English" },
            { value: "es", label: "Español" },
          ]}
          onChange={(v) => setTweak("language", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// STATUS + POSTER (desktop) — paired editorial section under hero

function computeStatusDesktop(t) {
  const now = new Date();
  const day = now.getDay();
  const mins = now.getHours() * 60 + now.getMinutes();
  const isSun = day === 0;
  const isOpen = !isSun && mins >= 540 && mins < 1200;
  const closesSoon = isOpen && mins >= 1140;
  const T = t.status;
  let subtitle = "";
  if (isOpen) subtitle = closesSoon ? T.closesSoon : T.closesAt;
  else if (isSun) subtitle = T.opensMonday;
  else subtitle = mins < 540 ? T.opensToday : T.opensTomorrow;
  return { isOpen, label: isOpen ? T.open : T.closed, subtitle, hint: T.hint };
}

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

  const p = t.poster;

  return (
    <section className="d-status-poster">
      <div className="d-status">
        <div className="d-status-left">
          <div className={`d-status-dot ${s.isOpen ? "is-open" : "is-closed"}`} aria-hidden="true" />
          <div className="d-status-text">
            <div className="d-status-label">{s.label}</div>
            <div className="d-status-sub">{s.subtitle} · {s.hint}</div>
          </div>
        </div>
        <a href="tel:+552125230926" className="d-status-call">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" 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>{t.status.call} · +55 21 2523-0926</span>
        </a>
      </div>

      <div className="d-poster">
        <img className="d-poster-img" src="assets/hero-interior.jpg" alt="Salão Mr. Hair Club" loading="lazy" />
        <div className="d-poster-veil" aria-hidden="true" />
        <div className="d-poster-grain" aria-hidden="true" />

        <div className="d-poster-corner">
          <span className="d-poster-since">{p.since}</span>
          <span className="d-poster-year">{p.year}</span>
        </div>

        <h2 className="d-poster-headline">{p.headline}</h2>

        <div className="d-poster-meta">
          <div className="d-poster-meta-rule" />
          <div className="d-poster-meta-text">
            <div>{p.address}</div>
            <div className="d-poster-meta-dim">{p.city}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// CASA — origin story prose (two-column on desktop)

function Casa({ t }) {
  return (
    <section className="section casa" id="casa">
      <SectionLabel kicker={t.casa.kicker} title={t.casa.title} />
      <div className="casa-prose">
        <p>{t.casa.p1}</p>
        <p>{t.casa.p2}</p>
        <p className="casa-prose-kicker">{t.casa.p3}</p>
      </div>
    </section>
  );
}

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

function App() {
  const [tweaks, setTweaksState] = useState(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(TWEAK_DEFAULTS.language);
  const [scrolled, setScrolled] = useState(false);
  const t = C[lang];

  const setTweak = (key, val) => {
    const next = typeof key === "object" ? { ...tweaks, ...key } : { ...tweaks, [key]: val };
    setTweaksState(next);
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: typeof key === "object" ? key : { [key]: val } }, "*");
    } catch (e) {}
  };

  useEffect(() => {
    if (tweaks.language && tweaks.language !== lang) setLang(tweaks.language);
  }, [tweaks.language]);

  useEffect(() => {
    const accent = HUE_OPTIONS[tweaks.accentHue] || HUE_OPTIONS.cyan;
    document.documentElement.style.setProperty("--accent", accent.c1);
    document.documentElement.style.setProperty("--accent-bright", accent.c2);
    document.documentElement.style.setProperty("--accent-deep", accent.c3);
    document.documentElement.setAttribute("data-density", tweaks.density);
  }, [tweaks.accentHue, tweaks.density]);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 32);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} scrolled={scrolled} />
      <main>
        <Hero t={t} lang={lang} heroBg={tweaks.heroBg} heroLayout={tweaks.heroLayout} heroTreatment={tweaks.heroTreatment} heroComposition={tweaks.heroComposition} />
        {tweaks.heroLayout === "minimal" && <AuthorityStrip t={t} lang={lang} />}
        <StatusAndPoster t={t} lang={lang} />
        <Why t={t} />
        <Services t={t} lang={lang} showUsd={tweaks.showUsd} />
        <Team t={t} lang={lang} />
        <Casa t={t} />
        <Work t={t} />
        <Club t={t} lang={lang} />
        <Reviews t={t} lang={lang} />
        <Visit t={t} />
        <FinalCta t={t} />
      </main>
      <Footer t={t} lang={lang} setLang={setLang} />
      <StickyBook t={t} />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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