<?xml version="1.0" encoding="UTF-8"?>
<mvc:View
    controllerName="homepage.controller.pages.Marketing"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:core="sap.ui.core"
    displayBlock="true"
    xmlns:grid="sap.ui.layout.cssgrid">

    <!-- ══════════════════════════════════════════════════════
         Marketing Page — nestedAppContainer 안에 렌더됩니다.
         Layout.view.xml의 공용 헤더/챗봇은 그대로 유지됩니다.
    ══════════════════════════════════════════════════════════ -->
    <Page id="marketingPage" showHeader="true" class="mkt-page">

        <!-- HEADER -->
        <customHeader>
            <Bar class="mkt-header">
                <contentMiddle>
                    <HBox class="mkt-header-inner" width="100%" alignItems="Center" justifyContent="SpaceBetween">
                        
                        <HBox class="mkt-logo" alignItems="Center">
                            <Image class="logo" src="/image/logo_light.png" width="160px" press="onGoToMain"/>
                        </HBox>

                        <HBox id="mkt-globalHeaderContainer" class="globalHeaderContainer">

                            <HBox class="mkt-header-right-actions " alignItems="Center">
                                <HBox class="mkt-nav globalHeadermenu" alignItems="Center">
                                    <Button text="Core Value" class="mkt-nav-btn" type="Transparent" press="onNavToSection">
                                        <customData><core:CustomData key="targetId" value="AI-capabilities-zone"/></customData>
                                    </Button>
                                    <Button text="Service" class="mkt-nav-btn" type="Transparent" press="onNavToSection">
                                        <customData><core:CustomData key="targetId" value="optimized-zone"/></customData>
                                    </Button>
                                    <Button text="Engine System" class="mkt-nav-btn" type="Transparent" press="onNavToSection">
                                        <customData><core:CustomData key="targetId" value="process-zone"/></customData>
                                    </Button>
                                    <Button text="Why SPRONEXT" class="mkt-nav-btn" type="Transparent" press="onNavToSection">
                                        <customData><core:CustomData key="targetId" value="mkt-why-zone"/></customData>
                                    </Button>

                                    <Button text="Project consultation" class="mkt-cta-btn" type="Emphasized" press="onNavToSection">
                                        <customData><core:CustomData key="targetId" value="mkt-footer"/></customData>
                                    </Button>
                                </HBox>
                                
                            </HBox>
                        </HBox>

                        <VBox id="mkt-customHamburgerWrapper" class="customHamburgerWrapper" tooltip="메뉴 열기">
                            <VBox class="hamburgerLine lineTop" />
                            <VBox class="hamburgerLine lineMiddle" />
                            <VBox class="hamburgerLine lineBottom" />
                        </VBox>

                    </HBox>
                </contentMiddle>
            </Bar>
        </customHeader>

        <content>
            <ScrollContainer
                height="100%"
                width="100%"
                vertical="true"
                horizontal="false">

                <VBox class="mkt-wrap">


