// Section components for DRIFT Partners site

const { useState, useEffect, useRef } = React;

// ---------- Nav ----------
function Nav() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <a href="#" className="nav-brand" style={{ textDecoration: "none" }} onClick={close}>
          <svg viewBox="0 0 520 160" width="150" height="auto" style={{ display: "block" }}>
            <text x="0" y="100" fontFamily="'Source Serif 4', serif" fontWeight="300" fontSize="120" letterSpacing="-2" fill="var(--ink)">DRIFT</text>
            <line x1="0" y1="130" x2="380" y2="130" stroke="var(--ink)" strokeWidth="1" />
            <line x1="380" y1="130" x2="500" y2="142" stroke="var(--accent)" strokeWidth="1" />
            <text x="0" y="160" fontFamily="'JetBrains Mono', monospace" fontSize="28" fontWeight="700" letterSpacing="5" fill="var(--ink)" opacity="1">PARTNERS</text>
          </svg>
        </a>
        <button
          className="nav-toggle"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span aria-hidden="true">{open ? "✕" : "☰"}</span>
        </button>
        <div className={`nav-links${open ? " is-open" : ""}`}>
          <a href="#mechanisms" className="always-show" onClick={close}>Approach</a>
          <a href="#vignettes" className="always-show" onClick={close}>Cases</a>
          <a href="#about" className="always-show" onClick={close}>About</a>
          <a href="#contact" className="nav-cta always-show" onClick={close}>Contact</a>
        </div>
      </div>
    </nav>
  );
}

// ---------- Hero ----------
function Hero() {
  return (
    <section className="hero">
      <div className="shell">
        <div className="hero-meta hero-meta-stacked">
          <span><span className="dot"></span>DRIFT PARTNERS · A PRACTICE OF EMIC LAB</span>
          <span>EST. 2006 · WARSAW</span>
          <span>WORK DELIVERED ACROSS NORTH AMERICA, EUROPE, INDIA</span>
        </div>
        <div className="hero-grid">
          <h1 className="hero-headline serif-display">
            Activity is not <em>alignment.</em>
          </h1>
          <div className="hero-side">
            <span className="label" style={{ fontSize: 13, fontWeight: 500, fontStyle: "normal", color: "var(--ink-mute)" }}>On the quiet loss of direction at the system level</span>
            <p>
              <span className="lede" style={{ fontStyle: "normal" }}>Programmes rarely fail because of incompetence.</span>{" "}
              They fail when competent work pulls in different directions. Work continues.
              Effort increases. Decisions are made. And still, things don't move forward.
              Leaders feel it. Their people feel it. But the system has grown opaque to the
              people accountable for it.
            </p>
            <p>
              We restore direction in programmes that have lost it.
            </p>
            <p style={{ marginTop: "1em" }}>
              We compare reported progress with operating reality. We name the mechanisms
              breaking alignment. We help leadership make decisions that hold in execution.
            </p>
            <p style={{ marginTop: 22 }}>
              <a href="#contact" style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 17,
                fontWeight: 600,
                letterSpacing: "0.04em",
                color: "var(--accent)",
                textDecoration: "none",
                fontStyle: "normal",
                borderBottom: "1px solid var(--accent)",
                paddingBottom: 2,
                textTransform: "uppercase"
              }}>Start with a 60-minute conversation &nbsp;→</a>
            </p>
            <p style={{ marginTop: 14, fontSize: 16, lineHeight: 1.55, color: "var(--accent)" }}>
              Confidential. We lead the conversation. Bring the programme that no longer reads
              clearly. We help you see what is moving it. By the end, you will know whether this
              is drift, and whether we are the right people to help.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Observable form ----------
