Overture

import React, { useEffect, useState, useRef } from "react";
import Background from "./Background";
import CAMX from "./CAMX";
import USA from "./USA";
import InfoBox from "./InfoBox";
import StatCounter from "./StatCounter";
import Intro from "./Intro";
import SearchBar from "./SearchBar";
import NetworkMembers from "./NetworkMembers";
import { Provider, createStore, combineReducers, useSelector, useDispatch } from "./redux/store";
import networkReducer, { buildInitialState } from "./redux/reducers/network";
import { setMemberStatesToUpdateOnMapAction, addUserToNetworkAction } from "./redux/actions/network";
import { platformAttorneys } from "./SearchBar/platformAttorneys";

function prefersReducedMotion() {
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}

// Dev-only shortcuts, nothing like this ships. Simulate just dispatches
// ADD_USER_TO_NETWORK directly, the same action a real SearchBar pick
// sends. Reset calls back up to AutoplayDemo instead of touching this
// store, since a reset remounts the whole tree (fresh store, clean DOM,
// entrance animation ready to replay).
const DemoControls = ({ onReset }) => {
  const dispatch = useDispatch();
  const networkStates = useSelector(state => state.network.networkStates);

  const simulateConnection = () => {
    const notYetInNetwork = platformAttorneys.filter(a => {
      const existing = networkStates[a.state];
      return !existing || !existing.some(x => x.full_name === a.full_name);
    });
    if (notYetInNetwork.length === 0) return;
    const next = notYetInNetwork[Math.floor(Math.random() * notYetInNetwork.length)];
    dispatch(addUserToNetworkAction(next));
  };

  return (
    <>
      <button type="button" className="coverage-map__demo-control" onClick={simulateConnection}>
        Simulate a new referral connection
      </button>
      <button type="button" className="coverage-map__demo-control coverage-map__demo-control--reset" onClick={onReset}>
        Reset demo
      </button>
    </>
  );
};

// The reducer only ever appends to networkMembersAdded (see
// redux/reducers/network.js). This effect does the actual work of
// deciding which of those states are new to the map vs. already covered
// by someone else.
const CoverageMap = ({ isMinimal, showPlayTrigger, onPlay, onReset }) => {
  const dispatch = useDispatch();
  const disableAnimation = useSelector(state => state.network.disableAnimation);
  const networkMembers = useSelector(state => state.network.networkMembers);
  const networkMembersAdded = useSelector(state => state.network.networkMembersAdded);
  const [prevNetworkMembers, setPrevNetworkMembers] = useState(networkMembers.results);

  useEffect(() => {
    dispatch(setMemberStatesToUpdateOnMapAction({ new: [], existing: [] }));
  }, []);

  useEffect(() => {
    if (networkMembers.results.length > 0 && networkMembersAdded.length > 0) {
      if (networkMembers.results.length !== prevNetworkMembers.length) {
        const realMembers = networkMembers.results.filter(x => x.model_name == "NetworkMember");
        const prevStates = prevNetworkMembers.filter(x => x.model_name == "NetworkMember").flatMap(y => y.practice_states);
        const lastAdded = networkMembersAdded[networkMembersAdded.length - 1];
        const addedStates = lastAdded.practice_states ?? [];

        let newStates = [];
        let existingStates = [];

        if (realMembers.length == 1 && lastAdded.model_name == "NetworkMember") {
          newStates = lastAdded.practice_states;
        }

        if (realMembers.length > 1) {
          existingStates = addedStates.filter(x => prevStates.includes(x));
          newStates = addedStates.filter(x => !prevStates.includes(x));
        }

        // Reduced motion: still update the counts and member list,
        // just skip the map pulse.
        if (!prefersReducedMotion()) {
          dispatch(setMemberStatesToUpdateOnMapAction({ new: newStates, existing: existingStates }));
        }

        setTimeout(() => {
          setPrevNetworkMembers(networkMembers.results);
        }, 3000);
      }
    }
  }, [networkMembers, networkMembersAdded]);

  return (
    <div className={`coverage-map ${isMinimal ? "coverage-map--minimal" : ""}`}>
      {!isMinimal && <InfoBox />}
      <div className={`coverage-map__globe ${disableAnimation ? "animation-disabled" : "animate-in"}`}>
        <div className="coverage-map__north-america">
          <USA />
          <CAMX />
        </div>
      </div>
      <Background />
      {!isMinimal && <StatCounter />}
      {!isMinimal && <DemoControls onReset={onReset} />}
      {/* Positioned here, not by AutoplayDemo, so it centers on the globe
          alone instead of the full demo (map + search card + member list). */}
      {!isMinimal && showPlayTrigger && (
        <button type="button" className="coverage-map__play" onClick={onPlay}>
          <span className="coverage-map__play__icon" />
          Play the entrance animation
        </button>
      )}
    </div>
  );
};

const CoverageMapPage = ({ variant, showPlayTrigger, onPlay, onReset }) => {
  const disableAnimation = useSelector(state => state.network.disableAnimation);
  const isMinimal = variant === "minimal";

  return (
    <>
      <CoverageMap isMinimal={isMinimal} showPlayTrigger={showPlayTrigger} onPlay={onPlay} onReset={onReset} />
      {!isMinimal && (
        <>
          <div className={`coverage-map__panel ${disableAnimation ? "animation-disabled" : "animate-in"}`}>
            <Intro />
            <SearchBar />
          </div>
          <NetworkMembers />
        </>
      )}
    </>
  );
};

// disableAnimation seeds the initial render: AutoplayDemo remounts this
// fresh (via a key bump) whenever it wants the entrance to replay, true
// when prefers-reduced-motion applies. variant lives in store state
// rather than a USA/USState prop, so USState can slow its stagger for
// the hero without changing how the full demo feels.
const CoverageMapDemo = ({ variant = "full", disableAnimation = false, showPlayTrigger = false, onPlay, onReset }) => {
  const storeRef = useRef(null);
  if (storeRef.current === null) {
    const rootReducer = combineReducers({ network: networkReducer });
    storeRef.current = createStore(rootReducer, { network: buildInitialState({ disableAnimation, variant }) });
  }

  return (
    <Provider store={storeRef.current}>
      <CoverageMapPage variant={variant} showPlayTrigger={showPlayTrigger} onPlay={onPlay} onReset={onReset} />
    </Provider>
  );
};

export default CoverageMapDemo;

/* ==========================================================================
   reducers/network.js
   --------------------------------------------------------------------------
   Mock-data port of the original reducer. Keeps the shapes components
   downstream actually depend on (networkMembers/pendingInvites as
   { count, next, results } pages, next always null here) and drops
   what only existed for machinery this demo doesn't have (browsing,
   pagination, loading flags).

   This reducer only appends to networkMembersAdded; index.jsx's effect
   does the new-vs-existing diffing, same as the original.
   ========================================================================== */

import {
  SET_USER_INNER_CIRCLE_HOVERED,
  SET_DISABLED_ANIMATION,
  SET_MEMBERS_STATES_TO_UPDATE_ON_MAP,
  ADD_USER_TO_NETWORK,
  ADD_MY_NETWORK_MEMBER_INVITE,
  RESET_NETWORK,
} from "../actions/network";

// avatar is a filename under /uploads/coverage-map/avatars/ (see
// SearchBar/platformAttorneys.js).
const SEED_ATTORNEYS = [
  { id: "seed-jalvarez", full_name: "J. Alvarez", state: "California", avatar: "avatar-01.jpg" },
  { id: "seed-rkim", full_name: "R. Kim", state: "California", avatar: "avatar-02.jpg" },
  { id: "seed-tbrooks", full_name: "T. Brooks", state: "California", avatar: "avatar-03.jpg" },
  { id: "seed-mosei", full_name: "M. Osei", state: "California", avatar: "avatar-04.jpg" },
  { id: "seed-mchen", full_name: "M. Chen", state: "Texas", avatar: "avatar-05.jpg" },
  { id: "seed-spatel", full_name: "S. Patel", state: "New York", avatar: "avatar-06.jpg" },
  { id: "seed-dnguyen", full_name: "D. Nguyen", state: "New York", avatar: "avatar-07.jpg" },
  { id: "seed-lgarcia", full_name: "L. Garcia", state: "Florida", avatar: "avatar-08.jpg" },
  { id: "seed-kito", full_name: "K. Ito", state: "Illinois", avatar: "avatar-09.jpg" },
  { id: "seed-acole", full_name: "A. Cole", state: "Georgia", avatar: "avatar-10.jpg" },
  { id: "seed-pnovak", full_name: "P. Novak", state: "Ohio", avatar: "avatar-11.jpg" },
  { id: "seed-ereyes", full_name: "E. Reyes", state: "Washington", avatar: "avatar-12.jpg" },
  { id: "seed-hosei", full_name: "H. Osei", state: "Colorado", avatar: "avatar-13.jpg" },
  { id: "seed-vsilva", full_name: "V. Silva", state: "North Carolina", avatar: "avatar-14.jpg" },
];