<!-- HERO -->
                    <VBox class="mkt-hero mkt-section">

                        <!-- 텍스트 영역 (전체폭, 좌측 정렬) -->
                        <VBox class="mkt-hero-title">
                            <Text text="NEXT MARKETING" class="mkt-hero-pill"/>

                            <FormattedText
                                id="mkt-html"
                                class="mkt-maintitle"
                                htmlText="Beyond the Limits of Marketing with &lt;strong&gt;AX Optimization&lt;/strong&gt;,
                                &lt;br /&gt;
                                Maximizing Your &lt;strong&gt;Brand's Performance&lt;/strong&gt;." />

                            <VBox class="mkt-hero-desc">
                                <Text text="From strategy consulting to data architecture, ad operations, content automation, and performance analysis." class="mkt-desc-text" wrapping="true"/>
                                <Text text="We combine fully AI/AX-analyzed data on your brand's growth journey with creative to deliver the best possible results." class="mkt-desc-text" wrapping="true"/>
                            </VBox>
                        </VBox>

                        <!-- 메인 이미지 + 겹친 카드 -->
                        <VBox class="mkt-hero-media">
                            <!-- 배경 이미지 -->
                            <VBox class="mkt-hero-img">
                                <Image src="/image/NEXT_M_04_3.jpg" width="100%" densityAware="false"/>
                            </VBox>

                            <!-- 좌측 하단 겹친 AI/AX 카드 -->
                            <VBox class="mkt-hero-card mkt-hero-card-overlay">
                                <Text text="AI/AX POWERED" class="mkt-hero-card-tag"/>
                                <Text text="Strategy + Execution" class="mkt-hero-card-title"/>
                                <Text text="We apply tailored AI/AX solutions across the entire marketing process — from strategy and creative to media mix and final decision-making."
                                      class="mkt-hero-card-desc" wrapping="true"/>

                                <HBox class="mkt-hero-chips" wrap="Wrap" alignItems="Center">
                                    <Text text="Strategy"  class="mkt-hero-chip"/>
                                    <Text text="Data"      class="mkt-hero-chip"/>
                                    <Text text="Creative"  class="mkt-hero-chip"/>
                                    <Text text="Media"     class="mkt-hero-chip"/>
                                    <Text text="Analytics" class="mkt-hero-chip"/>
                                </HBox>
                            </VBox>
                        </VBox>


                    </VBox>


                    <core:HTML content="&lt;hr class='mkt-divider'/&gt;"/>


                    <!-- ─────────────────────────────────────
                         HIGHLIGHTS (통계 4개)
                    ───────────────────────────────────────── -->
                    

                        
                        <FlexBox class="mkt-stats mkt-section mkt-scroll-section" 
                            direction="Row" 
                            wrap="Wrap" 
                            justifyContent="SpaceBetween" 
                            width="100%">
                        
                        <VBox class="mkt-stat-item reveal-item" alignItems="Center">
                            <Text text="24/7" class="mkt-stat-num"/>
                            <Text text="Performance Monitoring" class="mkt-stat-label"/>
                        </VBox>

                        <VBox class="mkt-stat-item reveal-item" alignItems="Center">
                            <Text text="4X" class="mkt-stat-num"/>
                            <Text text="Faster Material Testing" class="mkt-stat-label"/>
                        </VBox>

                        <VBox class="mkt-stat-item reveal-item" alignItems="Center">
                            <Text text="1 Loop" class="mkt-stat-num"/>
                            <Text text="From Consulting to Execution" class="mkt-stat-label"/>
                        </VBox>

                        <VBox class="mkt-stat-item reveal-item" alignItems="Center">
                            <Text text="Data First" class="mkt-stat-num"/>
                            <Text text="Unified Decision-making" class="mkt-stat-label"/>
                        </VBox>
                        
                    </FlexBox>

                    <core:HTML content="&lt;hr class='mkt-divider'/&gt;"/>


                    <!-- EXECUTIVE SUMMARY -->
                    <HBox class="mkt-transform mkt-section mkt-scroll-section" alignItems="Center">
                        <VBox class="mkt-transform-left reveal-item">
                            <Text text="EXECUTIVE SUMMARY" class="mkt-tag"/>
                            <Text text="SPRONEXT Is Not Just Another Tech Company."
                                  class="mkt-transform-title" wrapping="true"/>
                        </VBox>
                        <VBox class="mkt-transform-right reveal-item">
                            <FormattedText class="mkt-transform-lead"
                                htmlText="We are a &lt;strong&gt;full-service marketing agency&lt;/strong&gt; that optimizes your brand's core marketing performance." />
                            <Text text="Moving beyond reliance on intuition and past experience alone, we effectively leverage AI/AX (Artificial Intelligence &amp; AI Transformation) solutions to maximize marketing precision and minimize risk."
                                  class="mkt-transform-desc" wrapping="true"/>
                            <Text text="From strategy and creative to media mix and final decision-making, we apply tailored AI/AX solutions across the entire marketing process to put your business on the fastest, most reliable path to growth."
                                  class="mkt-transform-desc" wrapping="true"/>
                        </VBox>
                    </HBox>

                    <core:HTML content="&lt;hr class='mkt-divider'/&gt;"/>
                    

                    
                    <!-- ─────────────────────────────────────
                         CORE VALUE & IDENTITY
                    ───────────────────────────────────────── -->
                    <VBox id="AI-capabilities-zone" class="mkt-core mkt-core-centered mkt-section mkt-scroll-section">
                        <Text text="CORE VALUE &amp; IDENTITY" class="mkt-tag reveal-item"/>
                        <Text text="Core Value &amp; Identity" class="mkt-section-title reveal-item"/>

                        <l:Grid defaultSpan="XL4 L4 M6 S12" class="mkt-cards-grid">
                            <l:content>

                                <VBox class="mkt-ai-card reveal-item delay-2">
                                    <Text text="🎯" class="mkt-card-icon"/>
                                    <Text text="PERFORMANCE-DRIVEN" class="mkt-card-num"/>
                                    <Text text="Performance-Driven" class="mkt-card-title"/>
                                    <Text text="Every solution and execution serves one purpose — optimizing business performance and driving sustainable growth."
                                          class="mkt-card-desc" wrapping="true"/>
                                </VBox>

                                <VBox class="mkt-ai-card mkt-ai-card-featured reveal-item delay-2">
                                    <Text text="🤖" class="mkt-card-icon"/>
                                    <Text text="AI/AX POWERED" class="mkt-card-num"/>
                                    <Text text="Technology-Driven Experience" class="mkt-card-title"/>
                                    <Text text="AI is not the goal but a powerful tool. By integrating AI/AX solutions into the marketing process, we maximize operational efficiency and deliver a higher level of brand experience to customers."
                                          class="mkt-card-desc" wrapping="true"/>
                                </VBox>

                                <VBox class="mkt-ai-card reveal-item delay-2">
                                    <Text text="🔄" class="mkt-card-icon"/>
                                    <Text text="END-TO-END OPTIMIZATION" class="mkt-card-num"/>
                                    <Text text="End-to-End Optimization" class="mkt-card-title"/>
                                    <Text text="From market analysis and content creation to media execution and performance analysis, we connect fragmented marketing into one organic growth cycle."
                                          class="mkt-card-desc" wrapping="true"/>
                                </VBox>

                            </l:content>
                        </l:Grid>
                    </VBox>


                    <core:HTML content="&lt;hr class='mkt-divider'/&gt;"/>

                    <!-- ─────────────────────────────────────
                         OUR SERVICES & SOLUTIONS
                    ───────────────────────────────────────── -->
                    <VBox id="optimized-zone" class="mkt-services mkt-section mkt-scroll-section">
                        <Text text="OUR SERVICES &amp; SOLUTIONS" class="mkt-tag mkt-services-tag reveal-item"/>
                        <Text text="Our Services &amp; Solutions" class="mkt-section-title mkt-services-titlemain reveal-item"/>
                        <Text text="SPRONEXT provides four core services that apply AI/AX solutions across every area of marketing to drive brand growth."
                              class="mkt-services-subtitle reveal-item" wrapping="true"/>

                        <!-- 01 -->
                        <HBox class="mkt-service-row reveal-item">
                            <Text text="01" class="mkt-service-num"/>
                            <Text text="📊" class="mkt-service-icon"/>
                            <VBox class="mkt-service-body">
                                <Text text="STRATEGIC CONSULTING &amp; INSIGHT" class="mkt-service-eyebrow"/>
                                <Text text="Strategy &amp; Market Consulting" class="mkt-service-title"/>
                                <Text text="Drawing a precise growth map for your brand based on rigorous data analysis." class="mkt-service-lead" wrapping="true"/>
                                <VBox class="mkt-service-aibox">
                                    <Text text="AI/AX APPLIED" class="mkt-service-aibadge"/>
                                    <Text text="Leveraging trend analysis and consumer behavior data solutions, we extract objective market opportunities and target insights free from human bias. We monitor market shifts in real time to build proactive defensive and offensive strategies."
                                          class="mkt-service-aitext" wrapping="true"/>
                                </VBox>
                                <HBox class="mkt-service-chips" wrap="Wrap">
                                    <Text text="Market Analysis" class="mkt-service-chip"/>
                                    <Text text="Consumer Behavior" class="mkt-service-chip"/>
                                    <Text text="Competitive Intelligence" class="mkt-service-chip"/>
                                    <Text text="Growth Strategy" class="mkt-service-chip"/>
                                </HBox>
                            </VBox>
                        </HBox>

                        <!-- 02 (회색 배경) -->
                        <HBox class="mkt-service-row mkt-service-row-alt reveal-item">
                            <Text text="02" class="mkt-service-num"/>
                            <Text text="🎨" class="mkt-service-icon"/>
                            <VBox class="mkt-service-body">
                                <Text text="CREATIVE &amp; CONTENT OPTIMIZATION" class="mkt-service-eyebrow"/>
                                <Text text="Creative Solutions" class="mkt-service-title"/>
                                <Text text="Designing the optimal content that moves your target audience." class="mkt-service-lead" wrapping="true"/>
                                <VBox class="mkt-service-aibox">
                                    <Text text="AI/AX APPLIED" class="mkt-service-aibadge"/>
                                    <Text text="Beyond simply attractive design, we analyze and predict high-conversion content structures based on accumulated performance data. Through Gen-AI solutions, we rapidly generate diverse creative drafts and personalized messages for each target to maximize content efficiency."
                                          class="mkt-service-aitext" wrapping="true"/>
                                </VBox>
                                <HBox class="mkt-service-chips" wrap="Wrap">
                                    <Text text="Gen-AI Creative" class="mkt-service-chip"/>
                                    <Text text="Content Automation" class="mkt-service-chip"/>
                                    <Text text="Personalized Messaging" class="mkt-service-chip"/>
                                    <Text text="A/B Testing" class="mkt-service-chip"/>
                                </HBox>
                            </VBox>
                        </HBox>

                        <!-- 03 -->
                        <HBox class="mkt-service-row reveal-item">
                            <Text text="03" class="mkt-service-num"/>
                            <Text text="📡" class="mkt-service-icon"/>
                            <VBox class="mkt-service-body">
                                <Text text="MEDIA &amp; PERFORMANCE MARKETING" class="mkt-service-eyebrow"/>
                                <Text text="Media &amp; Ad Operations" class="mkt-service-title"/>
                                <Text text="Ultra-precise media mix and performance optimization with zero budget waste." class="mkt-service-lead" wrapping="true"/>
                                <VBox class="mkt-service-aibox">
                                    <Text text="AI/AX APPLIED" class="mkt-service-aibadge"/>
                                    <Text text="In a complex media environment, we deploy ad automation solutions and real-time performance tracking systems. Budget allocation, bidding strategy, and targeting are auto-adjusted in real time to maximize ROI."
                                          class="mkt-service-aitext" wrapping="true"/>
                                </VBox>
                                <HBox class="mkt-service-chips" wrap="Wrap">
                                    <Text text="Ad Automation" class="mkt-service-chip"/>
                                    <Text text="Real-Time Bidding" class="mkt-service-chip"/>
                                    <Text text="ROI Optimization" class="mkt-service-chip"/>
                                    <Text text="Multi-Channel Operations" class="mkt-service-chip"/>
                                </HBox>
                            </VBox>
                        </HBox>

                        <!-- 04 (회색 배경) -->
                        <HBox class="mkt-service-row mkt-service-row-alt reveal-item">
                            <Text text="04" class="mkt-service-num"/>
                            <Text text="🧠" class="mkt-service-icon"/>
                            <VBox class="mkt-service-body">
                                <Text text="DATA DRIVEN DECISION" class="mkt-service-eyebrow"/>
                                <Text text="Data &amp; Decision-Making Systems" class="mkt-service-title"/>
                                <Text text="Failure-free decisions based on data, not intuition." class="mkt-service-lead" wrapping="true"/>
                                <VBox class="mkt-service-aibox">
                                    <Text text="AI/AX APPLIED" class="mkt-service-aibadge"/>
                                    <Text text="We visualize marketing results as dashboards and, through predictive model solutions, simulate the performance of future marketing campaigns. We provide an AX (AI Transformation) environment where marketers can make the fastest, most accurate business decisions."
                                          class="mkt-service-aitext" wrapping="true"/>
                                </VBox>
                                <HBox class="mkt-service-chips" wrap="Wrap">
                                    <Text text="Performance Dashboard" class="mkt-service-chip"/>
                                    <Text text="Predictive Modeling" class="mkt-service-chip"/>
                                    <Text text="Scenario Simulation" class="mkt-service-chip"/>
                                    <Text text="AX Environment" class="mkt-service-chip"/>
                                </HBox>
                            </VBox>
                        </HBox>
                    </VBox>

                    <core:HTML content="&lt;hr class='mkt-divider'/&gt;"/>

                    <!-- ─────────────────────────────────────
                         THE SPRONEXT ENGINE
                    ───────────────────────────────────────── -->
                    <VBox id="process-zone" class="mkt-engine mkt-section mkt-scroll-section">
                        <Text text="THE SPRONEXT ENGINE" class="mkt-tag mkt-engine-tag reveal-item"/>
                        <Text text="The Integrated Performance Engine" class="mkt-section-title mkt-engine-titlemain reveal-item"/>
                        <Text text="Four integrated performance engines, developed in-house by SPRONEXT to maximize efficiency and minimize risk across the entire marketing process."
                              class="mkt-engine-subtitle reveal-item" wrapping="true"/>

                    <!-- 2x2 그리드(카드 사이 화살표 셀 포함) + 중앙 허브 -->
                        <VBox class="mkt-engine-grid-wrap reveal-item delay-2">

                            <!-- 중앙 허브 (절대배치) -->
                            <VBox class="mkt-engine-hub" alignItems="Center" justifyContent="Center">
                                <Text text="🔄" class="mkt-engine-hub-icon"/>
                                <Text text="SPRONEXT" class="mkt-engine-hub-text"/>
                                <Text text="ENGINE" class="mkt-engine-hub-text"/>
                            </VBox>

                            <!-- 상단 행: 카드1 → 카드2 -->
                            <VBox class="mkt-engine-card">
                                <Text text="🔍" class="mkt-engine-icon"/>
                                <Text text="Market Insight Engine" class="mkt-engine-eyebrow"/>
                                <Text text="Insight Engine" class="mkt-engine-title"/>
                                <Text text="A solution that analyzes vast structured and unstructured data to uncover hidden consumer needs and market trends."
                                      class="mkt-engine-desc" wrapping="true"/>
                            </VBox>
                            <Text text="→" class="mkt-engine-arrow mkt-engine-arrow-h"/>
                            <VBox class="mkt-engine-card">
                                <Text text="✨" class="mkt-engine-icon"/>
                                <Text text="Creative Solution Engine" class="mkt-engine-eyebrow"/>
                                <Text text="Creative Engine" class="mkt-engine-title"/>
                                <Text text="A solution that generates ad assets in various formats at ultra-high speed and pre-filters visuals and copy with high performance probability."
                                      class="mkt-engine-desc" wrapping="true"/>
                            </VBox>

                            <!-- 중간 행: ↓ (빈칸) ↓ -->
                            <Text text="↓" class="mkt-engine-arrow mkt-engine-arrow-v"/>
                            <VBox class="mkt-engine-spacer"/>
                            <Text text="↓" class="mkt-engine-arrow mkt-engine-arrow-v"/>

                            <!-- 하단 행: 카드3 → 카드4 -->
                            <VBox class="mkt-engine-card">
                                <Text text="📡" class="mkt-engine-icon"/>
                                <Text text="Media Optimize Engine" class="mkt-engine-eyebrow"/>
                                <Text text="Media Engine" class="mkt-engine-title"/>
                                <Text text="An automation solution that compares and analyzes the efficiency of diverse digital media in real time and dynamically reallocates budget."
                                      class="mkt-engine-desc" wrapping="true"/>
                            </VBox>
                            <Text text="→" class="mkt-engine-arrow mkt-engine-arrow-h"/>
                            <VBox class="mkt-engine-card">
                                <Text text="🧠" class="mkt-engine-icon"/>
                                <Text text="Future Decision Engine" class="mkt-engine-eyebrow"/>
                                <Text text="Decision Engine" class="mkt-engine-title"/>
                                <Text text="A simulation solution that predicts future marketing performance based on past performance data and recommends the optimal business scenario."
                                      class="mkt-engine-desc" wrapping="true"/>
                            </VBox>
                        </VBox>

