/* CRM page hero, home-grade
 * - Photo background (lifestyle-woman-phone.png)
 * - Phone overlay showing the CRM contact profile mini view
 * - Cycles between glance views: profile / memory / reservations / channels
 */

const crmHeroSlides = [
  {
    label: "Profile",
    body: (
      <div className="chph-pane chph-profile">
        <div className="chph-pane-head">Contact</div>
        <div className="chph-name">Aoife Daly</div>
        <div className="chph-meta">
          <div><span className="chph-k">Language</span><span className="chph-v">English (IE)</span></div>
          <div><span className="chph-k">Channels</span><span className="chph-v">WhatsApp · Email · IG</span></div>
          <div><span className="chph-k">Lifecycle</span><span className="chph-v">Returning · pre-stay</span></div>
          <div><span className="chph-k">Loyalty</span><span className="chph-v">Society · Gold</span></div>
        </div>
        <div className="chph-stats">
          <div className="chph-stat"><div className="chph-stat-n">7</div><div className="chph-stat-l">stays</div></div>
          <div className="chph-stat"><div className="chph-stat-n">€11.4k</div><div className="chph-stat-l">LTV</div></div>
          <div className="chph-stat"><div className="chph-stat-n">4.9</div><div className="chph-stat-l">avg rating</div></div>
        </div>
      </div>
    ),
  },
  {
    label: "Memory",
    body: (
      <div className="chph-pane chph-memory">
        <div className="chph-pane-head">Long-term memory</div>
        <ul className="chph-mem">
          <li><span className="chph-mem-k">Pillow</span><span className="chph-mem-v">Firm, two of</span></li>
          <li><span className="chph-mem-k">Diet</span><span className="chph-mem-v">Pescatarian, no shellfish</span></li>
          <li><span className="chph-mem-k">Dog</span><span className="chph-mem-v">Bran · 8kg dachshund</span></li>
          <li><span className="chph-mem-k">Anniversary</span><span className="chph-mem-v">14 Aug · prefers room 412</span></li>
          <li><span className="chph-mem-k">Quiet room</span><span className="chph-mem-v">Always, captured twice</span></li>
        </ul>
        <div className="chph-mem-foot">Captured automatically across 6 channels</div>
      </div>
    ),
  },
  {
    label: "Stays",
    body: (
      <div className="chph-pane chph-stays">
        <div className="chph-pane-head">Reservations</div>
        <ul className="chph-stays-list">
          <li>
            <div className="chph-stays-row">
              <div>
                <div className="chph-stays-h">Reverence Mare</div>
                <div className="chph-stays-d">Jul 15 → 18 · Sea View</div>
              </div>
              <div className="chph-stays-amt">€743</div>
            </div>
            <div className="chph-stays-tag chph-stays-tag-c">Confirmed · Booking.com</div>
          </li>
          <li>
            <div className="chph-stays-row">
              <div>
                <div className="chph-stays-h">Reverence Cap Roig</div>
                <div className="chph-stays-d">May 02 → 05 · Cliffside</div>
              </div>
              <div className="chph-stays-amt">€1,210</div>
            </div>
            <div className="chph-stays-tag chph-stays-tag-d">Stayed · Direct</div>
          </li>
          <li>
            <div className="chph-stays-row">
              <div>
                <div className="chph-stays-h">Reverence City</div>
                <div className="chph-stays-d">Feb 18 → 20 · Studio</div>
              </div>
              <div className="chph-stays-amt">€420</div>
            </div>
            <div className="chph-stays-tag chph-stays-tag-d">Stayed · Direct</div>
          </li>
        </ul>
      </div>
    ),
  },
  {
    label: "Activity",
    body: (
      <div className="chph-pane chph-activity">
        <div className="chph-pane-head">Recent activity</div>
        <ul className="chph-act">
          <li><span className="chph-act-t">2m</span><span className="chph-act-d">Replied on WhatsApp · pet-friendly room confirmed</span></li>
          <li><span className="chph-act-t">1h</span><span className="chph-act-d">Pre-stay journey · step 3 sent</span></li>
          <li><span className="chph-act-t">today</span><span className="chph-act-d">Memory captured · "prefers late check-in"</span></li>
          <li><span className="chph-act-t">yest</span><span className="chph-act-d">Email opened · "Your stay at Mare"</span></li>
          <li><span className="chph-act-t">Tue</span><span className="chph-act-d">Booking confirmed · LUM-247887</span></li>
        </ul>
      </div>
    ),
  },
];

