// ============ About.jsx + Contact.jsx ============

const PORTRAIT_FALLBACK = "assets/portrait-debora.png";

const AboutPage = ({ onNavigate }) => (
  <main data-screen-label="About">
    <section className="mc-shell mc-about-hero">
      <div>
        <div className="mc-eyebrow">About · Malca Consulting</div>
        <h1>A boutique consultancy for <em style={{ fontStyle: "italic", color: "var(--mc-burgundy)" }}>owner-led</em> clinical practices <span className="mc-about-hero-locale">in Geneva and French-speaking Switzerland.</span></h1>
      </div>
      <p className="lede">
        Four engagements per year. Five months inside the practice. The playbook stays with the team.
      </p>
    </section>

    <section className="mc-shell mc-about-section">
      <div className="mc-grid-2">
        <div className="mc-snum"><strong>01</strong> &nbsp;/&nbsp; What we do</div>
        <div>
          <h2 className="mc-statement">We turn excellent clinical work into a <em>stronger operating system</em>.</h2>
          <div className="mc-body-col">
            <p>Premium practices often do not have a quality problem. They have a system problem.</p>
            <p>The expertise is there. The reputation is there. The patient value is there. But growth still depends too heavily on the owner’s presence, memory, intuition, and personal follow-up.</p>
            <p>Malca Consulting identifies where the commercial system is leaking — then rebuilds the patient journey, follow-up rhythm, conversion process, and team execution around the quality of the work already being delivered.</p>
            <p><em>Diagnose first. Rebuild what matters. Transfer the system. Leave the practice stronger.</em></p>
          </div>
        </div>
      </div>
    </section>

    <section className="mc-shell mc-about-section">
      <div className="mc-snum" style={{ marginBottom: 56 }}><strong>02</strong> &nbsp;/&nbsp; About Debora Malca</div>
      <div className="mc-about-grid">
        <figure className="mc-about-fig">
          <image-slot
            id="about-portrait"
            shape="rect"
            fit="cover"
            placeholder="Drop a portrait of Debora"
            src={PORTRAIT_FALLBACK}
            style={{ display: "block", width: "100%", height: "auto", aspectRatio: "4 / 5" }}
          ></image-slot>
          <figcaption>Debora Malca · Geneva</figcaption>
        </figure>
        <div className="mc-about-col">
          <h2>For owners who have mastered the craft — <em>but feel the business hasn't caught up.</em></h2>
          <p>
            Debora Malca co-founded Malca Consulting for clinical owners who have already mastered the craft, but feel the business around the craft has not caught up.
          </p>
          <p>
            Her work sits between strategy, patient conversion, team implementation, and operational clarity.
          </p>
          <p>
            <em>Not advertising. Not social media management. Not growth theatre.</em>
          </p>
          <p>
            A precise, inside-the-practice system built to help the right patients move from interest to decision — without the owner carrying every step alone.
          </p>
          <div style={{ marginTop: 32 }}>
            <button className="mc-btn mc-btn-secondary" onClick={() => onNavigate("diagnostic")}>
              Take the revenue diagnostic
              <span className="arr">→</span>
            </button>
          </div>
        </div>
      </div>
    </section>

    <section className="mc-shell mc-about-section">
      <div className="mc-grid-2">
        <div className="mc-snum"><strong>03</strong> &nbsp;/&nbsp; Where we work</div>
        <div>
          <h2 className="mc-statement">Geneva. <em>French-speaking Switzerland.</em></h2>
          <div className="mc-body-col">
            <p>Malca Consulting works locally and selectively, with practices close enough to be understood properly.</p>
            <p>We read every submission ourselves. We write every proposal ourselves. We step inside the practice for five months at a time.</p>
            <p><em>Four engagements per year. Designed to end cleanly. Built so the system stays with the team.</em></p>
          </div>
        </div>
      </div>
    </section>
  </main>
);

