// ============ Home.jsx ============
// Editorial single-scroll home page for Malca Consulting.
// Anchors: #method (Section 04), #engagement (Section 06), #final (Final CTA).

// Hero is a user-fillable <image-slot> so Debora can drop in real clinic
// photography. Empty state reads as a calm beige panel that matches the
// quiet-luxury aesthetic.
const HERO_FALLBACK = "assets/hero-dental-suite.png";

const DEFAULT_HEADLINE = {
  h: <React.Fragment>Increase <em style={{ color: "var(--mc-burgundy)" }}>revenue</em> without working more hours</React.Fragment>,
  lede: <React.Fragment>For clinic owners whose commercial system has not yet caught up with their clinical expertise.</React.Fragment>,
  sub: "A system that fixes what leaks patients, time, and revenue, and stays inside the practice."
};

const HomePage = ({ onNavigate, headline }) => {
  const hv = headline || DEFAULT_HEADLINE;

  // Method section: scroll-into-view animation
  const methodRef = React.useRef(null);
  const [methodInView, setMethodInView] = React.useState(false);
  React.useEffect(() => {
    if (!methodRef.current) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setMethodInView(true);
            obs.disconnect();
          }
        });
      },
      { threshold: 0.18, rootMargin: "0px 0px -8% 0px" }
    );
    obs.observe(methodRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <main>
      {/* HERO */}
      <section className="mc-hero-bleed" data-screen-label="Hero">
        <image-slot
          id="home-hero"
          shape="rect"
          fit="cover"
          placeholder="Drop a clinic photograph"
          src={HERO_FALLBACK}
          style={{ display: "block", width: "100%", height: "100%" }}>
        </image-slot>
        <div className="mc-hero-bleed-grad" aria-hidden="true" />
        <div className="mc-hero-bleed-inner mc-shell">
          <div className="mc-hero-bleed-text">
            <h1 className="mc-hero-h">
              {hv.h}
            </h1>
            <p className="mc-hero-lede">
              {hv.lede}
            </p>
            <div className="mc-hero-cta">
              <button className="mc-btn mc-btn-primary" onClick={() => onNavigate("diagnostic")}>
                Take the revenue diagnostic
                <span className="arr">→</span>
              </button>
              <span className="mc-hero-note">3 minutes · Immediate results</span>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 01 — More marketing will not fix a weak system */}
      <section className="mc-section">
        <div className="mc-shell">
          <div className="mc-grid-2">
            <div className="mc-snum"><strong>01</strong> &nbsp;/&nbsp; The real issue</div>
            <div>
              <h2 className="mc-statement">
                More <em style={{ color: "var(--mc-burgundy)" }}>visibility will not fix</em> an unstructured patient journey
              </h2>
              <div className="mc-body-col">
                <p>Most agencies bring more traffic, more leads, or more campaigns.</p>
                <p>But visibility only amplifies what is already happening inside the practice.</p>
                <p>If booking, follow-up, consultation conversion, reviews, and reactivation are not systemized, more demand only makes the leak more expensive.</p>
                <p>We work <em>before</em> the campaign — where revenue is actually won or lost.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 02 — Systems before campaigns */}
      <section className="mc-section warm">
        <div className="mc-shell">
          <div className="mc-grid-2">
            <div className="mc-snum"><strong>02</strong> &nbsp;/&nbsp; The principle</div>
            <div>
              <h2 className="mc-statement">
                Systems <em>before</em> campaigns
              </h2>
              <div className="mc-body-col">
                <p>Before investing more in marketing, the practice needs to know where:</p>
                <ul className="mc-inline-list">
                  <li>patients are lost</li>
                  <li>conversion breaks</li>
                  <li>follow-up is inconsistent</li>
                  <li>the team needs protocol</li>
                  <li>the owner is still carrying the system manually</li>
                </ul>
                <p>We diagnose the bottlenecks, redesign the patient journey, implement the protocols, and train the team to run them.</p>
              </div>
            </div>
          </div>
          <figure className="mc-section-fig mc-section-fig-centered">
            <img src="assets/photo-journey-paper.png" alt="The patient journey — mapping where value leaks" />
          </figure>
        </div>
      </section>

      {/* MANIFESTO BAND — burgundy full-bleed statement, above the Fit section */}
      <section className="mc-section burgundy mc-manifesto-band" data-screen-label="Manifesto">
        <div className="mc-shell">
          <div className="mc-manifesto-overline">
            <span className="rule" aria-hidden="true" />
            The promise
          </div>
          <p className="mc-manifesto-statement">
            A system that fixes what leaks <em>patients, time, and revenue</em> — and <em>stays inside the practice</em>.
          </p>
          <div className="mc-manifesto-foot" aria-hidden="true">
            <span className="asterism">⁂</span>
          </div>
        </div>
      </section>

      {/* SECTION 03 — For / Not For paired */}
      {/* SECTION 03 — Fit (reimagined: editorial asymmetric layout) */}
      <section className="mc-section tight">
        <div className="mc-shell">
          <div className="mc-grid-2" style={{ marginBottom: 80 }}>
            <div className="mc-snum"><strong>03</strong> &nbsp;/&nbsp; The fit</div>
            <div>
              <h2 className="mc-statement">
                Built for practices with <em>excellence already in place</em>.
              </h2>
            </div>
          </div>
          <div className="mc-fit-grid">
            <div className="mc-fit-main">
              <div className="mc-fit-label">
                <span className="rule" aria-hidden="true" />
                This work is for practices with
              </div>
              <ol className="mc-fit-list">
                <li><span className="idx">i</span><span className="text">Real clinical expertise.</span></li>
                <li><span className="idx">ii</span><span className="text">Strong patient outcomes.</span></li>
                <li><span className="idx">iii</span><span className="text">Premium treatment value.</span></li>
                <li><span className="idx">iv</span><span className="text">Visible reputation signals.</span></li>
                <li><span className="idx">v</span><span className="text">An existing patient database.</span></li>
                <li><span className="idx">vi</span><span className="text">A team member who can execute.</span></li>
                <li><span className="idx">vii</span><span className="text">An owner ready to stop carrying the system alone.</span></li>
              </ol>
            </div>
            <aside className="mc-fit-aside">
              <div className="mc-fit-label is-quiet">
                <span className="rule" aria-hidden="true" />
                Not for
              </div>
              <p className="mc-fit-not">
                Practices looking for quick leads, social media management, discount campaigns, cosmetic marketing, free pilots, or permanent dependency.
              </p>
            </aside>
          </div>
        </div>
      </section>

      {/* SECTION 04 — Diagnose. Redesign. Implement. (METHOD anchor) */}
      <section ref={methodRef} className={"mc-section method-animated" + (methodInView ? " is-in" : "")} id="method" data-screen-label="04 Method">
        <div className="mc-shell">
          <div className="mc-grid-2" style={{ marginBottom: 24 }}>
            <div className="mc-snum"><strong>04</strong> &nbsp;/&nbsp; How we do it</div>
            <div>
              <h2 className="mc-statement">
                Our <em>methodology</em>.
              </h2>
            </div>
          </div>
        </div>
        <div className="mc-wide">
          <MethodSection />
        </div>
      </section>

      {/* MID-CTA — invite the Hidden Revenue Diagnostic */}
      <section className="mc-midcta mc-midcta-stacked" data-screen-label="Mid-CTA">
        <div className="mc-shell">
          <div className="mc-midcta-inner">
            <div className="mc-midcta-text">
              <div className="mc-eyebrow" style={{ color: "var(--mc-burgundy)", margin: 0, justifyContent: "center" }}>
                <span className="rule" aria-hidden="true" style={{ display: "inline-block", width: 28, height: 1, background: "var(--mc-burgundy)", marginRight: 12, verticalAlign: "middle" }} />
                Hidden Revenue Diagnostic
              </div>
              <h3 className="mc-midcta-h">
                Where is the <em>hidden revenue</em> in your own practice?
              </h3>
              <p className="mc-midcta-p">
                A short diagnostic shows whether treatment revenue is being lost inside the database, consultation path, or follow-up system.
              </p>
            </div>
            <figure className="mc-section-fig mc-section-fig-centered" style={{ marginTop: 8, marginBottom: 8, maxWidth: 480 }}>
              <img src="assets/photo-consultation.png" alt="A private 20-minute diagnostic conversation" />
            </figure>
            <div className="mc-midcta-action">
              <button className="mc-btn mc-btn-primary" onClick={() => onNavigate("diagnostic")}>
                Take the revenue diagnostic
                <span className="arr">→</span>
              </button>
              <span className="mc-midcta-note">3 minutes · Immediate results</span>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 05 — What changes */}
      <section className="mc-section soft">
        <div className="mc-shell">
          <div className="mc-grid-2" style={{ marginBottom: 56 }}>
            <div className="mc-snum"><strong>05</strong> &nbsp;/&nbsp; The outcome</div>
            <div>
              <h2 className="mc-statement">More revenue.<br /><em>Less owner-dependency.</em></h2>
              <div className="mc-body-col">
                <p>The practice becomes easier to lead because growth is no longer carried by instinct, memory, or the owner's personal follow-up.</p>
                <p>The practice gains:</p>
              </div>
            </div>
          </div>
          <ul className="mc-outcomes-grid">
            <li><span className="idx">i</span><span className="lbl">More high-value patients reactivated from the existing database</span></li>
            <li><span className="idx">ii</span><span className="lbl">A clearer patient journey from interest to consultation to treatment</span></li>
            <li><span className="idx">iii</span><span className="lbl">Follow-up that happens consistently, not only when someone remembers</span></li>
            <li><span className="idx">iv</span><span className="lbl">Stronger consultation conversion</span></li>
            <li><span className="idx">v</span><span className="lbl">A team that knows exactly what to do, when, and how</span></li>
            <li><span className="idx">vi</span><span className="lbl">KPIs that make performance visible</span></li>
            <li><span className="idx">vii</span><span className="lbl">Fewer leaks across booking, follow-up, conversion, and reactivation</span></li>
            <li><span className="idx">viii</span><span className="lbl">Fewer decisions stuck with the owner</span></li>
            <li><span className="idx">ix</span><span className="lbl">More control over growth</span></li>
            <li><span className="idx">x</span><span className="lbl">A commercial system that holds without the owner in the room</span></li>
          </ul>
        </div>
      </section>

      {/* GOAL BAND — bottle green full-bleed statement, after Outcomes */}
      <section className="mc-section mc-manifesto-band is-bottle is-compact" data-screen-label="Goal">
        <div className="mc-shell">
          <div className="mc-manifesto-overline">
            <span className="rule" aria-hidden="true" />
            The goal
          </div>
          <p className="mc-manifesto-statement">
            Not just <em>more patients</em>.
          </p>
          <p className="mc-manifesto-statement">
            A practice that converts better, follows up cleaner, and stops depending on the owner to hold the system together.
          </p>
        </div>
      </section>

      {/* SECTION 06 — How the engagement begins */}
      <section className="mc-section">
        <div className="mc-shell">
          <div className="mc-grid-2" style={{ marginBottom: 48 }}>
            <div className="mc-snum"><strong>06</strong> &nbsp;/&nbsp; The next step</div>
            <div>
              <h2 className="mc-statement">Start with the <em>Revenue Diagnostic</em>.</h2>
              <div className="mc-body-col">
                <p>Before we propose an engagement, we look for the business case.</p>
                <p>The diagnostic shows whether there is meaningful revenue already sitting inside the practice — in the database, the booking path, the follow-up, the consultation process, or the team rhythm.</p>
              </div>
            </div>
          </div>
        </div>
        <div className="mc-wide">
          <div className="mc-begin mc-begin-5">
            <div className="mc-begin-cell">
              <div className="mc-begin-num">01</div>
              <h4 className="mc-begin-title">Request the diagnostic.</h4>
              <p className="mc-begin-text">Share the key details of the practice.</p>
            </div>
            <div className="mc-begin-cell">
              <div className="mc-begin-num">02</div>
              <h4 className="mc-begin-title">We review the revenue path.</h4>
              <p className="mc-begin-text">Visibility, reputation, database, booking, follow-up, conversion, and team ownership.</p>
            </div>
            <div className="mc-begin-cell">
              <div className="mc-begin-num">03</div>
              <h4 className="mc-begin-title">We identify the leaks.</h4>
              <p className="mc-begin-text">Where are patients being lost, delayed, forgotten, or left unsupported?</p>
            </div>
            <div className="mc-begin-cell">
              <div className="mc-begin-num">04</div>
              <h4 className="mc-begin-title">We discuss the opportunity.</h4>
              <p className="mc-begin-text">If there is a real case, we walk through what we see and what it would take to correct it.</p>
            </div>
            <div className="mc-begin-cell">
              <div className="mc-begin-num">05</div>
              <h4 className="mc-begin-title">We propose only when it makes sense.</h4>
              <p className="mc-begin-text">A scope, timeline, and fee structure are written only if the opportunity is clear.</p>
            </div>
          </div>
          <div className="mc-begin-cta">
            <button className="mc-btn mc-btn-primary" onClick={() => onNavigate("diagnostic")}>
              Take the revenue diagnostic
              <span className="arr">→</span>
            </button>
            <span className="mc-hero-note">Four engagements per year</span>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="mc-final" id="final" data-screen-label="08 Final CTA">
        <div className="mc-shell">
          <div className="mc-final-grid">
            <div className="mc-final-text">
              <div className="mc-eyebrow">
                Hidden Revenue Diagnostic
              </div>
              <h2>
                Your work is excellent. <em>Your systems should reflect it.</em>
              </h2>
              <p>The quality of the practice should not depend on the owner holding everything together.</p>
              <p>We build the commercial systems that <em>protect the standard of the work</em> — and make growth easier to sustain.</p>
            </div>
            <figure className="mc-final-fig">
              <img src="assets/photo-final-followup.png" alt="A practitioner reviewing the follow-up protocol — the system at work inside the practice" />
            </figure>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <FAQ />
    </main>);}; // ============ FAQ.jsx ============
