/* global React, BrainDiagram */
function DossierCX() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    document.querySelectorAll('.dossier .reveal, .dossier .thesis').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const integrations = [
    ["Salesforce", "CRM", "001"], ["HubSpot", "CRM", "002"], ["Zendesk", "Helpdesk", "003"],
    ["Intercom", "Helpdesk", "004"], ["Freshdesk", "Helpdesk", "005"], ["Twilio", "Telephony", "006"],
    ["Genesys", "Telephony", "007"], ["RingCentral", "Telephony", "008"], ["Stripe", "Payments", "009"],
    ["Shopify", "Commerce", "010"], ["Klaviyo", "Lifecycle", "011"], ["Slack", "Channels", "012"],
    ["WhatsApp", "Channels", "013"], ["Snowflake", "Data", "014"], ["Segment", "Data", "015"],
    ["Notion", "Knowledge", "016"], ["Confluence", "Knowledge", "017"], ["Jira", "Ops", "018"],
  ];

  const platform = [
    ["I", "VOICE AI", "Natural, low-latency voice over enterprise telephony.", "Switchable engines from the admin panel — no migration. Built-in guardrails: call duration limits, per-caller rate limits, spend caps."],
    ["II", "LIVE CHAT & SMS", "Webchat that resolves with empathy.", "TCPA compliance, STOP/START handling, per-contact rate limits, and spend ceilings — none of which you build yourself."],
    ["III", "EMAIL AI", "Contextual replies that match your voice.", "Reads the full thread, identifies intent, pulls the right knowledge. Track response time, resolution, satisfaction per interaction."],
    ["IV", "OMNICHANNEL", "WhatsApp, Telegram, Messenger, Instagram, Line, TikTok, Slack.", "Each channel runs independently but shares one brain for identity, memory, and knowledge."],
    ["V", "CROSS-CHANNEL MEMORY", "A three-tier living profile.", "A narrative re-written after every conversation, structured fields (name, language, timezone, consent), and freeform key-value memory — stored in your database."],
    ["VI", "HUMAN HAND-OFF", "Agents see everything when they take over.", "Full transcript, memory profile, tool calls, attempts. Pause the AI mid-conversation; no separate helpdesk; no context loss."],
    ["VII", "AUDIT TRAIL", "Every decision, tool call, escalation, outcome — logged.", "Queryable, exportable, archivable. See which LLM handled each interaction. Durable records for compliance review."],
    ["VIII", "ONGOING OPTIMIZATION", "Continuous improvement, in-retainer.", "We monitor conversations, identify gaps, tune procedures, ship updates. Your AI gets better every week without you lifting a finger."],
  ];

  const industries = [
    ["FIN", "Financial Services", "Compliance-ready AI for banks, lenders, and fintechs. Fraud alerts, dispute workflows, account management with full audit trails.", "/cx/industries/financial-services/"],
    ["HEA", "Healthcare", "Patient communication with HIPAA-adjacent requirements. Appointment scheduling, prescription adherence, and enrollment support.", "/cx/industries/healthcare/"],
    ["LEG", "Legal", "Every interaction is potentially discoverable. AI intake, case status, scheduling — version-controlled procedures.", "/cx/industries/legal/"],
    ["RET", "Retail & E-Commerce", "Order management, returns, recommendations, loyalty. Increase AOV and retention with personalized support.", "/cx/industries/retail/"],
    ["TEC", "Technology & SaaS", "Onboarding, technical support, subscription management, account expansion. Reduce ticket volume and churn.", "/cx/industries/technology/"],
    ["PRO", "Professional Services", "CPAs, consultants, RIAs where client trust is the product. AI scheduling, document intake, status updates.", "/cx/industries/professional-services/"],
    ["TRV", "Travel & Hospitality", "Booking management, itinerary changes, loyalty programs, service recovery. Travelers supported 24/7.", "/cx/industries/travel/"],
    ["HOM", "Home Services", "HVAC, plumbing, and electrical. AI answers calls, books jobs, manages agreements, re-engages past customers.", "/cx/industries/home-services/"],
    ["AUT", "Automotive", "Dealership support for sales and service. Schedule test drives, book service appointments, follow up on leases.", "/cx/industries/automotive/"],
  ];

  return (
    <div className="dossier">
      <div className="paper-noise"></div>

      {/* MASTHEAD */}
      <header className="folio">
        <div className="l">
          <a href="/">OPENNASH · CX</a>
          <a href="#system">System</a>
          <a href="#difference">Difference</a>
          <a href="#platform">Platform</a>
        </div>
        <div className="mast">OpenNash <em>CX</em></div>
        <div className="r">
          <span className="issue">VOL · 02 / N° 04</span>
          <a href="/#book-call" className="book">Book a Demo</a>
        </div>
      </header>

      <div className="doc">
        {/* HERO */}
        <section className="hero">
          <div className="hero-deck">
            <aside className="rule-stack reveal">
              <span className="vol">FILED 04 · 26</span>
              <hr/>
              <span>SUBJECT</span>
              <span style={{color:'var(--text-2)'}}>AI front office</span>
              <hr/>
              <span>FOR</span>
              <span style={{color:'var(--text-2)'}}>operators<br/>not buyers</span>
            </aside>

            <div>
              <span className="kicker reveal">A working dossier on AI customer support</span>
              <h1 className="headline reveal">
                Stop overpaying<br/>for AI that <em>sounds</em> human.<br/>
                <span style={{color:'var(--muted)', fontStyle:'italic', fontSize:'0.6em'}}>Start owning AI that</span><br/>
                <em>resolves like one.</em>
              </h1>
            </div>

            <aside className="headline-meta reveal">
              <div className="row"><span>FILE №</span></div>
              <div className="row" style={{color:'var(--text)', fontFamily:"'Instrument Serif', serif", fontSize:14, letterSpacing:0, textTransform:'none'}}>CX-7995-MO</div>
              <div className="row"><span className="stamp">FLAT FEE · NO SETUP</span></div>
              <div className="row" style={{marginTop:18}}><span>READING TIME</span></div>
              <div className="row" style={{color:'var(--text)', fontFamily:"'Instrument Serif', serif", fontSize:14, letterSpacing:0, textTransform:'none'}}>7 min · 9 sections</div>
            </aside>
          </div>

          <div className="standfirst">
            <span></span>
            <p className="lede reveal">
              A fully-managed AI customer-support system that delivers <strong>personalized experiences across voice, messaging, and email</strong> — and <span className="hl">belongs to you</span>: the code, the data, the infrastructure. If you stop working with us, you keep everything.
            </p>
            <div className="byline reveal">
              <span className="label">EDITION</span>
              <span className="val">CX · 2026</span>
              <span className="label" style={{marginTop:8}}>BUILT FROM</span>
              <span className="val">San Francisco</span>
            </div>
          </div>

          <div className="cta-strip">
            <span></span>
            <div className="actions reveal">
              <a href="/#book-call" className="btn primary">Book a 30-min walkthrough</a>
              <a href="#how" className="btn ghost">How it works ↓</a>
            </div>
            <div className="price-pull reveal">
              <em>$7,995</em>
              <strong>/ month, flat</strong>
              <span style={{fontSize:12, color:'var(--dim)'}}>No setup. No annual lock. You own everything.</span>
            </div>
          </div>

        </section>

        {/* HOW THE AGENT WORKS — annotated walkthrough */}
        <HowTheAgentWorks/>

        {/* SYSTEM */}
        <section className="spread" id="system">
          <div className="section-folio">
            <span className="num">§ 03</span><span>Architecture</span><hr/><span>The system, drawn out</span>
          </div>
          <h2 className="spread-title reveal">One brain.<br/><em>Every channel.</em></h2>
          <p className="spread-dek reveal">A single AI core shares knowledge, memory, and identity across every channel your customers use. No silos. No repeated context. Your customer says something on WhatsApp — your voice agent already knows.</p>

          <div className="brain-spread">
            <span></span>
            <div className="reveal">
              <div className="brain"><BrainDiagram/></div>
              <p className="brain-foot"><strong>Read it like a circuit:</strong> ten channels in, one core in the middle, one durable record out the back. Every conversation lands in <em>your</em> database — not ours.</p>
            </div>
            <div className="gutter-notes reveal">
              <div className="note">
                <span className="ref">N. 01 · KNOWLEDGE</span>
                Procedures are version-controlled, readable, and editable without filing a vendor ticket.
              </div>
              <div className="note">
                <span className="ref">N. 02 · MEMORY</span>
                A three-tier living profile: narrative, structured fields, and freeform key/value.
              </div>
              <div className="note">
                <span className="ref">N. 03 · IDENTITY</span>
                One customer. One identity. Across voice, SMS, and ten messaging surfaces.
              </div>
            </div>
          </div>
        </section>

        {/* DIFFERENCE — three theses */}
        <section className="spread" id="difference">
          <div className="section-folio">
            <span className="num">§ 04</span><span>What makes this different</span><hr/><span>Three theses</span>
          </div>
          <h2 className="spread-title reveal">Built like infrastructure, <em>not like a product trial.</em></h2>

          <div className="theses">
            <div className="thesis reveal">
              <span className="num">i.</span>
              <h3>You <em>own</em> everything.</h3>
              <p>We build, deploy, and manage your system on your behalf — but the code, the data, and the infrastructure all sit in your accounts.</p>
              <p>If you stop working with us, you keep the entire system. <span className="footnote-ref">¹ ZERO SWITCHING COST</span></p>
            </div>
            <div className="thesis reveal">
              <span className="num">ii.</span>
              <h3>Inspectable <em>by design.</em></h3>
              <p>Every prompt is readable. Every decision is logged. Every procedure is version-controlled.</p>
              <p>See exactly what your AI says and why. Change behavior without filing a vendor ticket. <span className="footnote-ref">² READ-WRITE SYSTEM</span></p>
            </div>
            <div className="thesis reveal">
              <span className="num">iii.</span>
              <h3>1,000+ <em>integrations</em> included.</h3>
              <p>CRM, helpdesk, telephony, payments, commerce, ops — all native. Custom integration builds included in your retainer at no extra cost.</p>
              <p><span className="footnote-ref">³ NO SURCHARGE</span></p>
            </div>
          </div>
        </section>

        {/* INTEGRATIONS — INDEX */}
        <section className="spread">
          <div className="section-folio">
            <span className="num">§ 05</span><span>Integrations</span><hr/><span>Index of native connectors</span>
          </div>
          <h2 className="spread-title reveal">Connects to your <em>entire stack.</em></h2>
          <p className="spread-dek reveal">A partial index of the 1,000+ native integrations included in your retainer. Custom builds are part of the engagement — never a surcharge.</p>
          <div className="index reveal">
            {integrations.map(([name, cat, n]) => (
              <div className="idx-row" key={n}>
                <span className="name">{name}<em>· {cat}</em></span>
                <span className="pg">p. {n}</span>
              </div>
            ))}
          </div>
        </section>

        {/* PLATFORM CAPABILITIES */}
        <section className="spread" id="platform">
          <div className="section-folio">
            <span className="num">§ 06</span><span>Platform</span><hr/><span>What's included, end-to-end</span>
          </div>
          <h2 className="spread-title reveal">Everything you need to run AI customer support <em>at scale.</em></h2>
          <div className="caps">
            {platform.map(([n, t, hed, body]) => (
              <article className="cap reveal" key={n}>
                <div className="cap-head"><span className="num">CHAP. {n}</span><span>·</span><span>{t}</span></div>
                <h3>{hed}</h3>
                <p>{body}</p>
              </article>
            ))}
          </div>
        </section>

        {/* INDUSTRIES TOC */}
        <section className="spread" id="industries">
          <div className="section-folio">
            <span className="num">§ 07</span><span>Industries</span><hr/><span>Table of contents</span>
          </div>
          <h2 className="spread-title reveal">Built for any industry. <em>Adapts to yours.</em></h2>
          <p className="spread-dek reveal">The architecture is industry-agnostic. Compliance, audit trails, and data ownership adapt to your requirements.</p>
          <div className="toc reveal">
            {industries.map(([id, name, dek, href], i) => (
              <a className="toc-row" key={id} href={href}>
                <span className="num">{String(i+1).padStart(2, '0')}</span>
                <span className="name">{name}</span>
                <span className="dek">{dek}</span>
                <span className="arr">{id} →</span>
              </a>
            ))}
          </div>
        </section>

        {/* PRICING / RECEIPT */}
        <section className="spread" id="book">
          <div className="section-folio">
            <span className="num">§ 08</span><span>Pricing</span><hr/><span>Filed in plain language</span>
          </div>

          <div className="receipt-spread">
            <div className="reveal">
              <div className="receipt-pull">
                One price.<br/>
                <em>Everything included.</em>
                <span className="price">$7,995<small>/ month</small></span>
              </div>
              <div style={{marginTop:32, display:'flex', gap:14, flexWrap:'wrap'}}>
                <a href="/#book-call" className="btn primary">Book a 30-min walkthrough</a>
                <a href="/compare/sierra-vs-decagon-vs-opennash-cx/" className="btn ghost">Compare alternatives</a>
              </div>
            </div>

            <div className="receipt reveal">
              <div className="li"><span>Unlimited requests</span><span className="v">incl.</span></div>
              <div className="li"><span>Custom AI agents</span><span className="v">incl.</span></div>
              <div className="li"><span>1,000+ native integrations</span><span className="v">incl.</span></div>
              <div className="li"><span>Voice + SMS + 10 channels</span><span className="v">incl.</span></div>
              <div className="li"><span>Cross-channel memory</span><span className="v">incl.</span></div>
              <div className="li"><span>Ongoing optimization</span><span className="v">incl.</span></div>
              <div className="li"><span>Code & data ownership</span><span className="v">yours</span></div>
              <div className="total"><span>Total / month</span><span className="v">$7,995</span></div>
              <div className="stamp">FLAT · MO</div>
            </div>
          </div>
        </section>

        {/* COLOPHON */}
        <footer className="colophon">
          <div>
            <h6>OPENNASH</h6>
            <div className="links">
              <a href="/">Home</a>
              <a href="/#services">Services</a>
              <a href="/#pricing">Pricing</a>
              <a href="/partners/">Partners</a>
              <a href="/blog/">Blog</a>
              <a href="mailto:hello@opennash.com">hello@opennash.com</a>
            </div>
          </div>
          <div>
            <h6>OPENNASH · CX</h6>
            <div className="links">
              <a href="#system">Architecture</a>
              <a href="#industries">Industries</a>
              <a href="#book">Pricing</a>
              <a href="/compare/sierra-vs-decagon-vs-opennash-cx/">Compare</a>
            </div>
          </div>
          <div>
            <h6>FILED · 2026</h6>
            <div className="links">
              <span style={{color:'var(--dim)'}}>VOL 02 / N° 04</span>
              <span style={{color:'var(--dim)'}}>SET IN INSTRUMENT SERIF</span>
              <span style={{color:'var(--dim)'}}>+ INTER + JETBRAINS MONO</span>
              <span style={{color:'var(--dim)'}}>© 2026 OPENNASH</span>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
}

window.DossierCX = DossierCX;