// Carlota Rezola — Creative Direction & Strategy // Core Interactivity Controller (Vanilla TypeScript / DOM Engine) interface Project { id: string; title: string; category: string; tagline: string; overview: string; services: string[]; year: number; imageUrl: string; featured: boolean; client: string; duration: string; } interface Capability { title: string; text: string; list: string[]; } interface ChronicleItem { id: string; period: string; role: string; company: string; details: string[]; highlight?: boolean; } interface Inquiry { id: string; name: string; email: string; service: string; budget: string; vision: string; timestamp: string; } // ----------------================ DATA SOURCE ================---------------- const projects: Project[] = [ { id: "musee-noir", title: "Musee Noir", category: "BRANDING", tagline: "A dark contemporary luxury aesthetic.", overview: "A complete identity and brand philosophy for Musee Noir, an avant-garde boutique curated in Milan. Focused on raw textures, minimal geometry, and a high-contrast ink-on-stone look.", services: ["Creative Direction", "Brand Identity", "Typeface Curation", "Visual Guidelines"], year: 2024, imageUrl: "https://lh3.googleusercontent.com/aida-public/AB6AXuBUSihYma1jYaE-VDDjXHO8niBl7DgcBK-lIYCPyGgM_qYQN2uli464PgKM5mDoMmXr26PoF7iu9Tg2977geYqB6_AopsTqg3NCunxdFsGJtS95mTAkToE_a_5xcgMDwKWKQb4c41lkxpgyXfzm_fXF3EtnJ4pYZOblGrQJ5PbyP7H6IPk88OZeW9NlJ5rXaHU5RUN83IWiRFr8EWhJzPNIXVaPKYhZr8NT8JXhrdTdVA0KT1dzoS33uKiaiS2n0-9qJCdmfdDyaILu", featured: true, client: "Musee Noir Milan", duration: "4 Months" }, { id: "silent-motion", title: "Silent Motion", category: "CONTENT CREATION", tagline: "Capturing human motion in serene spaces.", overview: "An artistic film and lookbook series developed to celebrate silent movement. Centered around architectural lines in Madrid's Brutalist structures, it merges haute couture garments with slow shadow play.", services: ["Art Direction", "Cinematography", "Digital Content Strategy", "Print Lookbook"], year: 2023, imageUrl: "/src/assets/images/regenerated_image_1782238515071.jpg", featured: true, client: "National Dance Ensemble Context", duration: "6 Months" }, { id: "levis-campaign", title: "Built for Scape. Worn for Life.", category: "STRATEGY", tagline: "Strategic brand relaunch.", overview: "A high-impact campaign that repositions rigid denim inside fluid urban architecture. Developed to target metropolitan creators seeking durability without compromising aesthetic purity.", services: ["Campaign Strategy", "Layout Design", "Typography", "Copywriting"], year: 2023, imageUrl: "/src/assets/images/regenerated_image_1782239046026.png", featured: false, client: "Levi's Spain", duration: "3 Months" }, { id: "tomorrowland", title: "High Energy. Low Impact.", category: "CONTENT CREATION", tagline: "Sustainable rave visuals.", overview: "A futuristic digital installation and scenic identity for Tomorrowland's new eco-conscious underground stage. The system links live energy metrics with raw aesthetic geometry.", services: ["Scenic Ideation", "Kinetic Visuals", "Environmental Design"], year: 2024, imageUrl: "/src/assets/images/regenerated_image_1782239047247.png", featured: false, client: "Tomorrowland Curation Group", duration: "5 Months" }, { id: "id-magazine", title: "Mess is the new Chic", category: "EDITORIAL", tagline: "Unrefined editorial fashion layout.", overview: "An experimental typographic exploration violating standard layout grids to reflect raw youth culture. Standard alignment is broken down to unleash pure visual rebellion.", services: ["Editorial Design", "Experimental Layout", "Typographic Identity"], year: 2023, imageUrl: "/src/assets/images/regenerated_image_1782239047888.png", featured: false, client: "i-D Magazine Concept", duration: "2 Months" }, { id: "crocs-shift", title: "Nice Run. Now Try a Shift.", category: "BRANDING", tagline: "Modern lifestyle lookbook.", overview: "A complete visual shift celebrating physical transition: from the rush of a daily run to the calm posture of recovery. High-contrast studio lighting underscores the unexpected sculptural form of the shoes.", services: ["Creative Direction", "Studio Lighting", "Campaign Execution"], year: 2024, imageUrl: "/src/assets/images/regenerated_image_1782239049116.png", featured: false, client: "Crocs Europe", duration: "3 Months" }, { id: "magtag", title: "MAGTAG", category: "EDITORIAL", tagline: "Innovative magnetic lifestyle system.", overview: "An identity project that breaks out traditional accessories to show a clean magnetic lifestyle utility ecosystem. Minimal typography aligns with structured tactile layouts.", services: ["Brand Framework", "Packaging Architecture", "Visual Language"], year: 2024, imageUrl: "/src/assets/images/regenerated_image_1782239050654.jpg", featured: false, client: "MAGTAG Tech", duration: "4 Months" } ]; const capabilities: Record = { strategy: { title: "Strategic Acumen & Intelligence", text: "My consulting relies strictly on qualitative analysis and modern consumer psychology rather than arbitrary styling templates. I build structural formulas that translate technical advantages into pristine messaging models and premium market authority.", list: [ "Consumer Psychology Analytical Models", "Dynamic Brand Positioning Strategy", "Aesthetic Trend Forecasting Data", "Data-Informed Visual Narrative Design", "Bilingual Strategy Workshop Curation", "Multi-Channel Campaign Architecture" ] }, design: { title: "Tactile & Digital Design Ecosystem", text: "Stripping down clutter is a technical challenge. I curate layouts, grid geometries, and contrast standards to guarantee that brand publications, books, and campaigns stand beautifully on modern and legacy screens alike.", list: [ "Editorial Print Layouts & Publications", "Comprehensive Luxury Creative Direction", "High-Contrast Typography Systems", "Geometric Brand Identity Systems", "Aesthetic Grid Engineering Protocols", "Fine Luxury Packaging Architecture" ] }, ecosystem: { title: "Tools & Multi-Disciplinary Frameworks", text: "A modern creative director must operate natively across both digital and physical spectrums. I leverage a custom tech stack of figma templates and local tailwind frameworks to accelerate the conceptual-to-market validation loop.", list: [ "Figma / Adobe Creative Suite Custom Workflows", "HTML5 / CSS3 / Tailwind Layout Engineering", "Tactile Print Material & Stock Procurement", "Creative Portrait & Product Studio Lighting", "Cinematography Production Protocols", "High-Fidelity Interaction Prototyping" ] } }; const chronicleItems: ChronicleItem[] = [ { id: "roi-up", period: "2021 — PRESENT", role: "Senior Strategic Consultant & Team Lead", company: "ROI UP Group — Madrid, Spain", details: [ "Orchestrate creative directions and positioning strategies for multi-national luxury and high-growth retail brands across Europe.", "Manage a multidisciplinary team of designers, copywriters, and performance strategists, resulting in 43% average increases in engagement.", "Lead client workshops to transform qualitative consumer psychology data into actionable, high-contrast visual brand guidelines.", "Successfully pitch and secure creative contracts worth over €1.2M annually." ], highlight: true }, { id: "uc3m", period: "2018 — 2021", role: "Research Fellow & Lecturer in Brand Architecture", company: "Universidad Carlos III de Madrid — Spain", details: [ "Lectured on Brand Strategy, Contemporary Typography, and Consumer Sociology to over 400 advanced undergraduate and graduate students.", "Published peer-reviewed research analyzing the semantic shift of minimalism in high-end brand packaging.", "Coordinated with industry leaders to introduce hands-on luxury brand identity simulation modules inside the master's curriculum.", "Received consecutive 'Excellent' teaching evaluations for bilingual (Spanish/English) studio classes." ] }, { id: "freelance", period: "2015 — 2018", role: "Independent Creative Director & Designer", company: "Madrid / Milan (Remote)", details: [ "Collaborated with niche fashion labels, architecture firms, and cultural publication studios to build striking print and digital identities.", "Designed and hand-bound custom portfolio lookbooks, leveraging deep tactile materiality.", "Refined high-contrast vector methodologies and digital grid system standards still in use by regional design studios." ] } ]; // Initial Dummy Inquiries (Pre-seeded in localStorage so the vault never feels blank on initial preview) const initialDummyInquiries: Inquiry[] = [ { id: "CR-839-WQ12", name: "Milano Fashion Syndicate", email: "coordination@milanofashion.it", service: "BRANDING", budget: "€10,000 — €25,000", vision: "We require a highly tactile print publication layout for our Fall Resort showcase. Focus on raw geometries and luxury stock choice.", timestamp: "2026-06-08T14:24:00Z" }, { id: "CR-214-MN58", name: "Built Scape Spain", email: "contact@builtscape.es", service: "STRATEGY", budget: "€25,000+", vision: "Repositioning our residential eco-architectural grid as a minimalist high-ticket collectible lifestyle. Seeking sharp typography direction.", timestamp: "2026-06-09T09:12:30Z" } ]; // ----------------================ ACTIVE STATES ================---------------- let currentTab = "work"; let currentModalProjectIndex = 0; let activeFilter = "ALL"; let activeCapSegment = "strategy"; // Form input state holders let selectedService = ""; let selectedBudget = ""; // ----------------================ INITIALIZER ENGINE ================---------------- function runInitialization() { initClock(); initVault(); initTabTriggers(); initWorkPage(); initProfilePage(); initChroniclePage(); initContactPage(); initModal(); initDrawer(); // Create icons on start if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } if (document.readyState === "complete" || document.readyState === "interactive") { runInitialization(); } else { document.addEventListener("DOMContentLoaded", runInitialization); } // ----------------================ CORE FUNCTION BLOCKS ================---------------- // Timezone Madrid ticker clock function initClock() { const updateTimes = () => { const clockEl = document.getElementById("madrid-clock"); const mobileClockEl = document.getElementById("mobile-madrid-clock"); try { const formatter = new Intl.DateTimeFormat("en-US", { timeZone: "Europe/Madrid", hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }); const timeStr = formatter.format(new Date()); const displayStr = `MAD ESP ${timeStr}`; if (clockEl) clockEl.textContent = displayStr; if (mobileClockEl) mobileClockEl.textContent = displayStr; } catch (e) { const fallbackStr = `MAD ESP ${new Date().toLocaleTimeString()}`; if (clockEl) clockEl.textContent = fallbackStr; if (mobileClockEl) mobileClockEl.textContent = fallbackStr; } }; updateTimes(); setInterval(updateTimes, 1000); } // Client Vault (localStorage syncing) function getVaultInquiries(): Inquiry[] { try { const data = localStorage.getItem("cr_vault_inquiries"); if (!data) { // Seed with pre-loaded mock records localStorage.setItem("cr_vault_inquiries", JSON.stringify(initialDummyInquiries)); return initialDummyInquiries; } return JSON.parse(data); } catch (e) { console.error("Error parsing vault inquiries, resetting:", e); localStorage.setItem("cr_vault_inquiries", JSON.stringify(initialDummyInquiries)); return initialDummyInquiries; } } function saveVaultInquiry(inquiry: Inquiry) { const current = getVaultInquiries(); current.unshift(inquiry); localStorage.setItem("cr_vault_inquiries", JSON.stringify(current)); updateVaultUI(); } function deleteVaultInquiry(id: string) { const current = getVaultInquiries(); const updated = current.filter(item => item.id !== id); localStorage.setItem("cr_vault_inquiries", JSON.stringify(updated)); updateVaultUI(); } function purgeVault() { if (confirm("Are you absolutely sure you want to purge all client specifications in the local archive?")) { localStorage.setItem("cr_vault_inquiries", JSON.stringify([])); updateVaultUI(); } } function initVault() { updateVaultUI(); // Purge button trigger const purgeBtn = document.getElementById("purge-vault-btn"); if (purgeBtn) { purgeBtn.addEventListener("click", purgeVault); } } function updateVaultUI() { const list = getVaultInquiries(); const count = list.length; // Render badge counters const badgeEl = document.getElementById("vault-badge"); const mobileBadgeEl = document.getElementById("mobile-vault-badge"); if (badgeEl) { badgeEl.textContent = String(count); if (count > 0) { badgeEl.classList.remove("hidden"); } else { badgeEl.classList.add("hidden"); } } if (mobileBadgeEl) { mobileBadgeEl.textContent = String(count); if (count > 0) { mobileBadgeEl.classList.remove("hidden"); } else { mobileBadgeEl.classList.add("hidden"); } } // Update list total count string const countStatusEl = document.getElementById("inquiry-count-status"); if (countStatusEl) { countStatusEl.textContent = `${count} INQUIRY RECORD(S) RETRIEVED`; } // Re-render drawers items list const container = document.getElementById("inquiries-list-container"); if (!container) return; if (count === 0) { container.innerHTML = `

