/* ============================================================
 * 7. OMNICHANNEL INBOX, specialized per channel, one brain
 * Static screenshot + channel tabs below + per-channel
 * feature panels showing what makes each inbox unique.
 * ============================================================ */

const inboxChannels = [
  { key: "whatsapp", label: "WhatsApp",     url: "wa.guestmaker.com / inbox",      color: "var(--c-whatsapp)",  Icon: IconWhatsApp },
  { key: "meta",     label: "Meta Socials", url: "meta.guestmaker.com / inbox",    color: "var(--c-instagram)", Icon: IconInstagram },
  { key: "booking",  label: "OTA Messaging", url: "ota.guestmaker.com / inbox",     color: "var(--c-booking)",   Icon: IconOta },
  { key: "email",    label: "Email",        url: "email.guestmaker.com / inbox",   color: "var(--c-email)",     Icon: IconEmail },
  { key: "web",      label: "Web Chat",     url: "web.guestmaker.com / inbox",     color: "var(--c-web)",       Icon: IconWeb },
];

const channelFeatures = {
  whatsapp: {
    headline: "The world's most personal messaging channel, with hotel-grade controls.",
    features: [
      {
        title: "24-hour conversation window",
        desc: "WhatsApp enforces a 24h reply window from the guest's last message. GuestMaker tracks every window and alerts when it's about to close so your team never gets locked out of an active conversation.",
      },
      {
        title: "Template messages for first contact",
        desc: "Outbound messages to new guests require pre-approved templates. GuestMaker manages your template library, handles Meta approval, and picks the right template automatically based on context.",
      },
      {
        title: "Broadcast campaigns to opted-in guests",
        desc: "Send promotional or transactional broadcasts to your segmented audience, pre-stay upsells, offers, re-engagement flows, all respecting WhatsApp's opt-in requirements and rate limits.",
      },
      {
        title: "AI room cards with booking links",
        desc: "When a guest asks about availability, the AI sends interactive room cards with photos, pricing, and a direct booking link pre-filled with their dates and party size. No redirect needed.",
      },
    ],
  },
  meta: {
    headline: "Instagram DMs, Facebook Messenger, and comment replies. One unified queue.",
    features: [
      {
        title: "Three surfaces, one inbox",
        desc: "Instagram DMs, Facebook Messenger conversations, and comment replies on posts all land in the same inbox view. Agents don't juggle tabs. Every guest message is one thread.",
      },
      {
        title: "Comment-to-DM escalation",
        desc: "When a guest leaves a public comment that needs a private reply, the AI can detect the intent and prompt moving the conversation to a direct message, protecting sensitive details and keeping replies professional.",
      },
      {
        title: "Dual-platform token management",
        desc: "Instagram and Facebook run on separate authentication systems with different API behaviours. GuestMaker handles both token lifecycles, permission scopes, and webhook verifications transparently.",
      },
      {
        title: "Visual-first reply format",
        desc: "Social DM guests expect images and links, not plain text. Room card photos and booking URLs are sent individually per card, followed by a single consolidated message, matching how guests naturally scroll on mobile.",
      },
    ],
  },
  booking: {
    headline: "Full AI coverage inside your OTA inboxes, without ever breaking platform rules.",
    features: [
      {
        title: "Platform-authenticated messaging",
        desc: "The channel is provider-agnostic; Booking.com is the OTA connected today, over a certified Connectivity Partner link. Messages are fetched and sent through the official property messaging API, no screen scraping, no workarounds.",
      },
      {
        title: "OTA-rule enforcement built in",
        desc: "The AI knows it cannot modify booking contracts or discuss pricing outside the platform. It answers service questions, handles special requests, and directs guests to the right channel when needed, staying fully compliant.",
      },
      {
        title: "Poll-dequeue message delivery",
        desc: "Booking.com, for one, uses a polling-based message queue. GuestMaker runs a continuous fetch loop per provider so new guest messages surface in your inbox in seconds, not minutes.",
      },
      {
        title: "Guest context from the reservation",
        desc: "Every OTA conversation is matched to the guest's reservation record. The AI knows check-in date, room type, and stay history before it writes the first reply.",
      },
    ],
  },
  email: {
    headline: "A real email inbox, with threads, attachments, triage, and AI drafts.",
    features: [
      {
        title: "Full thread and reply chains",
        desc: "Email conversations stay threaded. The AI reads the full thread history before drafting a reply, understands context from prior turns, and signs off with the correct hotel signature.",
      },
      {
        title: "Smart triage, only guest mail reaches AI",
        desc: "A three-layer classifier (AI + regex + keyword heuristics) filters out vendor notifications, subscription renewal emails, and spam before they hit the AI. Only hotel-relevant messages get a draft.",
      },
      {
        title: "Attachment extraction and enrichment",
        desc: "Inbound attachments, booking confirmations, PDFs, images, are automatically OCR'd, classified, and used to enrich the guest profile. No manual filing.",
      },
      {
        title: "CC escalation rules",
        desc: "Define rules that CC the right department head, sales manager, or operations lead based on guest segment, email intent, or specific keywords. Configurable per inbox account.",
      },
    ],
  },
  web: {
    headline: "A widget that lives on your website and knows every guest who's ever stayed.",
    features: [
      {
        title: "Anonymous visitor support",
        desc: "Visitors browse without logging in. The chat widget engages them, answers questions, and captures leads, all before a contact record exists. Once they share their details, the conversation links to their profile.",
      },
      {
        title: "Live human handoff with office hours",
        desc: "When the AI detects a complex request, it surfaces a 'Talk to our team' option that routes to a human agent. Office hours, availability toggles, and a fallback email ensure nothing falls through at night.",
      },
      {
        title: "Smart escalation routing",
        desc: "Group bookings, MICE enquiries, wedding requests, and cancellations each route to the right department automatically, with a structured summary so the team has full context before they reply.",
      },
      {
        title: "Conversation recovery across sessions",
        desc: "Returning visitors pick up where they left off. The widget recognises the browser session and resumes the last conversation, no need to re-identify, no context lost between visits.",
      },
    ],
  },
};