function Observable() {
  return (
    <section className="band" id="observable">
      <div className="shell">
        <div className="section-head">
          <div className="ord">01 — Drift, in observable form</div>
          <h2>Drift is what happens when competent people, working hard, produce a <em>collective result</em> nobody intended.</h2>
        </div>
        <div style={{ maxWidth: "62ch" }}>
          <p className="prose" style={{ fontWeight: 500, color: "var(--ink)" }}>
            You may be seeing drift if:
          </p>
          <ul className="prose" style={{ marginTop: "0.8em", paddingLeft: 0, listStyle: "none" }}>
            <li style={{ marginTop: "0.5em" }}>•&nbsp;&nbsp;Decisions are made in steering and reopened in execution.</li>
            <li style={{ marginTop: "0.5em" }}>•&nbsp;&nbsp;Reporting is correct, but the picture it creates feels wrong.</li>
            <li style={{ marginTop: "0.5em" }}>•&nbsp;&nbsp;Escalations stopped reaching the top, but the risk did not disappear.</li>
            <li style={{ marginTop: "0.5em" }}>•&nbsp;&nbsp;Different functions are optimising against each other.</li>
            <li style={{ marginTop: "0.5em" }}>•&nbsp;&nbsp;A new cadence, forum or programme manager improved activity but not direction.</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

// ---------- Cultural mishearing ----------
function Mishearing() {
  return (
    <section className="band">
      <div className="shell">
        <div className="section-head">
          <div className="ord">03 — The translation layer</div>
          <h2>The same sentence, two <em>different</em> decoders.</h2>
        </div>
        <div style={{ maxWidth: "62ch" }}>
          <p className="prose">
            The programme is on track. Everyone agrees. Three weeks earlier, leadership had
            started to suspect it was not. They could not say why. The dashboards were still
            green.
          </p>
          <p className="prose" style={{ marginTop: "1em" }}>
            Then came the town hall. Excellence. Accountability. Customer-first. The words were
            clear at the top. They did not land clearly in the system. Some disappeared. Some
            returned as rumours. Some became behaviours leadership never intended.
          </p>
          <p className="prose" style={{ marginTop: "1em" }}>
            <span className="pull">This is the translation layer. Sometimes cultural, always operational.</span>
          </p>
          <p className="prose" style={{ marginTop: "1em" }}>
            Multinational programmes often share the words, not the meaning. <em>Accountability</em>{" "}
            can mean visible ownership in one room, blame exposure in another, collective response
            in a third. The same value does not always create the same action.
          </p>
          <p className="prose" style={{ marginTop: "1em" }}>
            The layer is not only national. Engineering, delivery, finance, operations and
            headquarters each hear through their own decoder. No one has to be lying for
            direction to distort.
          </p>
          <p className="prose" style={{ marginTop: "1em" }}>
            Surface-level diagnosis finds visible gaps: structure, governance, cadence, roles.
            Those gaps may be real. But drift usually sits below them: in decisions that do not
            hold, contradictions people have learned to work around, and signals that stop
            travelling because telling the truth has become too expensive.
          </p>
          <p className="prose" style={{ marginTop: "1em" }}>
            Rewriting the structure does not restore direction if the same human system keeps
            translating it back.
          </p>
          <p className="prose" style={{ marginTop: "1em" }}>
            We sit on both sides of the layer until <em>excellence</em> means the same thing in
            two different rooms; until two leads who could not agree what <em>"tested"</em>{" "}
            meant a month ago call the same delivery the same thing in fifteen seconds. Not
            because they have a glossary. Because the layer between them no longer distorts what
            is being said.
          </p>
          <p className="prose" style={{ marginTop: "1em" }}>
            This is slow work. It does not package well. It is what restores direction.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- Mechanisms ----------
function Mechanisms() {
  const items = [
    {
      n: "01",
      Icon: Diagram.MechMarks.Technical,
      title: "Technical blind spots",
      body: "An integration signed off but operationally incomplete. A workaround quietly imposed on every downstream task."
    },
    {
      n: "02",
      Icon: Diagram.MechMarks.Capability,
      title: "Capability gaps",
      body: "A senior contributor operating at the limit of their experience. The people around them have learned to compensate."
    },
    {
      n: "03",
      Icon: Diagram.MechMarks.Decision,
      title: "Decision breakdowns",
      body: "Questions settled by whichever forum discusses them last. Or by neither. Decisions reopened on Thursday."
    },
    {
      n: "04",
      Icon: Diagram.MechMarks.Structural,
      title: "Structural contradictions",
      body: "Two functions measured in opposing directions. The programme has decided, implicitly, to wait and see which one wins."
    },
    {
      n: "05",
      Icon: Diagram.MechMarks.Information,
      title: "Information distortion",
      body: "Status truthful in form but misleading in substance. Escalations absorbed by middle layers because escalating costs more."
    }
  ];
  return (
    <section className="band tight" id="mechanisms" style={{ paddingTop: 80, paddingBottom: 110 }}>
      <div className="shell">
        <div className="section-head">
          <div className="ord">02 — Five families of mechanism</div>
          <h2>Drift is fixed by removing <em>mechanisms</em>, not symptoms.</h2>
        </div>
        <p className="prose">
          Drift is not poor performance. Not bad strategy. Not a culture problem. It is the gap
          between the programme as observed and the programme as reported, and it is fixed by
          removing <em>mechanisms</em>, not symptoms.
        </p>
        <p className="prose" style={{ marginTop: "1.1em" }}>
          A mechanism is not a person, a team, or a process. It is a pattern in the system that,
          when removed, would cause the symptoms to recede. Most programmes under drift have
          three or four operating simultaneously, amplifying one another.
        </p>
        <p className="prose" style={{ marginTop: "1.4em", marginBottom: 48, fontStyle: "italic", color: "var(--accent)" }}>
          We identify which of these are operating in your programme. Most drifting programmes
          have three or four at once. We do not act on all of them; we act on the ones that
          move the system.
        </p>
        <div className="mechanism-grid">
          {items.map(it => (
            <div className="mech" key={it.n}>
              <div className="num">{it.n}</div>
              <div className="icon"><it.Icon /></div>
              <h4>{it.title}</h4>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
        <p className="marg" style={{ marginTop: 24, color: "var(--ink-mute)" }}>
          IN MULTINATIONAL PROGRAMMES, EACH OF THE FIVE IS REFRACTED THROUGH CULTURAL MISHEARING.
        </p>
      </div>
    </section>
  );
}

// ---------- Common responses ----------
function WrongResponses() {
  const wrongs = [
    { what: "Find the difficult person", why: "There usually is one. They are removed. Nothing changes." },
    { what: "Add a forum", why: "A new cadence, a new dashboard. Added and ignored." },
    { what: "Run an offsite", why: "Trust is rebuilt. It does not survive the first week back at the keyboard." },
    { what: "Bring in a new programme manager", why: "They spend six weeks trying to see a system that resists being seen." }
  ];
  return (
    <section className="band dark">
      <div className="shell">
        <div className="section-head">
          <div className="ord">04 — Common responses</div>
          <h2>The symptoms get cured. The drift continues.</h2>
        </div>
        <p className="prose" style={{ maxWidth: "60ch", marginBottom: 24 }}>
          Programmes that drift hard are not programmes that have failed to act. They are
          programmes that have already cured several symptoms and are still drifting. Each of
          these responses treats drift as a problem of effort, structure, personality, or
          capability. It is none of these. <span className="pull">It is a problem of visibility.</span>
        </p>
        <p style={{ maxWidth: "60ch", marginBottom: 48, fontStyle: "italic", fontSize: 19, lineHeight: 1.5, color: "#d99a85" }}>
          These responses are not wrong. They are insufficient. They treat what the organisation
          can tolerate seeing.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1px", background: "#2a2520", border: "1px solid #2a2520" }}>
          {wrongs.map((w, i) => (
            <div key={i} style={{ background: "var(--ink)", padding: "32px 28px", display: "flex", flexDirection: "column", gap: 12 }}>
              <span className="mono" style={{ color: "#888076" }}>×&nbsp;&nbsp;{String(i + 1).padStart(2, "0")}</span>
              <div style={{ fontFamily: "Source Serif 4, serif", fontSize: 24, fontWeight: 300, letterSpacing: "-0.01em", color: "var(--paper)" }}>{w.what}</div>
              <p style={{ fontSize: 15, color: "#b8b1a4", lineHeight: 1.55 }}>{w.why}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid #2a2520", maxWidth: "68ch" }}>
          <p style={{ fontFamily: "'Source Serif 4', serif", fontSize: 22, lineHeight: 1.5, color: "var(--paper)", fontWeight: 300 }}>
            By the time symptoms reach the steering committee, the underlying drift is six to
            twelve months ahead of the diagnosis. By the time the steering committee asks the
            question that turns out to matter, the programme is already a year behind.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- Vignettes ----------
function Vignettes() {
  const cases = [
    {
      industry: "Distributed engineering (diagnostic)",
      shape: "France (R&D) · Czech Republic (Build) · Mexico (Field Operations)",
      title: "A platform programme where escalations stopped reaching the top.",
      body: [
        "Middle management, on three continents, was absorbing escalations because escalating cost more than absorbing. The programme director was operating on a six-month-old picture of her own programme. The dashboards were correct. The picture was wrong.",
        "Diagnostic only. We did not run the restoration. We made the system visible, named the mechanisms, and handed the work back. That is sometimes the engagement."
      ],
      outcome: "Leadership ran the restoration internally with the diagnosis in hand. Programme returned to schedule."
    },
    {
      industry: "Services · Multi-site",
      shape: "Germany · Poland · United States",
      title: "A programme where the values had outrun their translation.",
      body: [
        "Equality. Agency. Ownership. Sound values. But where the local culture had no concept for one or more of them, the words landed empty. Ownership came back as property; agency as nothing at all. The leaders who used them were heard as evasive. Nobody on the team had been working from those values. Nobody had ever been able to. People worked from a sense of craft and from fear, but not toward what the company was asking for.",
        "The senior leaders sent the team to our sessions and mentoring (\"go and learn, it will be better\") and did not come themselves. The direction never landed, because the people setting it never came into the room where it was translated."
      ],
      outcome: "Tension at the team level dropped. Individual work improved. The programme itself did not regain direction."
    },
    {
      industry: "Industrial · Post-merger",
      shape: "United Kingdom · Denmark · India",
      title: "An integration that changed on paper first.",
      body: [
        "The integration plan had been approved. The new structure was clear. Leadership alignment was visible.",
        "But the operating system had not integrated.",
        "Old decision rights stayed alive. New leaders inherited forums without authority. Headquarters heard delay as resistance. Local teams heard integration as loss of control.",
        "The visible diagnosis pointed to change adoption: more communication, more alignment sessions, another explanation of the structure.",
        "The drift sat lower.",
        "People were not rejecting the integration. They were protecting the parts of the old system that still carried risk, trust and informal authority.",
        "The structure had changed. The work had not."
      ],
      outcome: "Leadership stopped treating the issue as adoption. Direction returned when authority, risk and decision rights were made explicit in execution."
    }
  ];
  return (
    <section className="band deep" id="vignettes">
      <div className="shell">
        <div className="section-head">
          <div className="ord">05 — Cases</div>
          <h2>What the work has looked like.</h2>
        </div>
        <p className="prose" style={{ marginBottom: 32 }}>
          Our work is usually confidential. The cases below are drawn from real engagements:
          identifying details removed, operating structures preserved.
        </p>
        <div>
          {cases.map((c, i) => (
            <div className="vignette" key={i}>
              <div className="vmeta" style={{ flexDirection: "column", alignItems: "flex-start", gap: 4 }}>
                <span className="industry">{c.industry}</span>
                <span>{c.shape}</span>
              </div>
              <div className="v-body">
                <h3>{c.title}</h3>
                <div className="outcome" style={{ marginTop: 16, paddingTop: 0, paddingBottom: 18, marginBottom: 24, borderTop: "none", borderBottom: "1px dashed var(--rule)" }}>
                  <span className="label">Outcome</span>
                  <p>{c.outcome}</p>
                </div>
                {c.body.map((p, j) => <p key={j}>{p}</p>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Engagements ----------
function Engagements() {
  const items = [
    {
      kind: "Tier 01",
      title: "Diagnostic",
      sub: "Make visible. Identify what breaks alignment.",
      duration: "A few weeks",
      body: "We make the programme visible. We name the mechanisms. We hand the work back. Sometimes this is the entire engagement.",
      bullets: ["Senior, working from inside", "Both sides of the translation layer", "Written diagnosis the leadership recognises"],
      leaveWith: "You leave with: named mechanisms, evidence recognised by leadership, and a decision on whether restoration is required."
    },
    {
      kind: "Tier 02",
      title: "Restoration",
      sub: "Restore direction through key decisions.",
      duration: "A few months",
      body: "Diagnostic plus the work of restoring direction. Decisions made. Contradictions removed. Transferred to the teams through workshops and mentoring.",
      bullets: ["Key decisions with single owners", "Workshops with executing teams", "Direction lives in the people, not the deck"],
      leaveWith: "You leave with: key decisions stop reopening. Contradictions removed. Ownership transferred to the executing teams."
    },
    {
      kind: "Tier 03",
      title: "Anchor Review",
      sub: "Hold direction over time.",
      duration: "Quarterly · ongoing",
      body: "A focused review every quarter. Are the decisions still holding? Has new drift appeared? We close the engagement the moment the answer to both is \"we are stable now.\"",
      bullets: ["Quarterly cadence, remote or on-site as needed.", "Re-checks only on the signals that mattered in the diagnostic."],
      leaveWith: "You leave with: quarterly evidence that direction is holding, or the early signal that something is moving again before it becomes a bigger problem."
    }
  ];
  return (
    <section className="band" id="engagements">
      <div className="shell">
        <div className="section-head">
          <div className="ord">06 — The work, in three formats</div>
          <h2>Clear role. Clear output. <em>Clear exit.</em></h2>
        </div>
        <p className="prose" style={{ marginTop: -8, marginBottom: 40, fontStyle: "italic", fontSize: 22, color: "var(--accent)" }}>
          We are not paid for activity. We are paid to restore direction.
        </p>
        <div className="engagements">
          {items.map(e => (
            <div className="eng" key={e.kind}>
              <span className="ekind">{e.kind}</span>
              <h4>{e.title}</h4>
              <p style={{ fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontSize: 15, lineHeight: 1.45, color: "var(--accent)", margin: "4px 0 8px" }}>
                {e.sub}
              </p>
              <span className="duration">{e.duration}</span>
              <p>{e.body}</p>
              <ul>
                {e.bullets.map((b, i) => <li key={i}>{b}</li>)}
              </ul>
              <p style={{ marginTop: 18, paddingTop: 14, borderTop: "1px dashed var(--rule)", fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontSize: 15, lineHeight: 1.5, color: "var(--accent)" }}>
                {e.leaveWith}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Self-qualifier ----------
function Qualifier() {
  return (
    <section className="band tight">
      <div className="shell">
        <div className="section-head">
          <div className="ord">07 — Whether this is for you</div>
          <h2>We are explicit about the work we will <em>not</em> take on.</h2>
        </div>
        <div className="qualifier">
          <div className="for">
            <h3>This work is for you if</h3>
            <ul>
              <li>You run a complex programme, multinational or domestic, including distributed engineering, transitions, post-merger integration, and multi-site operations.</li>
              <li>You are programme leadership, a COO, a CTO, or the executive accountable for delivery.</li>
              <li>You have lost real visibility into how your programme actually operates, and you can feel it.</li>
              <li>You are willing to grant the access necessary to make it visible.</li>
              <li>You want to know what is actually happening, even if it is uncomfortable.</li>
            </ul>
          </div>
          <div className="notfor">
            <h3>This work is not for you if</h3>
            <ul>
              <li>You are looking for a change-management programme or a transformation office.</li>
              <li>You want a deck, a playbook, or a new operating model that stays on slides.</li>
              <li>You want a long-running engagement that grows over time. Ours shrink.</li>
              <li>You want certainty before the work is done. We sell visibility, not certainty.</li>
              <li>You are not yet willing to look at what has been avoided.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- About / partners ----------
function About() {
  return (
    <section className="band deep" id="about">
      <div className="shell">
        <div className="section-head">
          <div className="ord">08 — The practice</div>
          <h2>A small team. We will <em>stay</em> small.</h2>
        </div>
        <p className="prose" style={{ marginBottom: 56, maxWidth: "none" }}>
          DRIFT Partners is the practice of Emic Lab. Same partners. Evolving the work. The
          success indicator is not how long we stay; it is how cleanly we leave.
        </p>
        <div className="partners-row">
          <div className="partner">
            <h3>Anna Chodynicka</h3>
            <div className="role">Partner</div>
            <p>
              Twenty years inside multinational programmes: engineering, delivery, integrations.
              Reads where formal alignment has separated from operating reality. Works with
              leadership from inside the programme.
            </p>
          </div>
          <div className="partner">
            <h3>Dr Joanna Więckowska</h3>
            <div className="role">Partner</div>
            <p>
              Twenty years inside multinational programmes: leadership rooms, senior-level
              decisions. Reads how organisations distort their own signals. Builds the
              methodology by which we sample, evidence, and rank the mechanisms producing drift.
              Designs the small set of decisions a programme can actually carry. Refuses the
              decisions it cannot.
            </p>
          </div>
          <div className="partner">
            <h3>Dan Boabeș</h3>
            <div className="role">Partner</div>
            <p>
              Two decades of multinational ventures in mobility, payments, and AI, across
              Romania, Switzerland, the Gulf, and Mongolia.
            </p>
            <p>
              Currently runs Taxi Holding, one of the largest taxi operators in Romania. Reads
              complex programmes from inside the room because he is still running one.
            </p>
          </div>
        </div>
        <div className="rule" style={{ margin: "72px 0 24px" }}></div>
        <span className="marg">SELECTED CLIENTS — DRIFT PARTNERS / EMIC LAB</span>
        <p style={{ marginTop: 8, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontSize: 15, lineHeight: 1.5, color: "var(--accent)" }}>
          Work delivered across North America, Europe, India.
        </p>
        <div className="clients" style={{ marginTop: 24 }}>
          {["GE", "Splunk", "Capgemini", "Tata Consultancy Services", "Ecolab", "Honeywell", "Heineken", "Hapag-Lloyd", "Carlsberg", "Roche/Genentech", "Bayer", "Akamai", "Equinix", "Circle K", "Sabre", "Alstom"].map(c => (
            <div key={c}>{c}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Contact / sign-off ----------
function Contact() {
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  return (
    <section className="band dark" id="contact">
      <div className="shell">
        <div className="section-head">
          <div className="ord">09 — A note about your programme</div>
          <h2>If something here described <em>your</em> programme, write to us.</h2>
        </div>
        <div className="signoff">
          <div className="letter">
            <p>
              We do not promise easy. We do not sell certainty. We sell visibility, and the work
              that follows from it.
            </p>
            <p style={{ marginTop: "1.4em" }} className="talk-first">
              <strong style={{ display: "inline-block" }}>Talk first, if you prefer.</strong>{" "}
              <span style={{ whiteSpace: "nowrap" }}>Anna Chodynicka</span>{" · "}
              <a href="tel:+48663057223" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid currentColor", whiteSpace: "nowrap" }}>+48&nbsp;663&nbsp;057&nbsp;223</a>{" · "}
              <a href="mailto:amc@emic.pl" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid currentColor", whiteSpace: "nowrap" }}>amc@emic.pl</a>
            </p>
            <p style={{ marginTop: "1em" }}>
              <strong>Or drop us a line. We will contact you.</strong>
            </p>
            <p style={{ marginTop: "1.4em" }}>
              <em>— Anna, Joanna &amp; Dan</em>
            </p>
          </div>
          <div>
            <div className="contact-card">
              <div className="label">Direct</div>
              <a href="mailto:amc@emic.pl" className="email">amc@emic.pl</a>
              <div className="meta">
                <div className="row"><span className="k">Phone</span><span>+48 663 057 223</span></div>
                <div className="row"><span className="k">Practice</span><span>emiclab.com</span></div>
                <div className="row"><span className="k">Based</span><span>Warsaw</span></div>
              </div>

              {!sent ? (
                <form className="note-form" onSubmit={submit}>
                  <div className="label">A short note</div>
                  <div className="field"><span>Name</span><input required placeholder="" /></div>
                  <div className="field"><span>Email or phone</span><input required placeholder="" /></div>
                  <div className="field"><span>Message (optional)</span><textarea rows={3} placeholder="Anything you want us to know."></textarea></div>
                  <button className="submit" type="submit">Drop us a line &nbsp;→</button>
                </form>
              ) : (
                <div className="note-form">
                  <div className="label">Received</div>
                  <p className="sent">Thank you. One of us will reply personally within two working days.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Foot() {
  return (
    <footer className="foot">
      <div className="shell" style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 24, width: "100%" }}>
        <span>DRIFT Partners · A practice of Emic Lab S.C.</span>
        <span>© 2006–2026 · Same partners. Evolving the work.</span>
        <span>amc@emic.pl · +48 663 057 223</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Observable, Mishearing, Mechanisms, WrongResponses, Vignettes, Engagements, Qualifier, About, Contact, Foot });