THE ARCHIVE SHELF IS EMPTY

Submit a custom strategy brief to see dynamic payloads mapped here.

`; if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } return; } container.innerHTML = list.map(item => { const cleanDate = new Date(item.timestamp).toLocaleDateString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); return `
${item.service} ID: ${item.id}

${escapeHtml(item.name)}

${escapeHtml(item.email)} — BUDBET: ${item.budget}
"${escapeHtml(item.vision)}"
TX STAMP: ${cleanDate}
`; }).join(""); // Attach button triggers for card operations inside the list inside the drawer const deleteButtons = container.querySelectorAll("[data-delete-id]"); deleteButtons.forEach(btn => { btn.addEventListener("click", (e) => { const id = btn.getAttribute("data-delete-id"); if (id) deleteVaultInquiry(id); }); }); const copyButtons = container.querySelectorAll("[data-copy-json-id]"); copyButtons.forEach(btn => { btn.addEventListener("click", (e) => { const id = btn.getAttribute("data-copy-json-id"); if (!id) return; const match = list.find(item => item.id === id); if (match) { navigator.clipboard.writeText(JSON.stringify(match, null, 2)); alert("Inquiry specifications copied to clipboard as clean JSON metadata!"); } }); }); // Re-run icons compiler if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } // ----------------================ NAV TAB SWITCHING ================---------------- function initTabTriggers() { const triggers = document.querySelectorAll("[data-tab-trigger]"); const mobileDrawer = document.getElementById("mobile-drawer"); triggers.forEach(trigger => { trigger.addEventListener("click", () => { const tabName = trigger.getAttribute("data-tab-trigger"); if (tabName) { switchTab(tabName); // Close mobile drawer on link click if (mobileDrawer && !mobileDrawer.classList.contains("hidden")) { mobileDrawer.classList.add("hidden"); const menuToggle = document.getElementById("mobile-menu-toggle"); if (menuToggle) { menuToggle.innerHTML = ``; if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } } } }); }); // Logo trigger resets to work tab const logoBtn = document.getElementById("nav-logo"); if (logoBtn) { logoBtn.addEventListener("click", () => { switchTab("work"); if (mobileDrawer && !mobileDrawer.classList.contains("hidden")) { mobileDrawer.classList.add("hidden"); const menuToggle = document.getElementById("mobile-menu-toggle"); if (menuToggle) { menuToggle.innerHTML = ``; if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } } }); } // Anchor transitions triggers const gotoTriggers = document.querySelectorAll("[data-goto-tab]"); gotoTriggers.forEach(element => { element.addEventListener("click", () => { const targetTabName = element.getAttribute("data-goto-tab"); if (targetTabName) { switchTab(targetTabName); const servicePreset = element.getAttribute("data-goto-service"); if (targetTabName === "contact" && servicePreset) { renderInquiryForm(); setTimeout(() => { const targetPill = document.querySelector(`[data-service-pill="${servicePreset}"]`) as HTMLButtonElement; if (targetPill) { targetPill.click(); } }, 100); } } }); }); } function switchTab(tabName: string) { currentTab = tabName; // Pages ids mapping const pages = { work: "page-work", profile: "page-profile", chronicle: "page-chronicle", contact: "page-contact" }; // Hide all sections, show the select one Object.entries(pages).forEach(([key, id]) => { const container = document.getElementById(id); if (container) { if (key === tabName) { container.classList.remove("hidden"); container.classList.add("fade-in-up"); window.scrollTo({ top: 0, behavior: "smooth" }); } else { container.classList.add("hidden"); container.classList.remove("fade-in-up"); } } }); // Update tabs style highlights class const allTriggers = document.querySelectorAll("[data-tab-trigger]"); allTriggers.forEach(el => { const elTab = el.getAttribute("data-tab-trigger"); if (elTab === tabName) { el.classList.add("active", "text-ink-deep", "font-bold"); el.classList.remove("text-warm-gray"); if (el.classList.contains("text-left")) { // Mobile highlight color el.classList.add("text-accent-gold"); el.classList.remove("text-ink-deep"); } } else { el.classList.remove("active", "text-ink-deep", "font-bold", "text-accent-gold"); if (el.classList.contains("text-left")) { el.classList.add("text-ink-deep"); } else { el.classList.add("text-warm-gray"); } } }); } // ----------------================ WORK MATRIX ================---------------- function initWorkPage() { const gridContainer = document.getElementById("projects-grid"); if (!gridContainer) return; renderProjects(); // Set up categories filter clicks const filters = document.querySelectorAll("#filter-controls [data-filter]"); filters.forEach(btn => { btn.addEventListener("click", () => { const filterVal = btn.getAttribute("data-filter"); if (!filterVal) return; activeFilter = filterVal; // Update styling buttons filters.forEach(f => { if (f.getAttribute("data-filter") === filterVal) { f.className = "font-mono text-[9px] sm:text-[10px] tracking-widest px-3 py-1.5 focus:outline-none transition-all bg-ink-deep text-cream-soft font-bold"; } else { f.className = "font-mono text-[9px] sm:text-[10px] tracking-widest px-3 py-1.5 focus:outline-none transition-all border border-ink-deep/10 text-warm-gray hover:text-ink-deep hover:bg-ink-deep/5"; } }); renderProjects(); }); }); // CTA button opens Musee Noir from Hero const exploreHeroBtn = document.getElementById("hero-featured-btn"); if (exploreHeroBtn) { exploreHeroBtn.addEventListener("click", () => { openModalAtIndex(0); // Musee Noir is index 0 }); } } function renderProjects() { const gridContainer = document.getElementById("projects-grid"); if (!gridContainer) return; // Filter project instances const listToRender = activeFilter === "ALL" ? projects : projects.filter(item => item.category === activeFilter); gridContainer.innerHTML = listToRender.map((proj, idx) => { // Map initial source index, so when they clicked a filtered card, we open the exact global index const globalIdx = projects.findIndex(p => p.id === proj.id); return `
${escapeHtml(proj.title)}
${proj.year} — ${proj.category}

