{"id":38644,"date":"2026-03-21T16:40:52","date_gmt":"2026-03-21T16:40:52","guid":{"rendered":"https:\/\/metachannelcorp.com\/strategic-capabilities\/legal-desk\/interactive-examples\/"},"modified":"2026-05-28T10:57:33","modified_gmt":"2026-05-28T10:57:33","slug":"interactive-examples","status":"publish","type":"page","link":"https:\/\/metachannelcorp.com\/en\/strategic-capabilities\/legal-desk\/interactive-examples\/","title":{"rendered":"Interactive Examples"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"38644\" class=\"elementor elementor-38644 elementor-37968\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12a6d15 e-con-full thegem-e-con-layout-thegem e-flex e-con e-parent\" data-id=\"12a6d15\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;thegem_container_layout&quot;:&quot;thegem&quot;}\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-cbb926e elementor-widget__width-inherit flex-horizontal-align-default flex-horizontal-align-tablet-default flex-horizontal-align-mobile-default flex-vertical-align-default flex-vertical-align-tablet-default flex-vertical-align-mobile-default elementor-widget elementor-widget-html\" data-id=\"cbb926e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\" rel=\"preconnect\"\/>\r\n<link crossorigin=\"\" href=\"https:\/\/fonts.gstatic.com\" rel=\"preconnect\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Public+Sans:wght@400;500;700;900&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\" crossorigin><\/script>\r\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\" crossorigin><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n<div id=\"legal-desk-demos-root\" style=\"width: 100%;\"><\/div>\r\n\r\n<script type=\"text\/babel\">\r\n  const { useState } = React;\r\n\r\n  const COLORS = {\r\n    navy: \"#071222\",\r\n    navyLight: \"#0d1a30\",\r\n    navyMid: \"#132442\",\r\n    gold: \"#C9A84C\",\r\n    goldLight: \"#E2C97E\",\r\n    white: \"#FFFFFF\",\r\n    gray100: \"#F4F5F7\",\r\n    gray200: \"#E2E4E8\",\r\n    gray300: \"#B0B5C0\",\r\n    gray500: \"#6B7280\",\r\n    green: \"#22C55E\",\r\n    greenDark: \"#16A34A\",\r\n    blue: \"#3B82F6\",\r\n    orange: \"#F59E0B\",\r\n    purple: \"#8B5CF6\",\r\n  };\r\n\r\n  const tabs = [\r\n    { id: \"colab\", label: \"Collaborator Network\", icon: \"\u2696\ufe0f\" },\r\n    { id: \"club\", label: \"Business Club\", icon: \"\ud83c\udfdb\ufe0f\" },\r\n    { id: \"intl\", label: \"International Network\", icon: \"\ud83c\udf0d\" },\r\n    { id: \"uni\", label: \"University Program\", icon: \"\ud83c\udf93\" },\r\n  ];\r\n\r\n  function ColaboradoresDemo() {\r\n    const [scenario, setScenario] = useState(null);\r\n    const [step, setStep] = useState(0);\r\n\r\n    const scenarioA = [\r\n      { icon: \"\ud83d\udc64\", title: \"Client contacts META Channel\", desc: \"A client arrives through the website, the Orbital Pact or the contact network.\", side: \"meta\" },\r\n      { icon: \"\ud83d\udd0d\", title: \"META Channel assesses and structures\", desc: \"The jurisdiction, the complexity and the lawyer profile required are analyzed.\", side: \"meta\" },\r\n      { icon: \"\ud83d\udccb\", title: \"The collaborator is selected\", desc: \"META Channel chooses the right lawyer from our excellent network and presents them with the engagement already structured.\", side: \"meta\" },\r\n      { icon: \"\u270d\ufe0f\", title: \"Contractual formalization\", desc: \"META\u2194Client contract (coordination) + Lawyer\u2194Client engagement letter (execution). Or a single engagement\", side: \"both\" },\r\n      { icon: \"\u2696\ufe0f\", title: \"The lawyer executes\", desc: \"Conduct of the case and professional liability rest with the lawyer. META Channel Corporation coordinates.\", side: \"abogado\" },\r\n      { icon: \"\ud83d\udcb6\", title: \"Financial split\", desc: \"META Channel Corporation: by percentage (coordination + origination) + lawyer's percentage\", side: \"both\" },\r\n    ];\r\n\r\n    const scenarioB = [\r\n      { icon: \"\ud83d\udc64\", title: \"The lawyer has a case\", desc: \"A client of the lawyer's own needs international structure, brand or coordination.\", side: \"abogado\" },\r\n      { icon: \"\ud83d\udcde\", title: \"They channel it through Legal Desk\", desc: \"The lawyer decides to use META Channel Corporation's infrastructure to give the case reach of the highest standard.\", side: \"abogado\" },\r\n      { icon: \"\ud83c\udfd7\ufe0f\", title: \"META Channel Corporation provides structure\", desc: \"International brand, operational coordination, access to the ecosystem where appropriate.\", side: \"meta\" },\r\n      { icon: \"\u270d\ufe0f\", title: \"Contractual formalization\", desc: \"Global budget through META Channel Corporation. Clear separation of fees.\", side: \"both\" },\r\n      { icon: \"\u2696\ufe0f\", title: \"The lawyer executes\", desc: \"They keep the relationship with their client. META coordinates and provides the infrastructure.\", side: \"abogado\" },\r\n      { icon: \"\ud83d\udcb6\", title: \"Financial split\", desc: \"META Channel Corporation: by percentage (infrastructure + brand) + lawyer's share\", side: \"both\" },\r\n    ];\r\n\r\n    const steps = scenario === \"A\" ? scenarioA : scenarioB;\r\n\r\n    return (\r\n      <div>\r\n        <p style={{ color: COLORS.gray300, marginBottom: 24, fontSize: 15, lineHeight: 1.6 }}>\r\n          Dos modelos de colaboraci\u00f3n profesional. Selecciona un escenario para ver el flujo completo paso a paso.\r\n        <\/p>\r\n\r\n        <div style={{ display: \"flex\", gap: 16, marginBottom: 32, flexWrap: \"wrap\" }}>\r\n          {[\r\n            { id: \"A\", title: \"Case brought in by META Channel\", sub: \"META brings the client \u2192 split by percentage\", color: COLORS.gold },\r\n            { id: \"B\", title: \"Case brought in by the lawyer\", sub: \"The lawyer brings the client \u2192 split by percentage\", color: COLORS.blue },\r\n          ].map((s) => (\r\n            <button\r\n              key={s.id}\r\n              onClick={() => { setScenario(s.id); setStep(0); }}\r\n              style={{\r\n                flex: \"1 1 250px\", padding: \"20px 16px\", borderRadius: 12, cursor: \"pointer\",\r\n                border: scenario === s.id ? `2px solid ${s.color}` : `1px solid ${COLORS.navyMid}`,\r\n                background: scenario === s.id ? `${s.color}15` : COLORS.navyLight,\r\n                transition: \"all 0.3s\",\r\n              }}\r\n            >\r\n              <div style={{ fontSize: 13, color: s.color, fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>ESCENARIO {s.id}<\/div>\r\n              <div style={{ fontSize: 16, color: COLORS.white, fontWeight: 600, marginBottom: 4 }}>{s.title}<\/div>\r\n              <div style={{ fontSize: 13, color: COLORS.gray300 }}>{s.sub}<\/div>\r\n            <\/button>\r\n          ))}\r\n        <\/div>\r\n\r\n        {scenario && (\r\n          <div>\r\n            <div style={{ display: \"flex\", gap: 8, marginBottom: 24, flexWrap: \"wrap\" }}>\r\n              {steps.map((_, i) => (\r\n                <button\r\n                  key={i}\r\n                  onClick={() => setStep(i)}\r\n                  style={{\r\n                    width: 36, height: 36, borderRadius: \"50%\", border: \"none\", cursor: \"pointer\",\r\n                    background: i === step ? (scenario === \"A\" ? COLORS.gold : COLORS.blue) : i < step ? COLORS.greenDark : COLORS.navyMid,\r\n                    color: COLORS.white, fontWeight: 700, fontSize: 14,\r\n                    transition: \"all 0.3s\",\r\n                  }}\r\n                >\r\n                  {i + 1}\r\n                <\/button>\r\n              ))}\r\n            <\/div>\r\n\r\n            <div style={{\r\n              background: COLORS.navyLight, borderRadius: 16, padding: 28,\r\n              borderLeft: `4px solid ${scenario === \"A\" ? COLORS.gold : COLORS.blue}`,\r\n              transition: \"all 0.3s\",\r\n            }}>\r\n              <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, marginBottom: 12 }}>\r\n                <span style={{ fontSize: 28 }}>{steps[step].icon}<\/span>\r\n                <div>\r\n                  <div style={{ fontSize: 11, color: COLORS.gray300, textTransform: \"uppercase\", letterSpacing: 1 }}>\r\n                    Paso {step + 1} de {steps.length} \u2014 {steps[step].side === \"meta\" ? \"META Channel acts\" : steps[step].side === \"abogado\" ? \"The lawyer acts\" : \"Both take part\"}\r\n                  <\/div>\r\n                  <div style={{ fontSize: 20, color: COLORS.white, fontWeight: 700 }}>{steps[step].title}<\/div>\r\n                <\/div>\r\n              <\/div>\r\n              <p style={{ color: COLORS.gray200, fontSize: 15, lineHeight: 1.7, whiteSpace: \"pre-line\", margin: 0 }}>\r\n                {steps[step].desc}\r\n              <\/p>\r\n\r\n              <div style={{ display: \"flex\", justifyContent: \"space-between\", marginTop: 20 }}>\r\n                <button\r\n                  onClick={() => setStep(Math.max(0, step - 1))}\r\n                  disabled={step === 0}\r\n                  style={{\r\n                    padding: \"8px 20px\", borderRadius: 8, border: `1px solid ${COLORS.navyMid}`,\r\n                    background: \"transparent\", color: step === 0 ? COLORS.gray500 : COLORS.white,\r\n                    cursor: step === 0 ? \"default\" : \"pointer\", fontSize: 14,\r\n                  }}\r\n                >\r\n                  \u2190 Anterior\r\n                <\/button>\r\n                <button\r\n                  onClick={() => setStep(Math.min(steps.length - 1, step + 1))}\r\n                  disabled={step === steps.length - 1}\r\n                  style={{\r\n                    padding: \"8px 20px\", borderRadius: 8, border: \"none\",\r\n                    background: step === steps.length - 1 ? COLORS.navyMid : (scenario === \"A\" ? COLORS.gold : COLORS.blue),\r\n                    color: COLORS.white, cursor: step === steps.length - 1 ? \"default\" : \"pointer\",\r\n                    fontSize: 14, fontWeight: 600,\r\n                  }}\r\n                >\r\n                  Siguiente \u2192\r\n                <\/button>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            {step === steps.length - 1 && (\r\n              <div style={{\r\n                marginTop: 20, padding: 20, borderRadius: 12,\r\n                background: `${COLORS.green}15`, border: `1px solid ${COLORS.green}40`,\r\n              }}>\r\n                <div style={{ color: COLORS.green, fontWeight: 700, fontSize: 14, marginBottom: 6 }}>RESULTADO CLAVE<\/div>\r\n                <div style={{ color: COLORS.gray200, fontSize: 14, lineHeight: 1.6 }}>\r\n                  {scenario === \"A\"\r\n                    ? \"The lawyer receives business they would not otherwise have. META Channel Corporation charges for the coordination and origination. Separate invoicing, with no sharing of professional fees.\"\r\n                    : \"The lawyer amplifies their case with international infrastructure. META Channel Corporation charges only the percentage for providing brand and structure. The lawyer keeps control and the relationship with their client.\"}\r\n                <\/div>\r\n              <\/div>\r\n            )}\r\n          <\/div>\r\n        )}\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  function ClubDemo() {\r\n    const [profile, setProfile] = useState(null);\r\n\r\n    const profiles = [\r\n      { id: \"abogado\", label: \"Practicing lawyer\", icon: \"\u2696\ufe0f\" },\r\n      { id: \"magistrado\", label: \"Judge \/ Former regulator\", icon: \"\ud83c\udfdb\ufe0f\" },\r\n      { id: \"estudiante\", label: \"Final-year student\", icon: \"\ud83c\udf93\" },\r\n      { id: \"academico\", label: \"Academic \/ Researcher\", icon: \"\ud83d\udcda\" },\r\n    ];\r\n\r\n    const levels = {\r\n      abogado: {\r\n        recommended: \"Strategic Member\",\r\n        options: [\r\n          {\r\n            name: \"Business Member\", cost: \"\u20ac150\/year\", color: COLORS.blue,\r\n            benefits: [\"Professional directory of the network\", \"Webinars and legal business training\", \"META Channel Legal Desk credential\", \"Private community of professionals\", \"May be considered for referrals\"],\r\n            noAccess: [\"Absolute priority in case referrals\", \"Internal calls for cases\", \"Thematic committees\"],\r\n          },\r\n          {\r\n            name: \"Strategic Member\", cost: \"\u20ac300\/year\", color: COLORS.gold, recommended: true,\r\n            benefits: [\"Everything in Business Member\", \"Real priority in case referrals\", \"Access to internal calls for opportunities\", \"Participation in thematic committees\", \"Full access to the META Channel ecosystem\", \"Preferred candidate for a Framework Collaboration Agreement\"],\r\n            noAccess: [],\r\n          },\r\n        ],\r\n      },\r\n      magistrado: {\r\n        recommended: \"Leadership Member\",\r\n        options: [\r\n          {\r\n            name: \"Leadership Member\", cost: \"Free (by invitation)\", color: COLORS.purple, recommended: true,\r\n            benefits: [\"Maximum institutional visibility\", \"Chairing of thematic committees\", \"Participation as a speaker at events\", \"Prestige credential\", \"Full access to training and community\", \"Benchmark role within the ecosystem\"],\r\n            noAccess: [\"Does not run cases (that is not its role)\"],\r\n          },\r\n        ],\r\n      },\r\n      estudiante: {\r\n        recommended: \"Young Member\",\r\n        options: [\r\n          {\r\n            name: \"Young Member\", cost: \"\u20ac40\u201350\/year\", color: COLORS.green,\r\n            benefits: [\"An international credential before you graduate\", \"Access to webinars and masterclasses\", \"Training certificates for your CV\", \"Networking with lawyers from 15+ countries\", \"Library of professional resources\", \"Move up to Business Member with 50% off when you join the bar\"],\r\n            noAccess: [\"Cannot run or refer cases (not yet qualified to)\"],\r\n          },\r\n        ],\r\n      },\r\n      academico: {\r\n        recommended: \"Business Member\",\r\n        options: [\r\n          {\r\n            name: \"Business Member\", cost: \"\u20ac150\/year\", color: COLORS.blue,\r\n            benefits: [\"Professional directory\", \"Legal business training\", \"META Channel credential\", \"Connection with CEA Digital Law for research\", \"International community of professionals\"],\r\n            noAccess: [\"Internal calls for cases (available in Strategic)\"],\r\n          },\r\n          {\r\n            name: \"Strategic Member\", cost: \"\u20ac300\/year\", color: COLORS.gold,\r\n            benefits: [\"Everything in Business\", \"If also practicing: priority in referrals\", \"Thematic committees\", \"Joint publications with the Comit\u00e9 Euro Americano de Derecho Digital \u2013 CEA Digital Law\"],\r\n            noAccess: [],\r\n          },\r\n        ],\r\n      },\r\n    };\r\n\r\n    const data = profile ? levels[profile] : null;\r\n\r\n    return (\r\n      <div>\r\n        <p style={{ color: COLORS.gray300, marginBottom: 24, fontSize: 15, lineHeight: 1.6 }}>\r\n          Selecciona tu perfil profesional para ver qu\u00e9 nivel de membres\u00eda te corresponde y qu\u00e9 recibes.\r\n        <\/p>\r\n\r\n        <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\", gap: 12, marginBottom: 28 }}>\r\n          {profiles.map((p) => (\r\n            <button\r\n              key={p.id}\r\n              onClick={() => setProfile(p.id)}\r\n              style={{\r\n                padding: \"16px 14px\", borderRadius: 12, cursor: \"pointer\",\r\n                border: profile === p.id ? `2px solid ${COLORS.gold}` : `1px solid ${COLORS.navyMid}`,\r\n                background: profile === p.id ? `${COLORS.gold}12` : COLORS.navyLight,\r\n                display: \"flex\", alignItems: \"center\", gap: 10, transition: \"all 0.3s\",\r\n              }}\r\n            >\r\n              <span style={{ fontSize: 24 }}>{p.icon}<\/span>\r\n              <span style={{ color: COLORS.white, fontSize: 14, fontWeight: 600, textAlign: \"left\" }}>{p.label}<\/span>\r\n            <\/button>\r\n          ))}\r\n        <\/div>\r\n\r\n        {data && (\r\n          <div>\r\n            <div style={{ fontSize: 12, color: COLORS.gold, fontWeight: 700, letterSpacing: 1, marginBottom: 16 }}>\r\n              NIVEL RECOMENDADO: {data.recommended.toUpperCase()}\r\n            <\/div>\r\n\r\n            <div style={{ display: \"flex\", gap: 16, flexWrap: \"wrap\" }}>\r\n              {data.options.map((opt) => (\r\n                <div\r\n                  key={opt.name}\r\n                  style={{\r\n                    flex: \"1 1 280px\", background: COLORS.navyLight, borderRadius: 16, padding: 24,\r\n                    border: opt.recommended ? `2px solid ${opt.color}` : `1px solid ${COLORS.navyMid}`,\r\n                    position: \"relative\",\r\n                  }}\r\n                >\r\n                  {opt.recommended && (\r\n                    <div style={{\r\n                      position: \"absolute\", top: -10, right: 16, background: opt.color,\r\n                      color: COLORS.navy, fontSize: 11, fontWeight: 800, padding: \"3px 10px\",\r\n                      borderRadius: 6, letterSpacing: 0.5,\r\n                    }}>\r\n                      RECOMENDADO\r\n                    <\/div>\r\n                  )}\r\n                  <div style={{ fontSize: 18, fontWeight: 700, color: COLORS.white, marginBottom: 4 }}>{opt.name}<\/div>\r\n                  <div style={{ fontSize: 22, fontWeight: 800, color: opt.color, marginBottom: 16 }}>{opt.cost}<\/div>\r\n\r\n                  <div style={{ fontSize: 12, color: COLORS.gray300, fontWeight: 700, letterSpacing: 1, marginBottom: 8 }}>INCLUYE<\/div>\r\n                  {opt.benefits.map((b, i) => (\r\n                    <div key={i} style={{ display: \"flex\", gap: 8, marginBottom: 6, alignItems: \"flex-start\" }}>\r\n                      <span style={{ color: COLORS.green, fontSize: 14, marginTop: 2 }}>\u2713<\/span>\r\n                      <span style={{ color: COLORS.gray200, fontSize: 13, lineHeight: 1.5 }}>{b}<\/span>\r\n                    <\/div>\r\n                  ))}\r\n                  {opt.noAccess.length > 0 && (\r\n                    <>\r\n                      <div style={{ fontSize: 12, color: COLORS.gray500, fontWeight: 700, letterSpacing: 1, marginTop: 12, marginBottom: 8 }}>NO INCLUYE<\/div>\r\n                      {opt.noAccess.map((b, i) => (\r\n                        <div key={i} style={{ display: \"flex\", gap: 8, marginBottom: 6, alignItems: \"flex-start\" }}>\r\n                          <span style={{ color: COLORS.gray500, fontSize: 14, marginTop: 2 }}>\u2717<\/span>\r\n                          <span style={{ color: COLORS.gray500, fontSize: 13, lineHeight: 1.5 }}>{b}<\/span>\r\n                        <\/div>\r\n                      ))}\r\n                    <\/>\r\n                  )}\r\n                <\/div>\r\n              ))}\r\n            <\/div>\r\n          <\/div>\r\n        )}\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  function InternacionalDemo() {\r\n    const green = \"#22C55E\";\r\n\r\n    const groups = [\r\n      { label: \"Europe\", icon: \"\ud83c\uddea\ud83c\uddfa\", countries: [\r\n        \"Spain (incl. Canary Islands)\", \"Ireland\", \"United Kingdom\", \"Portugal\", \"France\", \"Germany\", \"Belgium\", \"Malta\", \"Poland\"\r\n      ]},\r\n      { label: \"North and Central America\", icon: \"\ud83c\udf0e\", countries: [\r\n        \"Mexico\", \"El Salvador\", \"Costa Rica\", \"Nicaragua\", \"Honduras\", \"Panama\", \"Dominican Republic\"\r\n      ]},\r\n      { label: \"South America\", icon: \"\ud83c\udf0e\", countries: [\r\n        \"Colombia\", \"Venezuela\", \"Ecuador\", \"Peru\", \"Brazil\", \"Uruguay\", \"Argentina\", \"Paraguay\", \"Chile\"\r\n      ]},\r\n      { label: \"Mediterranean and the East\", icon: \"\ud83c\udf0d\", countries: [\r\n        \"T\u00fcrkiye\"\r\n      ]},\r\n      { label: \"Africa\", icon: \"\ud83c\udf0d\", countries: [\r\n        \"Angola\", \"Mozambique\"\r\n      ]},\r\n    ];\r\n\r\n    const total = groups.reduce((s, g) => s + g.countries.length, 0);\r\n\r\n    return (<div>\r\n      <p style={{color:COLORS.gray300,marginBottom:8,fontSize:15,lineHeight:1.6}}>\r\n        {total} jurisdicciones operativas organizadas por regi\u00f3n.\r\n      <\/p>\r\n      <div style={{display:\"flex\",alignItems:\"center\",gap:8,marginBottom:24}}>\r\n        <div style={{width:10,height:10,borderRadius:\"50%\",background:green}} \/>\r\n        <span style={{fontSize:13,color:COLORS.gray300}}>Operativo<\/span>\r\n      <\/div>\r\n\r\n      {groups.map(g => (\r\n        <div key={g.label} style={{marginBottom:24}}>\r\n          <div style={{display:\"flex\",alignItems:\"center\",gap:10,marginBottom:12}}>\r\n            <span style={{fontSize:18}}>{g.icon}<\/span>\r\n            <span style={{fontSize:15,fontWeight:700,color:COLORS.white}}>{g.label}<\/span>\r\n            <span style={{fontSize:12,color:green,fontWeight:600}}>({g.countries.length})<\/span>\r\n            <div style={{flex:1,height:1,background:COLORS.navyMid,marginLeft:8}} \/>\r\n          <\/div>\r\n          <div style={{display:\"grid\",gridTemplateColumns:\"repeat(auto-fill, minmax(220px, 1fr))\",gap:8}}>\r\n            {g.countries.map(name => (\r\n              <div key={name} style={{\r\n                display:\"flex\",alignItems:\"center\",gap:10,\r\n                padding:\"11px 16px\",borderRadius:10,\r\n                background:COLORS.navyLight,\r\n                border:`1px solid ${COLORS.navyMid}`,\r\n              }}>\r\n                <div style={{width:8,height:8,borderRadius:\"50%\",background:green,flexShrink:0}} \/>\r\n                <span style={{color:COLORS.gray200,fontSize:14}}>{name}<\/span>\r\n              <\/div>\r\n            ))}\r\n          <\/div>\r\n        <\/div>\r\n      ))}\r\n    <\/div>);\r\n  }\r\n\r\n  function UniversidadDemo() {\r\n    const [activePhase, setActivePhase] = useState(0);\r\n\r\n    const phases = [\r\n      {\r\n        icon: \"\ud83d\udcda\", title: \"Final year of Law\", time: \"Year 0\",\r\n        desc: \"You are finishing your degree. You join as a Young Member for \u20ac40\u201350\/year.\",\r\n        detail: \"You receive an international credential based in Dublin, access to webinars and masterclasses, training certificates for your CV, and networking with lawyers from 15+ countries.\",\r\n        color: COLORS.blue,\r\n      },\r\n      {\r\n        icon: \"\ud83c\udf93\", title: \"You graduate\", time: \"Year 1\",\r\n        desc: \"You already have 12+ international training certificates and an active professional network.\",\r\n        detail: \"While your classmates look for internships with no contacts, you already know practicing lawyers in several jurisdictions and understand tokenization, litigation finance and AI compliance.\",\r\n        color: COLORS.purple,\r\n      },\r\n      {\r\n        icon: \"\u2696\ufe0f\", title: \"You join the bar\", time: \"Year 1-2\",\r\n        desc: \"You move automatically to Business Member with a 50% discount in the first year (\u20ac75 instead of \u20ac150).\",\r\n        detail: \"You are no longer a student: you are a professional member. Your profile appears in the directory. You can be considered for case referrals. The transition is automatic once you evidence bar membership.\",\r\n        color: COLORS.gold,\r\n      },\r\n      {\r\n        icon: \"\ud83d\udccb\", title: \"First referrals\", time: \"Year 2-3\",\r\n        desc: \"You start receiving cases through the network. First in a support role, then running them yourself.\",\r\n        detail: \"A senior lawyer in the network needs support on a case with a cross-border component. It is assigned to you. You learn, you get paid, and you build your first track record within Legal Desk.\",\r\n        color: COLORS.green,\r\n      },\r\n      {\r\n        icon: \"\ud83d\ude80\", title: \"Strategic Member\", time: \"Year 3+\",\r\n        desc: \"With 3+ cases completed, you move up to Strategic Member (\u20ac300\/year). Real priority in referrals.\",\r\n        detail: \"You are a lawyer with verifiable international experience, you belong to a network present in 15+ countries, and you can offer your clients capabilities no other lawyer from your year has.\",\r\n        color: COLORS.gold,\r\n      },\r\n    ];\r\n\r\n    return (\r\n      <div>\r\n        <p style={{ color: COLORS.gray300, marginBottom: 24, fontSize: 15, lineHeight: 1.6 }}>\r\n          El recorrido de un estudiante desde el \u00faltimo curso hasta convertirse en abogado internacional.\r\n        <\/p>\r\n\r\n        <div style={{ position: \"relative\", marginBottom: 28, paddingLeft: 20 }}>\r\n          <div style={{\r\n            position: \"absolute\", left: 9, top: 0, bottom: 0, width: 2,\r\n            background: `linear-gradient(to bottom, ${COLORS.blue}, ${COLORS.gold})`,\r\n          }} \/>\r\n\r\n          {phases.map((p, i) => (\r\n            <button\r\n              key={i}\r\n              onClick={() => setActivePhase(i)}\r\n              style={{\r\n                display: \"flex\", alignItems: \"flex-start\", gap: 16,\r\n                marginBottom: i < phases.length - 1 ? 8 : 0,\r\n                padding: \"12px 16px\", borderRadius: 12, border: \"none\",\r\n                background: activePhase === i ? `${p.color}15` : \"transparent\",\r\n                cursor: \"pointer\", width: \"100%\", textAlign: \"left\",\r\n                position: \"relative\", transition: \"all 0.3s\",\r\n              }}\r\n            >\r\n              <div style={{\r\n                width: 20, height: 20, borderRadius: \"50%\", flexShrink: 0,\r\n                background: activePhase === i ? p.color : COLORS.navyMid,\r\n                border: `2px solid ${activePhase === i ? p.color : COLORS.gray500}`,\r\n                display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\r\n                fontSize: 10, marginTop: 2, position: \"relative\", zIndex: 1,\r\n                transition: \"all 0.3s\",\r\n              }} \/>\r\n              <div>\r\n                <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, marginBottom: 2 }}>\r\n                  <span style={{ fontSize: 16 }}>{p.icon}<\/span>\r\n                  <span style={{ fontSize: 15, fontWeight: 700, color: activePhase === i ? COLORS.white : COLORS.gray300 }}>{p.title}<\/span>\r\n                  <span style={{ fontSize: 11, color: p.color, fontWeight: 600 }}>{p.time}<\/span>\r\n                <\/div>\r\n                <div style={{ fontSize: 13, color: COLORS.gray300, lineHeight: 1.5 }}>{p.desc}<\/div>\r\n              <\/div>\r\n            <\/button>\r\n          ))}\r\n        <\/div>\r\n\r\n        <div style={{\r\n          background: COLORS.navyLight, borderRadius: 16, padding: 24,\r\n          borderLeft: `4px solid ${phases[activePhase].color}`,\r\n        }}>\r\n          <div style={{ fontSize: 11, color: phases[activePhase].color, fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>\r\n            {phases[activePhase].time} \u2014 {phases[activePhase].title.toUpperCase()}\r\n          <\/div>\r\n          <p style={{ color: COLORS.gray200, fontSize: 15, lineHeight: 1.7, margin: 0 }}>\r\n            {phases[activePhase].detail}\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div style={{\r\n          marginTop: 20, padding: 20, borderRadius: 12,\r\n          background: `${COLORS.gold}10`, border: `1px solid ${COLORS.gold}30`,\r\n        }}>\r\n          <div style={{ color: COLORS.gold, fontWeight: 700, fontSize: 14, marginBottom: 6 }}>EL N\u00daMERO<\/div>\r\n          <div style={{ color: COLORS.gray200, fontSize: 14, lineHeight: 1.6 }}>\r\n            50 \u20ac al a\u00f1o = 4,16 \u20ac al mes. Menos que una cena. A cambio: credencial internacional, formaci\u00f3n profesional, networking en 15+ pa\u00edses, y un camino directo hacia una carrera con alcance global.\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  function LegalDeskDemos() {\r\n    const [activeTab, setActiveTab] = useState(\"colab\");\r\n\r\n    const components = {\r\n      colab: ColaboradoresDemo,\r\n      club: ClubDemo,\r\n      intl: InternacionalDemo,\r\n      uni: UniversidadDemo,\r\n    };\r\n\r\n    const ActiveComponent = components[activeTab];\r\n\r\n    return (\r\n      <div style={{\r\n        background: COLORS.navy,\r\n        fontFamily: \"'Public Sans', 'Segoe UI', sans-serif\",\r\n        paddingBottom: 40\r\n      }}>\r\n        <div style={{ maxWidth: 1000, margin: \"0 auto\", padding: \"32px 20px\" }}>\r\n          <div style={{ marginBottom: 32, textAlign: \"center\" }}>\r\n            <div style={{ fontSize: 11, color: COLORS.gold, fontWeight: 700, letterSpacing: 2, marginBottom: 8 }}>\r\n              META CHANNEL LEGAL DESK\r\n            <\/div>\r\n            <h1 style={{ fontSize: 26, fontWeight: 800, color: COLORS.white, margin: \"0 0 8px 0\" }}>\r\n              Ejemplos Interactivos\r\n            <\/h1>\r\n            <p style={{ fontSize: 14, color: COLORS.gray300, margin: 0 }}>\r\n              Descubre de forma pr\u00e1ctica c\u00f3mo estructuramos la colaboraci\u00f3n y los beneficios en cada nivel del ecosistema.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div style={{\r\n            display: \"flex\", gap: 4, marginBottom: 28, flexWrap: \"wrap\",\r\n            background: COLORS.navyLight, borderRadius: 14, padding: 4,\r\n          }}>\r\n            {tabs.map((t) => (\r\n              <button\r\n                key={t.id}\r\n                onClick={() => setActiveTab(t.id)}\r\n                style={{\r\n                  flex: \"1 1 120px\", padding: \"10px 8px\", borderRadius: 10, border: \"none\",\r\n                  background: activeTab === t.id ? COLORS.navyMid : \"transparent\",\r\n                  color: activeTab === t.id ? COLORS.white : COLORS.gray500,\r\n                  cursor: \"pointer\", fontSize: 12, fontWeight: 600,\r\n                  transition: \"all 0.2s\",\r\n                }}\r\n              >\r\n                <span style={{ fontSize: 16, display: \"block\", marginBottom: 2 }}>{t.icon}<\/span>\r\n                {t.label}\r\n              <\/button>\r\n            ))}\r\n          <\/div>\r\n\r\n          <div style={{\r\n            background: `${COLORS.navyLight}80`, borderRadius: 20, padding: 28,\r\n            border: `1px solid ${COLORS.navyMid}`,\r\n          }}>\r\n            <ActiveComponent \/>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  const root = ReactDOM.createRoot(document.getElementById('legal-desk-demos-root'));\r\n  root.render(<LegalDeskDemos \/>);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":38643,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-38644","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metachannelcorp.com\/en\/wp-json\/wp\/v2\/pages\/38644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metachannelcorp.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metachannelcorp.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metachannelcorp.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metachannelcorp.com\/en\/wp-json\/wp\/v2\/comments?post=38644"}],"version-history":[{"count":0,"href":"https:\/\/metachannelcorp.com\/en\/wp-json\/wp\/v2\/pages\/38644\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/metachannelcorp.com\/en\/wp-json\/wp\/v2\/pages\/38643"}],"wp:attachment":[{"href":"https:\/\/metachannelcorp.com\/en\/wp-json\/wp\/v2\/media?parent=38644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}