// ============ Contact ============
const ContactPage = ({ onNavigate }) => {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({
    name: "", practice: "", location: "", specialty: "",
    website: "", gbp: "", concern: "", owner: "yes",
    locations: "", team: "", marketing: "", outcome: ""
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); window.scrollTo({ top: 0, behavior: "smooth" }); };

  if (sent) {
    return (
      <main data-screen-label="Contact (sent)">
        <section className="mc-shell mc-contact">
          <div className="mc-eyebrow">Received</div>
          <h2 className="mc-contact-h">Your submission has <em style={{ fontStyle: "italic", color: "var(--mc-burgundy)" }}>been received</em>.</h2>
          <p className="mc-contact-lede">
            If there is alignment, you will be invited to a private 20-minute conversation within two working days.
          </p>
          <p className="mc-contact-sub">No mass funnel. No automated sequences. We read everything ourselves.</p>
          <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
            <button className="mc-btn mc-btn-secondary" onClick={() => setSent(false)}>Send another</button>
            <button className="mc-btn mc-btn-text" onClick={() => onNavigate("home")}>Back to home</button>
          </div>
        </section>
      </main>
    );
  }

  return (
    <main data-screen-label="Contact">
      <section className="mc-shell mc-contact">
        <div className="mc-eyebrow">Contact · Diagnostic conversation</div>
        <h1 className="mc-contact-h">Request your <em style={{ fontStyle: "italic", color: "var(--mc-burgundy)" }}>private practice review</em>.</h1>
        <p className="mc-contact-lede">
          We review your patient journey, database opportunity, and commercial system before the meeting — so the conversation is specific, practical, and worth your time.
        </p>
        <p className="mc-contact-sub">
          Limited engagements per year. Reviewed personally.
        </p>

        <div className="mc-contact-grid">
          <form className="mc-form" onSubmit={submit}>
            <div className="mc-field">
              <label>Name</label>
              <input value={form.name} onChange={set("name")} required />
            </div>
            <div className="mc-field">
              <label>Practice name</label>
              <input value={form.practice} onChange={set("practice")} required />
            </div>

            <div className="mc-field">
              <label>Location</label>
              <input value={form.location} onChange={set("location")} placeholder="Geneva, Lausanne…" required />
            </div>
            <div className="mc-field">
              <label>Specialty</label>
              <input value={form.specialty} onChange={set("specialty")} placeholder="Orthodontics, dermatology…" required />
            </div>

            <div className="mc-field">
              <label>Website</label>
              <input type="url" value={form.website} onChange={set("website")} placeholder="https://" />
            </div>
            <div className="mc-field">
              <label>Google Business Profile</label>
              <input type="url" value={form.gbp} onChange={set("gbp")} placeholder="https://" />
            </div>

            <div className="mc-field mc-field-full">
              <label>Main concern</label>
              <textarea value={form.concern} onChange={set("concern")} placeholder="Where do you feel the system leaks — patients, time, revenue, owner load?" required />
            </div>

            <div className="mc-field mc-field-full">
              <label>Are you the owner or decision-maker?</label>
              <div className="mc-field-radio">
                <label><input type="radio" name="owner" value="yes" checked={form.owner === "yes"} onChange={set("owner")} /> Yes</label>
                <label><input type="radio" name="owner" value="no" checked={form.owner === "no"} onChange={set("owner")} /> No</label>
                <label><input type="radio" name="owner" value="part" checked={form.owner === "part"} onChange={set("owner")} /> Part of the decision</label>
              </div>
            </div>

            <div className="mc-field">
              <label>Number of locations</label>
              <input value={form.locations} onChange={set("locations")} placeholder="1, 2, 3…" />
            </div>
            <div className="mc-field">
              <label>Team size</label>
              <input value={form.team} onChange={set("team")} placeholder="Approx." />
            </div>

            <div className="mc-field mc-field-full">
              <label>Current marketing activity</label>
              <input value={form.marketing} onChange={set("marketing")} placeholder="Ads, social, agency, none…" />
            </div>

            <div className="mc-field mc-field-full">
              <label>What would make this valuable 12 months from now?</label>
              <textarea value={form.outcome} onChange={set("outcome")} placeholder="In your own words." />
            </div>

            <div className="mc-field mc-field-full" style={{ display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
              <button className="mc-btn mc-btn-primary" type="submit">
                Request my practice review
                <span className="arr">→</span>
              </button>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--mc-stone)" }}>
                Limited engagements per year · Reviewed personally
              </span>
            </div>
          </form>

          <aside className="mc-contact-aside">
            <div className="block">
              <div className="eyebrow">Engagements</div>
              <p>Four per year. Five months each. <em>The playbook stays with the team.</em></p>
            </div>
            <div className="block">
              <div className="eyebrow">Where</div>
              <p>Geneva · French-speaking Switzerland</p>
              <p style={{ marginTop: 4, color: "var(--mc-stone)" }}>Rue du Rhône 14 · 1204 Genève</p>
            </div>
            <div className="block">
              <div className="eyebrow">Direct</div>
              <p><a href="mailto:hello@malcaconsulting.com" style={{ borderBottomColor: "var(--mc-pearl)" }}>hello@malcaconsulting.com</a></p>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { AboutPage, ContactPage });