/* ===== KLIQ FRONT PAGE ===== */
const { useState, useEffect, useRef } = React;

/* ---------- Audience config ---------- */
const AUDIENCES = {
  member: {
    key: "member",
    label: "Members",
    sublabel: "Stay. Rent. Earn.",
    eyebrow: "For travellers, tenants & everyday explorers",
    headline: ["Live more.", "Earn while", "you do it."],
    headlineAccentLine: 2,
    accent: "#F4A93C",
    sub: "KLIQ rewards you for the things you already do — book a hotel stay, rent your next home, settle in for the long haul. Every ringgit spent earns points you can spend back across our network.",
    primary: { label: "Browse stays", href: "#" },
    secondary: { label: "How points work", href: "#points" },
    pills: ["Hotel stays", "Long-term rentals", "Daily living perks"],
    stat1: { v: "3", l: "Membership tiers" },
    stat2: { v: "6", l: "Cities across Malaysia" },
    stat3: null,
  },
  operator: {
    key: "operator",
    label: "Operators",
    sublabel: "KLIQ Supply",
    eyebrow: "For Airbnb & STR operators in Malaysia",
    headline: ["Collective", "buying power", "for every operator."],
    headlineAccentLine: 1,
    accent: "#1FA6A0",
    sub: "KLIQ Supply pools demand across our network of short-term rental operators — unlocking preferred pricing, group orders, and professional services that were previously only available to large hotel chains.",
    primary: { label: "Apply to join", href: "https://supply.kliqliving.com/" },
    secondary: { label: "How Supply works", href: "https://supply.kliqliving.com/#how-it-works" },
    pills: ["Group purchasing", "Operator network", "Vetted suppliers"],
    stat1: { v: "500+", l: "Active units on platform" },
    stat2: { v: "15–30%", l: "Average savings per order" },
    stat3: { v: "RM 120k+", l: "Saved vs. standard pricing" },
  },
  owner: {
    key: "owner",
    label: "Owners",
    sublabel: "Investor tools",
    eyebrow: "For property owners & investors",
    headline: ["Your unit,", "fully managed,", "fully visible."],
    headlineAccentLine: 0,
    accent: "#2E6FA3",
    sub: "Hand your property to KLIQ and watch it work. Payouts, maintenance tickets and tenant signals — all in one owner dashboard, with the operations handled for you.",
    primary: { label: "Talk to our team", href: "mailto:bd@kliqliving.com" },
    secondary: null,
    pills: ["Live dashboards", "Hands-off operations", "Monthly payouts"],
    stat1: { v: "94%", l: "Average occupancy" },
    stat2: { v: "Monthly", l: "Payout cadence" },
    stat3: { v: "24/7", l: "Maintenance handling" },
  },
};

/* ---------- Logo ---------- */
// Four three-quarter circles in the corners — KLIQ brand mark.
function FrontKliqMark({ size = 28, color = "#1FA6A0", bg = "transparent" }) {
  // Each "quarter circle" is actually 3/4 of a circle anchored at the corner,
  // mathematically: a circle whose center is at (0,0), (1,0), (0,1) or (1,1)
  // with radius ~0.55 of the viewbox, clipped by the viewBox. We render as
  // full circles and rely on overflow:hidden via the SVG bounds.
  const r = 55; // % of viewBox
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true" style={{ display: "block", background: bg, borderRadius: 6 }}>
      <defs>
        <clipPath id="kliq-clip"><rect x="0" y="0" width="100" height="100"/></clipPath>
      </defs>
      <g clipPath="url(#kliq-clip)" fill={color}>
        <circle cx="0"   cy="0"   r={r}/>
        <circle cx="100" cy="0"   r={r}/>
        <circle cx="0"   cy="100" r={r}/>
        <circle cx="100" cy="100" r={r}/>
      </g>
    </svg>
  );
}
function FrontKliqLogo({ inverted = false, image = false, markSize = 28, wordColor }) {
  const resolvedWordColor = wordColor || (inverted ? "#ffffff" : "#0E2A38");
  return (
    <div className="kliq-logo">
      {image ? (
        <img
          src="assets/img/kliq-logo.png"
          alt="KLIQ"
          width={markSize}
          height={markSize}
          style={{ display: "block", width: markSize, height: markSize, objectFit: "contain" }}
        />
      ) : (
        <FrontKliqMark size={markSize} color="#1FA6A0" bg={inverted ? "#ffffff" : "transparent"} />
      )}
      <span className="kliq-wordmark" style={{ color: resolvedWordColor }}>KLIQ</span>
    </div>
  );
}

