@extends('frontend::layouts.master')

@section('content')
    test
    {{-- tmp data about --}}
    <div class="grid md:grid-cols-2 gap-8">
        <div class="p-10 h-full bg-gradient-to-br from-tsic-blue/20 via-tsic-purple/10 to-tsic-blue/5 border-2 border-tsic-blue/40 rounded-[3rem] shadow-[0_18px_45px_-25px_rgba(15,17,207,0.85)]">
            <div class="w-full h-[15rem] mb-6 rounded-2xl bg-tsic-blue/20 flex items-center justify-center overflow-hidden"><img class="w-full h-full object-cover" src="https://tsic.uat-new.nd.co.th/modules/frontend/images/about/about-our-vision-01.jpg" alt="Vision image" /></div>
            <h3 class="text-2xl font-bold mb-4 text-tsic-blue">Our Vision</h3>
            <p class="text-[var(--muted-foreground)] leading-relaxed text-pretty">To be the leading PET resin manufacturer in Asia, recognized for innovation, quality excellence, and sustainable practices that contribute to a circular economy and environmental stewardship.</p>
        </div>
        <div class="p-10 h-full bg-gradient-to-br from-tsic-green/20 via-tsic-dark-green/12 to-tsic-green/5 border-2 border-tsic-green/40 rounded-[3rem] shadow-[0_18px_45px_-25px_rgba(51,153,51,0.8)]">
            <div class="w-full h-[15rem] mb-6 rounded-2xl bg-tsic-green/20 flex items-center justify-center overflow-hidden"><img class="w-full h-full object-cover" src="https://tsic.uat-new.nd.co.th/modules/frontend/images/about/about-our-misson-01.jpg" alt="Mission image" /></div>
            <h3 class="text-2xl font-bold mb-4 text-tsic-dark-green">Our Mission</h3>
            <div class="space-y-3">
                <p class="text-[var(--muted-foreground)] leading-relaxed flex items-start gap-2"><span class="text-pretty">Deliver high-quality PET resin products that exceed customer expectations</span></p>
                <p class="text-[var(--muted-foreground)] leading-relaxed flex items-start gap-2"><span class="text-pretty">Invest in cutting-edge recycling technology for sustainable manufacturing</span></p>
                <p class="text-[var(--muted-foreground)] leading-relaxed flex items-start gap-2"><span class="text-pretty">Foster a culture of safety, continuous improvement, and employee development</span></p>
            </div>
        </div>
    </div>
    {{-- tmp data about end --}}

    <style>
        .table2-2 {
            font-family: cursive !important;
            font-size: 100px !important;
        }
    </style>
    <div class="grid-cols-2"></div>
    <section class="relative overflow-hidden py-20 md:py-32 bg-[var(--muted)]/40" id="about">
        <div class="absolute inset-0 -z-10">
            <img class="h-full w-full object-cover opacity-30 blur-md scale-125" src="https://tsic.uat-new.nd.co.th/modules/frontend/images/background/bg-img-01.jpg" alt="" aria-hidden="true">
            <div class="absolute inset-0 bg-[var(--muted)]/55"></div>
        </div>
        <div class="container relative z-10 mx-auto px-4 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                <div class="relative">
                    <div class="relative aspect-[1/1] rounded-[3rem] overflow-hidden bg-gradient-to-br from-[var(--primary)]/20 to-[var(--secondary)]/20">
                        <img class="absolute inset-0 w-full h-full object-cover rounded-[4rem] p-10" src="https://tsic.uat-new.nd.co.th/modules/frontend/images/mockup/about-img.jpg" alt="TSIC - Thai Shinkong Industry Corporation">
                    </div>
                    <div class="absolute -bottom-3 -right-3 sm:-bottom-4 sm:-right-4 md:-bottom-5 md:-right-5 lg:-bottom-6 lg:-right-6 bg-[var(--secondary)] text-[var(--secondary-foreground)] p-3 sm:p-4 md:p-5 lg:p-6 rounded-xl sm:rounded-2xl md:rounded-[1.5rem] lg:rounded-[2rem] shadow-lg">
                        <p class="text-xl sm:text-2xl md:text-3xl font-bold">ISO</p>
                        <p class="text-xs sm:text-sm">Certified</p>
                    </div>
                </div>
                <div>
                    <h2 class="text-4xl md:text-5xl font-bold mb-6 text-balance">
                        Leading Innovation in PET Resin Manufacturing
                    </h2>
                    <p class="text-lg text-[var(--muted-foreground)] mb-6 leading-relaxed">
                        Thai Shinkong Industry Corporation (TSIC) has been at the forefront of PET resin manufacturing for over three decades. Our state-of-the-art facilities and commitment to innovation have made us a trusted partner for businesses worldwide.
                    </p>
                    <p class="text-lg text-[var(--muted-foreground)] mb-8 leading-relaxed">
                        We combine advanced technology with sustainable practices to deliver exceptional
                        quality products while minimizing environmental impact. Our dedication to excellence
                        and customer satisfaction drives everything we do.
                    </p>
                    <div class="grid grid-cols-2 gap-6">
                        <div class="flex items-start gap-3">
                            <div class="w-12 h-12 rounded-full bg-[var(--primary)]/10 flex items-center justify-center flex-shrink-0">
                                <svg class="w-6 h-6 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-[var(--primary)]">30+</p>
                                <p class="text-sm text-[var(--muted-foreground)]">Years Experience</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-12 h-12 rounded-full bg-[var(--primary)]/10 flex items-center justify-center flex-shrink-0">
                                <svg class="w-6 h-6 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-[var(--primary)]">100+</p>
                                <p class="text-sm text-[var(--muted-foreground)]">Quality Certifications</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-12 h-12 rounded-full bg-[var(--primary)]/10 flex items-center justify-center flex-shrink-0">
                                <svg class="w-6 h-6 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0h.5a2.5 2.5 0 002.5-2.5V3.935M12 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-[var(--primary)]">50+</p>
                                <p class="text-sm text-[var(--muted-foreground)]">Countries Served</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-12 h-12 rounded-full bg-[var(--primary)]/10 flex items-center justify-center flex-shrink-0">
                                <svg class="w-6 h-6 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-[var(--primary)]">500+</p>
                                <p class="text-sm text-[var(--muted-foreground)]">Expert Team</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="grid md:grid-cols-2 gap-8">
        <div class="p-10 h-full bg-gradient-to-br from-tsic-blue/20 via-tsic-purple/10 to-tsic-blue/5 border-2 border-tsic-blue/40 rounded-[3rem] shadow-[0_18px_45px_-25px_rgba(15,17,207,0.85)]">
            <div class="w-full h-[15rem] mb-6 rounded-2xl bg-tsic-blue/20 flex items-center justify-center overflow-hidden">
                <img class="w-full h-full object-cover" src="https://tsic.uat-new.nd.co.th/modules/frontend/images/about/about-our-vision-01.jpg" alt="Vision image">
            </div>
            <h3 class="text-2xl font-bold mb-4 text-tsic-blue">Our Vision</h3>
            <p class="text-[var(--muted-foreground)] leading-relaxed text-pretty">
                To be the leading PET resin manufacturer in Asia, recognized for innovation, quality excellence, and
                sustainable practices that contribute to a circular economy and environmental stewardship.
            </p>
        </div>

        <div class="p-10 h-full bg-gradient-to-br from-tsic-green/20 via-tsic-dark-green/12 to-tsic-green/5 border-2 border-tsic-green/40 rounded-[3rem] shadow-[0_18px_45px_-25px_rgba(51,153,51,0.8)]">
            <div class="w-full h-[15rem] mb-6 rounded-2xl bg-tsic-green/20 flex items-center justify-center overflow-hidden">
                <img class="w-full h-full object-cover" src="https://tsic.uat-new.nd.co.th/modules/frontend/images/about/about-our-misson-01.jpg" alt="Mission image">
            </div>
            <h3 class="text-2xl font-bold mb-4 text-tsic-dark-green">Our Mission</h3>
            <div class="space-y-3">
                <p class="text-[var(--muted-foreground)] leading-relaxed flex items-start gap-2">
                    <svg class="w-5 h-5 text-tsic-green flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span class="text-pretty">Deliver high-quality PET resin products that exceed customer expectations</span>
                </p>
                <p class="text-[var(--muted-foreground)] leading-relaxed flex items-start gap-2">
                    <svg class="w-5 h-5 text-tsic-green flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span class="text-pretty">Invest in cutting-edge recycling technology for sustainable manufacturing</span>
                </p>
                <p class="text-[var(--muted-foreground)] leading-relaxed flex items-start gap-2">
                    <svg class="w-5 h-5 text-tsic-green flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span class="text-pretty">Foster a culture of safety, continuous improvement, and employee development</span>
                </p>
            </div>
        </div>
    </div>
    <section class="py-20 bg-[var(--background)]">
        <div class="max-w-7xl mx-auto px-4">

            <!-- Start Text Editor -->
            <div class="prose prose-lg max-w-none prose-headings:text-[var(--foreground)] prose-p:text-[var(--muted-foreground)] prose-a:text-[var(--primary)] prose-a:no-underline hover:prose-a:underline">
                <div>
                    <h2>Overview</h2>
                    <p>This product offers high performance and reliability for industrial and consumer applications. It is designed to meet international standards and can be customized to suit your requirements.</p>
                    <h3>Features</h3>
                    <p>Durable construction, easy to process, and available in various grades. Ideal for packaging, automotive, and general manufacturing use.</p>
                    <h3>Quality Assurance</h3>
                    <p>All batches are tested and certified. We provide technical support and documentation upon request.</p>
                </div>
                <div class="grid lg:grid-cols-3 gap-8 lg:gap-12">
                    <!-- Key Properties -->
                    <div class="p-4 rounded-[2rem] h-full bg-[var(--card)] border border-[var(--border)] shadow-sm">
                        <div class="flex items-center gap-3 mb-6">
                            <div class="w-12 h-12 rounded-full bg-[var(--primary)]/10 flex items-center justify-center">
                                <svg class="w-6 h-6 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                </svg>
                            </div>
                            <h2 class="text-2xl font-bold">Key Properties</h2>
                        </div>
                        <ul class="space-y-4">
                            <li class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-[var(--primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span class="text-[var(--muted-foreground)] text-pretty">Excellent clarity and transparency</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-[var(--primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span class="text-[var(--muted-foreground)] text-pretty">Good mechanical strength</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-[var(--primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span class="text-[var(--muted-foreground)] text-pretty">FDA approved for food contact</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-[var(--primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span class="text-[var(--muted-foreground)] text-pretty">Versatile processing characteristics</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Applications -->
                    <div class="p-4 rounded-[2rem] h-full bg-[var(--card)] border border-[var(--border)] shadow-sm">
                        <div class="flex items-center gap-3 mb-6">
                            <div class="w-12 h-12 rounded-full bg-[var(--accent)]/10 flex items-center justify-center">
                                <svg class="w-6 h-6 text-[var(--accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                                </svg>
                            </div>
                            <h2 class="text-2xl font-bold">Applications</h2>
                        </div>
                        <p class="text-[var(--muted-foreground)] leading-relaxed text-pretty">
                            Water bottles, food containers, sheets, thermoformed products. Suitable for general purpose PET resin applications.
                        </p>
                    </div>

                    <!-- Specifications -->
                    <div class="p-4 rounded-[2rem] h-full bg-[var(--card)] border border-[var(--border)] shadow-sm">
                        <div class="flex items-center gap-3 mb-6">
                            <div class="w-12 h-12 rounded-full bg-[var(--primary)]/10 flex items-center justify-center">
                                <svg class="w-6 h-6 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
                                </svg>
                            </div>
                            <h2 class="text-2xl font-bold">Specifications</h2>
                        </div>
                        <dl class="space-y-4">
                            <div class="flex justify-between items-start gap-4 pb-3 border-b border-[var(--border)]/50">
                                <dt class="text-sm text-[var(--muted-foreground)]">Viscosity</dt>
                                <dd class="font-medium text-right">0.80 dl/g</dd>
                            </div>
                            <div class="flex justify-between items-start gap-4 pb-3 border-b border-[var(--border)]/50">
                                <dt class="text-sm text-[var(--muted-foreground)]">Melting point</dt>
                                <dd class="font-medium text-right">245–260°C</dd>
                            </div>
                            <div class="flex justify-between items-start gap-4 pb-3 border-b border-[var(--border)]/50">
                                <dt class="text-sm text-[var(--muted-foreground)]">Density</dt>
                                <dd class="font-medium text-right">1.33–1.35 g/cm³</dd>
                            </div>
                            <div class="flex justify-between items-start gap-4 pb-3">
                                <dt class="text-sm text-[var(--muted-foreground)]">Color</dt>
                                <dd class="font-medium text-right">Transparent</dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>
            <!-- End Text Editor -->
        </div>
    </section>

    <div class="container mx-auto px-4 lg:px-8">
        <div class="max-w-3xl mx-auto prose prose-lg prose-[var(--foreground)]">
            <p class="text-[var(--muted-foreground)] leading-relaxed text-pretty text-lg">
                Explore how advanced chemical recycling is revolutionizing the PET resin industry and enabling a truly circular economy for plastics.
            </p>
            <div class="mt-8 text-[var(--foreground)] leading-relaxed text-pretty">
                <p>Content about chemical recycling and circular economy for plastics. TSIC is at the forefront of sustainable PET manufacturing.</p>
            </div>
        </div>
    </div>

    <div class="gold-price-wrapper text-xs text-red-500 mt-1">
        <iframe class="gold-iframe-content w-full h-[500px]" src="https://www.snpgold-online.com/GoldPricePublic.php">
        </iframe>
    </div>

    <p id="gold-bid-965">loading...</p>

    <div class="flex flex-wrap gap-3 text-sm text-[var(--muted-foreground)]">
        <span class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>
            Sales &amp; Marketing
        </span>
        <span class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
            </svg>
            Bangkok, Thailand
        </span>
        <span class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Full-time
        </span>
        <span class="flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Competitive
        </span>
    </div>

    <script>
        (async () => {
            const outputEl = document.getElementById('gold-bid-965');

            try {
                const response = await fetch('https://www.snpgold-online.com/GoldPricePublic.php');
                if (!response.ok) {
                    throw new Error('Failed to fetch source page');
                }

                const html = await response.text();
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const targetEl = doc.querySelector('#dvpriceproduct965_bid');
                const value = targetEl?.textContent?.trim();

                outputEl.textContent = value || 'N/A';
            } catch (error) {
                outputEl.textContent = 'N/A';
                console.error('Unable to load dvpriceproduct965_bid:', error);
            }
        })();
    </script>
@endsection