const FAQ_ITEMS = [
{
  q: "Do you run ads?",
  a: [
  "Not first.",
  "Ads only make sense after the practice knows where conversion is leaking. We work on the system that catches what advertising surfaces: visibility, reputation, booking, conversion, and follow-up."]

},
{
  q: "Do you manage social media?",
  a: [
  "No.",
  "We are not a social media agency. We work on the commercial system behind growth: patient journey, conversion, reviews, reactivation, team roles, and KPI rhythm."]

},
{
  q: "Is this only for orthodontists?",
  a: [
  "Phase one focuses on orthodontic and specialist clinical practices in Geneva and French-speaking Switzerland.",
  "Other premium clinical practices may be considered when the expertise is strong and the system gap is clear."]

},
{
  q: "Can this work if we already have an agency?",
  a: [
  "Yes.",
  "Your agency may bring visibility. We strengthen the system that converts it.",
  "The two roles are different."]

},
{
  q: "What happens after five months?",
  a: [
  "The practice keeps the protocols, scripts, KPI rhythm, reactivation process, and operating playbook built during the engagement.",
  "The point is not to need us forever."]

},
{
  q: "Who is not a fit?",
  a: [
  "Practices looking for quick leads, discounts, social media management, free pilots, or permanent dependency are not a fit.",
  "This work is for clinic owners who respect diagnosis, grant access, and want the team to operate with more structure."]

}];


const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="mc-faq" id="faq" data-screen-label="09 FAQ">
      <div className="mc-shell">
        <div className="mc-eyebrow">Frequently asked</div>
        <h2 className="mc-faq-h">A few common questions.</h2>
        <ul className="mc-faq-list">
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = open === i;
            return (
              <li key={i} className={"mc-faq-item" + (isOpen ? " is-open" : "")}>
                <button className="mc-faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span className="idx">{String(i + 1).padStart(2, "0")}</span>
                  <span>{item.q}</span>
                  <span className="glyph" aria-hidden="true">+</span>
                </button>
                <div className="mc-faq-a" aria-hidden={!isOpen}>
                  <div className="body">
                    {item.a.map((p, j) => <p key={j}>{p}</p>)}
                  </div>
                </div>
              </li>);

          })}
        </ul>
      </div>
    </section>);

};

Object.assign(window, { HomePage, FAQ });