/* ---------- Top nav ---------- */
function FrontTopNav({ inverted, loggedIn, audience }) {
  return (
    <header className={`nav ${inverted ? "nav--inv" : ""}`}>
      <div className="nav__inner">
        <FrontKliqLogo inverted={inverted} />
        <div className="nav__right">
          <button className="nav__currency">MYR ▾</button>
          {loggedIn ? (
            <div className="nav__user">
              <span className="nav__points">
                <span className="nav__pts-dot" /> 4,820 pts
              </span>
              <span className="nav__hi">Hi, Aliff ▾</span>
            </div>
          ) : (
            <>
              <a href="#" className="nav__link">Sign in</a>
              <a href="#" className="nav__cta">Join KLIQ</a>
            </>
          )}
        </div>
      </div>
    </header>
  );
}

/* ---------- Hero tab toggle ---------- */
function AudienceTabs({ value, onChange }) {
  const order = ["member", "operator", "owner"];
  const idx = order.indexOf(value);
  return (
    <div className="tabs" role="tablist">
      <div
        className="tabs__indicator"
        style={{ transform: `translateX(${idx * 100}%)` }}
      />
      {order.map((k) => {
        const a = AUDIENCES[k];
        return (
          <button
            key={k}
            role="tab"
            aria-selected={value === k}
            className={`tabs__tab ${value === k ? "is-active" : ""}`}
            onClick={() => onChange(k)}
          >
            <span className="tabs__label">{a.label}</span>
            <span className="tabs__sub">{a.sublabel}</span>
          </button>
        );
      })}
    </div>
  );
}