/* The hard questions a human concierge would struggle with. */
const hardCases = [
  {
    channel: "Web Chat",
    question: "What's the distance from the hotel to the airport, and what's the best public transport at 6 a.m. on a Sunday?",
    skills: ["Geographic", "Concierge", "Local transit"],
    answer: "11.4 km. The Aerobús L1 (€6, 35 min) starts at 05:30 from Pl. Catalunya, 4-min walk from the hotel. Sunday metro doesn't open until 7, so the Aerobús is your call. I can pre-book a transfer instead if you'd rather not carry bags."
  },
  {
    channel: "WhatsApp",
    question: "Hi, I booked through Expedia for next week, how do I cancel? My deposit was non-refundable but my plans changed.",
    skills: ["OTA policy", "Travel agent", "Booking history"],
    answer: "I see your reservation #BK-71204 (3 nights, arriving Tue). Expedia handles cancellation directly via your itinerary email. Your rate is non-refundable, but as a returning guest I can offer a date change up to 14 days out at no charge, would that work?"
  },
  {
    channel: "Instagram",
    question: "Hello! Are you pet-friendly? Travelling with a 12kg goldendoodle and would love a ground-floor room with a small terrace 🐾",
    skills: ["Property knowledge", "Memory", "Availability"],
    answer: "Yes, we welcome dogs up to 20 kg (€25/night cleaning). Room 104 fits perfectly: ground floor, terrace facing the garden, away from the lobby noise. Available for your dates, want me to hold it for 30 min while you decide?"
  },
  {
    channel: "Email",
    question: "Following up, last March you upgraded us to a sea-view suite for our anniversary. Coming back in May, same dates. Possible?",
    skills: ["Memory", "Past stays", "Loyalty"],
    answer: "Welcome back, Mr. Petrov. I see your March '25 stay (Suite 412, anniversary). For your May 14–17 booking I've blocked 412 again as a courtesy, no charge for the upgrade given your tier. Confirming this morning."
  },
];

