// ChairShare — customer subdomain landing page (1)
// At <slug>.voxink.com.au — practitioner's bookable storefront.

const CustomerSubdomainLanding = ({ onBook = () => {}, mobile = false }) => {
  const p = PRACTITIONER;

  if (mobile) {
    return (
      <PhoneFrame>
        <div style={{ height: "100%", overflow: "auto", background: "var(--cs-cream)" }}>
          {/* Hero */}
          <div style={{ position: "relative", height: 360, background: "var(--cs-rose-soft)" }}>
            <Placeholder label="practitioner hero · soft natural light" tone="rose" style={{ position: "absolute", inset: 0, borderRadius: 0, border: "none" }} />
            <div style={{ position: "absolute", top: 50, left: 16, right: 16, display: "flex", justifyContent: "space-between" }}>
              <Wordmark size={14} color="var(--cs-bone)" />
              <button className="btn btn-sm" style={{ background: "rgba(251,247,239,0.9)", padding: "7px 12px", fontSize: 12 }}>Sign in</button>
            </div>
          </div>
          <div style={{ padding: "0 22px", marginTop: -56, position: "relative", zIndex: 2 }}>
            <Avatar name={p.displayName} size={104} tone="rose" />
            <div className="eyebrow" style={{ marginTop: 22 }}>Hairdresser · {p.property.split("—")[1]?.trim()}</div>
            <h1 className="serif" style={{ fontSize: 38, lineHeight: 1, margin: "10px 0 12px", fontWeight: 400 }}>
              {p.displayName}
            </h1>
            <p style={{ fontSize: 15, lineHeight: 1.5, color: "var(--cs-ink-2)", margin: "0 0 16px" }}>{p.tagline}</p>
            <a className="u" style={{ fontSize: 13, color: "var(--cs-ink-2)", display: "inline-flex", alignItems: "center", gap: 6 }}>
              <Icon name="instagram" size={14} /> @{p.handle}
            </a>
          </div>

          {/* Services */}
          <div style={{ padding: "32px 22px 16px" }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Services</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {SERVICES.slice(0, 4).map(s => (
                <div key={s.id} className="card" style={{ padding: 18, display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
                  <div style={{ flex: 1 }}>
                    <div className="serif" style={{ fontSize: 17, marginBottom: 4 }}>{s.name}</div>
                    <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>{s.duration} min · ${s.price}</div>
                  </div>
                  <button onClick={onBook} className="btn btn-soft btn-sm" style={{ fontSize: 12 }}>Book</button>
                </div>
              ))}
            </div>
          </div>

          {/* Bio */}
          <div style={{ padding: "20px 22px", borderTop: "1px solid var(--cs-line)", marginTop: 20 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>About</div>
            <p className="serif drop" style={{ fontSize: 17, lineHeight: 1.55, color: "var(--cs-ink-2)", margin: "0 0 16px", fontWeight: 400 }}>
              {p.bio}
            </p>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {p.specialties.map(s => <span key={s} className="pill">{s}</span>)}
            </div>
          </div>

          {/* Portfolio */}
          <div style={{ padding: "20px 22px" }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>The work</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {Array.from({ length: 6 }).map((_, i) => (
                <Placeholder key={i} label={`#${i+1}`} tone={i % 3 === 0 ? "rose" : i % 3 === 1 ? "gold" : "default"} style={{ height: 130 }} />
              ))}
            </div>
          </div>

          {/* Hours */}
          <div style={{ padding: "20px 22px 100px" }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Hours</div>
            <div className="card" style={{ padding: 16 }}>
              {p.hours.map(([d, h], i) => (
                <div key={d} style={{ display: "flex", justifyContent: "space-between", padding: "9px 0", borderBottom: i < 6 ? "1px solid var(--cs-line)" : "none", fontSize: 13 }}>
                  <span style={{ color: "var(--cs-ink-2)" }}>{d}</span>
                  <span className="mono" style={{ fontSize: 12, color: h === "Closed" ? "var(--cs-ink-3)" : "var(--cs-ink)" }}>{h}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Sticky CTA */}
          <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "12px 16px 24px", background: "linear-gradient(to top, var(--cs-cream) 60%, rgba(244,237,224,0))" }}>
            <button onClick={onBook} className="btn btn-primary btn-block btn-lg">Book an appointment <Icon name="arrow_right" size={14} /></button>
          </div>
        </div>
      </PhoneFrame>
    );
  }

  // ── DESKTOP ──
  return (
    <div className="cs" style={{ width: 1440, background: "var(--cs-cream)" }}>
      {/* Top bar */}
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "22px 56px", borderBottom: "1px solid var(--cs-line)" }}>
        <Wordmark size={18} />
        <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }} className="mono">{p.handle}.voxink.com.au</div>
        <button className="btn btn-ghost btn-sm">Sign in</button>
      </header>

      {/* Hero */}
      <section style={{ padding: "70px 56px 60px", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 22 }}>Hairdresser · Yarraville</div>
          <h1 style={{ fontSize: 88, lineHeight: 0.95, margin: "0 0 22px", fontWeight: 400 }}>
            {p.displayName.split(" ")[0]}<br />
            <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>{p.displayName.split(" ")[1]}</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--cs-ink-2)", maxWidth: 480, marginBottom: 28 }}>{p.tagline}</p>
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <button onClick={onBook} className="btn btn-primary btn-lg">Book an appointment <Icon name="arrow_right" size={16} /></button>
            <a className="btn btn-ghost btn-lg"><Icon name="instagram" size={16} /> @{p.handle}</a>
          </div>
          <div style={{ display: "flex", gap: 36, marginTop: 50, paddingTop: 28, borderTop: "1px solid var(--cs-line)" }}>
            <div><div className="serif" style={{ fontSize: 28 }}>{p.yearsExperience} yrs</div><div className="eyebrow" style={{ marginTop: 4 }}>experience</div></div>
            <div><div className="serif" style={{ fontSize: 28 }}>4.9</div><div className="eyebrow" style={{ marginTop: 4 }}>★ 47 reviews</div></div>
            <div><div className="serif" style={{ fontSize: 28 }}>1:1</div><div className="eyebrow" style={{ marginTop: 4 }}>never double-booked</div></div>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <Placeholder label="practitioner portrait · backwash & brass · candid" tone="rose" style={{ width: "100%", height: 580, borderRadius: "var(--cs-r-xl)" }} />
        </div>
      </section>

      {/* Services + Bio side-by-side */}
      <section style={{ padding: "60px 56px", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, borderTop: "1px solid var(--cs-line)" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Services</div>
          <h2 className="serif" style={{ fontSize: 40, margin: "0 0 28px", fontWeight: 400 }}>The menu</h2>
          <div style={{ borderTop: "1px solid var(--cs-line)" }}>
            {SERVICES.map(s => (
              <div key={s.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 0", borderBottom: "1px solid var(--cs-line)", gap: 24 }}>
                <div style={{ flex: 1 }}>
                  <div className="serif" style={{ fontSize: 22, marginBottom: 4, fontWeight: 400 }}>{s.name}</div>
                  <div style={{ fontSize: 13, color: "var(--cs-ink-3)" }}>{s.desc} · {s.duration} min</div>
                </div>
                <div className="serif" style={{ fontSize: 22, color: "var(--cs-ink)", minWidth: 80, textAlign: "right" }}>${s.price}</div>
                <button onClick={onBook} className="btn btn-soft btn-sm">Book →</button>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>About Amelia</div>
          <p className="drop serif" style={{ fontSize: 21, lineHeight: 1.5, color: "var(--cs-ink-2)", marginTop: 0, marginBottom: 28, fontWeight: 400 }}>
            {p.bio}
          </p>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 32 }}>
            {p.specialties.map(s => <span key={s} className="pill pill-gold">{s}</span>)}
          </div>
          <div className="card" style={{ padding: 22, marginBottom: 22 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Hours</div>
            {p.hours.map(([d, h], i) => (
              <div key={d} style={{ display: "flex", justifyContent: "space-between", padding: "7px 0", borderBottom: i < 6 ? "1px solid var(--cs-line)" : "none", fontSize: 13 }}>
                <span style={{ color: "var(--cs-ink-2)" }}>{d}</span>
                <span className="mono" style={{ fontSize: 12, color: h === "Closed" ? "var(--cs-ink-3)" : "var(--cs-ink)" }}>{h}</span>
              </div>
            ))}
          </div>
          <div className="card" style={{ padding: 22 }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Find me</div>
            <div className="serif" style={{ fontSize: 18, marginBottom: 4 }}>{p.property}</div>
            <div style={{ fontSize: 13, color: "var(--cs-ink-3)" }}>{p.address}</div>
            <Placeholder label="map · Yarraville" tone="default" style={{ height: 110, marginTop: 14 }} />
          </div>
        </div>
      </section>

      {/* Portfolio */}
      <section style={{ padding: "60px 56px", borderTop: "1px solid var(--cs-line)" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>The work</div>
        <h2 className="serif" style={{ fontSize: 48, margin: "0 0 32px", fontWeight: 400 }}>
          Portfolio. <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>Recent.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {Array.from({ length: 9 }).map((_, i) => (
            <Placeholder key={i} label={`portfolio · ${i + 1}`}
              tone={i % 4 === 0 ? "rose" : i % 4 === 2 ? "gold" : "default"}
              style={{ height: i % 4 === 1 ? 380 : 280 }} />
          ))}
        </div>
      </section>

      {/* Reviews */}
      <section style={{ padding: "80px 56px", background: "var(--cs-bone)", borderTop: "1px solid var(--cs-line)" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>What clients say</div>
        <h2 className="serif" style={{ fontSize: 48, margin: "0 0 40px", fontWeight: 400 }}>4.9 <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>★</span> from 47 reviews.</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {REVIEWS.map((r, i) => (
            <div key={i} className="card" style={{ padding: 28, background: "var(--cs-cream)" }}>
              <div style={{ display: "flex", gap: 2, marginBottom: 14, color: "var(--cs-gold-deep)" }}>
                {Array.from({ length: 5 }).map((_, k) => <Icon key={k} name="star" size={14} />)}
              </div>
              <p className="serif" style={{ fontSize: 18, lineHeight: 1.5, margin: "0 0 18px", fontWeight: 400 }}>"{r.text}"</p>
              <div style={{ fontSize: 13, color: "var(--cs-ink-3)" }}>— {r.name}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer style={{ padding: "32px 56px", borderTop: "1px solid var(--cs-line)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--cs-ink-3)" }}>
        <span>{p.displayName} · {p.address}</span>
        <span>powered by <Wordmark size={11} color="var(--cs-ink-3)" /></span>
      </footer>
    </div>
  );
};

window.CustomerSubdomainLanding = CustomerSubdomainLanding;