const CrmHeroPhone = () => {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % crmHeroSlides.length), 4200);
    return () => clearInterval(t);
  }, []);
  const slide = crmHeroSlides[idx];
  return (
    <div className="crm-phone">
      <div className="crm-phone-bezel">
        <div className="crm-island" />
        <div className="crm-phone-screen">
          <div className="crm-phone-statusbar">
            <span>9:41</span>
            <span className="crm-phone-statusbar-r">
              <svg width="14" height="10" viewBox="0 0 14 10"><path d="M0 8h2v2H0zm4-2h2v4H4zm4-3h2v7H8zm4-3h2v10h-2z" fill="currentColor"/></svg>
              <svg width="14" height="10" viewBox="0 0 14 10"><path d="M1 4l6 5 6-5" fill="none" stroke="currentColor" strokeWidth="1.4"/></svg>
              <span className="crm-phone-bat" />
            </span>
          </div>
          <div className="crm-phone-app">
            <div className="crm-phone-app-head">
              <div className="crm-phone-app-title">
                <span className="crm-phone-back">‹</span>
                <span>Aoife Daly</span>
              </div>
              <div className="crm-phone-tabs">
                {crmHeroSlides.map((s, i) => (
                  <button
                    key={s.label}
                    type="button"
                    className={"crm-phone-tab" + (i === idx ? " is-active" : "")}
                    onClick={() => setIdx(i)}
                  >{s.label}</button>
                ))}
              </div>
            </div>
            <div className="crm-phone-body" key={idx}>
              {slide.body}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.CrmHeroPhone = CrmHeroPhone;

/* ============================================================
 * CONTACTS DIRECTORY MOCK, replaces the old BrowserShot
 * ============================================================ */
const contactsDirRows = [
  { name: "Aoife Daly",          loc: "Dublin, IE",     lang: "EN",  pty: "Reverence Mare",     stage: "Returning",  ch: ["wa","email","ig"],     ltv: "€11.4k", stays: 7 },
  { name: "Lukas Brand",         loc: "Berlin, DE",     lang: "DE",  pty: "Reverence City",     stage: "Pre-stay",   ch: ["email","wa"],          ltv: "€2.1k",  stays: 1 },
  { name: "María Castell",       loc: "Madrid, ES",     lang: "ES",  pty: "Reverence Cap Roig", stage: "VIP",         ch: ["wa","email","voice"],  ltv: "€38.2k", stays: 14 },
  { name: "James Whitfield",     loc: "London, UK",     lang: "EN",  pty: "Reverence Mare",     stage: "In-stay",     ch: ["wa","email"],          ltv: "€6.8k",  stays: 4 },
  { name: "Yuki Tanaka",         loc: "Tokyo, JP",      lang: "EN",  pty: "Reverence Cap Roig", stage: "Returning",   ch: ["email","ig"],          ltv: "€18.6k", stays: 9 },
  { name: "Sofia Conti",         loc: "Milan, IT",      lang: "IT",  pty: "Reverence City",     stage: "Lapsed",      ch: ["email"],               ltv: "€4.2k",  stays: 3 },
  { name: "Pierre Renaud",       loc: "Lyon, FR",       lang: "FR",  pty: "Reverence Mare",     stage: "Pre-stay",    ch: ["wa","email"],          ltv: "€1.8k",  stays: 1 },
  { name: "Chioma Adeyemi",      loc: "Lagos, NG",      lang: "EN",  pty: "Reverence Cap Roig", stage: "New lead",    ch: ["ig","wa"],             ltv: "€0",     stays: 0 },
  { name: "Henrik Solberg",      loc: "Oslo, NO",       lang: "EN",  pty: "Reverence Mare",     stage: "Returning",   ch: ["email","wa"],          ltv: "€7.3k",  stays: 5 },
];

const stageColor = {
  "Returning": "var(--c-instagram)",
  "Pre-stay":  "#3b82f6",
  "In-stay":   "#0f9d58",
  "VIP":       "#a855f7",
  "Lapsed":    "var(--ink-3)",
  "New lead":  "#f59e0b",
};

const chMark = {
  wa:    { label: "W", title: "WhatsApp",  color: "#25D366" },
  email: { label: "E", title: "Email",     color: "#6b7280" },
  ig:    { label: "I", title: "Instagram", color: "#E1306C" },
  voice: { label: "V", title: "Voice",     color: "#0ea5e9" },
};

const ContactsDirectoryMock = () => {
  return (
    <div className="cdir">
      <div className="cdir-toolbar">
        <div className="cdir-search">
          <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.4"/><path d="m11 11 3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
          <span className="cdir-search-q">DE-speakers · pre-stay · Reverence Mare</span>
          <span className="cdir-count">2,841 contacts</span>
        </div>
        <div className="cdir-chips">
          <span className="cdir-chip is-on">All properties</span>
          <span className="cdir-chip">Lifecycle</span>
          <span className="cdir-chip">Language</span>
          <span className="cdir-chip">Loyalty</span>
          <span className="cdir-chip">Source</span>
        </div>
      </div>

      <div className="cdir-table">
        <div className="cdir-head">
          <div>Contact</div>
          <div>Property</div>
          <div>Lifecycle</div>
          <div>Channels</div>
          <div className="cdir-num">Stays</div>
          <div className="cdir-num">LTV</div>
        </div>
        {contactsDirRows.map((r, i) => (
          <div key={i} className="cdir-row">
            <div className="cdir-c-name">
              <span className="cdir-avatar" style={{ background: `hsl(${(i * 47) % 360} 70% 88%)`, color: `hsl(${(i * 47) % 360} 60% 32%)` }}>
                {r.name.split(" ").map((p) => p[0]).slice(0, 2).join("")}
              </span>
              <div>
                <div className="cdir-c-n">{r.name}</div>
                <div className="cdir-c-l">{r.loc} · {r.lang}</div>
              </div>
            </div>
            <div className="cdir-c-pty">{r.pty}</div>
            <div>
              <span className="cdir-stage" style={{ color: stageColor[r.stage], background: `color-mix(in srgb, ${stageColor[r.stage]} 12%, transparent)`, borderColor: `color-mix(in srgb, ${stageColor[r.stage]} 28%, transparent)` }}>{r.stage}</span>
            </div>
            <div className="cdir-c-ch">
              {r.ch.map((c) => {
                const m = chMark[c];
                return <span key={c} className="cdir-ch-dot" title={m.title} style={{ background: `color-mix(in srgb, ${m.color} 16%, transparent)`, color: m.color, borderColor: `color-mix(in srgb, ${m.color} 30%, transparent)` }}>{m.label}</span>;
              })}
            </div>
            <div className="cdir-num">{r.stays}</div>
            <div className="cdir-num cdir-ltv">{r.ltv}</div>
          </div>
        ))}
      </div>

      <div className="cdir-foot">
        <span>Showing 9 of 2,841 · across 3 properties · 6 PMS sources</span>
        <span className="cdir-foot-actions">
          <span>Tag</span><span>·</span><span>Add to segment</span><span>·</span><span>Export</span>
        </span>
      </div>
    </div>
  );
};

window.ContactsDirectoryMock = ContactsDirectoryMock;