${escapeHtml(proj.title)}

${escapeHtml(proj.tagline)}

CLIENT: ${escapeHtml(proj.client)}
`; }).join(""); // Attach click modal triggers const cardsBtns = gridContainer.querySelectorAll("[data-trigger-modal-idx]"); cardsBtns.forEach(btn => { btn.addEventListener("click", () => { const idxStr = btn.getAttribute("data-trigger-modal-idx"); if (idxStr !== null) { openModalAtIndex(parseInt(idxStr, 10)); } }); }); // Re-map lucide elements if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } // ----------------================ CAPABILITIES BENTO SLIDER ================---------------- function initProfilePage() { const container = document.getElementById("capabilities-buttons-container"); if (!container) return; const btnTriggers = container.querySelectorAll("[data-cap-segment]"); btnTriggers.forEach(btn => { btn.addEventListener("click", () => { const segName = btn.getAttribute("data-cap-segment"); if (!segName) return; activeCapSegment = segName; // Swap active highlight styles btnTriggers.forEach(b => { if (b.getAttribute("data-cap-segment") === segName) { b.className = "text-left p-5 border transition-all cursor-pointer bg-white border-ink-deep shadow-sm border-l-4 border-l-accent-gold"; } else { b.className = "text-left p-5 border transition-all cursor-pointer border-ink-deep/10 hover:bg-white/50"; } }); renderActiveCapability(); }); }); // Initial render renderActiveCapability(); } function renderActiveCapability() { const data = capabilities[activeCapSegment]; if (!data) return; const tagEl = document.getElementById("capability-tag"); const titleEl = document.getElementById("capability-title"); const descEl = document.getElementById("capability-desc"); const listEl = document.getElementById("capability-deliverables-list"); if (tagEl) { tagEl.textContent = activeCapSegment === "strategy" ? "BRAND VALUE & POSITIONING" : activeCapSegment === "design" ? "AESTHETIC ARCHITECTURE" : "ECOSYSTEM TOOLS FRAMEWORK"; } if (titleEl) titleEl.textContent = data.title; if (descEl) descEl.textContent = data.text; if (listEl) { listEl.innerHTML = data.list.map(item => `
${escapeHtml(item)}
`).join(""); } if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } // ----------------================ CHRONOLOGY ACCORDIONS ================---------------- function initChroniclePage() { const spine = document.getElementById("chronicle-timeline-spine"); if (!spine) return; // Render nodes list spine.innerHTML = chronicleItems.map((item, idx) => { // The senior role matches index 0 and starts pre-expanded const isExpanded = idx === 0; return `
    ${item.details.map(bullet => `
  • ${escapeHtml(bullet)}
    • `).join("")}