<!-- 하단 프로세스 플로우 -->
                        <HBox class="mkt-engine-flow reveal-item delay-3" wrap="Wrap" alignItems="Center" justifyContent="Center">
                            <HBox class="mkt-engine-flow-cell" alignItems="Center">
                                <Text text="●" class="mkt-engine-flow-dot"/>
                                <Text text="Market Analysis" class="mkt-engine-flow-item"/>
                            </HBox>
                            <Text text="→" class="mkt-engine-flow-sep"/>
                            <HBox class="mkt-engine-flow-cell" alignItems="Center">
                                <Text text="●" class="mkt-engine-flow-dot"/>
                                <Text text="Creative Generation" class="mkt-engine-flow-item"/>
                            </HBox>
                            <Text text="→" class="mkt-engine-flow-sep"/>
                            <HBox class="mkt-engine-flow-cell" alignItems="Center">
                                <Text text="●" class="mkt-engine-flow-dot"/>
                                <Text text="Media Execution" class="mkt-engine-flow-item"/>
                            </HBox>
                            <Text text="→" class="mkt-engine-flow-sep"/>
                            <HBox class="mkt-engine-flow-cell" alignItems="Center">
                                <Text text="●" class="mkt-engine-flow-dot"/>
                                <Text text="Performance Prediction" class="mkt-engine-flow-item"/>
                            </HBox>
                            <Text text="→" class="mkt-engine-flow-sep"/>
                            <HBox class="mkt-engine-flow-cell" alignItems="Center">
                                <Text text="●" class="mkt-engine-flow-dot"/>
                                <Text text="Re-optimization" class="mkt-engine-flow-item mkt-engine-flow-item-last"/>
                            </HBox>
                        </HBox>
                    </VBox>


                    <core:HTML content="&lt;hr class='mkt-divider'/&gt;"/>

                    <!-- ─────────────────────────────────────
                         WHY SPRONEXT?
                    ───────────────────────────────────────── -->
                    <VBox id="mkt-why-zone" class="mkt-why mkt-section mkt-scroll-section">
                        <Text text="WHY SPRONEXT?" class="mkt-tag mkt-why-tag reveal-item"/>
                        <Text text="Our Differentiators" class="mkt-section-title mkt-why-titlemain reveal-item"/>
                        <Text text="We prove ourselves through business results, not technology."
                              class="mkt-why-subtitle reveal-item" wrapping="true"/>

                        <l:Grid defaultSpan="XL4 L4 M6 S12" class="mkt-cards-grid">
                            <l:content>

                                <VBox class="mkt-why-card reveal-item delay-2">
                                    <Text text="01" class="mkt-why-num"/>
                                    <Text text="💼" class="mkt-why-icon"/>
                                    <Text text="Business Value Over Technology" class="mkt-why-title"/>                                    <FormattedText class="mkt-why-desc"
                                        htmlText="We don't boast about AI technology itself. We prove, through results, how that technology contributes to our clients' &lt;strong&gt;revenue growth&lt;/strong&gt; and &lt;strong&gt;customer acquisition&lt;/strong&gt;." />
                                </VBox>

                                <VBox class="mkt-why-card reveal-item delay-2">
                                    <Text text="02" class="mkt-why-num"/>
                                    <Text text="⚡" class="mkt-why-icon"/>
                                    <Text text="Delivering Real AX Experience" class="mkt-why-title"/>
                                    <FormattedText class="mkt-why-desc"
                                        htmlText="We innovate the marketing process itself so that complex data and solutions can be used in the most intuitive and convenient way in our clients' day-to-day work." />
                                </VBox>

                                <VBox class="mkt-why-card reveal-item delay-2">
                                    <Text text="03" class="mkt-why-num"/>
                                    <Text text="🔗" class="mkt-why-icon"/>
                                    <Text text="One-Stop Growth Partner" class="mkt-why-title"/>
                                    <FormattedText class="mkt-why-desc"
                                        htmlText="Planning, production, media, and analysis operate within one connected solution ecosystem — not in silos — enabling organic and rapid response." />
                                </VBox>

                            </l:content>
                        </l:Grid>
                    </VBox>


                    <core:HTML content="&lt;hr class='mkt-divider'/&gt;"/>

                    <!-- ─────────────────────────────────────
                         HOW WE WORK
                    ───────────────────────────────────────── -->
                    <VBox class="mkt-howwork mkt-section mkt-scroll-section">
                        <Text text="HOW WE WORK" class="mkt-tag mkt-howwork-tag reveal-item"/>
                        <Text text="Execution-Focused Process" class="mkt-section-title mkt-howwork-titlemain reveal-item"/>
                        <Text text="A four-stage performance cycle, from diagnosis to scaling."
                              class="mkt-howwork-subtitle reveal-item" wrapping="true"/>

                        <!-- 카드 → 카드 → 카드 → 카드 (7열 그리드) -->
                        <VBox class="mkt-howwork-grid reveal-item delay-2">

                            <VBox class="mkt-howwork-card">
                                <Text text="01" class="mkt-howwork-num"/>
                                <Text text="DIAGNOSE" class="mkt-howwork-eyebrow"/>
                                <Text text="Current State Diagnosis" class="mkt-howwork-title"/>
                                <Text text="We review the flow of data, campaigns, content, and reporting to find room for improvement."
                                      class="mkt-howwork-desc" wrapping="true"/>
                            </VBox>
                            <Text text="→" class="mkt-howwork-arrow"/>

                            <VBox class="mkt-howwork-card">
                                <Text text="02" class="mkt-howwork-num"/>
                                <Text text="DESIGN" class="mkt-howwork-eyebrow"/>
                                <Text text="AI Applied Design" class="mkt-howwork-title"/>
                                <Text text="We define automation scope and performance goals by task, along with the required tools and data structure."
                                      class="mkt-howwork-desc" wrapping="true"/>
                            </VBox>
                            <Text text="→" class="mkt-howwork-arrow"/>

                            <VBox class="mkt-howwork-card">
                                <Text text="03" class="mkt-howwork-num"/>
                                <Text text="OPERATE" class="mkt-howwork-eyebrow"/>
                                <Text text="Campaign Execution" class="mkt-howwork-title"/>
                                <Text text="We apply AI-based experiments and improvement loops to ad, content, CRM, and commerce operations."
                                      class="mkt-howwork-desc" wrapping="true"/>
                            </VBox>
                            <Text text="→" class="mkt-howwork-arrow"/>

                            <VBox class="mkt-howwork-card mkt-howwork-card-featured">
                                <Text text="04" class="mkt-howwork-num"/>
                                <Text text="SCALE" class="mkt-howwork-eyebrow"/>
                                <Text text="Performance Scaling" class="mkt-howwork-title"/>
                                <Text text="We expand the proven structure to other channels, product categories, and customer segments."
                                      class="mkt-howwork-desc" wrapping="true"/>
                            </VBox>

                        </VBox>
                    </VBox>



                    <core:HTML content="&lt;hr class='mkt-divider'/&gt;"/>

                                        
                                        
                    <!-- ─────────────────────────────────────
                         CONTACT US & FOOTER
                    ───────────────────────────────────────── -->
                                        <!-- control bar -->
                    <VBox id="marketing-control-bar" class="control-bar">
                        <!-- 
                            컨트롤 바 사용법 
                            1. 해당 VBox 복사해서 가져갈 곳에 붙여넣기 (부모 박스의 position relative를 따라가니 조심!)
                            2. 각 섹션마다 class="mkt-section" 추가하기 (mkt-section를 기준으로 영역이 생김!)
                            3. controller의 내용을 1번에 해당하는 controller에 복붙하기!
                        -->
                    </VBox>

                </VBox>

                <VBox id="mkt-footer" class="mkt-section">
                    <VBox class="mkt-footer-wrapper">
                        <!-- 배경 그라데이션 효과 (CSS로 제어) -->
                        <VBox class="test-footer">
                            <div xmlns="http://www.w3.org/1999/xhtml" class="mkt-glow-blue"></div>
                            <div xmlns="http://www.w3.org/1999/xhtml" class="mkt-glow-purple"></div>
                        </VBox>

                        <!-- Contact Us 섹션 -->
                        <VBox class="mkt-contact-section" alignItems="Center">
                            <Text text="Contact Us" class="mkt-contact-title"/>
                            <Text text="SPRONEXT is a business partner that realizes enterprise potential alongside top-tier experts in each field. Beyond simple system integration, we combine SAP BTP with Local LLM-based AI technology to deliver an unprecedented intelligent business environment." 
                                class="mkt-contact-desc" textAlign="Center" wrapping="true"/>
                            <Button text="GET IN TOUCH" class="mkt-contact-btn" type="Transparent" press="onContactPress"/>
                        </VBox>

                        <!-- Footer 영역 -->
                        <VBox class="mkt-footer">
                            <l:Grid defaultSpan="XL6 L6 M6 S12" class="mkt-footer-grid">
                                <l:content>

                                    <!-- Information -->
                                    <VBox class="mkt-footer-col">
                                        <Text text="Information" class="mkt-footer-col-title"/>
                                        <Link text="Next Business" class="mkt-footer-link" press="onGoToEnterprise"/>
                                        <Link text="Next Marketing" class="mkt-footer-link" press="onGoToMarketing"/>
                                    </VBox>

                                    <!-- Contacts -->
                                    <VBox class="mkt-footer-col">
                                        <Text text="Contacts" class="mkt-footer-col-title"/>
                                        <HBox class="mkt-contact-item">
                                            <Image src="/image/icon/Vector.png" />
                                            <!-- <core:Icon src="sap-icon://map-2" class="mkt-contact-icon"/> -->
                                            <Text text="서울특별시 서초구 서초대로 398, 6층" class="mkt-footer-text" wrapping="true"/>
                                        </HBox>
                                        <!-- <HBox class="mkt-contact-item" alignItems="Center">
                                            <core:Icon src="sap-icon://phone" class="mkt-contact-icon"/>
                                            <Text text="" class="mkt-footer-text"/>
                                        </HBox> -->
                                        <HBox class="mkt-contact-item" alignItems="Center">
                                            <Image src="/image/icon/Group.png" />
                                            <!-- <core:Icon src="sap-icon://email" class="mkt-contact-icon" size="1.5rem"/> -->
                                            <Link text="contact@spronext.com" class="mkt-footer-link" href="mailto:contact@spronext.com"/>
                                        </HBox>
                                    </VBox>

                                    <!-- Social Media -->
                                    <!-- <VBox class="mkt-footer-col">
                                        <Text text="Social Media" class="mkt-footer-col-title"/>
                                        <HBox class="mkt-social-icons">
                                            <Button icon="sap-icon://facebook" class="mkt-social-btn-new" type="Transparent"/>
                                            <Button icon="sap-icon://twitter"  class="mkt-social-btn-new" type="Transparent"/>
                                            <Button icon="sap-icon://linkedin" class="mkt-social-btn-new" type="Transparent"/>
                                            <Button icon="sap-icon://pushpin"  class="mkt-social-btn-new" type="Transparent"/>
                                        </HBox>
                                    </VBox> -->

                                </l:content>
                            </l:Grid>
                            
                            <core:HTML content="&lt;hr class='mkt-footer-divider'/&gt;"/>
                            <HBox justifyContent="Center" width="100%">
                                <Text text="© 2026 All Rights Reserved" class="mkt-footer-copy"/>
                            </HBox>
                        </VBox>
                    </VBox>
                </VBox>



            </ScrollContainer>
        </content>
    </Page>
</mvc:View>