@extends('layouts.landing')

@section('content')

<main style="max-width: 1200px; margin: 0 auto; padding: 96px 24px;">
    <p style="font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted);">Coaching institute · est. tomorrow</p>
    <h1 style="font-family: 'Fraunces', serif; font-size: 48px; line-height: 1.1; margin-top: 24px; max-width: 800px;">
        Run your institute<br>
        <span style="font-style: italic; color: var(--primary);">like a faculty office.</span>
    </h1>
    <p style="margin-top: 24px; max-width: 600px; font-size: 18px; color: var(--text-muted); line-height: 1.6;">
        Students, staff, attendance, batches, timetables, learning materials, test generator, and admission inquiries — quietly organised in one warm dashboard.
    </p>
    <div style="margin-top: 40px; display: flex; gap: 12px;">
        <a href="{{ route('login') }}" class="btn btn-primary" style="padding: 14px 28px; font-size: 16px; gap: 8px;">
            Enter the office
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
        <a href="{{ route('inquire') }}" class="btn btn-outline" style="padding: 14px 28px; font-size: 16px;">Submit admission inquiry</a>
    </div>

    <div style="margin-top: 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;">
        <div style="border-top: 1px solid var(--card-border); padding-top: 24px;">
            <p style="font-size: 13px; color: var(--text-muted);">01</p>
            <h3 style="font-family: 'Fraunces', serif; font-size: 22px; margin-top: 8px;">People</h3>
            <p style="margin-top: 8px; font-size: 14px; color: var(--text-muted);">Students and staff with batches, subjects, and contact records.</p>
        </div>
        <div style="border-top: 1px solid var(--card-border); padding-top: 24px;">
            <p style="font-size: 13px; color: var(--text-muted);">02</p>
            <h3 style="font-family: 'Fraunces', serif; font-size: 22px; margin-top: 8px;">Operations</h3>
            <p style="margin-top: 8px; font-size: 14px; color: var(--text-muted);">Daily attendance, timetables, materials, and admission pipeline.</p>
        </div>
        <div style="border-top: 1px solid var(--card-border); padding-top: 24px;">
            <p style="font-size: 13px; color: var(--text-muted);">03</p>
            <h3 style="font-family: 'Fraunces', serif; font-size: 22px; margin-top: 8px;">Tests</h3>
            <p style="margin-top: 8px; font-size: 14px; color: var(--text-muted);">Question bank, randomised test generator, answer keys, export.</p>
        </div>
    </div>
</main>

<style>
.btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 8px;
    font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); }
.btn-outline:hover { background: #F5F3F1; }
</style>

@endsection