const stackLayers = [
  { k: "contact",   label: "Contact recognised",        d: "Matched to CRM profile across channels and identities." },
  { k: "memory",    label: "Memory loaded",             d: "Past stays, preferences, conversations, all in context." },
  { k: "kb",        label: "Knowledge base hit",        d: "Property facts, services, policies retrieved per question." },
  { k: "skills",    label: "Skills activated",          d: "Geographic · Concierge · Travel agent · OTA policy · Booking." },
];

const SectionInbox = () => {
  const [activeChannel, setActiveChannel] = useState("whatsapp");
  const [caseIdx, setCaseIdx] = useState(0);

  const channel = inboxChannels.find(c => c.key === activeChannel);
  const features = channelFeatures[activeChannel];

  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setCaseIdx(i => (i + 1) % hardCases.length), 9000);
    return () => clearInterval(t);
  }, [paused]);

  const c = hardCases[caseIdx];

  return (
    <section className="section-pad inbox-section" id="inbox">
      <div className="container">
        <div className="inbox-head">
          <Reveal><div className="eyebrow">Specialized inboxes</div></Reveal>
          <Reveal delay={120}>
            <h2 className="h-1" style={{ marginTop: 28, maxWidth: 1080 }}>
              An inbox built for every channel. <span className="italic-accent">One brain behind all of them.</span>
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <p className="lead" style={{ marginTop: 28, maxWidth: 820 }}>
              Each channel works the way guests expect it to. The WhatsApp inbox feels like WhatsApp, the OTA inbox respects platform rules, Email handles threads and signatures. But every reply is shaped by the same intelligence: your contacts, your memory, your knowledge base, and a stack of skills no human concierge could hold in their head at once.
            </p>
          </Reveal>
        </div>

        {/* The framed inbox screenshot — always WhatsApp/Lumina, static */}
        <Reveal delay={280}>
          <div className="inbox-frame" style={{ "--ch": channel.color }}>
            <div className="inbox-frame-bar">
              <div className="lights"><i/><i/><i/></div>
              <div className="inbox-url">
                <span className="ch-pill" style={{ background: channel.color }} />
                <span>{channel.url}</span>
              </div>
              <div style={{ width: 60 }} />
            </div>
            <img
              src="https://cdn.guestmaker.ai/marketing/homepage-v3/assets/screen-inbox-lumina.png"
              alt="GuestMaker omnichannel inbox"
              className="inbox-shot main"
            />
          </div>
        </Reveal>

        {/* Channel tabs — below the screenshot */}
        <Reveal delay={340}>
          <div className="ch-tabs" role="tablist" aria-label="Channel inboxes">
            {inboxChannels.map(ch => {
              const Ic = ch.Icon;
              const on = ch.key === activeChannel;
              return (
                <button
                  key={ch.key}
                  role="tab"
                  aria-selected={on}
                  className={"ch-tab" + (on ? " on" : "")}
                  onClick={() => setActiveChannel(ch.key)}
                  style={{ "--ch": ch.color }}
                >
                  <span className="ch-dot" />
                  <Ic size={14} />
                  <span>{ch.label}</span>
                </button>
              );
            })}
          </div>
        </Reveal>

        {/* Per-channel feature panel */}
        <div className="ch-panel" key={activeChannel}>
          <p className="ch-panel-headline">{features.headline}</p>
          <div className="ch-features-grid">
            {features.features.map((f, i) => (
              <div key={i} className="ch-feature-card">
                <div className="ch-feature-indicator" style={{ background: channel.color }} />
                <div>
                  <div className="ch-feature-title">{f.title}</div>
                  <div className="ch-feature-desc">{f.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Anatomy of every reply */}
        <div
          className="anatomy"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <Reveal>
            <div className="anatomy-head">
              <div className="eyebrow" style={{ justifyContent: "flex-start" }}>Anatomy of every reply</div>
              <h3 className="h-2" style={{ marginTop: 16, fontSize: "clamp(28px, 3vw, 40px)" }}>
                Questions a human concierge <span className="italic-accent">would struggle with.</span>
              </h3>
              <p className="body" style={{ marginTop: 16, maxWidth: 640, color: "var(--ink-2)" }}>
                Every inbound message goes through the same stack, contact match, memory, knowledge base, skills. The result reads like an answer from a senior concierge who's been there twenty years.
              </p>
            </div>
          </Reveal>

          <div className="anatomy-grid">
            {/* Conversation card */}
            <Reveal delay={120}>
              <div className="anatomy-convo">
                <div className="convo-head">
                  <div className="convo-channel">
                    <span className="ch-dot" />
                    <span>{c.channel}</span>
                  </div>
                  <div className="convo-skills">
                    {c.skills.map(s => <span key={s} className="skill-chip">{s}</span>)}
                  </div>
                </div>

                <div className="convo-msg guest">
                  <div className="convo-bubble">{c.question}</div>
                  <div className="convo-meta">Guest · just now</div>
                </div>

                <div className="convo-msg ai">
                  <div className="convo-bubble">{c.answer}</div>
                  <div className="convo-meta">
                    <span className="ai-badge">
                      <span className="ai-dot" />
                      GuestMaker AI · in 1.4s
                    </span>
                  </div>
                </div>

                {/* Case selector dots */}
                <div className="case-dots">
                  {hardCases.map((_, i) => (
                    <button
                      key={i}
                      aria-label={`Case ${i + 1}`}
                      className={"case-dot" + (i === caseIdx ? " on" : "")}
                      onClick={() => setCaseIdx(i)}
                    />
                  ))}
                </div>
              </div>
            </Reveal>

            {/* The stack */}
            <Reveal delay={220}>
              <div className="anatomy-stack">
                <div className="stack-label">What fired on this message</div>
                <ol className="stack-list">
                  {stackLayers.map((l, i) => (
                    <li key={l.k} className="stack-row">
                      <div className="stack-num">0{i + 1}</div>
                      <div>
                        <div className="stack-title">{l.label}</div>
                        <div className="stack-desc">{l.d}</div>
                      </div>
                      <div className="stack-tick">
                        <IconCheck size={12} stroke={2.5} />
                      </div>
                    </li>
                  ))}
                </ol>
                <div className="stack-foot">
                  Same stack runs on every channel, WhatsApp, Email, Web Chat, OTAs. The channel changes the form. The intelligence stays.
                </div>
              </div>
            </Reveal>
          </div>
        </div>

        {/* Skills strip */}
        <Reveal>
          <div className="skills-strip">
            <div className="skills-label">Skills loaded into every conversation</div>
            <div className="skills-row">
              {[
                "Property knowledge",
                "Geographic",
                "Local transit",
                "Concierge",
                "Travel agent",
                "OTA policy",
                "Booking & availability",
                "Loyalty rules",
                "Memory & history",
                "Multilingual",
              ].map(s => (
                <span key={s} className="skill-chip lg">{s}</span>
              ))}
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        .inbox-section { background: var(--bg-elev-1); }
        .inbox-head { margin-bottom: 40px; max-width: 1080px; }

        /* Frame */
        .inbox-frame {
          border-radius: 16px;
          overflow: hidden;
          background: var(--bg);
          border: 1px solid var(--hairline);
          box-shadow:
            0 60px 120px -40px rgba(0,0,0,.7),
            0 0 0 1px var(--hairline);
        }
        .inbox-frame-bar {
          display: flex; align-items: center; justify-content: space-between;
          padding: 12px 16px;
          background: var(--bg-elev-2);
          border-bottom: 1px solid var(--hairline);
          transition: border-color .3s ease;
        }
        .lights { display: flex; gap: 6px; }
        .lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-elev-3); display: block; }
        .lights i:first-child { background: #ff5f57; }
        .lights i:nth-child(2) { background: #febc2e; }
        .lights i:nth-child(3) { background: #28c840; }
        .inbox-url {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 4px 14px;
          background: var(--bg);
          border-radius: 6px;
          font-size: 11px;
          color: var(--ink-3);
          font-family: var(--f-mono);
          transition: color .3s ease;
        }
        .ch-pill { width: 6px; height: 6px; border-radius: 50%; transition: background .3s ease; }
        .inbox-shot {
          width: 100%;
          display: block;
        }

        /* Channel tabs — below screenshot */
        .ch-tabs {
          display: flex; flex-wrap: wrap; gap: 8px;
          margin-top: 24px;
          margin-bottom: 32px;
        }
        .ch-tab {
          appearance: none;
          display: inline-flex; align-items: center; gap: 8px;
          padding: 9px 14px;
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 999px;
          font-size: 13px;
          font-weight: 500;
          color: var(--ink-2);
          cursor: pointer;
          transition: all .2s ease;
        }
        .ch-tab:hover { border-color: var(--hairline-strong); color: var(--ink); }
        .ch-tab.on {
          background: color-mix(in srgb, var(--ch) 12%, var(--bg));
          border-color: var(--ch);
          color: var(--ink);
        }
        .ch-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--ch); display: inline-block;
        }
        .ch-tab.on .ch-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch) 30%, transparent); }

        /* Channel feature panel */
        .ch-panel {
          animation: chPanelIn .35s ease;
          margin-bottom: 80px;
        }
        @keyframes chPanelIn {
          from { opacity: 0; transform: translateY(10px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .ch-panel-headline {
          font-size: clamp(15px, 1.4vw, 17px);
          line-height: 1.6;
          color: var(--ink-2);
          max-width: 760px;
          margin: 0 0 28px;
        }
        .ch-features-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .ch-feature-card {
          display: flex;
          gap: 16px;
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 14px;
          padding: 20px 22px;
          align-items: flex-start;
        }
        .ch-feature-indicator {
          width: 3px;
          min-width: 3px;
          height: 20px;
          border-radius: 99px;
          margin-top: 2px;
          opacity: 0.85;
        }
        .ch-feature-title {
          font-size: 14px;
          font-weight: 600;
          color: var(--ink);
          margin-bottom: 6px;
          line-height: 1.4;
        }
        .ch-feature-desc {
          font-size: 13.5px;
          line-height: 1.6;
          color: var(--ink-3);
        }

        /* Anatomy */
        .anatomy { margin-top: 0; }
        .anatomy-head { max-width: 720px; margin-bottom: 40px; }
        .anatomy-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 24px;
          align-items: stretch;
        }

        /* Conversation card */
        .anatomy-convo {
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 16px;
          padding: 24px 24px 20px;
          display: flex; flex-direction: column;
          min-height: 100%;
        }
        .convo-head {
          display: flex; align-items: center; justify-content: space-between;
          gap: 12px; flex-wrap: wrap;
          padding-bottom: 16px;
          margin-bottom: 16px;
          border-bottom: 1px dashed var(--hairline);
        }
        .convo-channel {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--f-mono);
          font-size: 11px;
          letter-spacing: 0.1em;
          color: var(--ink-3);
          text-transform: uppercase;
        }
        .convo-channel .ch-dot { background: var(--accent); }
        .convo-skills { display: flex; flex-wrap: wrap; gap: 6px; }
        .skill-chip {
          font-size: 10.5px;
          padding: 3px 8px;
          border-radius: 999px;
          background: color-mix(in srgb, var(--accent) 9%, var(--bg-elev-1));
          color: var(--accent);
          font-family: var(--f-mono);
          letter-spacing: 0.04em;
          border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
        }
        .skill-chip.lg {
          font-size: 12px;
          padding: 6px 12px;
        }

        .convo-msg { margin-bottom: 14px; max-width: 92%; }
        .convo-msg.guest { margin-right: auto; }
        .convo-msg.ai { margin-left: auto; text-align: right; }
        .convo-bubble {
          display: inline-block;
          text-align: left;
          padding: 12px 16px;
          font-size: 14px;
          line-height: 1.5;
          color: var(--ink);
          border-radius: 14px;
        }
        .convo-msg.guest .convo-bubble {
          background: var(--bg-elev-2);
          border: 1px solid var(--hairline);
          border-top-left-radius: 4px;
        }
        .convo-msg.ai .convo-bubble {
          background: color-mix(in srgb, var(--accent) 10%, var(--bg));
          border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
          border-top-right-radius: 4px;
        }
        .convo-meta {
          margin-top: 6px;
          font-family: var(--f-mono);
          font-size: 10px;
          letter-spacing: 0.08em;
          color: var(--ink-4);
          text-transform: uppercase;
        }
        .ai-badge {
          display: inline-flex; align-items: center; gap: 6px;
          color: var(--accent);
        }
        .ai-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
          animation: pulse 1.6s ease-in-out infinite;
        }
        @keyframes pulse {
          0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
          50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%,  transparent); }
        }

        .case-dots {
          display: flex; gap: 8px;
          margin-top: auto;
          padding-top: 16px;
          border-top: 1px dashed var(--hairline);
          justify-content: center;
        }
        .case-dot {
          appearance: none; padding: 0; border: 0; cursor: pointer;
          width: 24px; height: 4px; border-radius: 2px;
          background: var(--hairline-strong);
          transition: background .25s ease, width .25s ease;
        }
        .case-dot.on { background: var(--accent); width: 36px; }

        /* The stack */
        .anatomy-stack {
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 16px;
          padding: 24px;
          display: flex; flex-direction: column;
        }
        .stack-label {
          font-family: var(--f-mono);
          font-size: 11px;
          letter-spacing: 0.12em;
          color: var(--ink-3);
          text-transform: uppercase;
          margin-bottom: 18px;
          padding-bottom: 14px;
          border-bottom: 1px dashed var(--hairline);
        }
        .stack-list { list-style: none; margin: 0; padding: 0; flex: 1; }
        .stack-row {
          display: grid;
          grid-template-columns: 28px 1fr auto;
          gap: 12px;
          align-items: start;
          padding: 12px 0;
          border-bottom: 1px dashed var(--hairline);
        }
        .stack-row:last-child { border-bottom: 0; }
        .stack-num {
          font-family: var(--f-mono);
          font-size: 11px;
          color: var(--accent);
          letter-spacing: 0.08em;
          padding-top: 2px;
        }
        .stack-title {
          font-size: 14px;
          font-weight: 600;
          color: var(--ink);
        }
        .stack-desc {
          margin-top: 4px;
          font-size: 12.5px;
          color: var(--ink-3);
          line-height: 1.5;
        }
        .stack-tick {
          width: 22px; height: 22px;
          border-radius: 50%;
          background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev-1));
          color: var(--accent);
          display: grid; place-items: center;
        }
        .stack-foot {
          margin-top: 18px;
          padding-top: 14px;
          border-top: 1px dashed var(--hairline);
          font-size: 12.5px;
          color: var(--ink-3);
          line-height: 1.55;
        }

        /* Skills strip */
        .skills-strip {
          margin-top: 64px;
          padding: 28px;
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 16px;
        }
        .skills-label {
          font-family: var(--f-mono);
          font-size: 11px;
          letter-spacing: 0.12em;
          color: var(--ink-3);
          text-transform: uppercase;
          margin-bottom: 16px;
        }
        .skills-row { display: flex; flex-wrap: wrap; gap: 8px; }

        @media (max-width: 900px) {
          .anatomy-grid { grid-template-columns: 1fr; }
          .ch-features-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};

window.SectionInbox = SectionInbox;