From bcde8d81988eab23a72208c8c7a34766690f2d96 Mon Sep 17 00:00:00 2001
From: Marcos Fargas <mfargas@example.com>
Date: Thu, 15 Oct 2026 00:46:34 +0200
Subject: [PATCH] feat(brandbook): anadir campo de URL de LinkedIn tambien en
 seccion LinkedIn B2B

---
 src/components/BrandZone.tsx | 167 ++++++++++++++++++++++-------------
 1 file changed, 105 insertions(+), 62 deletions(-)

diff --git a/src/components/BrandZone.tsx b/src/components/BrandZone.tsx
index 1834f32..c23ed01 100644
--- a/src/components/BrandZone.tsx
+++ b/src/components/BrandZone.tsx
@@ -2074,68 +2074,111 @@ export default function BrandZone({
           )}
 
           {section === 'b2b' && (
-            <div className="grid gap-3 sm:grid-cols-2">
-              <Field label="Temas LinkedIn">
-                <textarea
-                  className={areaCls}
-                  value={listToLines(book.linkedin_themes)}
-                  onChange={(e) =>
-                    patch({ linkedin_themes: linesToList(e.target.value) })
-                  }
-                />
-              </Field>
-              <Field label="Formatos LinkedIn">
-                <textarea
-                  className={areaCls}
-                  value={listToLines(book.linkedin_formats)}
-                  onChange={(e) =>
-                    patch({ linkedin_formats: linesToList(e.target.value) })
-                  }
-                />
-              </Field>
-              <Field label="Thought leadership">
-                <textarea
-                  className={areaCls}
-                  value={listToLines(book.thought_leadership)}
-                  onChange={(e) =>
-                    patch({ thought_leadership: linesToList(e.target.value) })
-                  }
-                />
-              </Field>
-              <Field label="Buyer roles">
-                <textarea
-                  className={areaCls}
-                  value={listToLines(book.buyer_roles)}
-                  onChange={(e) =>
-                    patch({ buyer_roles: linesToList(e.target.value) })
-                  }
-                />
-              </Field>
-              <Field label="Ángulos casos de estudio">
-                <textarea
-                  className={areaCls}
-                  value={listToLines(book.case_study_angles)}
-                  onChange={(e) =>
-                    patch({ case_study_angles: linesToList(e.target.value) })
-                  }
-                />
-              </Field>
-              <Field label="CTAs LinkedIn">
-                <textarea
-                  className={areaCls}
-                  value={listToLines(book.linkedin_cta)}
-                  onChange={(e) =>
-                    patch({ linkedin_cta: linesToList(e.target.value) })
-                  }
-                />
-              </Field>
-              <Field label="ABM / cuentas objetivo" className="sm:col-span-2">
-                <textarea
-                  className={areaCls}
-                  value={book.abm_notes}
-                  onChange={(e) => patch({ abm_notes: e.target.value })}
-                />
-              </Field>
+            <div className="space-y-4">
+              <div className="rounded-xl border border-blue-200/80 bg-gradient-to-br from-blue-50/60 via-white to-sky-50/50 p-4 shadow-xs">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                  <div className="flex-1">
+                    <label className="block text-xs font-semibold text-gray-800 mb-1">
+                      URL de la Empresa / Página en LinkedIn (o Perfil B2B)
+                    </label>
+                    <div className="flex gap-2 items-center">
+                      <input
+                        type="url"
+                        placeholder="https://www.linkedin.com/company/tu-empresa/"
+                        className="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-xs text-gray-900 shadow-xs focus:border-brand-500 focus:outline-hidden focus:ring-1 focus:ring-brand-500"
+                        value={book.channel_handles.linkedin || ''}
+                        onChange={(e) =>
+                          patch({
+                            channel_handles: {
+                              ...book.channel_handles,
+                              linkedin: e.target.value,
+                            },
+                          })
+                        }
+                      />
+                      {book.channel_handles.linkedin && (
+                        <a
+                          href={book.channel_handles.linkedin}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center gap-1.5 px-3 py-2 text-xs font-medium text-blue-700 bg-blue-100 hover:bg-blue-200 rounded-lg transition-colors shrink-0"
+                          title="Abrir página en LinkedIn"
+                        >
+                          <ExternalLink className="w-3.5 h-3.5" />
+                          <span>Abrir</span>
+                        </a>
+                      )}
+                    </div>
+                    <p className="mt-1 text-[11px] text-gray-500">
+                      Este campo está sincronizado en tiempo real con la pestaña <strong>Canales</strong> (`channel_handles.linkedin`).
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid gap-3 sm:grid-cols-2">
+                <Field label="Temas LinkedIn">
+                  <textarea
+                    className={areaCls}
+                    value={listToLines(book.linkedin_themes)}
+                    onChange={(e) =>
+                      patch({ linkedin_themes: linesToList(e.target.value) })
+                    }
+                  />
+                </Field>
+                <Field label="Formatos LinkedIn">
+                  <textarea
+                    className={areaCls}
+                    value={listToLines(book.linkedin_formats)}
+                    onChange={(e) =>
+                      patch({ linkedin_formats: linesToList(e.target.value) })
+                    }
+                  />
+                </Field>
+                <Field label="Thought leadership">
+                  <textarea
+                    className={areaCls}
+                    value={listToLines(book.thought_leadership)}
+                    onChange={(e) =>
+                      patch({ thought_leadership: linesToList(e.target.value) })
+                    }
+                  />
+                </Field>
+                <Field label="Buyer roles">
+                  <textarea
+                    className={areaCls}
+                    value={listToLines(book.buyer_roles)}
+                    onChange={(e) =>
+                      patch({ buyer_roles: linesToList(e.target.value) })
+                    }
+                  />
+                </Field>
+                <Field label="Ángulos casos de estudio">
+                  <textarea
+                    className={areaCls}
+                    value={listToLines(book.case_study_angles)}
+                    onChange={(e) =>
+                      patch({ case_study_angles: linesToList(e.target.value) })
+                    }
+                  />
+                </Field>
+                <Field label="CTAs LinkedIn">
+                  <textarea
+                    className={areaCls}
+                    value={listToLines(book.linkedin_cta)}
+                    onChange={(e) =>
+                      patch({ linkedin_cta: linesToList(e.target.value) })
+                    }
+                  />
+                </Field>
+                <Field label="ABM / cuentas objetivo" className="sm:col-span-2">
+                  <textarea
+                    className={areaCls}
+                    value={book.abm_notes}
+                    onChange={(e) => patch({ abm_notes: e.target.value })}
+                  />
+                </Field>
+              </div>
             </div>
           )}