`; }).join(""); // Hook event clicks const toggleButtons = spine.querySelectorAll("[data-timeline-toggle]"); toggleButtons.forEach(btn => { btn.addEventListener("click", () => { const nodeId = btn.getAttribute("data-timeline-toggle"); if (!nodeId) return; const accContent = spine.querySelector(`[data-accordion-content="${nodeId}"]`); const iconEl = btn.querySelector("[data-lucide]"); if (accContent) { if (accContent.classList.contains("expanded")) { // Collapse accContent.classList.remove("expanded"); if (iconEl && typeof (window as any).lucide !== "undefined") { iconEl.outerHTML = ``; } } else { // Expand accContent.classList.add("expanded"); if (iconEl && typeof (window as any).lucide !== "undefined") { iconEl.outerHTML = ``; } } if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } }); }); if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } // ----------------================ PROPOSAL BRIEF FORM ================---------------- function initContactPage() { renderInquiryForm(); } function renderInquiryForm() { const panel = document.getElementById("contact-panel-content"); if (!panel) return; panel.innerHTML = `

TRANSMIT BRIEF DETAILS

Specifications will index securely to the creative vault.

`; // Restore dynamic pill settings if populated selectedService = ""; selectedBudget = ""; // Set up pills toggle logic const servicePills = panel.querySelectorAll("[data-service-pill]"); servicePills.forEach(pill => { pill.addEventListener("click", () => { const val = pill.getAttribute("data-service-pill") || ""; selectedService = val; servicePills.forEach(p => { if (p.getAttribute("data-service-pill") === val) { p.className = "font-mono text-[9px] tracking-wider px-3.5 py-2.5 bg-accent-gold text-ink-deep font-bold border border-accent-gold focus:outline-none cursor-pointer"; } else { p.className = "font-mono text-[9px] tracking-wider px-3.5 py-2.5 border border-ink-deep/15 text-warm-gray hover:text-ink-deep hover:bg-ink-deep/5 transition-all focus:outline-none cursor-pointer"; } }); }); }); const budgetPills = panel.querySelectorAll("[data-budget-pill]"); budgetPills.forEach(pill => { pill.addEventListener("click", () => { const val = pill.getAttribute("data-budget-pill") || ""; selectedBudget = val; budgetPills.forEach(p => { if (p.getAttribute("data-budget-pill") === val) { p.className = "font-mono text-[9px] tracking-wider py-2.5 bg-accent-gold text-ink-deep font-bold border border-accent-gold focus:outline-none cursor-pointer text-center"; } else { p.className = "font-mono text-[9px] tracking-wider py-2.5 border border-ink-deep/15 text-warm-gray hover:text-ink-deep hover:bg-ink-deep/5 transition-all focus:outline-none cursor-pointer text-center"; } }); }); }); // Handle Form submit const form = document.getElementById("proposal-brief-form"); if (form) { form.addEventListener("submit", (e) => { e.preventDefault(); if (!selectedService) { alert("Please select a target Service Type first."); return; } if (!selectedBudget) { alert("Please select your budget Investment Range preference."); return; } const nameInput = document.getElementById("brief-name") as HTMLInputElement; const emailInput = document.getElementById("brief-email") as HTMLInputElement; const visionInput = document.getElementById("brief-vision") as HTMLTextAreaElement; // Enter loading state renderLoadingState(); setTimeout(() => { // Secure random payload tx ID const randomHex = Math.floor(Math.random() * 900) + 100; const randomSuffix = Math.random().toString(36).substring(2, 6).toUpperCase(); const txID = `CR-${randomHex}-${randomSuffix}`; const payload: Inquiry = { id: txID, name: nameInput.value, email: emailInput.value, service: selectedService, budget: selectedBudget, vision: visionInput.value, timestamp: new Date().toISOString() }; // Sync to cloud persistence simulation (localStorage logs) saveVaultInquiry(payload); // Render success invoice ticket renderSuccessTicket(payload); }, 1500); }); } if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } // Interactive Loading animation logic function renderLoadingState() { const panel = document.getElementById("contact-panel-content"); if (!panel) return; panel.innerHTML = `