/* ---------- Animated points counter ---------- */
function PointsTicker({ accent }) {
  const [n, setN] = useState(4820);
  useEffect(() => {
    const id = setInterval(() => setN((x) => x + Math.floor(Math.random() * 4)), 1800);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="ticker">
      <div className="ticker__row">
        <span className="ticker__dot" style={{ background: accent }} />
        <span className="ticker__label">Live across the network</span>
      </div>
      <div className="ticker__num">
        {n.toLocaleString()} <span className="ticker__pts">pts</span>
      </div>
      <div className="ticker__cap">earned by KLIQ members today</div>
    </div>
  );
}

/* ---------- Units counter (owners) ---------- */
function UnitsCounter({ accent }) {
  return (
    <div className="ticker">
      <div className="ticker__row">
        <span className="ticker__dot" style={{ background: accent }} />
        <span className="ticker__label">Across the KLIQ network</span>
      </div>
      <div className="ticker__num">
        600+ <span className="ticker__pts">units</span>
      </div>
      <div className="ticker__cap">using KLIQ today</div>
    </div>
  );
}

/* ---------- Coverage map ---------- */
function CoverageMap({ accent }) {
  const cities = [
    { name: "Kota Kinabalu", x: 78, y: 28 },
    { name: "Penang", x: 18, y: 38 },
    { name: "Ipoh", x: 24, y: 50 },
    { name: "Genting", x: 32, y: 62 },
    { name: "Kuala Lumpur", x: 30, y: 70 },
    { name: "Seremban", x: 28, y: 80 },
  ];
  return (
    <div className="map">
      <svg viewBox="0 0 100 100" className="map__svg" aria-hidden="true">
        <defs>
          <radialGradient id="mg" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(31,166,160,0.18)"/>
            <stop offset="100%" stopColor="rgba(255,255,255,0)"/>
          </radialGradient>
        </defs>
        <circle cx="30" cy="65" r="28" fill="url(#mg)"/>
        <circle cx="78" cy="28" r="14" fill="url(#mg)"/>
        <path
          d="M30 70 Q 50 50 78 28"
          stroke="rgba(31,42,51,0.35)"
          strokeWidth="0.4"
          strokeDasharray="1 2"
          fill="none"
        />
        {cities.map((c, i) => (
          <g key={c.name}>
            <circle cx={c.x} cy={c.y} r="1" fill={accent} />
            <circle cx={c.x} cy={c.y} r="2.5" fill={accent} fillOpacity="0.25"/>
          </g>
        ))}
      </svg>
      {cities.map((c) => (
        <span
          key={c.name}
          className="map__pin"
          style={{ left: `${c.x}%`, top: `${c.y}%` }}
        >
          {c.name}
        </span>
      ))}
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero({ audience, setAudience, showSearch, loggedIn, accent }) {
  const a = AUDIENCES[audience];
  return (
    <section className="hero">
      <div className="hero__bg">
        <div className="hero__grid-overlay" />
        <div className="hero__glow" style={{ background: `radial-gradient(60% 60% at 70% 30%, ${a.accent}33, transparent 70%)` }}/>
      </div>

      <div className="hero__inner">
        <AudienceTabs value={audience} onChange={setAudience} />

        <div className="hero__body">
          <div className="hero__left">
            <div className="hero__eyebrow" style={{ borderColor: `${a.accent}60`, color: a.accent }}>
              <span className="hero__eyebrow-dot" style={{ background: a.accent }}/>
              {a.eyebrow}
            </div>

            <h1 className="hero__h1">
              {a.headline.map((line, i) => (
                <span
                  key={i}
                  className="hero__h1-line"
                  style={i === a.headlineAccentLine ? { color: a.accent } : null}
                >
                  {line}
                </span>
              ))}
            </h1>

            <p className="hero__sub">{a.sub}</p>

            <div className="hero__pills">
              {a.pills.map((p) => (
                <span key={p} className="pill">{p}</span>
              ))}
            </div>

            {audience !== "member" && (
              <div className="hero__cta">
                <a href={a.primary.href} className="btn btn--primary" style={{ background: a.accent, color: audience === "owner" ? "#ffffff" : "#0E2A38" }}>
                  {a.primary.label}
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
                {a.secondary && <a href={a.secondary.href} className="btn btn--ghost">{a.secondary.label}</a>}
              </div>
            )}

            <div className="hero__stats">
              {[a.stat1, a.stat2, a.stat3].filter(Boolean).map((s, i) => (
                <div key={i} className="stat">
                  <div className="stat__v" style={{ color: a.accent }}>{s.v}</div>
                  <div className="stat__l">{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="hero__right">
            {audience === "member" && <CoverageMap accent={a.accent} />}
            {audience === "operator" && null}
            {audience === "owner" && <UnitsCounter accent={a.accent} />}
          </div>
        </div>

      </div>
    </section>
  );
}

/* ---------- Supply visual ---------- */
function SupplyVisual({ accent }) {
  const items = [
    { name: "Bed linen — 200tc", op: 42, save: "–22%" },
    { name: "Laundry detergent (20L)", op: 38, save: "–28%" },
    { name: "Coffee pods (1000)", op: 51, save: "–18%" },
    { name: "Cleaning service / mo.", op: 27, save: "–15%" },
  ];
  return (
    <div className="supply-vis">
      <div className="supply-vis__head">
        <span className="supply-vis__title">Open group orders</span>
      </div>
      {items.map((it) => (
        <div key={it.name} className="supply-row">
          <div className="supply-row__name">{it.name}</div>
          <div className="supply-row__bar">
            <div className="supply-row__bar-fill" style={{ width: `${it.op * 1.5}%`, background: accent }}/>
          </div>
          <div className="supply-row__op">{it.op} ops</div>
          <div className="supply-row__save" style={{ color: accent }}>{it.save}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Owner dashboard visual ---------- */
function OwnerDashVisual({ accent }) {
  const months = [62, 71, 68, 78, 84, 91, 88, 94, 92, 96, 89, 93];
  const max = 100;
  return (
    <div className="owner-vis">
      <div className="owner-vis__head">
        <div>
          <div className="owner-vis__caption">UNIT 14B · MONT KIARA</div>
          <div className="owner-vis__title">Occupancy · last 12 mo.</div>
        </div>
        <div className="owner-vis__avg" style={{ color: accent }}>94% avg</div>
      </div>
      <div className="owner-vis__chart">
        {months.map((m, i) => (
          <div key={i} className="owner-vis__bar-wrap">
            <div className="owner-vis__bar" style={{ height: `${(m / max) * 100}%`, background: accent, opacity: 0.3 + (m / 100) * 0.7 }} />
          </div>
        ))}
      </div>
      <div className="owner-vis__foot">
        <div className="owner-vis__metric">
          <div className="owner-vis__metric-l">This month payout</div>
          <div className="owner-vis__metric-v">RM 8,420</div>
        </div>
        <div className="owner-vis__metric">
          <div className="owner-vis__metric-l">Open tickets</div>
          <div className="owner-vis__metric-v">2</div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Search widget ---------- */
function SearchWidget({ accent }) {
  const [tab, setTab] = useState("hotel");
  return (
    <div className="search">
      <div className="search__tabs">
        <button className={`search__tab ${tab === "hotel" ? "is-on" : ""}`} onClick={() => setTab("hotel")}>
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 14V6h12v8M2 6l6-4 6 4M6 14v-4h4v4" stroke="currentColor" strokeWidth="1.4"/></svg>
          Hotel
        </button>
        <button className={`search__tab ${tab === "space" ? "is-on" : ""}`} onClick={() => setTab("space")}>
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1" stroke="currentColor" strokeWidth="1.4"/><path d="M2 7h12" stroke="currentColor" strokeWidth="1.4"/></svg>
          Space (long-term)
        </button>
      </div>
      <div className="search__row">
        <div className="search__field">
          <div className="search__lbl">Location</div>
          <div className="search__val">📍 Where are you going?</div>
        </div>
        <div className="search__field">
          <div className="search__lbl">Check in – out</div>
          <div className="search__val">28/04/2026 – 29/04/2026</div>
        </div>
        <div className="search__field">
          <div className="search__lbl">Guests</div>
          <div className="search__val">1 Adult · 0 Child</div>
        </div>
        <div className="search__field">
          <div className="search__lbl">Promo code</div>
          <div className="search__val search__val--muted">Code</div>
        </div>
        <button className="search__btn" style={{ background: accent }}>
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="#0E2A38" strokeWidth="1.6"/><path d="M11 11l3 3" stroke="#0E2A38" strokeWidth="1.6" strokeLinecap="round"/></svg>
          Search
        </button>
      </div>
    </div>
  );
}

/* ---------- Points section ---------- */
function PointsSection() {
  const steps = [
    { n: "01", t: "Earn on stays", d: "Book any hotel through KLIQ and earn 5% back in points — automatically credited after checkout." },
    { n: "02", t: "Earn on rent", d: "Pay rent through KLIQ on a long-term rental. Every monthly payment earns points — turning rent into rewards." },
    { n: "03", t: "Earn on daily life", d: "Partner cafes, services and add-ons earn you bonus points just for being a KLIQ member." },
    { n: "04", t: "Spend anywhere on KLIQ", d: "Redeem points against future stays, upgrades, and (soon) partner experiences across Malaysia." },
  ];
  return (
    <section className="section section--cream" id="points">
      <div className="section__inner">
        <div className="section__head">
          <div className="section__eyebrow">How KLIQ Points work</div>
          <h2 className="section__h2">One currency for the way you actually live.</h2>
          <p className="section__lead">
            Points aren't a side gimmick — they're how the KLIQ network rewards every interaction. Earn from stays, rent and daily life. Redeem against the next stay.
          </p>
        </div>
        <div className="points-grid">
          {steps.map((s) => (
            <div key={s.n} className="points-card">
              <div className="points-card__n">{s.n}</div>
              <div className="points-card__t">{s.t}</div>
              <div className="points-card__d">{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Featured deals ---------- */
function DealsSection() {
  const deals = [
    { name: "Antara by ANGO", city: "Genting Highlands", price: "RM 450", rating: 5.0, tag: "FEATURED", img: (window.__resources && window.__resources.propAntara) || "assets/properties/antara.png" },
    { name: "Scarletz by ANGO", city: "Kuala Lumpur", price: "RM 228", rating: 4.6, tag: "FEATURED", img: (window.__resources && window.__resources.propScarletz) || "assets/properties/scarletz.jpg" },
    { name: "Millerz Square by ANGO", city: "Kuala Lumpur", price: "RM 170", rating: 4.4, tag: "FEATURED", img: (window.__resources && window.__resources.propMillerz) || "assets/properties/millerz.jpg" },
    { name: "MY Inn Hotel (Inanam)", city: "Kota Kinabalu", price: "RM 89", rating: 4.2, tag: "", img: (window.__resources && window.__resources.propMyinn) || "assets/properties/myinn.png" },
  ];
  return (
    <section className="section" id="stays">
      <div className="section__inner">
        <div className="deals__head">
          <h2 className="section__h2">Your next stay</h2>
          <div className="deals__nav">
            <a href="#" className="deals__viewall">View all stays →</a>
            <button className="deals__arrow" aria-label="prev">‹</button>
            <button className="deals__arrow" aria-label="next">›</button>
          </div>
        </div>
        <div className="deals">
          {deals.map((d) => (
            <article key={d.name} className="deal">
              <div className="deal__media">
                {d.tag && <span className="deal__tag">{d.tag}</span>}
                <button className="deal__heart" aria-label="save">♡</button>
                <img src={d.img} alt={d.name} className="deal__img" />
              </div>
              <div className="deal__body">
                <div className="deal__top">
                  <div className="deal__name">{d.name}</div>
                  <div className="deal__rating">★ {d.rating}</div>
                </div>
                <div className="deal__city">📍 {d.city}</div>
                <div className="deal__bottom">
                  <div>
                    <div className="deal__cap">FROM / NIGHT</div>
                    <div className="deal__price">{d.price}</div>
                  </div>
                  <button className="deal__btn">View Deal</button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Supply teaser ---------- */
function SupplyTeaser() {
  return (
    <section className="section section--navy" id="supply">
      <div className="section__inner supply-teaser">
        <div className="supply-teaser__copy">
          <div className="section__eyebrow section__eyebrow--inv">KLIQ Supply · B2B</div>
          <h2 className="section__h2 section__h2--inv">
            Built for operators who want better deals.
          </h2>
          <p className="section__lead section__lead--inv">
            Pool demand with hundreds of other STR operators across Malaysia. Get hotel-chain pricing on everything from linens to laundry to maintenance — without the hotel-chain overhead.
          </p>
          <div className="supply-teaser__cta">
            <a href="https://supply.kliqliving.com/" className="btn btn--teal">Apply to join</a>
            <a href="https://supply.kliqliving.com/#how-it-works" className="btn btn--ghost-inv">How it works</a>
          </div>
          <div className="supply-teaser__stats">
            <div><span className="stat__v stat__v--teal">500+</span><span className="stat__l stat__l--inv">Active units</span></div>
            <div><span className="stat__v stat__v--teal">RM 120k+</span><span className="stat__l stat__l--inv">Saved vs. standard</span></div>
            <div><span className="stat__v stat__v--teal">15–30%</span><span className="stat__l stat__l--inv">Avg savings / order</span></div>
          </div>
        </div>
        <div className="supply-teaser__visual">
          <SupplyVisual accent="#1FA6A0" />
        </div>
      </div>
    </section>
  );
}

/* ---------- Owner teaser ---------- */
function OwnerTeaser() {
  return (
    <section className="section section--cream" id="owners">
      <div className="section__inner owner-teaser">
        <div className="owner-teaser__visual">
          <OwnerDashVisual accent="#2E6FA3" />
        </div>
        <div className="owner-teaser__copy">
          <div className="section__eyebrow">For property owners</div>
          <h2 className="section__h2">Your property, working harder. With less of your time.</h2>
          <p className="section__lead">
            KLIQ-managed units come with a real owner dashboard — monthly payouts, ticket history, tenant signals. We handle operations; you watch the numbers.
          </p>
          <ul className="owner-teaser__list">
            <li>✓ Monthly payouts, transparent fees</li>
            <li>✓ Maintenance handled end-to-end</li>
          </ul>
          <div className="owner-teaser__cta">
            <a href="mailto:bd@kliqliving.com" className="btn btn--dark">Talk to our team</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Routing block ---------- */
function RoutingBlock({ setAudience }) {
  const cards = [
    { k: "member", t: "I want to stay & earn", d: "Book stays, find rentals, earn KLIQ Points on everything.", cta: "Browse KLIQ", c: "#F4A93C" },
    { k: "operator", t: "I run an STR business", d: "Join Supply for collective buying power and operator services.", cta: "Apply to KLIQ Supply", c: "#1FA6A0" },
    { k: "owner", t: "I own a property", d: "Hand operations to KLIQ. Watch your unit perform in real time.", cta: "Owner tools", c: "#2E6FA3" },
  ];
  return (
    <section className="section section--white">
      <div className="section__inner">
        <div className="section__head section__head--center">
          <div className="section__eyebrow">Three ways to KLIQ</div>
          <h2 className="section__h2">Pick the door that fits.</h2>
        </div>
        <div className="route">
          {cards.map((c) => (
            <button
              key={c.k}
              className="route__card"
              onClick={() => {
                if (c.k === "member") {
                  window.location.href = "/login";
                } else {
                  setAudience(c.k);
                  document.querySelector(".hero").scrollIntoView({ behavior: "smooth", block: "start" });
                }
              }}
            >
              <div className="route__bar" style={{ background: c.c }} />
              <div className="route__t">{c.t}</div>
              <div className="route__d">{c.d}</div>
              <div className="route__cta" style={{ color: c.c }}>{c.cta} →</div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FrontFooter ---------- */
function FrontFooter() {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__brand">
          <img
            src="/kliq/img/kliq-logo-full.png"
            alt="KLIQ"
            width="160"
            height="41"
            style={{ display: "block", width: 160, height: "auto" }}
          />
          <p className="footer__tag">Property platform for the way Malaysia actually lives.</p>
          <div className="footer__social">
            <a href="https://www.instagram.com/kliq.asia/" aria-label="Instagram" target="_blank" rel="noopener noreferrer">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.8" />
                <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8" />
                <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" />
              </svg>
            </a>
            <a href="https://www.facebook.com/kliq.asia/" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M13.5 21v-7.5h2.6l.4-3h-3V8.7c0-.9.3-1.5 1.5-1.5H16.7V4.5c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.4-4 4.1V10.5H7.7v3h2.6V21h3.2z" />
              </svg>
            </a>
          </div>
        </div>
        <div className="footer__cols">
          <div>
            <div className="footer__h">Company</div>
            <a href="https://www.kliqliving.com/page/about">About</a>
            <a href="https://www.kliqliving.com/page/customer-support">Contact</a>
          </div>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 KLIQ Living Sdn. Bhd.</span>
        <span className="footer__bottom-links">
          <a href="https://www.kliqliving.com/page/privacy-policy">Privacy</a><a href="https://www.kliqliving.com/page/terms">Terms</a>
        </span>
      </div>
    </footer>
  );
}

/* ---------- Tweaks ---------- */
function FrontTweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="State">
        <TweakToggle
          label="Logged in"
          value={tweaks.loggedIn}
          onChange={(v) => setTweak("loggedIn", v)}
        />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakRadio
          label="Default audience"
          value={tweaks.defaultAudience}
          options={[
            { value: "member", label: "Members" },
            { value: "operator", label: "Operators" },
            { value: "owner", label: "Owners" },
          ]}
          onChange={(v) => setTweak("defaultAudience", v)}
        />
        <TweakRadio
          label="Hero density"
          value={tweaks.density}
          options={[
            { value: "compact", label: "Compact" },
            { value: "comfortable", label: "Comfortable" },
            { value: "spacious", label: "Spacious" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweakSection>
      <TweakSection title="Brand">
        <TweakColor label="Member accent" value={tweaks.memberAccent} onChange={(v) => setTweak("memberAccent", v)} />
        <TweakColor label="Operator accent" value={tweaks.operatorAccent} onChange={(v) => setTweak("operatorAccent", v)} />
        <TweakColor label="Owner accent" value={tweaks.ownerAccent} onChange={(v) => setTweak("ownerAccent", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ---------- App ---------- */
const FRONT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "loggedIn": false,
  "showSearch": true,
  "defaultAudience": "member",
  "density": "comfortable",
  "memberAccent": "#F4A93C",
  "operatorAccent": "#1FA6A0",
  "ownerAccent": "#2E6FA3"
}/*EDITMODE-END*/;

function FrontApp() {
  const [tweaks, setTweak] = useTweaks(FRONT_TWEAK_DEFAULTS);
  const [audience, setAudience] = useState(tweaks.defaultAudience);

  // sync default audience from tweaks
  useEffect(() => { setAudience(tweaks.defaultAudience); }, [tweaks.defaultAudience]);

  // override accents
  const A = {
    ...AUDIENCES,
    member:  { ...AUDIENCES.member,   accent: tweaks.memberAccent },
    operator:{ ...AUDIENCES.operator, accent: tweaks.operatorAccent },
    owner:   { ...AUDIENCES.owner,    accent: tweaks.ownerAccent },
  };
  // monkey-patch the global object so children pick it up
  Object.assign(AUDIENCES.member, { accent: tweaks.memberAccent });
  Object.assign(AUDIENCES.operator, { accent: tweaks.operatorAccent });
  Object.assign(AUDIENCES.owner, { accent: tweaks.ownerAccent });

  return (
    <div className={`app density-${tweaks.density}`}>
      <FrontTopNav inverted loggedIn={tweaks.loggedIn} audience={audience}/>
      <Hero
        audience={audience}
        setAudience={setAudience}
        showSearch={tweaks.showSearch}
        loggedIn={tweaks.loggedIn}
        accent={AUDIENCES[audience].accent}
      />
      {/* Members tab: full membership flow + your-next-stay deals.
          Operator/Owner tabs keep their dedicated sections. */}
      {audience === "member" && (
        <>
          {window.MembersHomeSections
            ? <window.MembersHomeSections loggedIn={tweaks.loggedIn} />
            : <PointsSection />}
          <DealsSection />
        </>
      )}
      {audience === "operator" && <SupplyTeaser />}
      {audience === "owner"    && <OwnerTeaser />}
      <RoutingBlock setAudience={setAudience} />
      {/* <FrontFooter /> */}
      <FrontTweaksUI tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}


window.FrontApp = FrontApp;