
import { signal, useDraggable } from '../runtime-helpers';
import { defineCustomElement } from '../runtime-helpers';

component About {
    // Library Demo: Signals
    var activeTab = signal('signals');

    // Library Demo: Draggable
    var dragRef = signal(null);
    var { x, y, isDragging } = useDraggable(this.dragRef);

    var template = `
        <div class="can about">
            <header>
                <h2>Can Signal Framework</h2>
                <p class="subtitle">A robust Javascript Frontend Framework by <b>Endurance ISeguan Ogun</b></p>
            </header>

            <div class="content-grid">
                <section class="info">
                    <h3>Project Details</h3>
                    <ul>
                        <li><b>Version:</b> 1.0.09</li>
                        <li><b>Company:</b> Frezcode Limited</li>
                        <li><b>Copyright:</b> &copy; 2026 Diospace</li>
                        <li><b>License:</b> Proprietary (Code not Public)</li>
                    </ul>
                </section>

                <section class="features">
                    <h3>Mini Library</h3>
                    
                    <div class="tabs">
                        <button class="{{activeTab.value == 'signals' ? 'active' : ''}}" onclick="() => this.activeTab.value = 'signals'">Signals</button>
                        <button class="{{activeTab.value == 'drag' ? 'active' : ''}}" onclick="() => this.activeTab.value = 'drag'">Draggable</button>
                    </div>

                    <div class="lib-card" style="display: {{activeTab.value == 'signals' ? 'block' : 'none'}}">
                        <h4>Reactive Signals</h4>
                        <div class="demo-area"> <!-- Removed count demo as it's not defined in this component -->
                        </div>
                    </div>

                    <div class="lib-card" style="display: {{activeTab.value == 'drag' ? 'block' : 'none'}}">
                        <h4>Draggable Interaction</h4>
                        <div class="demo-area" style="height: 150px; position: relative; overflow: hidden;">
                            <div c-ref="dragRef" class="drag-item" style="transform: translate({{x}}px, {{y}}px); cursor: {{isDragging ? 'grabbing' : 'grab'}};">
                                {{ isDragging ? '✊' : '✋' }}
                            </div>
                        </div>
                    </div>
                </section>

                <section class="contact">
                    <h3>Contact Us</h3>
                    <form>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" placeholder="hello@example.com" />
                        </div>
                        <div class="form-group">
                            <label>Message</label>
                            <textarea rows="3" placeholder="Your message..."></textarea>
                        </div>
                        <button type="button">Send Message</button>
                    </form>
                </section>
            </div>
        </div>
    `;

<style scoped>
.can.about {
    padding: 2rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

header {
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

h2 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
}

.subtitle {
    color: #666;
    margin: 0;
    font-size: 1.1rem;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

section h3 {
    color: #34495e;
    border-left: 4px solid #3498db;
    padding-left: 10px;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: #555;
}

input, textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    box-sizing: border-box;
}

button {
    background: #3498db;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background: #2980b9;
}

.lib-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    animation: fadeIn 0.3s ease-out;
}

.lib-card h4 {
    margin-top: 0;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.5rem;
}

.demo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafafa;
    padding: 1rem;
    border-radius: 4px;
}

.badge {
    font-weight: bold;
    min-width: 80px;
    text-align: center;
}

.drag-item {
    width: 60px;
    height: 60px;
    background: #9b59b6;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: grab;
    user-select: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.drag-item:active {
    cursor: grabbing;
    background: #8e44ad;
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.tabs button {
    flex: 1;
    background: #eee;
    color: #666;
}

.tabs button:hover {
    background: #e0e0e0;
}

.tabs button.active {
    background: #3498db;
    color: white;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>

}

defineCustomElement('can-about', About,() => {});
