@extends('layouts.app')

@section('title', 'Contact Our Offices | Unicorn Power & Metals')
@section('meta_desc', 'Get in touch with our global offices in Tokyo, Osaka, and Frankfurt. Submit business inquiries for metal supplies or grid contracts.')

@section('content')
<!-- Page Header -->
<section class="section-padding text-center" style="background: linear-gradient(180deg, rgba(8, 11, 17, 0.4) 0%, rgba(8, 11, 17, 0.8) 100%); padding-top: 150px;">
    <div class="container">
        <span class="badge tag-rare mb-3 px-3 py-2">Get in Touch</span>
        <h1 class="display-4 text-white fw-bold mb-4">Contact Our Offices</h1>
        <p class="lead text-muted mx-auto" style="max-width: 700px;">
            Submit business inquiries directly to our operational directors, or contact our regional offices across APAC and Europe.
        </p>
    </div>
</section>

<!-- Contact Page Main Grid -->
<section class="mb-5" id="contacts-content-section">
    <div class="container">
        <div class="row g-5">
            <!-- Left Side: Interactive Contact Form -->
            <div class="col-lg-7">
                <div class="glass-panel" id="contact-form-panel">
                    <h2 class="h3 text-white mb-4">Submit Corporate Inquiry</h2>
                    <form id="corporate-contact-form" novalidate>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="contact-name" class="form-label text-white" style="font-size: 0.9rem;">Full Name *</label>
                                <input type="text" class="form-control form-control-custom" id="contact-name" placeholder="John Doe" required>
                                <div class="invalid-feedback-custom">Your name is required.</div>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="contact-company" class="form-label text-white" style="font-size: 0.9rem;">Business / Corporation *</label>
                                <input type="text" class="form-control form-control-custom" id="contact-company" placeholder="Acme Energy Corp" required>
                                <div class="invalid-feedback-custom">Your business/company name is required.</div>
                            </div>
                            
                            <div class="col-md-12">
                                <label for="contact-email" class="form-label text-white" style="font-size: 0.9rem;">Business Email *</label>
                                <input type="email" class="form-control form-control-custom" id="contact-email" placeholder="johndoe@acme.com" required>
                                <div class="invalid-feedback-custom">Please enter a valid business email address.</div>
                            </div>
                            
                            <div class="col-md-12">
                                <label for="contact-division" class="form-label text-white" style="font-size: 0.9rem;">Inquiry Division</label>
                                <select class="form-select form-control-custom" id="contact-division">
                                    <option value="power" selected>Power &amp; Grid Solutions Division</option>
                                    <option value="metallurgy">Advanced Metallurgy Division</option>
                                    <option value="sustainability">ESG &amp; Circular Loop Programs</option>
                                    <option value="general">General Corporate Inquiry</option>
                                </select>
                            </div>
                            
                            <div class="col-md-12">
                                <label for="contact-message" class="form-label text-white" style="font-size: 0.9rem;">Inquiry Details *</label>
                                <textarea class="form-control form-control-custom" id="contact-message" rows="5" placeholder="Specify alloy codes, megawatts required, or blueprint details..." required></textarea>
                                <div class="invalid-feedback-custom">Please provide details regarding your inquiry.</div>
                            </div>
                            
                            <div class="col-md-12 text-end mt-4">
                                <button type="submit" class="btn btn-glow-cyan px-4 py-3" id="contact-submit-btn">Send Corporate Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Right Side: Global Location Cards -->
            <div class="col-lg-5">
                <h2 class="h3 text-white mb-4">Corporate Directory</h2>
                
                <div class="d-flex flex-column gap-4">
                    <!-- Headquarters Tokyo -->
                    <div class="glass-panel p-3 location-card" id="hq-card-tokyo">
                        <div class="location-tag">Corporate Headquarters</div>
                        <h4 class="text-white h5 mb-2">Office</h4>
                        <p class="text-muted mb-1" style="font-size: 0.9rem;">
                           77 Boulevard Saint-Jacques — 75014 Paris, France
                        </p>
                        <p class="text-muted mb-0 font-monospace" style="font-size: 0.85rem;">
                              Email: unicornpowerandmetals@gmail.com
                        </p>
                    </div>
                    
                   
                    
                 
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Success Backdrop Feedback Modal -->
<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true" id="contact-success-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content glass-panel" style="background: rgba(8, 11, 17, 0.95); border: 1px solid var(--accent-cyan); border-radius: 16px;">
            <div class="modal-body text-center p-5">
                <!-- Checkmark Animated SVG -->
                <div class="mb-4 d-inline-block">
                    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="32" cy="32" r="30" stroke="var(--accent-cyan)" stroke-width="4" fill="rgba(0, 212, 255, 0.05)" />
                        <path d="M20 32L28 40L44 22" stroke="var(--accent-cyan)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </div>
                <h3 class="text-white fw-bold mb-3">Inquiry Received</h3>
                <p class="text-muted mb-4" style="font-size: 0.95rem;">
                    Thank you for contacting Unicorn Power &amp; Metals. Our division director has been notified of your message. A formal response will be dispatched within one business day.
                </p>
                <button type="button" class="btn btn-glow-cyan" data-bs-dismiss="modal" id="modal-close-btn">Dismiss</button>
            </div>
        </div>
    </div>
</div>
@endsection