// ChairShare — marketing landing (voxink.com.au apex)
// Editorial / magazine direction. Desktop 1440 wide.

const MarketingLanding = () => {
  const [openFaq, setOpenFaq] = useState(0);

  const faqs = [
    { q: "How does chair rental compare to traditional salon employment?",
      a: "You pay a flat weekly rent for your chair and keep 100% of what you earn. No commission split, no minimum hours, no boss telling you when to take lunch. You own your client list, your prices, and your schedule." },
    { q: "What's included in the rent?",
      a: "Your chair, mirror, station, shared backwash, towels, kettle, music, electricity, water, wifi, cleaning. The booking platform, payment processing tools, and your own subdomain are also included." },
    { q: "What's the minimum lease term?",
      a: "Three months to start, rolling monthly after that. We want you to commit enough to build clientele, but not feel trapped." },
    { q: "How do I get paid?",
      a: "Customers pay through your booking page (Stripe). Funds land in your bank within two business days. We never touch your money." },
    { q: "Do you take a cut of my bookings?",
      a: "No. The flat rent is it. There's an optional marketing partnership where we help fill your chair on slow weeks for a small percentage — but only if you opt in." },
  ];

  return (
    <div className="cs" style={{ width: 1440, background: "var(--cs-cream)" }}>

      {/* ── NAV ── */}
      <header style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "26px 64px", borderBottom: "1px solid var(--cs-line)"
      }}>
        <Wordmark size={20} />
        <nav style={{ display: "flex", gap: 36, fontSize: 14, color: "var(--cs-ink-2)" }}>
          <a href="#how">How it works</a>
          <a href="#properties">Locations</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div style={{ display: "flex", gap: 12 }}>
          <button className="btn btn-ghost btn-sm">Sign in</button>
          <button className="btn btn-primary btn-sm">Apply for a chair</button>
        </div>
      </header>

      {/* ── HERO ── */}
      <section style={{ padding: "80px 64px 90px", display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 72, alignItems: "center" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 22 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 24, height: 1, background: "var(--cs-gold)" }}></span>
              For independent hairdressers · est. 2025
            </span>
          </div>
          <h1 style={{ fontSize: 86, lineHeight: 0.97, margin: "0 0 28px", fontWeight: 400 }}>
            Your chair,<br />
            your hours,<br />
            <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>your customers.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--cs-ink-2)", maxWidth: 480, marginBottom: 36 }}>
            Independent hairdressing without the lease, the fit-out, or the
            admin. Rent a chair in a beautiful Melbourne salon and keep
            everything you earn.
          </p>
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <button className="btn btn-primary btn-lg">
              Apply for a chair
              <Icon name="arrow_right" size={16} />
            </button>
            <button className="btn btn-ghost btn-lg">How it works</button>
          </div>
          <div style={{ display: "flex", gap: 28, marginTop: 56, paddingTop: 28, borderTop: "1px solid var(--cs-line)" }}>
            {[
              ["12", "chairs available"],
              ["3", "Melbourne locations"],
              ["100%", "of what you earn"],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="serif" style={{ fontSize: 32, lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 12, color: "var(--cs-ink-3)", marginTop: 4, letterSpacing: "0.04em" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <Placeholder label="hero — warm-luxe salon interior · golden hour · single chair, mirror, dried palms" tone="rose"
            style={{ width: "100%", height: 640, borderRadius: "var(--cs-r-xl)" }} />
          <div style={{
            position: "absolute", bottom: -28, left: -28, padding: "20px 24px",
            background: "var(--cs-bone)", borderRadius: "var(--cs-r-lg)",
            boxShadow: "var(--cs-shadow-lg)", display: "flex", alignItems: "center", gap: 14, maxWidth: 280
          }}>
            <Avatar name="Amelia M" size={44} tone="rose" />
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>Amelia just took a booking</div>
              <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>Yarraville · 3 min ago</div>
            </div>
          </div>
        </div>
      </section>

      {/* ── PROBLEM (italic editorial) ── */}
      <section style={{
        padding: "100px 64px",
        background: "var(--cs-ink)",
        color: "var(--cs-cream)",
        position: "relative",
      }}>
        <div className="eyebrow" style={{ color: "var(--cs-gold-soft)", marginBottom: 30 }}>The problem</div>
        <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.1, maxWidth: 1100, margin: 0, fontWeight: 400 }}>
          Tired of giving <span className="serif-it" style={{ color: "var(--cs-gold-soft)" }}>60%</span> of every cut to your boss?
          Want to go solo, but the <span className="serif-it" style={{ color: "var(--cs-gold-soft)" }}>$50k fit-out</span> is killing the dream?
        </h2>
        <div style={{ marginTop: 60, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
          {[
            { t: "Skip the lease", d: "No five-year commitment, no personal guarantee on a commercial space, no broken HVAC at midnight." },
            { t: "Skip the fit-out", d: "We've already done the brass mirrors, the dried palms, the stylist station you actually want to work at." },
            { t: "Skip the admin", d: "Booking page, calendar, customer history, tax-time CSV. All built. All yours." },
          ].map(b => (
            <div key={b.t}>
              <div className="serif-it" style={{ fontSize: 22, color: "var(--cs-gold-soft)", marginBottom: 10 }}>·</div>
              <div className="serif" style={{ fontSize: 22, marginBottom: 10 }}>{b.t}</div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(244,237,224,0.7)", margin: 0 }}>{b.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section id="how" style={{ padding: "120px 64px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 60 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>How it works</div>
            <h2 className="serif" style={{ fontSize: 56, margin: 0, fontWeight: 400, lineHeight: 1.05, maxWidth: 700 }}>
              From application to first booking in <span className="serif-it">under a week.</span>
            </h2>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--cs-line)" }}>
          {[
            { n: "01", t: "Pick a chair", d: "Browse available chairs across our Melbourne properties. See real photos, monthly rent, and which days are open. Sign your lease digitally — no printer, no scanner.", img: "chair tour · brass detail" },
            { n: "02", t: "We handle the rest", d: "Your booking page goes live at your-name.voxink.com.au. Customers book and pay through Stripe. Calendar, customer list, tax records, all done.", img: "booking page on phone" },
            { n: "03", t: "You keep what you earn", d: "Funds land in your bank in two business days. Flat monthly rent — no commission, no platform fee, no surprise charges.", img: "earnings statement detail" },
          ].map((s, i) => (
            <div key={s.n} style={{
              padding: "44px 0",
              borderRight: i < 2 ? "1px solid var(--cs-line)" : "none",
              paddingLeft: i === 0 ? 0 : 40,
              paddingRight: i === 2 ? 0 : 40,
            }}>
              <div className="serif-it" style={{ fontSize: 18, color: "var(--cs-gold-deep)", marginBottom: 18 }}>{s.n}</div>
              <Placeholder label={s.img} tone={i === 1 ? "gold" : "default"} style={{ height: 220, marginBottom: 28 }} />
              <h3 className="serif" style={{ fontSize: 26, margin: "0 0 10px", fontWeight: 400 }}>{s.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--cs-ink-2)", margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ── PROPERTIES ── */}
      <section id="properties" style={{ padding: "100px 64px", background: "var(--cs-bone)", borderTop: "1px solid var(--cs-line)", borderBottom: "1px solid var(--cs-line)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 50 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>The locations</div>
            <h2 className="serif" style={{ fontSize: 48, margin: 0, fontWeight: 400, maxWidth: 600 }}>
              Three Melbourne salons. <span className="serif-it">All beautiful.</span>
            </h2>
          </div>
          <a href="#" className="u" style={{ fontSize: 14, color: "var(--cs-ink-2)" }}>See all available chairs →</a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 24 }}>
          {[
            { name: "The Atelier", suburb: "Yarraville", chairs: 4, available: 1, big: true, img: "yarraville · airy front room · arched window" },
            { name: "House of Lune", suburb: "Brunswick", chairs: 5, available: 2, img: "brunswick · backwash & brass" },
            { name: "Studio West", suburb: "Footscray", chairs: 3, available: 3, img: "footscray · single chair" },
          ].map(p => (
            <div key={p.name} className="card" style={{ overflow: "hidden", padding: 0 }}>
              <Placeholder label={p.img} tone="rose" style={{ height: p.big ? 380 : 260, borderRadius: 0, border: "none" }} />
              <div style={{ padding: 26 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
                  <h3 className="serif" style={{ fontSize: 24, margin: 0, fontWeight: 400 }}>{p.name}</h3>
                  <span className="pill pill-gold">{p.available} avail.</span>
                </div>
                <div style={{ fontSize: 13, color: "var(--cs-ink-3)", marginBottom: 16 }}>
                  <Icon name="pin" size={12} /> {p.suburb} · {p.chairs} chairs total
                </div>
                <a className="u" style={{ fontSize: 13, color: "var(--cs-ink)" }}>Tour the space →</a>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── PRICING ── */}
      <section id="pricing" style={{ padding: "120px 64px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, alignItems: "center" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>The deal</div>
          <h2 className="serif" style={{ fontSize: 56, margin: "0 0 26px", fontWeight: 400, lineHeight: 1.05 }}>
            Flat monthly rent. <span className="serif-it">No hidden fees.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--cs-ink-2)", marginBottom: 32 }}>
            We make money one way: chair rent. We don't take a cut of your bookings,
            we don't charge a platform fee, and we don't sell your customer list.
          </p>
          <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--cs-ink-3)", marginBottom: 0, fontStyle: "italic" }}>
            Optional marketing partnership: if you want help filling slow days, we'll
            promote your chair for a small percentage of incremental bookings — only
            on the bookings we drive, only if you opt in.
          </p>
        </div>
        <div className="card" style={{ padding: 40 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Chair · Yarraville</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 6 }}>
            <span className="serif" style={{ fontSize: 80, lineHeight: 1, fontWeight: 400 }}>$285</span>
            <span style={{ fontSize: 16, color: "var(--cs-ink-3)" }}>/ week</span>
          </div>
          <div style={{ fontSize: 14, color: "var(--cs-ink-3)", marginBottom: 28 }}>Tue · Wed · Thu — 3-month minimum</div>
          <hr className="hair" style={{ marginBottom: 22 }} />
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              "Chair, mirror, station, backwash, towels",
              "Booking page at <slug>.voxink.com.au",
              "Stripe payments — funds in 2 business days",
              "Customer list, calendar, tax CSV",
              "Utilities, wifi, cleaning, kettle",
            ].map(f => (
              <li key={f} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 14 }}>
                <Icon name="check" size={16} color="var(--cs-gold-deep)" />
                <span dangerouslySetInnerHTML={{ __html: f.replace("<slug>", '<span class="mono" style="font-size:12px;background:var(--cs-cream-2);padding:2px 6px;border-radius:4px">your-name</span>') }} />
              </li>
            ))}
          </ul>
          <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 32 }}>
            Apply for this chair <Icon name="arrow_right" size={16} />
          </button>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section id="faq" style={{ padding: "100px 64px", background: "var(--cs-ink)", color: "var(--cs-cream)" }}>
        <div className="eyebrow" style={{ marginBottom: 16, color: "var(--cs-gold-soft)" }}>FAQ</div>
        <h2 className="serif" style={{ fontSize: 48, margin: "0 0 50px", fontWeight: 400 }}>
          Questions, <span className="serif-it">answered.</span>
        </h2>
        <div style={{ borderTop: "1px solid rgba(244,237,224,0.15)" }}>
          {faqs.map((f, i) => {
            const open = openFaq === i;
            return (
              <div key={i} style={{ borderBottom: "1px solid rgba(244,237,224,0.15)" }}>
                <button onClick={() => setOpenFaq(open ? -1 : i)}
                  style={{
                    width: "100%", padding: "26px 0", background: "transparent", border: 0,
                    color: "var(--cs-cream)", fontFamily: "var(--cs-serif)", fontSize: 22,
                    textAlign: "left", display: "flex", justifyContent: "space-between", alignItems: "center",
                    cursor: "pointer", fontWeight: 400
                  }}>
                  <span>{f.q}</span>
                  <span style={{ transform: open ? "rotate(45deg)" : "rotate(0)", transition: "transform .2s" }}>
                    <Icon name="plus" size={20} color="var(--cs-gold-soft)" />
                  </span>
                </button>
                {open && (
                  <div style={{ paddingBottom: 26, paddingRight: 100, fontSize: 16, lineHeight: 1.6, color: "rgba(244,237,224,0.75)" }}>
                    {f.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </section>

      {/* ── CLOSING ── */}
      <section style={{ padding: "140px 64px", textAlign: "center" }}>
        <div className="eyebrow" style={{ marginBottom: 24 }}>Apply now</div>
        <h2 className="serif" style={{ fontSize: 88, lineHeight: 1, margin: "0 auto 32px", fontWeight: 400, maxWidth: 1000 }}>
          The chair is <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>waiting.</span>
        </h2>
        <p style={{ fontSize: 17, color: "var(--cs-ink-2)", marginBottom: 40 }}>
          Tell us a bit about yourself. We respond within one business day.
        </p>
        <button className="btn btn-primary btn-lg" style={{ padding: "18px 36px" }}>
          Apply for a chair <Icon name="arrow_right" size={16} />
        </button>
      </section>

      {/* ── FOOTER ── */}
      <footer style={{ padding: "40px 64px 50px", borderTop: "1px solid var(--cs-line)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13, color: "var(--cs-ink-3)" }}>
        <Wordmark size={16} />
        <div style={{ display: "flex", gap: 28 }}>
          <a href="#"><Icon name="instagram" size={16} /></a>
          <span>ABN 12 345 678 901</span>
          <a href="#" className="u">hello@voxink.com.au</a>
        </div>
      </footer>
    </div>
  );
};

window.MarketingLanding = MarketingLanding;