TRANSMITTING PROTOCOLS

SECURING LOCAL TRANSMISSION TUNNEL...

`; if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } // Success ticket generator receipt function renderSuccessTicket(inquiry: Inquiry) { const panel = document.getElementById("contact-panel-content"); if (!panel) return; const fmtDate = new Date(inquiry.timestamp).toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" }); const mailSubject = encodeURIComponent(`Creative Brief Authorization [${inquiry.id}]`); const mailBody = encodeURIComponent( `Hello Carlota Rezola,\n\n` + `I have transmitted my creative specification brief through your Strategic Portal.\n\n` + `Here is my unique transmission key: ${inquiry.id}\n` + `Service Requested: ${inquiry.service}\n` + `Investment Category: ${inquiry.budget}\n` + `Identity/Brand: ${inquiry.name}\n\n` + `Creative Vision Outline:\n"${inquiry.vision}"\n\n` + `Let's schedule a session to iterate.\n\n` + `Best regards,\n${inquiry.name}\n${inquiry.email}` ); panel.innerHTML = `
SECURE TRANSACTION SLIP

TRANSMISSION VERIFIED

${inquiry.id}

TX VERIFIED STATUS

TIMESTAMP
${fmtDate}
IDENTITY BRAND
${escapeHtml(inquiry.name)}
TARGET MAIL
${escapeHtml(inquiry.email)}
SERVICE LEVEL
${inquiry.service}
INVEST PROFILE
${inquiry.budget}
RAW BRIEF EXTRACT STATEMENT:
"${escapeHtml(inquiry.vision)}"
SEAMLESS MAIL DEPLOY
`; // Bind actions inside ticket receipt const copyBtn = document.getElementById("success-copy-json-btn"); if (copyBtn) { copyBtn.addEventListener("click", () => { navigator.clipboard.writeText(JSON.stringify(inquiry, null, 2)); alert("Inquiry metadata synced copied to clipboard perfectly!"); }); } const resetBtn = document.getElementById("success-reset-btn"); if (resetBtn) { resetBtn.addEventListener("click", () => { renderInquiryForm(); }); } if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } // ----------------================ CASES DOSSIER MODAL ================---------------- function initModal() { const modal = document.getElementById("project-modal"); const closeBtn = document.getElementById("modal-close-btn"); const backdrop = document.getElementById("modal-backdrop"); const prevBtn = document.getElementById("modal-prev-btn"); const nextBtn = document.getElementById("modal-next-btn"); const inquireCta = document.getElementById("modal-inquire-cta"); if (!modal) return; const closeModal = () => { modal.classList.add("hidden"); document.body.style.overflow = "auto"; }; if (closeBtn) closeBtn.addEventListener("click", closeModal); if (backdrop) backdrop.addEventListener("click", closeModal); // Keyboard navigation document.addEventListener("keydown", (e) => { if (modal.classList.contains("hidden")) return; if (e.key === "Escape") closeModal(); if (e.key === "ArrowLeft") handlePrevProject(); if (e.key === "ArrowRight") handleNextProject(); }); if (prevBtn) prevBtn.addEventListener("click", handlePrevProject); if (nextBtn) nextBtn.addEventListener("click", handleNextProject); if (inquireCta) { inquireCta.addEventListener("click", () => { closeModal(); // Go to contact tab and populate brief service with modal category switchTab("contact"); // Auto pill preset select const proj = projects[currentModalProjectIndex]; renderInquiryForm(); // Re-render first setTimeout(() => { const targetPill = document.querySelector(`[data-service-pill="${proj.category}"]`) as HTMLButtonElement; if (targetPill) { targetPill.click(); // Focus identity input const nameInput = document.getElementById("brief-name"); if (nameInput) nameInput.focus(); } }, 100); }); } } function openModalAtIndex(idx: number) { const modal = document.getElementById("project-modal"); if (!modal) return; currentModalProjectIndex = idx; const proj = projects[idx]; const imgEl = document.getElementById("modal-image") as HTMLImageElement; const titleEl = document.getElementById("modal-title"); const taglineEl = document.getElementById("modal-tagline"); const categoryEl = document.getElementById("modal-category"); const clientEl = document.getElementById("modal-client"); const yearEl = document.getElementById("modal-year"); const durationEl = document.getElementById("modal-duration"); const overviewEl = document.getElementById("modal-overview"); const servicesContainer = document.getElementById("modal-services"); if (imgEl) imgEl.src = proj.imageUrl; if (titleEl) titleEl.textContent = proj.title; if (taglineEl) taglineEl.textContent = `"${proj.tagline}"`; if (categoryEl) categoryEl.textContent = proj.category; if (clientEl) clientEl.textContent = proj.client; if (yearEl) yearEl.textContent = String(proj.year); if (durationEl) durationEl.textContent = proj.duration; if (overviewEl) overviewEl.textContent = proj.overview; if (servicesContainer) { servicesContainer.innerHTML = proj.services.map(srv => ` ${escapeHtml(srv)} `).join(""); } modal.classList.remove("hidden"); document.body.style.overflow = "hidden"; if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } function handlePrevProject() { const total = projects.length; const prevIdx = (currentModalProjectIndex - 1 + total) % total; openModalAtIndex(prevIdx); } function handleNextProject() { const total = projects.length; const nextIdx = (currentModalProjectIndex + 1) % total; openModalAtIndex(nextIdx); } // ----------------================ CLIENT DB CONSOLE DRAWER ================---------------- function initDrawer() { const drawer = document.getElementById("inquiry-drawer"); const openBtns = [ document.getElementById("open-vault-btn"), document.getElementById("mobile-vault-btn"), document.getElementById("mobile-drawer-vault-btn") ]; const closeBtn = document.getElementById("inquiry-drawer-close-btn"); const backdrop = document.getElementById("inquiry-drawer-backdrop"); const openDrawer = () => { if (drawer) { drawer.classList.remove("hidden"); document.body.style.overflow = "hidden"; updateVaultUI(); // Also close mobile menu drawer if open const mobileDrawer = document.getElementById("mobile-drawer"); if (mobileDrawer && !mobileDrawer.classList.contains("hidden")) { mobileDrawer.classList.add("hidden"); const menuToggle = document.getElementById("mobile-menu-toggle"); if (menuToggle) { menuToggle.innerHTML = ``; if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } } } } }; const closeDrawer = () => { if (drawer) { drawer.classList.add("hidden"); document.body.style.overflow = "auto"; } }; openBtns.forEach(btn => { if (btn) btn.addEventListener("click", openDrawer); }); if (closeBtn) closeBtn.addEventListener("click", closeDrawer); if (backdrop) backdrop.addEventListener("click", closeDrawer); // Mobile hamburger toggling logic const menuToggle = document.getElementById("mobile-menu-toggle"); const mobileDrawer = document.getElementById("mobile-drawer"); if (menuToggle && mobileDrawer) { menuToggle.addEventListener("click", () => { if (mobileDrawer.classList.contains("hidden")) { mobileDrawer.classList.remove("hidden"); // Swap menu icon to x menuToggle.innerHTML = ``; } else { mobileDrawer.classList.add("hidden"); menuToggle.innerHTML = ``; } if (typeof (window as any).lucide !== "undefined") { (window as any).lucide.createIcons(); } }); } // Footer copy direct mail click trigger const copyMailBtn = document.getElementById("footer-copy-email-btn"); const mailDisplayEl = document.getElementById("footer-email-text"); const copyMailIcon = document.getElementById("footer-copy-icon"); if (copyMailBtn && mailDisplayEl) { copyMailBtn.addEventListener("click", () => { navigator.clipboard.writeText("hello@carlotarezola.com"); const prevString = mailDisplayEl.textContent; mailDisplayEl.textContent = "COPIED TO CLIPBOARD!"; mailDisplayEl.classList.add("text-accent-gold"); if (copyMailIcon && typeof (window as any).lucide !== "undefined") { copyMailIcon.outerHTML = ``; (window as any).lucide.createIcons(); } setTimeout(() => { mailDisplayEl.textContent = prevString; mailDisplayEl.classList.remove("text-accent-gold"); const reMappedIcon = document.getElementById("footer-copy-icon"); if (reMappedIcon && typeof (window as any).lucide !== "undefined") { reMappedIcon.outerHTML = ``; (window as any).lucide.createIcons(); } }, 2000); }); } } // ----------------================ EXTRA UTILS ================---------------- function escapeHtml(str: string): string { if (!str) return ""; return str .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); }