function initialsOf(fullName) {
  return fullName
    .split(" ")
    .map((word) => word[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

function toNetworkMember(attorney) {
  return {
    model_name: "NetworkMember",
    user_id: attorney.id,
    full_name: attorney.full_name,
    practice_states: [attorney.state],
    avatar: attorney.avatar,
  };
}

function seedNetworkStates() {
  const states = {};
  SEED_ATTORNEYS.forEach((attorney) => {
    const entry = { full_name: attorney.full_name, initials: initialsOf(attorney.full_name), avatar: attorney.avatar };
    states[attorney.state] = (states[attorney.state] || []).concat([entry]);
  });
  return states;
}

function countCoveredStates(networkStates) {
  return Object.keys(networkStates).filter((state) => networkStates[state].length > 0).length;
}

// Called at store creation and again on RESET_NETWORK, so both start from
// the identical baseline. `disableAnimation`/`variant` ride along from
// whatever CoverageMapDemo was mounted with (see index.jsx), since those
// describe the mount, not the network.
export function buildInitialState({ disableAnimation, variant, resetNonce = 0 }) {
  const networkStates = seedNetworkStates();
  const seedMembers = SEED_ATTORNEYS.map(toNetworkMember);

  return {
    hovered: null,
    disableAnimation: !!disableAnimation,
    variant: variant,
    // Bumped on every RESET_NETWORK. index.jsx keys SearchBar on this, so
    // a reset force-remounts it too, clearing the typed query and any
    // in-progress invite.
    resetNonce: resetNonce,
    memberStatesToUpdateOnMap: { new: [], existing: [] },
    networkStates: networkStates,
    networkStatesCount: countCoveredStates(networkStates),
    networkMembers: { count: seedMembers.length, next: null, results: seedMembers },
    // Only grows via ADD_USER_TO_NETWORK (a real visitor action). The seed
    // network above was never "added," so this starts empty; index.jsx's
    // map-diffing effect watches it to know a fresh add just happened.
    networkMembersAdded: [],
    pendingInvites: { count: 0, next: null, results: [] },
    networkSummary: {
      inner_circle_member_count: seedMembers.length,
      total_invites_sent: 0,
      practice_states_count: countCoveredStates(networkStates),
    },
  };
}

function addUserToNetwork(state, attorney) {
  const member = { ...toNetworkMember(attorney), new: true };
  const entry = { full_name: attorney.full_name, initials: initialsOf(attorney.full_name), avatar: attorney.avatar };
  const networkStates = {
    ...state.networkStates,
    [attorney.state]: (state.networkStates[attorney.state] || []).concat([entry]),
  };
  const networkStatesCount = countCoveredStates(networkStates);
  const networkMembers = {
    count: state.networkMembers.count + 1,
    next: null,
    results: [member].concat(state.networkMembers.results),
  };

  return {
    ...state,
    networkStates: networkStates,
    networkStatesCount: networkStatesCount,
    networkMembers: networkMembers,
    networkMembersAdded: state.networkMembersAdded.concat([member]),
    networkSummary: {
      ...state.networkSummary,
      inner_circle_member_count: networkMembers.count,
      practice_states_count: networkStatesCount,
    },
  };
}

function addMyNetworkMemberInvite(state, invite) {
  const referral = {
    id: `invite-${Date.now()}-${Math.round(Math.random() * 1e6)}`,
    model_name: "NetworkMemberReferral",
    full_name: invite.fullName,
    email: invite.email,
    new: true,
  };
  const pendingInvites = {
    count: state.pendingInvites.count + 1,
    next: null,
    results: [referral].concat(state.pendingInvites.results),
  };

  return {
    ...state,
    pendingInvites: pendingInvites,
    networkSummary: {
      ...state.networkSummary,
      total_invites_sent: state.networkSummary.total_invites_sent + 1,
    },
  };
}

export default function networkReducer(state, action) {
  switch (action.type) {
    case SET_USER_INNER_CIRCLE_HOVERED:
      return { ...state, hovered: action.payload };
    case SET_DISABLED_ANIMATION:
      return { ...state, disableAnimation: action.payload };
    case SET_MEMBERS_STATES_TO_UPDATE_ON_MAP:
      return { ...state, memberStatesToUpdateOnMap: action.payload };
    case ADD_USER_TO_NETWORK:
      return addUserToNetwork(state, action.payload);
    case ADD_MY_NETWORK_MEMBER_INVITE:
      return addMyNetworkMemberInvite(state, action.payload);
    case RESET_NETWORK:
      return buildInitialState({
        disableAnimation: state.disableAnimation,
        variant: state.variant,
        resetNonce: state.resetNonce + 1,
      });
    default:
      return state;
  }
}

import React, { useEffect, useId, useMemo, useRef, useState } from "react";
import { useSelector, useDispatch } from "../redux/store";
import { addUserToNetworkAction, addMyNetworkMemberInviteAction } from "../redux/actions/network";
import { platformAttorneys } from "./platformAttorneys";
import Toast from "./Toast";

// Mock latency, standing in for a real request, so adding a result or
// sending an invite still shows the brief "adding"/"inviting" state.
const MOCK_LATENCY_MS = 450;

function isValidEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}

// Pool and networkStates both key attorneys by full_name, which is enough
// to dedupe since this mock data never has two attorneys sharing a name.
function isInNetwork(attorney, networkStates) {
  const existing = networkStates[attorney.state];
  return !!existing && existing.some(a => a.full_name === attorney.full_name);
}

const EnvelopeIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <rect x="2.5" y="5" width="19" height="14" rx="2" stroke="currentColor" strokeWidth="1.8" />
    <path d="M3.5 6.5 12 13l8.5-6.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

/* ==========================================================================
   SearchBar/index.jsx
   --------------------------------------------------------------------------
   Ported from the original InnerCircle/SearchBar. The real one pinned an
   invite option above the results the whole time you're typing, not just
   when nothing matched, so "Invite {name}" was always the first option.
   Kept that here: the invite row sits above results for as long as
   there's a query, expands into an email field once selected, and
   submits through addMyNetworkMemberInviteAction.

   Dropped: the live profile search API (platformAttorneys.js stands in),
   the email/name field swap, and the promo/redeem-funds column (a
   separate feature, unrelated to search or the map).

   Added: ARIA combobox semantics and keyboard nav over the results list.
   The original's results were mouse-only. "Reset demo" (../index.jsx's
   DemoControls) has no production equivalent either.
   ========================================================================== */

const SearchBar = () => {
  const dispatch = useDispatch();
  const disableAnimation = useSelector(state => state.network.disableAnimation);
  const networkStates = useSelector(state => state.network.networkStates);

  const [query, setQuery] = useState("");
  const [focused, setFocused] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);
  const [addingId, setAddingId] = useState(null);

  const [inviteSelected, setInviteSelected] = useState(false);
  const [inviteEmail, setInviteEmail] = useState("");
  const [invitingUser, setInvitingUser] = useState(false);

  const [toastMessage, setToastMessage] = useState(null);

  const inputRef = useRef(null);
  const inviteEmailRef = useRef(null);
  const containerRef = useRef(null);
  const listboxId = useId();

  // Only flagged once there's something to be wrong about, so the field
  // doesn't open already showing a red border before anyone's typed.
  const emailInvalid = inviteEmail.length > 0 && !isValidEmail(inviteEmail);

  const results = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return [];
    return platformAttorneys
      .filter(a => !isInNetwork(a, networkStates))
      .filter(a => a.full_name.toLowerCase().includes(q) || a.state.toLowerCase().includes(q))
      .slice(0, 6);
  }, [query, networkStates]);

  const open = focused && query.trim().length > 0;

  useEffect(() => {
    setActiveIndex(0);
  }, [query]);

  // Focus the revealed email field the moment the invite form is selected,
  // same as the original's own effect on inviteFormSelected.
  useEffect(() => {
    if (inviteSelected && inviteEmailRef.current) {
      inviteEmailRef.current.focus();
    }
  }, [inviteSelected]);

  function resetSearch() {
    setQuery("");
    setInviteSelected(false);
    setInviteEmail("");
  }

  function handleChange(e) {
    setQuery(e.target.value.replace(/\s+/g, " "));
    setInviteSelected(false);
    setInviteEmail("");
  }

  // Tracked on the whole container (React's onFocus/onBlur bubble, same as
  // native focusin/focusout) rather than on the main input alone: focus
  // moves from the main input to the invite form's own email field once
  // it's revealed, and that's still "open", not a close.
  function handleContainerFocus() {
    setFocused(true);
  }

  function handleContainerBlur(e) {
    if (!containerRef.current || !containerRef.current.contains(e.relatedTarget)) {
      setFocused(false);
    }
  }

  function addAttorney(attorney) {
    setAddingId(attorney.id);
    window.setTimeout(() => {
      dispatch(addUserToNetworkAction(attorney));
      setToastMessage(`Added ${attorney.full_name} · ${attorney.state}`);
      setAddingId(null);
      resetSearch();
      inputRef.current?.focus();
    }, MOCK_LATENCY_MS);
  }

  function submitInvite(e) {
    e.preventDefault();
    if (!isValidEmail(inviteEmail)) return;
    const fullName = query.trim();
    setInvitingUser(true);
    window.setTimeout(() => {
      dispatch(addMyNetworkMemberInviteAction({ fullName, email: inviteEmail.trim() }));
      setToastMessage(`Invite sent to ${fullName}`);
      setInvitingUser(false);
      resetSearch();
      inputRef.current?.focus();
    }, MOCK_LATENCY_MS);
  }

  function handleKeyDown(e) {
    if (!open) return;
    if (e.key === "ArrowDown" && results.length > 0) {
      e.preventDefault();
      setActiveIndex(i => Math.min(i + 1, results.length - 1));
    } else if (e.key === "ArrowUp" && results.length > 0) {
      e.preventDefault();
      setActiveIndex(i => Math.max(i - 1, 0));
    } else if (e.key === "Enter") {
      e.preventDefault();
      if (results.length > 0) {
        addAttorney(results[activeIndex]);
      } else {
        setInviteSelected(true);
      }
    } else if (e.key === "Escape") {
      resetSearch();
    }
  }

  const activeId = open && results.length > 0 ? `${listboxId}-option-${activeIndex}` : undefined;

  return (
    <div
      ref={containerRef}
      className={`coverage-map__search ${disableAnimation ? "animation-disabled" : "animate-in"} ${open ? "coverage-map__search--active" : ""}`}
      onFocus={handleContainerFocus}
      onBlur={handleContainerBlur}
    >
      <div className="coverage-map__search__field">
        <input
          ref={inputRef}
          className="coverage-map__search__input"
          type="text"
          role="combobox"
          aria-expanded={open}
          aria-controls={listboxId}
          aria-activedescendant={activeId}
          aria-autocomplete="list"
          placeholder="Enter any attorney's name"
          value={query}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
        />
      </div>

      {open && (
        <div className="coverage-map__search__results">
          <form
            className={`coverage-map__search__invite${invitingUser ? " coverage-map__search__invite--adding" : ""}`}
            onSubmit={submitInvite}
          >
            {/* onMouseDown preventDefault keeps focus on the main input
                through this click, so selecting the invite row doesn't blur
                the search field and collapse the dropdown out from under
                it. Scoped to this row, not the whole form, so the email
                field and submit button below keep normal click behavior. */}
            <div
              className="coverage-map__search__invite__row"
              onMouseDown={e => e.preventDefault()}
              onClick={() => setInviteSelected(true)}
            >
              <div className="coverage-map__search__invite__avatar">
                {query.trim().split(" ").slice(0, 2).map((word, i) => (
                  <span key={i} className="coverage-map__search__invite__avatar__initial">{word[0]?.toUpperCase()}</span>
                ))}
              </div>
              <span className="coverage-map__search__invite__name">Invite {query.trim()}</span>
            </div>
            {inviteSelected && (
              <div className="coverage-map__search__invite__footer">
                <input
                  ref={inviteEmailRef}
                  className={`coverage-map__search__invite__email${emailInvalid ? " coverage-map__search__invite__email--invalid" : ""}`}
                  type="email"
                  value={inviteEmail}
                  onChange={e => setInviteEmail(e.target.value)}
                  placeholder={`${query.trim()}'s email address`}
                  aria-label={`${query.trim()}'s email address`}
                  aria-invalid={emailInvalid}
                />
                <button
                  type="submit"
                  className="coverage-map__search__invite__button"
                  disabled={!isValidEmail(inviteEmail) || invitingUser}
                  aria-label={`Send invite to ${query.trim()}`}
                >
                  <EnvelopeIcon />
                </button>
              </div>
            )}
          </form>

          {results.length > 0 && (
            <div className="coverage-map__search__result-list" role="listbox" id={listboxId}>
              {results.map((attorney, i) => {
                const active = i === activeIndex;
                const adding = addingId === attorney.id;
                return (
                  <div
                    key={attorney.id}
                    id={`${listboxId}-option-${i}`}
                    role="option"
                    aria-selected={active}
                    className={`coverage-map__search__result${active ? " coverage-map__search__result--active" : ""}${adding ? " coverage-map__search__result--adding" : ""}`}
                    onMouseEnter={() => setActiveIndex(i)}
                    onMouseDown={e => e.preventDefault()}
                    onClick={() => addAttorney(attorney)}
                  >
                    <img
                      className="coverage-map__search__result__avatar"
                      src={`/uploads/coverage-map/avatars/${attorney.avatar}`}
                      alt=""
                    />
                    <span className="coverage-map__search__result__text">
                      <span className="coverage-map__search__result__name">{attorney.full_name}</span>
                      <span className="coverage-map__search__result__state">{attorney.state}</span>
                    </span>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}

      <Toast message={toastMessage} onDismiss={() => setToastMessage(null)} />
    </div>
  );
};

export default SearchBar;

import React, { useState, useEffect } from "react";
import usStateData from "./state-geometry.json";
import { useSelector, useDispatch } from "../../redux/store";
import { setUserInnerCircleHoveredAction } from "../../redux/actions/network";
import { classify } from "../../helpers";

const geometry = usStateData;

// Two-letter postal code (the SVG path/circle id) plus the state's full name
// (used to key into networkStates and the geometry lookup below).
const USState = ({ id, name }) => {
  const dispatch = useDispatch();

  // don't destructure the whole state.network, otherwise this rerenders every
  // time any property changes. We only need to react to the properties below.
  const disableAnimation = useSelector(state => state.network.disableAnimation);
  // The hero reveal is slower than the in-product demo: stretching the
  // random delay's range spreads the stagger out instead of finishing in
  // the first half second. No production equivalent; the real page only
  // ever rendered the one variant.
  const variant = useSelector(state => state.network.variant);
  const isMinimal = variant === "minimal";
  const staggerRange = isMinimal ? 1400 : 1800;
  const networkMembers = useSelector(state => state.network.networkMembers);
  const memberStatesToUpdateOnMap = useSelector(state => state.network.memberStatesToUpdateOnMap);

  const currentState = geometry.filter(x => x.id == id)[0];
  const [randomAnimationDelay, setRandomAnimationDelay] = useState(0);

  const [isActive, setIsActive] = useState(false);
  const [isExisting, setIsExisting] = useState(false);
  const [key, setKey] = useState(0);
  const [isAdded, setIsAdded] = useState(false);
  // Matches .coverage-map__globe's own entrance delay (2s full, 0.5s
  // minimal, see _coverage-map.scss), so states light up while the globe
  // itself is still fading/rising in, not before or after.
  const animationTimeout = isMinimal ? 500 : 2000;

  useEffect(() => {
    if (memberStatesToUpdateOnMap) {
      if (memberStatesToUpdateOnMap.new && memberStatesToUpdateOnMap.new.length > 0) {
        if (memberStatesToUpdateOnMap.new.indexOf(name) > -1) {
          setIsAdded(true);
        }
      }
      if (memberStatesToUpdateOnMap.existing && memberStatesToUpdateOnMap.existing.length > 0) {
        if (memberStatesToUpdateOnMap.existing.indexOf(name) > -1) {
          setIsExisting(true);
          setKey(key + 1);
          setRandomAnimationDelay(0);
        }
      }
    }
  }, [memberStatesToUpdateOnMap.new, memberStatesToUpdateOnMap.existing]);

  const checkIfActive = () => {
    const results = networkMembers.results;
    if (disableAnimation) {
      setIsActive(results.filter(x => x.practice_states !== undefined && x.practice_states !== null).some(y => y.practice_states.some(z => z == name)));
    } else {
      setTimeout(() => {
        setIsActive(results.filter(x => x.practice_states !== undefined && x.practice_states !== null).some(y => y.practice_states.some(z => z == name)));
      }, animationTimeout);
    }
  };

  const getRandomInteger = () => {
    return Math.floor(Math.random() * (staggerRange + 1));
  };

  useEffect(() => {
    checkIfActive();
    setRandomAnimationDelay(getRandomInteger());
  }, []);

  useEffect(() => {
    if (networkMembers) {
      checkIfActive();
    }
  }, [networkMembers]);

  const handleMouseOver = () => {
    // Only wired up to elements rendered inside `if (currentState)` below, so
    // this is always defined in practice.
    if (currentState) {
      dispatch(setUserInnerCircleHoveredAction(currentState.name));
    }
  };

  const handleMouseOut = () => {
    dispatch(setUserInnerCircleHoveredAction(null));
  };

  if (currentState) {
    if (currentState.id != "DC") {
      return (
        <path key={key}
              onMouseOver={isActive ? handleMouseOver : handleMouseOut}
              onMouseOut={handleMouseOut}
              style={{ animationDelay: `${randomAnimationDelay}ms` }}
              id={id}
              d={currentState.svgData}
              className={` ${classify("coverage-map__USA__state", {
                "selected": isActive && !isAdded && !isExisting,
                "added": isAdded && !isExisting,
                "existing": isExisting,
              })} coverage-map__USA__state--${id}`} />
      );
    } else {
      return (
        <circle onMouseOver={isActive ? handleMouseOver : handleMouseOut}
                onMouseOut={handleMouseOut}
                style={{ animationDelay: `${randomAnimationDelay}ms` }}
                stroke="#ffffff"
                strokeWidth="2.33731"
                cx="975.29999"
                cy="351.79999"
                r="5"
                className={` ${classify("coverage-map__USA__state", {
                  "selected": isActive && !isAdded,
                  "added": isActive && isAdded,
                  "existing": isExisting,
                })} coverage-map__USA__state--${id}`} />
      );
    }
  }
};

export default USState;

import React from "react";
import { useSelector } from "../redux/store";
import { classify } from "../helpers";

/* ==========================================================================
   NetworkMembers/index.jsx
   --------------------------------------------------------------------------
   A visible list of who's in the network, growing as you add people
   through SearchBar or "Simulate a new referral connection". Ported from
   InnerCircle/index.js's member-listing sections (Pending Invites, then
   the member list), minus real profile photos and InfiniteScroll
   pagination. Network members get a mock avatar photo; a pending invite
   keeps the initials circle, since nobody's signed up yet to have a
   photo of. Both render the full mock list at once, no paging, since
   there's never more than a few dozen entries.

   Dropped: the "Suggested" section from the original, which needs
   suggestion data this demo doesn't model.
   ========================================================================== */

const InitialsCircle = ({ fullName, added }) => {
  const parts = fullName.replace(/\s+/g, " ").split(" ");
  const first = parts[0] ? parts[0][0].toUpperCase() : "";
  const second = parts.length > 1 && parts[1] ? parts[1][0].toUpperCase() : "";

  return (
    <div
      className={`inner-circle-search__user__result__circle inner-circle-search__user__result__initials${
        added ? " inner-circle-search__user__result__initials--added" : ""
      }`}
    >
      <div className="inner-circle-search__user__result__initials__inner">
        <span className="inner-circle-search__user__result__initials__initial">{first}</span>
        {second && <span className="inner-circle-search__user__result__initials__initial">{second}</span>}
      </div>
    </div>
  );
};

const AvatarPhoto = ({ avatar, added }) => (
  <div
    className={`inner-circle-search__user__result__circle${
      added ? " inner-circle-search__user__result__initials--added" : ""
    }`}
  >
    <img className="member-listing__photo" src={`/uploads/coverage-map/avatars/${avatar}`} alt="" />
  </div>
);

const NetworkMembers = () => {
  const disableAnimation = useSelector(state => state.network.disableAnimation);
  const networkMembers = useSelector(state => state.network.networkMembers);
  const pendingInvites = useSelector(state => state.network.pendingInvites);
  const cls = disableAnimation ? "animation-disabled" : "animate-in";

  return (
    <div className="inner-circle__section-wrapper">
      {pendingInvites.count > 0 && (
        // Always "animation-disabled", not `cls`: this section only enters
        // the DOM on a visitor's first invite, not at page load, so the
        // page-load-tuned 2800ms fade-in made it look stalled for ~3s.
        <div className={`${classify("inner-circle__section", { "members": true })} animation-disabled`}>
          <div className="inner-circle__section__title-wrapper">
            <h2 className="inner-circle__section__title">
              Pending Invites
              <span className="inner-circle__section__count">{pendingInvites.count}</span>
            </h2>
          </div>

          <div className="inner-circle__section__list">
            {pendingInvites.results.map(invite => (
              <div className={classify("inner-circle__member", { "invite-added": invite.new })} key={invite.id}>
                <div className="member-listing member-listing--network-referral-member">
                  <div className="member-listing__wrapper">
                    <InitialsCircle fullName={invite.full_name} added={true} />
                    <div className="member-listing__rows">
                      <div className="member-listing__row member-listing__row--top">
                        <h3 className="member-listing__name">{invite.full_name}</h3>
                        <span className="inner-circle__type inner-circle__type--pending">Invite Sent</span>
                      </div>
                      <div className="member-listing__row member-listing__row--bottom">
                        <span className="member-listing__stat">{invite.email}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      <div className={`${classify("inner-circle__section", { "members": true })} ${cls}`}>
        <div className="inner-circle__section__title-wrapper">
          <h2 className="inner-circle__section__title">
            Your Network
            <span className="inner-circle__section__count">{networkMembers.count}</span>
          </h2>
        </div>

        <div className="inner-circle__section__list">
          {networkMembers.results.map(member => (
            <div className={classify("inner-circle__member", { "invite-added": member.new })} key={member.user_id}>
              <div className="member-listing member-listing--network-member">
                <div className="member-listing__wrapper">
                  <AvatarPhoto avatar={member.avatar} added={!!member.new} />
                  <div className="member-listing__rows">
                    <div className="member-listing__row member-listing__row--top">
                      <h3 className="member-listing__name">{member.full_name}</h3>
                      {member.new && <span className="inner-circle__type inner-circle__type--signed">Just Added</span>}
                    </div>
                    <div className="member-listing__row member-listing__row--bottom">
                      <span className="member-listing__stat">{member.practice_states.join(", ")}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default NetworkMembers;

@use "sass:color";
@use "../settings/variables" as *;
@use "../helpers/include-media" as *;
@use "../helpers/sizing" as *;
@use "../helpers/perch" as *;
@use "../helpers/animation" as *;
@use "../helpers/logic" as *;

// Local stand-ins for values that lived in the original app's design tokens
// (Overture's own accent blue and a light neutral grey, and Jost, the
// typeface the original product UI actually used instead of this site's own
// Inter).
$cm-blue: #1890ff;
$cm-light-grey: #ececec;
$cm-error: #d64545;
$jost: "Jost", sans-serif;

.coverage-map-panel {
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  overflow: hidden;
  margin: 3rem 0;

  &__preview {
    background: $white;
    // Padding, not the panel's own margin-bottom: a child's bottom margin
    // collapses through a plain block and escapes this background entirely,
    // exposing the page's dark background in the gap instead of white.
    padding-bottom: 4rem;
  }

  &__preview-label {
    padding: 1.2rem 2rem;
    font-family: $mono;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid rgba(11, 13, 18, 0.08);
  }

  &__mobile-preview {
    display: none;

    @include media("<=tablet") {
      display: block;
      padding: 0 2rem 2.4rem;
    }

    video {
      display: block;
      width: 100%;
      aspect-ratio: 982 / 605;
      border-radius: 0.6rem;
      object-fit: cover;
    }
  }

  &__mobile-note {
    padding: 1.6rem 0 0;
    font-size: 1.3rem;
    color: var(--color-text-muted);
    text-align: center;
    margin: 0;
  }
}

// Shared between the globe's own height and the hero placeholder's
// min-height, so the pre-mount reservation can't silently drift from the
// mounted component's real size.
$cm-height-desktop: 60rem;
$cm-height-tablet: 50rem;
$cm-height-phone: 46rem;

.coverage-map {
  $this: ".coverage-map";
  $USA: "#{$this}__USA";
  $state: "#{$USA}__state";
  $animation-speed: 5s;
  position: relative;
  overflow: hidden;
  background: transparent;
  height: $cm-height-desktop;
  font-family: $jost;
  // Shipped (full-demo) colors. The hero's --minimal modifier overrides
  // these further down to a dark-page-friendly palette; the lit-state blue
  // ($cm-blue, below) is intentionally left out of this scheme so it stays
  // identical in both variants.
  --cm-dome-start: #d2d2d2;
  --cm-dome-end: #ffffff;
  --cm-bg-start: #f8f8f8;
  --cm-bg-end: #ffffff;
  --cm-state-fill: #c9c9c9;
  // Desktop-only: the entrance sequence, dome composition, and search card
  // all assume real width to work with. Below tablet the full demo is
  // hidden and its mobile-note points people at a desktop instead.
  @include media("<=tablet") {
    display: none;
    height: $cm-height-tablet;
  }
  @include media("<=phone-size-lg") {
    height: $cm-height-phone;
  }

  &--minimal {
    --cm-dome-start: #262a33;
    --cm-dome-end: transparent;
    --cm-bg-start: transparent;
    --cm-bg-end: transparent;
    --cm-state-fill: #3a3f4a;

    // The dome's left/right edges get hard-clipped by .coverage-map's own
    // overflow:hidden, showing a straight seam where the box ends instead
    // of fading away. Masking the bottom hides that seam under a fade.
    $fade: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    mask-image: $fade;
    -webkit-mask-image: $fade;
  }

  &__demo-control {
    position: absolute;
    z-index: 20;
    top: 2rem;
    left: 2rem;
    background: var(--color-surface-inverse);
    color: var(--color-on-inverse);
    border: none;
    border-radius: 0.4rem;
    padding: 1rem 1.6rem;
    font-family: $mono;
    font-size: 1.3rem;
    cursor: pointer;
    transition: opacity 150ms;
    &:hover {
      opacity: 0.85;
    }
    // "Simulate" and "Reset demo" sit in opposite top corners.
    &--reset {
      left: auto;
      right: 2rem;
    }
  }

  // The full demo's always-visible play/replay trigger, centered over the
  // map. Unlike __replay (the hero's passive after-the-fact chip), this
  // stays up the whole time so a visitor can set off the entrance on their
  // own terms, the same way the original PlayButton worked.
  &__play {
    position: absolute;
    z-index: 15;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--color-surface-inverse);
    color: var(--color-on-inverse);
    border: none;
    border-radius: 999px;
    padding: 1.2rem 2.2rem 1.2rem 1.6rem;
    font-family: $mono;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 150ms;
    &:hover {
      transform: translate(-50%, -50%) scale(1.04);
    }

    &__icon {
      display: inline-block;
      width: 0;
      height: 0;
      border-top: 0.6rem solid transparent;
      border-bottom: 0.6rem solid transparent;
      border-left: 0.9rem solid $paper;
    }
  }

  &__globe {
    width: 133.9rem;
    height: 116.5rem;
    background: linear-gradient(to bottom, var(--cm-dome-start) 0%, var(--cm-dome-end) 39%);
    position: absolute;
    border-radius: 72.9rem 72.9rem 0px 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    background-size: 100% 200%;
    bottom: -71rem;
    opacity: 0;

    &.animation-disabled {
      background-position: 0% 39%;
      background-size: 100% 100%;
      bottom: -59rem;
      opacity: 1;
      @include media("<=tablet") {
        bottom: 0;
      }
    }

    @include media(">tablet") {
      @include animate-in($animation-speed, $delay: 2s) {
        0% {
          background-position: 0% 100%;
          background-size: 100% 200%;
          bottom: -71rem;
          opacity: 0;
        }
        100% {
          background-position: 0% 39%;
          background-size: 100% 100%;
          bottom: -59rem;
          opacity: 1;
        }
      }

      // The hero is a backdrop, not a timed showcase, so it should settle
      // in sooner. Just overriding the delay is enough.
      .coverage-map--minimal & {
        animation-delay: 0.5s;
      }
    }
    // CANDIDATE 1 (testing): between roughly 1024px and 1920px,
    // .coverage-map stays flat around 990px wide (.wrap caps out below
    // this globe's fixed rem width), so .coverage-map__globe silently
    // overflows and gets cropped, Canada/Mexico first. transform:scale()
    // shrinks width and height together around the same center, so
    // nothing inside gets re-tuned, just the same picture, smaller. 0.791
    // just clears the container at the narrow (~1025px) edge; it
    // under-fills a bit at the wide (~1560px) edge rather than risk
    // clipping again.
    @include media("<=1560px") {
      // translateY nudges the whole (already-shrunk) dome down slightly;
      // tell me the right number and I'll swap it in.
      transform: translateX(-50%) scale(0.791) translateY(2rem);
      // Default transform-origin (center) shrinks the dome toward its own
      // middle, which pushes its visible cap down and opens a gap above
      // the map / below the "Welcome to your trusted network" panel.
      // Pivoting from the top instead keeps the cap anchored where it was
      // and only pulls in the (mostly off-screen anyway) bottom.
      transform-origin: center top;
    }
    @include media("<=desktop") {
      width: 112rem;
      // Un-does the <=1560px scale above so this breakpoint's own existing,
      // separately-tuned width step is unaffected by the new rule.
      transform: translateX(-50%);
    }
    @include media("<=tablet") {
      @include spring(100%);
      background: linear-gradient(to bottom, var(--cm-dome-start) 0%, var(--cm-dome-end) 100%);
      border-radius: 0;
      height: 100%;
      bottom: 0;
      // The dome's reveal keyframes only exist above tablet; below it
      // nothing else sets opacity to 1, so without this the globe stays
      // invisible whenever animate-in (not animation-disabled) applies.
      // Scoped to <=tablet only, doesn't touch the desktop look.
      opacity: 1;
    }
  }

  &--minimal .coverage-map__globe {
    // The mobile background above is a flat rectangle with no fade; on
    // the hero it reads as a panel sitting on the page rather than the
    // states floating on it. Simpler to drop it than fade a shape with no
    // room to.
    @include media("<=tablet") {
      background: none;
    }
  }
  &__background {
    @include spring(100%);
    background: linear-gradient(to bottom, var(--cm-bg-start) 0%, var(--cm-bg-end) 100%);
    background-repeat: repeat;
    background-size: auto;
    background-repeat: no-repeat;
    background-size: 100% 0%;
    &.animation-disabled {
      background-size: 100% 100%;
    }
    @include animate-in($animation-speed) {
      0% {
        background-size: 100% 0%;
      }
      100% {
        background-size: 100% 100%;
      }
    }
  }
  &__north-america {
  }
  &__canada-and-mexico {
    opacity: 0;
    &.animation-disabled {
      opacity: 1;
    }
    @include animate-in($animation-speed) {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @include media("<=tablet") {
      display: none;
    }
    img {
      @include spring(151rem);
      height: auto;
      object-fit: contain;
      position: relative;
      top: -2.6rem;
      @include media("<=desktop") {
        top: -2rem;
      }
    }
  }
  &__USA {
    @include spring(151rem);
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: -4.85rem;
    z-index: 1;
    opacity: 0;
    @include media("<=desktop-size-xl") {
      top: -8.18rem;
    }
    @include media("<=1560px") {
      top: -16.7rem;
    }
    @include media("<=desktop") {
      top: -23.2rem;
    }
    @include media("<=tablet") {
      top: 0;
      height: auto;
    }

    &.animation-disabled {
      opacity: 1;
    }

    @include animate-in($animation-speed) {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    &__svg {
      @include spring(100%);
      position: relative;
      z-index: 10;
      // Nudges the states back down within the <=1560px scaled-down dome
      // (see "CANDIDATE 1" above). That scale() shrinks the whole picture
      // from its center, which left the map sitting too high in the dome.
      @include media("<=1560px") {
        top: 8.5rem;
      }
      @include media("<=desktop") {
        top: 7rem;
      }
      @include media("<=tablet") {
        height: 100%;
        top: 0;
      }
    }
    &__ak-hi-border {
      position: absolute;
      width: 100%;
      top: 2rem;
      z-index: 0;
      @include media("<=desktop-size-xl") {
        top: 5rem;
      }
      @include media("<=1560px") {
        top: 14rem;
      }
      @include media("<=desktop") {
        top: 21rem;
      }
      @include media("<=tablet") {
        display: none;
      }
    }
    &__state {
      fill: var(--cm-state-fill);
      transition: all 125ms;
      cursor: pointer;
      position: relative;
      &:hover {
        @include media(">tablet") {
          fill: #5cb1ff;
        }
      }
      &--selected {
        fill: var(--cm-state-fill);
        @include animate(250ms) {
          0% {
            fill: var(--cm-state-fill);
          }
          100% {
            fill: $cm-blue;
          }
        }
        &:hover {
          @include media(">tablet") {
            opacity: 0.9;
          }
        }
      }
      &--added {
        fill: #c9c9c9;
        stroke-dasharray: 0%;
        stroke-opacity: 0;
        stroke-width: 0px;
        stroke: transparent;
        @include animate(1.5s) {
          0% {
            stroke-opacity: 0;
            stroke-width: 5px;
            fill: #c9c9c9;
            stroke: transparent;
          }
          50% {
            stroke-opacity: 1;
            stroke-width: 5px;
            stroke: $white;
            fill: #c9c9c9;
          }
          80% {
            stroke-opacity: 1;
            stroke-width: 5px;
            stroke: $white;
            fill: #e2e2e2;
          }
          100% {
            stroke-opacity: 0;
            stroke: transparent;
            stroke-width: 5px;
            fill: $cm-blue;
          }
        }
        &:hover {
          @include media(">tablet") {
            opacity: 0.9;
          }
        }
      }
      &--existing {
        @include animate(1.5s) {
          0% {
            stroke-opacity: 0;
            stroke-width: 5px;
            fill: $cm-blue;
            stroke: transparent;
          }
          50% {
            stroke-opacity: 1;
            stroke-width: 5px;
            stroke: $white;
            fill: $cm-blue;
          }
          80% {
            stroke-opacity: 1;
            stroke-width: 5px;
            stroke: $white;
            fill: $cm-blue;
          }
          100% {
            stroke-opacity: 0;
            stroke: transparent;
            stroke-width: 5px;
            fill: $cm-blue;
          }
        }
      }
      &--search-dimmed {
        opacity: 0.25;
        transition: opacity 200ms;
      }
      &--search-match {
        fill: $cm-blue;
        transition: fill 150ms;
        @include animate(1.2s, $loop: true) {
          0% {
            stroke-opacity: 0;
            stroke-width: 6px;
            stroke: $cm-blue;
          }
          50% {
            stroke-opacity: 0.9;
            stroke-width: 6px;
            stroke: $cm-blue;
          }
          100% {
            stroke-opacity: 0;
            stroke-width: 6px;
            stroke: $cm-blue;
          }
        }
      }
    }
    &__region {
      fill: var(--cm-state-fill);
    }
  }
  &__info-box {
    @include spring(30rem);
    height: auto;
    // Rendered through a portal to document.body (see InfoBox/index.js), so
    // it's no longer a DOM descendant of .coverage-map and needs its own
    // font-family rather than inheriting it.
    font-family: $jost;
    background-color: $white;
    position: absolute;
    top: 0;
    left: 0;
    padding: 2rem 2rem;
    opacity: 0;
    // The box tracks the cursor and can end up directly under it. Without
    // this, the cursor lands on the box instead of the map path beneath it,
    // firing mouseout -> hide -> mouseover -> show in a rapid loop (visible
    // as a flickering cursor and a popup that sometimes never settles).
    pointer-events: none;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.08);
    @include animate(125ms, $delay: 200ms) {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    &__title {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 1.3rem;
      color: var(--color-on-inverse);
    }
    &__wrapper {
      text-align: center;
      @include perch("+==");
    }
    &__attorneys {
      @include perch("+==");
      @include spring(100%);
      &__img-wrapper {
        @include spring(13rem);
        @include perch("-+-");
        overflow: hidden;
      }
      &__img {
        @include size(4rem);
        min-width: 4rem;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        opacity: 0;
        left: 50%;
        transform: rotateY(70deg);
        display: flex;
        align-items: center;
        justify-content: center;
        background: $cm-light-grey;
        color: $cm-blue;
        font-family: $mono;
        font-size: 1.2rem;
        @include when-legacy("adjacent") {
          margin-left: -10%;
          z-index: 1;
        }
        @include animate-in(325ms, $delay: 150ms) {
          0% {
            opacity: 0;
            left: 50%;
            transform: rotateY(70deg);
          }
          100% {
            opacity: 1;
            left: 0%;
            transform: rotateY(0deg);
          }
        }
        &--overflow {
          @include perch("-+-");
          background-color: $cm-light-grey;
          color: $cm-blue;
          font-weight: 700;
          font-size: 1.5rem;
        }
      }
      &__count {
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: $white;
        background-color: $cm-blue;
        font-size: 1.2rem;
        border-radius: 1.5rem;
        padding: 0.5rem 1.5rem;
        margin-top: 0.5rem;
        @include spring(15rem);
      }
      &__list {
        @include spring(20rem);
        font-size: 1.55rem;
        color: #9a9a9a;
        margin-top: 1rem;
        display: block;
        line-height: 1.1;
      }
    }
  }
}

// The AK/HI border and Canada/Mexico graphics are external image files with
// their own baked-in grey/white gradients (not inline SVG), so they can't
// take the --cm-* custom properties above. A filter is the pragmatic way to
// mute them for the dark hero without touching the source files or their
// geometry.
.coverage-map--minimal {
  .coverage-map__USA__ak-hi-border,
  .coverage-map__canada-and-mexico img {
    filter: invert(1) brightness(0.55) opacity(0.6);
  }

  // Alaska/Hawaii sit in their own inset, offset into the bottom-left.
  // On mobile's narrow width that space is better spent letting the
  // lower 48, where every lit state actually is, fill it.
  @include media("<=tablet") {
    .coverage-map__USA__ak-hi {
      display: none;
    }
  }

  // The hero is a non-interactive teaser: InfoBox is already unmounted
  // (see index.js), and this also kills the :hover fill-brighten (CSS,
  // independent of InfoBox) and the pointer cursor, so hovering a state
  // does nothing at all.
  .coverage-map__USA__state {
    cursor: default;
    pointer-events: none;
  }

  // DC's marker has a hardcoded white stroke (it's an SVG attribute, not
  // themed) meant to be legible next to the InfoBox tooltip naming it. With
  // no tooltip or legend in the hero, it reads as a stray artifact.
  .coverage-map__USA__state--DC {
    display: none;
  }

  // A soft glow instead of a flat fill, so lit states read as lit against
  // the dark page rather than just a different flat color. Full demo (on
  // its white card) is untouched.
  .coverage-map__USA__state--selected,
  .coverage-map__USA__state--existing {
    filter: drop-shadow(0 0 3px rgba(24, 144, 255, 0.65));
  }
}

// Positions the play/replay buttons (both absolutely positioned) relative
// to the mounted widget itself, not whatever positioned ancestor happens to
// be further up the page.
.coverage-map-autoplay {
  position: relative;
  // Before React mounts, this div is empty (zero height/area). It's also
  // what the hero's IntersectionObserver watches, and a zero-area target
  // never reports isIntersecting: true, so autoplay would never fire.
  // Inheriting the mount point's reserved min-height keeps it non-empty.
  min-height: inherit;
}

// Reserves the demo's rendered height before React lazy-mounts into it, so
// there's no layout shift once the IntersectionObserver fires. min-height,
// not height: the full demo's search card (pulled up over the map with a
// negative margin) is taller than the map alone, so a fixed height here
// would cap the container short and let that card's content spill into the
// code tabs below it once mounted.
// The containing section is hidden below tablet (see .coverage-map's own
// <=tablet display:none), so only the desktop reservation applies.
#coverage-map-demo {
  display: block;
  min-height: $cm-height-desktop;

  @include media("<=tablet") {
    min-height: 0;
  }
}

.coverage-map__panel {
  position: relative;
  z-index: 2;
  font-family: $jost;
  background: $white;
  border-radius: 0.6rem;
  margin: -13rem 4rem 0;
  padding: 2.2rem 2.8rem 3.6rem;
  border: 1px solid rgba(11, 13, 18, 0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  // The frame (border/shadow) materializes on its own, independent of the
  // text/input fades below it, matching the original's slow-build box.
  &.animation-disabled {
    border-color: rgba(11, 13, 18, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  }
  @include animate-in(2.2s, $delay: 300ms) {
    0% {
      border-color: rgba(11, 13, 18, 0);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
      border-color: rgba(11, 13, 18, 0.08);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    }
  }
  @include media("<=tablet") {
    display: none;
  }
}

// Prefixed with .coverage-map-panel below (not bare .coverage-map__intro)
// so this beats .case-section__body h3's own color rule on specificity.
// The demo sits inside a case-section's prose body on the Overture page;
// a bare class-only selector here would lose that fight to the prose
// rule's extra element-selector (h3).
.coverage-map-panel .coverage-map__intro {
  margin-bottom: 1.4rem;

  &__pretext {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0;
    &.animation-disabled {
      opacity: 1;
    }
    // Arrives with the search input, after the headline has already
    // finished settling in, same as the original's own reveal order.
    @include animate-in(400ms, $delay: 2300ms) {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }

  &__title {
    margin: 0.4rem 0 0;
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-on-inverse);
    @include media("<=desktop") {
      font-size: 1.6rem;
    }

    strong {
      font-weight: 700;
    }

    span {
      display: block;
      opacity: 0;
      filter: blur(8px);
      &.animation-disabled {
        opacity: 1;
        filter: blur(0);
      }
      @include animate-in(550ms) {
        0% {
          opacity: 0;
          filter: blur(8px);
        }
        100% {
          opacity: 1;
          filter: blur(0);
        }
      }
      &:nth-child(1) {
        animation-delay: 200ms;
      }
      &:nth-child(2) {
        animation-delay: 1750ms;
      }
    }
  }
}

.coverage-map__search {
  position: relative;
  opacity: 0;
  &.animation-disabled {
    opacity: 1;
  }
  // Arrives together with the pretext, after the headline above it.
  @include animate-in(400ms, $delay: 2300ms) {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  &__field {
    position: relative;
    @include spring(26rem);
    max-width: 100%;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 1.4rem;
      width: 1rem;
      height: 1rem;
      border: 2px solid var(--color-on-inverse-muted);
      border-radius: 50%;
      transform: translateY(-60%);
      pointer-events: none;
    }
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 2.15rem;
      width: 2px;
      height: 0.7rem;
      background: var(--color-on-inverse-muted);
      transform: translateY(15%) rotate(-45deg);
      pointer-events: none;
    }
  }

  &__input {
    @include spring(100%);
    padding: 0.8rem 1.2rem 0.8rem 3rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(11, 13, 18, 0.15);
    background: $white;
    font-family: $jost;
    font-size: 1.2rem;
    color: var(--color-on-inverse);
    transition: border-color 150ms;
    &::placeholder {
      color: var(--color-on-inverse-muted);
    }
    &:focus {
      outline: none;
      border-color: $cm-blue;
    }
  }

  &__results {
    position: absolute;
    margin-top: 0.6rem;
    width: 34rem;
    max-width: 100%;
    background: $white;
    border: 1px solid $cm-light-grey;
    border-radius: 0.6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 6;
  }

  &__empty {
    padding: 1.2rem 1.6rem;
    font-size: 1.3rem;
    color: var(--color-text-muted);
  }

  // The invite form: pinned above the results list for as long as
  // there's a query, not just when nothing matches (see SearchBar's own
  // header comment). Collapsed to a single clickable row until selected,
  // when the email field (hidden otherwise) becomes visible.
  &__invite {
    background: $cm-blue;
    transition: opacity 150ms;
    &--adding {
      opacity: 0.5;
      pointer-events: none;
    }
    &__row {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      padding: 1.2rem 1.6rem;
      cursor: pointer;
    }
    &__avatar {
      flex-shrink: 0;
      width: 3.6rem;
      height: 3.6rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.1rem;
      background: color.adjust($cm-blue, $lightness: 15%);
      &__initial {
        font-family: $jost;
        font-weight: 700;
        font-size: 1.3rem;
        color: $white;
      }
    }
    &__name {
      font-size: 1.5rem;
      font-weight: 600;
      color: $white;
    }
    // White, same as the rest of the dropdown. Only the "Invite
    // {name}" row above stays on the blue field, so the blue doesn't
    // bleed down around the input and button.
    &__footer {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      padding: 1rem 1.6rem;
      background: $white;
    }
    &__email {
      flex: 1;
      min-width: 0;
      border: 1px solid rgba(11, 13, 18, 0.15);
      border-radius: 0.3rem;
      padding: 0.8rem 1rem;
      font-family: $jost;
      font-size: 1.2rem;
      color: var(--color-on-inverse);
      background: $white;
      transition: border-color 150ms;
      &::placeholder {
        color: var(--color-on-inverse-muted);
      }
      &:focus {
        outline: none;
        border-color: $cm-blue;
      }
      &--invalid {
        border-color: $cm-error;
        &:focus {
          border-color: $cm-error;
        }
      }
    }
    &__button {
      flex-shrink: 0;
      width: 3.8rem;
      height: 3.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: $cm-blue;
      color: $white;
      border: none;
      border-radius: 0.4rem;
      cursor: pointer;
      transition: opacity 150ms;
      &:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }
      &:not(:disabled):hover {
        opacity: 0.85;
      }
    }
  }

  &__result-list {
    max-height: 30rem;
    overflow-y: auto;
  }

  &__result {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.6rem;
    cursor: pointer;
    transition: background 120ms, opacity 150ms;
    &:hover,
    &--active {
      background: $cm-light-grey;
    }
    &--adding {
      opacity: 0.5;
      pointer-events: none;
    }
    &__avatar {
      flex-shrink: 0;
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      object-fit: cover;
    }
    &__text {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      min-width: 0;
    }
    &__name {
      font-size: 1.4rem;
      font-weight: 600;
      color: var(--color-on-inverse);
    }
    &__state {
      font-size: 1.2rem;
      color: var(--color-on-inverse-muted);
    }
  }
}

// Portaled to document.body (see SearchBar/Toast.jsx), so it's positioned
// fixed against the viewport rather than nested under .coverage-map.
.coverage-map__toast-region {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 3rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.coverage-map__toast {
  max-width: min(90vw, 34rem);
  background: var(--color-text);
  color: var(--color-on-inverse);
  font-family: $mono;
  font-size: 1.3rem;
  text-align: center;
  padding: 1rem 1.8rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  @media (prefers-reduced-motion: no-preference) {
    animation: coverage-map__toast-in 220ms cubic-bezier(0, 0, 0, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes coverage-map__toast-in {
    0% {
      opacity: 0;
      transform: translateY(0.8rem);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.inner-circle-search__stat-counter {
  position: absolute;
  z-index: 20;
  bottom: 16rem;
  right: 2rem;
  opacity: 0;
  &.animation-disabled {
    opacity: 1;
  }
  @include animate-in(600ms, $delay: 1s) {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  &__wrapper {
    display: flex;
    gap: 1rem;
  }

  &__stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    background: $white;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    padding: 0.8rem 1.6rem;
    transition: transform 200ms;

    &--pulsate {
      transform: scale(1.05);
    }

    &__countup {
      font-family: $jost;
      font-weight: 700;
      font-size: 1.4rem;
      color: var(--color-on-inverse);
    }

    span {
      font-size: 1.3rem;
      color: var(--color-text-muted);
    }
  }
}

.code-showcase {
  // Solarized Dark (solarized.base03 background, base0 foreground)
  $sol-base03: #002b36;
  $sol-base02: #073642;
  $sol-base01: #586e75;
  $sol-base0: #839496;
  $sol-base1: #93a1a1;
  $sol-yellow: #b58900;
  $sol-orange: #cb4b16;
  $sol-red: #dc322f;
  $sol-magenta: #d33682;
  $sol-blue: #268bd2;
  $sol-cyan: #2aa198;
  $sol-green: #859900;

  border-top: 1px solid rgba($sol-base0, 0.15);
  background: $sol-base03;

  &__radio {
    display: none;
  }

  &__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    background: $sol-base02;
    padding: 0.6rem 0.6rem 0;

    label {
      font-family: $mono;
      font-size: 1.2rem;
      color: rgba($sol-base1, 0.6);
      padding: 0.8rem 1.4rem;
      cursor: pointer;
      border-radius: 0.4rem 0.4rem 0 0;
      transition: color 150ms, background 150ms;
      &:hover {
        color: $sol-base1;
      }
    }
  }

  &__panels {
    position: relative;
  }

  &__panel {
    display: none;
    margin: 0;
    padding: 2rem 2rem 2rem 5.6rem;
    max-height: 34rem;
    overflow: auto;
    font-family: $mono;
    font-size: 1.3rem;
    line-height: 1.55;
    position: relative;

    code {
      font-family: inherit;
      color: $sol-base0;
      white-space: pre;
      position: relative;
    }
  }

  // Prism's line-numbers plugin (wired up in mount.tsx) appends
  // .line-numbers-rows into <code> once highlighting finishes. Styled
  // here to match the Solarized Dark theme instead of pulling in the
  // plugin's own CSS.
  .line-numbers-rows {
    position: absolute;
    // dangerouslySetInnerHTML owns <code>'s entire child list, so the
    // numbers render as a sibling of <code>, not nested inside it like
    // the real plugin assumes. Its containing block is
    // .code-showcase__panel (<pre>, position: relative above), so
    // left/width are measured from <pre>'s own 5.6rem padding-left, not
    // <code>'s edge.
    top: 0;
    left: 2.8rem;
    width: 2.8rem;
    font-size: inherit;
    line-height: inherit;
    pointer-events: none;
    user-select: none;
    counter-reset: linenumber;
    border-right: 1px solid rgba($sol-base0, 0.15);

    span {
      display: block;
      counter-increment: linenumber;

      &::before {
        content: counter(linenumber);
        display: block;
        padding-right: 0.8rem;
        text-align: right;
        color: rgba($sol-base0, 0.35);
      }
    }
  }

  &__caption {
    padding: 1.4rem 2rem;
    background: $sol-base02;
    color: rgba($sol-base1, 0.7);
    font-size: 1.3rem;
    margin: 0;
  }

  // radio-driven tab switching, no JS required
  $cm-tab-ids: index, reducers, searchbar, usstate, networkmembers, styles;
  @each $id in $cm-tab-ids {
    #cm-tab-#{$id}:checked ~ .code-showcase__tabs label[for="cm-tab-#{$id}"] {
      color: $sol-yellow;
      background: $sol-base03;
    }
    #cm-tab-#{$id}:checked ~ .code-showcase__panels .code-showcase__panel[data-tab="#{$id}"] {
      display: block;
    }
  }

  // Prism tokens, standard Solarized Dark syntax mapping
  .token.comment { color: $sol-base01; font-style: italic; }
  .token.string,
  .token.attr-value { color: $sol-cyan; }
  .token.keyword { color: $sol-green; }
  .token.function { color: $sol-blue; }
  .token.punctuation { color: $sol-base0; }
  .token.tag,
  .token.class-name { color: $sol-blue; }
  .token.attr-name { color: $sol-yellow; }
  .token.number,
  .token.boolean { color: $sol-magenta; }
  .token.property { color: $sol-blue; }
  .token.selector { color: $sol-blue; }
  .token.operator { color: $sol-green; }
  .token.constant { color: $sol-orange; }
}

// The circle avatar slot used by NetworkMembers rows: a real mock photo
// (.member-listing__photo) for anyone with one, or the initials fallback
// below for a pending invite, who doesn't have one yet (nobody's signed up
// to have a photo of).
.inner-circle-search__user__result__circle {
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: $cm-light-grey;
}

.member-listing__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inner-circle-search__user__result__initials {
  background: $cm-light-grey;
  &__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    font-family: $jost;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-on-inverse);
  }
  &--added {
    background: var(--color-text);
    box-shadow: inset 0 0 0 2px $cm-blue;
  }
}

// NetworkMembers: the growing list of who's actually in the network, and
// the attorneys invited but not yet signed up.
.inner-circle__section-wrapper {
  // Matches .coverage-map__panel's own side margin (4rem) so this list
  // lines up with the search card above it instead of running edge to edge.
  margin: 4rem 4rem 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;

  @include media("<=tablet") {
    display: none;
  }
}

.inner-circle__section {
  opacity: 0;
  &.animation-disabled {
    opacity: 1;
  }
  @include animate-in(500ms, $delay: 2800ms) {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  &__title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
  }
  &__title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-inverse);
  }
  &__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: $cm-light-grey;
    color: var(--color-on-inverse);
    font-family: $jost;
    font-size: 1.1rem;
    font-weight: 700;
  }
  &__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 36rem;
    overflow-y: auto;
  }
}

.inner-circle__member {
  &--invite-added {
    @include animate(400ms) {
      0% {
        opacity: 0;
        transform: translateY(-0.6rem);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

// Prefixed with .coverage-map-panel (not bare .member-listing) for the same
// reason .coverage-map-panel .coverage-map__intro is above: &__name is an
// h3, and .case-section__body h3's own color rule would otherwise outrank
// a bare single-class selector here when this list sits inside a
// case-section's prose body (the Overture page).
.coverage-map-panel .member-listing {
  &__wrapper {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.4rem;
    background: $white;
    border-radius: 0.6rem;
    border: 1px solid $cm-light-grey;
    .inner-circle__member--invite-added & {
      @include animate(1.5s) {
        0% {
          box-shadow: 0 0 0 2px rgba($cm-blue, 0.5);
        }
        100% {
          box-shadow: 0 0 0 2px rgba($cm-blue, 0);
        }
      }
    }
  }
  &__rows {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  &__row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    &--top {
      justify-content: space-between;
    }
  }
  &__name {
    font-family: $jost;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-on-inverse);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__stat {
    font-size: 1.2rem;
    color: var(--color-on-inverse-muted);
  }
}

.inner-circle__type {
  flex-shrink: 0;
  font-family: $mono;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 0.3rem;
  &--pending {
    color: var(--color-on-inverse-muted);
    background: $cm-light-grey;
  }
  &--signed {
    color: $white;
    background: $cm-blue;
  }
}