{{-- resources/views/secure-trade/index.blade.php --}}
@extends('layouts.app')

@section('title', 'CLEDA SecureTrade - Trust Built Into Every Deal')

@section('meta')
<meta name="description" content="Secure escrow & trade finance platform ensuring payment security for cross-border transactions in the Caribbean and Latin America.">
<meta name="keywords" content="secure trade, escrow, trade finance, cross-border payments, CLEDA, Caribbean, Latin America">
@endsection

@section('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<style>
    :root {
        --primary-blue: #003666;
        --teal: #007785;
        --light-gray: #f8f9fa;
        --dark-gray: #343a40;
        --success-green: #28a745;
        --warning-orange: #fd7e14;
    }

    .secure-trade-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    .hero-section {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--teal) 100%);
        color: white;
        padding: 3rem;
        border-radius: 20px;
        margin-bottom: 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 200%;
        height: 200%;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="lock" patternUnits="userSpaceOnUse" width="20" height="20"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23lock)"/></svg>');
        animation: float 20s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: rotate(0deg) translate(0, 0); }
        50% { transform: rotate(180deg) translate(20px, -20px); }
    }

    .hero-content {
        position: relative;
        z-index: 2;
    }

    .hero-section h1 {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: 1rem;
        background: linear-gradient(45deg, #ffffff, #b3e5fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-section p {
        font-size: 1.5rem;
        opacity: 0.95;
        margin-bottom: 2rem;
    }

    .hero-section .subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
    }

    .security-badges {
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
        margin-top: 2rem;
    }

    .security-badge {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(255, 255, 255, 0.15);
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: transform 0.3s ease;
    }

    .security-badge:hover {
        transform: translateY(-5px);
    }

    .security-badge i {
        font-size: 1.2rem;
        color: var(--success-green);
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .feature-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
        position: relative;
        overflow: hidden;
    }

    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-blue), var(--teal));
    }

    .feature-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, var(--primary-blue), var(--teal));
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        color: white;
        font-size: 2rem;
        position: relative;
    }

    .feature-icon::after {
        content: '';
        position: absolute;
        inset: -2px;
        background: linear-gradient(135deg, var(--primary-blue), var(--teal), #4fc3f7);
        border-radius: 20px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .feature-card:hover .feature-icon::after {
        opacity: 1;
    }

    .feature-card h3 {
        font-size: 1.5rem;
        color: var(--primary-blue);
        margin-bottom: 1rem;
        font-weight: 700;
    }

    .feature-card p {
        color: #666;
        line-height: 1.7;
        margin-bottom: 1rem;
    }

    .feature-benefits {
        list-style: none;
        margin-top: 1rem;
    }

    .feature-benefits li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #555;
        margin-bottom: 0.5rem;
    }

    .feature-benefits li i {
        color: var(--success-green);
        font-size: 0.8rem;
    }

    .process-section {
        background: var(--light-gray);
        padding: 3rem;
        border-radius: 20px;
        margin-bottom: 3rem;
    }

    .process-section h2 {
        text-align: center;
        font-size: 2.5rem;
        color: var(--primary-blue);
        margin-bottom: 3rem;
        font-weight: 800;
    }

    .process-steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        position: relative;
    }

    .process-step {
        background: white;
        padding: 2rem;
        border-radius: 15px;
        text-align: center;
        position: relative;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    .process-step:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    .step-number {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, var(--primary-blue), var(--teal));
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2rem;
        margin: 0 auto 1rem auto;
        position: relative;
    }

    .step-number::after {
        content: '';
        position: absolute;
        inset: -3px;
        background: linear-gradient(135deg, var(--primary-blue), var(--teal), #4fc3f7);
        border-radius: 50%;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .process-step:hover .step-number::after {
        opacity: 1;
    }

    .process-step h4 {
        color: var(--primary-blue);
        margin-bottom: 1rem;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .cta-section {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--teal) 100%);
        color: white;
        padding: 3rem;
        border-radius: 20px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="shield" patternUnits="userSpaceOnUse" width="30" height="30"><path d="M15 5 L25 10 L15 20 L5 10 Z" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23shield)"/></svg>');
        animation: slide 30s linear infinite;
    }

    @keyframes slide {
        0% { transform: translateX(0); }
        100% { transform: translateX(-30px); }
    }

    .cta-content {
        position: relative;
        z-index: 2;
    }

    .cta-section h2 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        font-weight: 800;
    }

    .cta-section p {
        font-size: 1.2rem;
        opacity: 0.95;
        margin-bottom: 2rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn {
        padding: 1rem 2rem;
        border: none;
        border-radius: 50px;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        cursor: pointer;
        font-size: 1.1rem;
    }

    .btn-primary {
        background: white;
        color: var(--primary-blue);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        text-decoration: none;
        color: var(--primary-blue);
    }

    .btn-secondary {
        background: transparent;
        color: white;
        border: 2px solid white;
    }

    .btn-secondary:hover {
        background: white;
        color: var(--primary-blue);
        transform: translateY(-3px);
        text-decoration: none;
    }

    .revenue-impact {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
        padding: 1.5rem;
        border-radius: 15px;
        margin-top: 2rem;
        text-align: center;
    }

    .revenue-impact h3 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .revenue-impact p {
        opacity: 0.95;
        font-size: 1rem;
    }

    @media (max-width: 768px) {
        .secure-trade-container {
            padding: 1rem;
        }

        .hero-section h1 {
            font-size: 2.5rem;
        }

        .hero-section p {
            font-size: 1.2rem;
        }

        .security-badges {
            flex-direction: column;
            align-items: center;
        }

        .features-grid {
            grid-template-columns: 1fr;
        }

        .process-steps {
            grid-template-columns: 1fr;
        }

        .cta-buttons {
            flex-direction: column;
            align-items: center;
        }
    }
</style>
@endsection

@section('content')
<div class="secure-trade-container">
    {{-- Hero Section --}}
    <section class="hero-section">
        <div class="hero-content">
            <h1><i class="fas fa-shield-alt"></i> CLEDA SecureTrade</h1>
            <p>Trust Built Into Every Deal</p>
            <p class="subtitle">Secure escrow & trade finance platform ensuring payment security for cross-border transactions</p>
            
            <div class="security-badges">
                <div class="security-badge">
                    <i class="fas fa-lock"></i>
                    <span>Bank-Grade Security</span>
                </div>
                <div class="security-badge">
                    <i class="fas fa-globe-americas"></i>
                    <span>Cross-Border Ready</span>
                </div>
                <div class="security-badge">
                    <i class="fas fa-handshake"></i>
                    <span>Trusted Escrow</span>
                </div>
            </div>
        </div>
    </section>

    {{-- Features Grid --}}
    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-shield-check"></i>
            </div>
            <h3>Secure Escrow Service</h3>
            <p>Funds are safely held in escrow until all transaction conditions are met, protecting both buyers and sellers in international trade deals.</p>
            <ul class="feature-benefits">
                <li><i class="fas fa-check-circle"></i> Multi-signature security protocols</li>
                <li><i class="fas fa-check-circle"></i> Automated release conditions</li>
                <li><i class="fas fa-check-circle"></i> Dispute resolution support</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-money-bill-transfer"></i>
            </div>
            <h3>Trade Finance Solutions</h3>
            <p>Comprehensive trade finance tools including letters of credit, trade financing, and payment guarantees for smooth international transactions.</p>
            <ul class="feature-benefits">
                <li><i class="fas fa-check-circle"></i> Letters of credit processing</li>
                <li><i class="fas fa-check-circle"></i> Working capital financing</li>
                <li><i class="fas fa-check-circle"></i> Payment guarantees</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-chart-line"></i>
            </div>
            <h3>Transaction Analytics</h3>
            <p>Real-time transaction monitoring and comprehensive analytics to track deal flow, identify patterns, and optimize your trade operations.</p>
            <ul class="feature-benefits">
                <li><i class="fas fa-check-circle"></i> Real-time transaction tracking</li>
                <li><i class="fas fa-check-circle"></i> Risk assessment tools</li>
                <li><i class="fas fa-check-circle"></i> Performance analytics dashboard</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-users-cog"></i>
            </div>
            <h3>Compliance & KYC</h3>
            <p>Built-in compliance framework ensuring all transactions meet international regulatory standards with automated KYC/AML verification.</p>
            <ul class="feature-benefits">
                <li><i class="fas fa-check-circle"></i> Automated KYC/AML checks</li>
                <li><i class="fas fa-check-circle"></i> Regulatory compliance monitoring</li>
                <li><i class="fas fa-check-circle"></i> Audit trail maintenance</li>
            </ul>
        </div>
    </div>

    {{-- How It Works Section --}}
    <section class="process-section">
        <h2>How SecureTrade Works</h2>
        <div class="process-steps">
            <div class="process-step">
                <div class="step-number">1</div>
                <h4>Deal Initiation</h4>
                <p>Both parties agree on transaction terms and initiate the SecureTrade process through our platform.</p>
            </div>
            <div class="process-step">
                <div class="step-number">2</div>
                <h4>Escrow Setup</h4>
                <p>Funds are securely deposited into escrow with automated release conditions defined by both parties.</p>
            </div>
            <div class="process-step">
                <div class="step-number">3</div>
                <h4>Verification</h4>
                <p>All parties and documentation undergo automated compliance and verification checks.</p>
            </div>
            <div class="process-step">
                <div class="step-number">4</div>
                <h4>Secure Release</h4>
                <p>Funds are automatically released when all conditions are met, ensuring secure transaction completion.</p>
            </div>
        </div>
    </section>

    {{-- Revenue Impact --}}
    <div class="revenue-impact">
        <h3><i class="fas fa-chart-line"></i> Revenue Impact</h3>
        <p><strong>Transaction fees (2–3%), premium financial services.</strong><br>
        Locks CLEDA into every transaction and creates finance data streams.</p>
    </div>

    {{-- Call to Action --}}
    <section class="cta-section">
        <div class="cta-content">
            <h2>Ready to Secure Your Trade Deals?</h2>
            <p>Join thousands of businesses already using CLEDA SecureTrade to facilitate safe, efficient cross-border transactions with complete peace of mind.</p>
            <div class="cta-buttons">
                <a href="{{ route('secure-trade.get-started') }}" class="btn btn-primary">
                    <i class="fas fa-rocket"></i> Start Secure Trading
                </a>
                <a href="{{ route('secure-trade.how-it-works') }}" class="btn btn-secondary">
                    <i class="fas fa-info-circle"></i> Learn More
                </a>
            </div>
        </div>
    </section>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scrolling for internal links
    const links = document.querySelectorAll('a[href^="#"]');
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Add animation to cards on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // Observe feature cards
    const cards = document.querySelectorAll('.feature-card, .process-step');
    cards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(card);
    });
});
</script>
@endsection