
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MARENA | Školení a IT správa</title>
    <style>
        /* Základní nastavení a barvy */
        :root {
            --primary-green: #2ecc71;
            --dark-text: #2c3e50;
            --light-bg: #f9f9f9;
            --white: #ffffff;
            --form-bg: #f4f7f6;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            color: var(--dark-text);
            line-height: 1.6;
            background-color: var(--white);
        }

        /* Hero sekce */
        .hero {
            padding: 60px 10% 0; 
            text-align: left;
            background: linear-gradient(135deg, #ffffff 60%, #e8f8f0 100%);
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap; 
        }

        .hero-text {
            flex: 1;
            min-width: 300px;
            margin-right: 20px;
            margin-bottom: 40px;
        }

        .hero h1 {
            font-size: 3rem;
            color: var(--primary-green);
            margin-bottom: 10px;
            margin-top: 10px;
            max-width: 600px;
            line-height: 1.2;
        }

        .hero p {
            font-size: 1.2rem;
            color: #7f8c8d;
            margin: 0;
        }

        /* ZDE JSOU APLIKOVÁNY ZMĚNY PRO ZMENŠENÍ A VYCENTROVÁNÍ OBRÁZKU */
        .hero-image {
            flex: 1;
            min-width: 300px;
            display: flex;
            justify-content: center; 
            align-items: center; 
        }

        .hero-image img {
            max-width: 50%; 
            height: auto;
            display: block;
        }

        /* Služby (Grid) */
        .services {
            padding: 50px 10%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            background: var(--white);
        }

        .service-card {
            display: block; 
            padding: 20px;
            border-left: 4px solid var(--primary-green);
            background: var(--light-bg);
            border-radius: 5px;
            text-decoration: none; 
            color: inherit; 
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .service-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .service-card h3 {
            margin-top: 0;
            color: var(--primary-green);
        }

        /* Kontakt a Formulář - Flex kontejner */
        .contact-container {
            display: flex;
            padding: 50px 10%;
            background-color: var(--light-bg);
            flex-wrap: wrap;
            gap: 40px;
        }

        .contact-info {
            flex: 1;
            min-width: 300px;
        }

        .contact-form-section {
            flex: 1;
            min-width: 300px;
        }

        .contact h2 {
            color: var(--primary-green);
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 10px;
            margin-top: 0;
        }

        .info-group {
            margin-bottom: 20px;
        }

        .info-group strong {
            display: block;
            color: var(--primary-green);
            margin-bottom: 5px;
        }

        .contact a {
            color: inherit;
            text-decoration: none;
            font-weight: bold;
        }

        /* Styly pro formulář */
        .contact-form {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: var(--dark-text);
        }

        .form-group input, 
        .form-group select, 
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            box-sizing: border-box; 
        }

        .form-group input:focus, 
        .form-group select:focus, 
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-green);
            box-shadow: 0 0 5px rgba(46, 204, 113, 0.2);
        }

        .submit-btn {
            background-color: var(--primary-green);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            transition: background 0.2s ease;
            width: 100%;
        }

        .submit-btn:hover {
            background-color: #27ae60;
        }

        /* Footer */
        footer {
            background: var(--primary-green);
            color: white;
            text-align: center;
            padding: 20px;
            font-size: 0.9rem;
        }

        /* Mobilní optimalizace */
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.2rem; }
            .hero-text { margin-right: 0; margin-bottom: 20px;}
            .hero { padding: 40px 5% 0; }
            .hero-image { justify-content: center; }
            .contact-container { padding: 40px 5%; }
        }
    </style>
</head>
<body>

    <section class="hero">
        <div class="hero-text">
            <p>„MODERNÍ IT ŘEŠENÍ PRO VÁS“</p>
            <h1>Školení, Konzultace, Podpora</h1>
        </div>
        <div class="hero-image">
            <img src="image_1.png" alt="Notebook s dashboardem IT služeb">
        </div>
    </section>

    <section class="services">
        <a href="skoleni-office.html" class="service-card">
            <h3>Školení MS Office</h3>
            <p>Ovládněte Excel, Word i PowerPoint na profesionální úrovni.</p>
        </a>
        <a href="umela-inteligence.html" class="service-card">
            <h3>Umělá inteligence</h3>
            <p>Naučíme vás využívat AI nástroje pro zvýšení efektivity práce.</p>
        </a>
        <a href="powerbi.html" class="service-card">
            <h3>Konfigurace PowerBI</h3>
            <p>Proměňte svá data v přehledné reporty a grafy.</p>
        </a>
        <a href="sprava-it.html" class="service-card">
            <h3>Správa IT</h3>
            <p>Kompletní péče o počítače a serverové systémy.</p>
        </a>
    </section>

    <div class="contact-container">
        <section class="contact-info contact">
            <h2>Kontakty</h2>
            
            <div class="info-group">
                <strong>Email:</strong>
                <a href="mailto:info@marena.cz">info@marena.cz</a>
            </div>

            <div class="info-group">
                <strong>Telefon:</strong>
                <a href="tel:+420734423674">+420 734 423 674</a>
            </div>

            <div class="info-group">
                <strong>IČO:</strong>
                <p>12345678<br></p>
            </div>
        </section>

        <section class="contact-form-section">
            <h2 style="color: var(--primary-green); margin-top: 0;">Napište mi</h2>
            
            <form action="https://formspree.io/f/xdaplgrz" method="POST" class="contact-form">
                <div class="form-group">
                    <label for="name">Jméno a příjmení</label>
                    <input type="text" id="name" name="name" placeholder="Vaše jméno..." required>
                </div>

                <div class="form-group">
                    <label for="email">Váš e-mail</label>
                    <input type="email" id="email" name="_replyto" placeholder="jmeno@email.cz" required>
                </div>

                <div class="form-group">
                    <label for="service">O jakou službu máte zájem?</label>
                    <select id="service" name="service">
                        <option value="MS Office">Školení MS Office</option>
                        <option value="AI">Umělá inteligence</option>
                        <option value="PowerBI">Konfigurace PowerBI</option>
                        <option value="IT Sprava">Správa IT</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="message">Vaše zpráva</label>
                    <textarea id="message" name="message" rows="5" placeholder="Jak vám mohu pomoci?" required></textarea>
                </div>

                <button type="submit" class="submit-btn">Odeslat poptávku</button>
            </form>
        </section>
    </div>

    <footer>
        &copy; 2026 MARENA. Všechna práva vyhrazena.
    </footer>

</body>
</html>