<?xml version="1.0" encoding="UTF-8"?>
<mvc:View
    controllerName="homepage.controller.pages.Test"
    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="AI Capabilities" class="mkt-nav-btn" type="Transparent" press="onNavToSection">
                                        <customData><core:CustomData key="targetId" value="AI-capabilities-zone"/></customData>
                                    </Button>
                                    <Button text="Optimized Systems" class="mkt-nav-btn" type="Transparent" press="onNavToSection">
                                        <customData><core:CustomData key="targetId" value="optimized-zone"/></customData>
                                    </Button>
                                    <Button text="Process"      class="mkt-nav-btn" type="Transparent" press="onNavToSection">
                                        <customData><core:CustomData key="targetId" value="process-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
                id="pageScrollContainer"
                height="100%"
                width="100%"
                vertical="true"
                horizontal="false">

                <VBox class="n-mkt-wrap">


                    <!-- 메인 섹션 영역 -->
                    <VBox class="mkt-hero mkt-section n-mkt-section">
                        <VBox class="n-mkt-hero-title">
                            <!-- 메인 타이틀 영역 -->
                            <VBox >
                                <FormattedText   
                                    id="n-mkt-html"
                                    class="mkt-maintitle n-mkt-maintitle"
                                    htmlText="&lt;h1 class='word-wrap'&gt;&lt;span class='word-opt'&gt;Optimizing&lt;/span&gt;&lt;/span&gt;&#160;&lt;span class='word-wrap'&gt;&lt;strong class='word-opt'&gt;Marketing&lt;/strong&gt;&lt;/span&gt;
                                            &lt;br /&gt;
                                            &lt;span class='word-wrap'&gt;&lt;strong class='word-opt'&gt;Business&#160;&lt;/strong&gt;&lt;/span&gt;&lt;span class='word-wrap'&gt;&lt;span class='word-opt'&gt;Faster&lt;/span&gt;&lt;/span&gt; &lt;span class='word-wrap'&gt;&lt;span class='word-opt'&gt;with&lt;/span&gt;&lt;/span&gt;&lt;span class='word-wrap'&gt;&lt;strong class='word-opt'&gt;&#160;AI&lt;/strong&gt;&lt;/span&gt;" />
                            </VBox>
                            <!-- 메인 타이틀 영역 -->

                            <!-- 서브 타이틀 영역 -->
                            <VBox class="mkt-hero-desc word-wrap">
                                <VBox class='word-opt'>
                                    <Text text="From strategy consulting to data architecture, ad operations, content automation, and performance analysis. SPRONEXT reconstructs your brand's growth journey into an AI-centric operating system." class="n-mkt-desc-text" wrapping="true"/>
                                </VBox>
                            </VBox>
                            <!-- 서브 타이틀 영역 -->
                        </VBox>

                        <!-- 비디오 영역 -->
                        <VBox class="word-wrap-width-relative">
                            <VBox class="word-wrap word-wrap-width">
                                <VBox class='word-opt word-opt-width'>
                                    <core:HTML content="&lt;video  autoplay muted loop style='object-fit: cover; width: 100%; height: 100%;'&gt;&lt;source src='Video/816dcc24-3498-4222-bf48-0a9cd87cdc5a.mp4' type='video/mp4'&gt;브라우저가 비디오 태그를 지원하지 않습니다.&lt;/video&gt;" />
                                </VBox>
                            </VBox>
                        </VBox>
                        <!-- 비디오 영역 -->

                        <!-- 메인 섹션 오브젝트 -->
                        <VBox class="main-section-object">
                            <VBox class="marin-line"></VBox>
                        </VBox>
                        <!-- 메인 섹션 오브젝트 -->



                        <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>
                    </VBox>



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


                    

                    <!-- WHAT WE OPTIMIZE -->
                    <HBox class="mkt-transform mkt-section mkt-scroll-section" alignItems="Center">
                        <VBox class="mkt-transform-left reveal-item">
                            <Text text="WHAT WE OPTIMIZE" class="mkt-tag"/>
                            <Text text="We transform your brand's daily marketing decisions into an AI-learnable structure."
                                  class="mkt-transform-title" wrapping="true"/>
                        </VBox>
                        <VBox class="mkt-transform-right reveal-item">
                            <Text text="SPRONEXT doesn't stop at short-term, campaign-level improvements. By connecting customer data, media operations, content production, sales conversions, and reporting, we help marketing teams make more accurate decisions and execute faster."
                                  class="mkt-transform-desc" wrapping="true"/>
                        </VBox>
                    </HBox>

                    <core:HTML content="&lt;hr class='mkt-divider'/&gt;"/>
                    
                    <!-- ─────────────────────────────────────
                         CORE AI AREAS
                    ───────────────────────────────────────── -->
                    <VBox id="AI-capabilities-zone" class="mkt-core mkt-section mkt-scroll-section">
                        <Text text="AI MARKETING CATEGORIES" class="mkt-tag reveal-item"/>
                        <Text text="Core AI Areas" 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="01" class="mkt-card-num"/>
                                    <Text text="AI Strategy Consulting" class="mkt-card-title"/>
                                    <Text text="We diagnose business goals, customer journeys, and marketing operating structures to design priorities for AI implementation."
                                          class="mkt-card-desc" wrapping="true"/>
                                </VBox>

                                <VBox class="mkt-ai-card reveal-item delay-2">
                                    <Text text="02" class="mkt-card-num"/>
                                    <Text text="Customer Data Optimization" class="mkt-card-title"/>
                                    <Text text="We integrate CRM, web behavior, and advertising data to create segments, predictive scores, and personalization criteria."
                                          class="mkt-card-desc" wrapping="true"/>
                                </VBox>

                                <VBox class="mkt-ai-card reveal-item delay-2">
                                    <Text text="03" class="mkt-card-num"/>
                                    <Text text="Automated Ad Operations" class="mkt-card-title"/>
                                    <Text text="Leveraging performance signals, we establish an operational framework that continuously optimizes your budgets, targeting, ad creatives, and bidding strategies."
                                          class="mkt-card-desc" wrapping="true"/>
                                </VBox>

                                <VBox class="mkt-ai-card reveal-item delay-3">
                                    <Text text="04" class="mkt-card-num"/>
                                    <Text text="Content Creation Workflow" class="mkt-card-title"/>
                                    <Text text="We diagnose business goals, customer journeys, and marketing operating structures to design priorities for AI implementation."
                                          class="mkt-card-desc" wrapping="true"/>
                                </VBox>

                                <VBox class="mkt-ai-card reveal-item delay-3">
                                    <Text text="05" class="mkt-card-num"/>
                                    <Text text="Search &amp; Commerce Optimization" class="mkt-card-title"/>
                                    <Text text="We analyze search intent, product data, reviews, and category competitiveness to increase both visibility and purchase conversions."
                                          class="mkt-card-desc" wrapping="true"/>
                                </VBox>

                                <VBox class="mkt-ai-card reveal-item delay-3">
                                    <Text text="06" class="mkt-card-num"/>
                                    <Text text="Performance Analysis &amp; Reporting" class="mkt-card-title"/>
                                    <Text text="We provide automated reports with KPIs, insights, and next actions so executives and operational staff can make immediate decisions."
                                          class="mkt-card-desc" wrapping="true"/>
                                </VBox>

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

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

                    <!-- ─────────────────────────────────────
                         OPTIMIZATION SYSTEM
                    ───────────────────────────────────────── -->
                    <HBox id="optimized-zone" class="mkt-optimization mkt-section mkt-scroll-section" alignItems="Center">
                        <VBox class="mkt-opt-left reveal-item">
                            <Text text="OPTIMIZATION SYSTEM" class="mkt-tag"/>
                            <Text text="An AI Marketing Operating System from Consulting to Execution."
                                  class="mkt-opt-title" wrapping="true"/>
                            <Text text="SPRONEXT prioritizes changing the operational structure over adopting individual tools. By connecting strategy, data, creatives, media, and analysis, we create a structure that gets smarter as campaigns progress."
                                  class="mkt-opt-desc" wrapping="true"/>
                        </VBox>
                        <VBox class="mkt-opt-right reveal-item">
                            <VBox class="mkt-engine-card">
                                <Text text="Insight Engine"  class="mkt-engine-title"/>
                                <Text text="Market, customer, competition, and search demand analysis"
                                      class="mkt-engine-desc" wrapping="true"/>
                            </VBox>
                            <VBox class="mkt-engine-card">
                                <Text text="Creative Engine" class="mkt-engine-title"/>
                                <Text text="Creative generation, message variation, and brand tone management"
                                      class="mkt-engine-desc" wrapping="true"/>
                            </VBox>
                            <VBox class="mkt-engine-card">
                                <Text text="Media Engine"    class="mkt-engine-title"/>
                                <Text text="Optimization of ad budgets, targeting, and channel operations"
                                      class="mkt-engine-desc" wrapping="true"/>
                            </VBox>
                            <VBox class="mkt-engine-card">
                                <Text text="Decision Engine" class="mkt-engine-title"/>
                                <Text text="Performance prediction, experiment design, and next action recommendations"
                                      class="mkt-engine-desc" wrapping="true"/>
                            </VBox>
                        </VBox>
                    </HBox>

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

                    <!-- ─────────────────────────────────────
                         HOW WE WORK
                    ───────────────────────────────────────── -->
                    <VBox id="process-zone" class="mkt-process mkt-section mkt-scroll-section">
                        <Text text="HOW WE WORK" class="mkt-tag reveal-item"/>
                        <Text text="Execution-Focused Process" class="mkt-section-title reveal-item"/>

                        <l:Grid defaultSpan="XL3 L3 M6 S12" class="mkt-process-grid reveal-item delay-2">
                            <l:content>

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

                                <VBox class="mkt-process-card">
                                    <Text text="DESIGN"   class="mkt-process-tag"/>
                                    <Text text="AI Implementation Design"   class="mkt-process-card-title"/>
                                    <Text text="We define the scope of automation and performance goals by task, as well as the necessary tools and data structure."
                                          class="mkt-process-card-desc" wrapping="true"/>
                                </VBox>

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

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

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

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

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

                        
                        
                                        
                                        
                    <!-- ─────────────────────────────────────
                         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>