<?php
require_once("layouts/home/header.php");

$homeBrand = !empty($site_data['brand']) ? (string)$site_data['brand'] : 'A2Z Digital Tools';
$homeInitialsSource = preg_replace('/\s+/', '', $homeBrand);
$homeInitials = strtoupper(substr($homeInitialsSource, 0, 2));
if ($homeInitials === '') {
    $homeInitials = 'A2Z';
}
$registrationEnabled = (
    isset($site_data['self_registertion'])
    && strtolower(trim((string)$site_data['self_registertion'])) === 'active'
);
?>

<style>
    .home-page {
        color: var(--ref-ink);
        background: var(--ref-canvas);
    }

    .home-container {
        width: min(1180px, calc(100% - 48px));
        margin-right: auto;
        margin-left: auto;
    }

    .home-hero {
        position: relative;
        isolation: isolate;
        min-height: 780px;
        min-height: max(780px, 100svh);
        display: grid;
        place-items: center;
        margin-top: -94px;
        padding: 202px 24px 76px;
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.96) 72%, var(--ref-white));
    }

    .home-hero::before,
    .home-hero::after {
        content: "";
        position: absolute;
        left: 50%;
        z-index: -2;
        pointer-events: none;
        transform: translateX(-50%);
    }

    .home-hero::before {
        top: 25px;
        z-index: -1;
        width: min(1120px, 82vw);
        height: 280px;
        background: radial-gradient(ellipse, rgba(173, 135, 73, 0.52) 0%, rgba(173, 135, 73, 0.27) 43%, rgba(173, 135, 73, 0) 76%);
        filter: blur(34px);
    }

    .home-hero::after {
        top: 72px;
        width: min(1560px, 112vw);
        height: 590px;
        background: radial-gradient(ellipse, rgba(197, 216, 246, 0.82) 0%, rgba(233, 238, 245, 0.76) 48%, rgba(233, 238, 245, 0) 76%);
        filter: blur(22px);
    }

    .home-hero-inner {
        position: relative;
        z-index: 1;
        width: min(1120px, 100%);
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .home-ornament {
        width: 176px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 23px;
        color: var(--ref-gold);
    }

    .home-ornament::before,
    .home-ornament::after {
        content: "";
        width: 66px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--ref-gold));
    }

    .home-ornament::after {
        background: linear-gradient(90deg, var(--ref-gold), transparent);
    }

    .home-ornament span {
        width: 9px;
        height: 9px;
        border: 1px solid var(--ref-gold);
        transform: rotate(45deg);
    }

    .home-eyebrow {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 19px;
        border: 1px solid rgba(20, 40, 68, 0.11);
        border-radius: 999px;
        color: var(--ref-navy);
        background: rgba(255, 255, 255, 0.48);
        box-shadow: 0 10px 30px rgba(20, 40, 68, 0.04);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.13em;
        text-transform: uppercase;
    }

    .home-eyebrow i {
        color: var(--ref-gold);
    }

    .home-hero h1 {
        max-width: 880px;
        margin: 27px auto 0;
        color: var(--ref-navy);
        font-family: var(--ref-serif);
        font-size: clamp(46px, 5.1vw, 72px);
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 1.02;
    }

    .home-hero-lead {
        max-width: 700px;
        margin: 20px auto 0;
        color: var(--ref-muted);
        font-size: 18px;
        font-weight: 400;
        line-height: 1.72;
    }

    .home-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 31px;
    }

    .home-btn {
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 26px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none !important;
        transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
    }

    .home-btn-primary {
        border-color: var(--ref-navy);
        color: var(--ref-white) !important;
        background: var(--ref-navy);
        box-shadow: 0 12px 26px rgba(20, 40, 68, 0.18);
    }

    .home-btn-primary:hover {
        border-color: var(--ref-navy-hover);
        color: var(--ref-white) !important;
        background: var(--ref-navy-hover);
        transform: translateY(-2px);
    }

    .home-btn-secondary {
        border-color: rgba(20, 40, 68, 0.15);
        color: var(--ref-navy) !important;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 8px 24px rgba(20, 40, 68, 0.06);
    }

    .home-btn-secondary:hover {
        border-color: rgba(173, 135, 73, 0.68);
        color: var(--ref-navy) !important;
        background: var(--ref-white);
        transform: translateY(-2px);
    }

    .home-category-rail {
        width: min(980px, 100%);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 92px;
        border-top: 1px solid rgba(20, 40, 68, 0.14);
        border-bottom: 1px solid rgba(20, 40, 68, 0.08);
    }

    .home-category-item {
        position: relative;
        min-width: 0;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        gap: 13px;
        padding: 21px 28px;
        text-align: left;
    }

    .home-category-item + .home-category-item::before {
        content: "";
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 0;
        width: 1px;
        background: rgba(20, 40, 68, 0.1);
    }

    .home-category-icon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(20, 40, 68, 0.08);
        border-radius: 50%;
        color: var(--ref-navy);
        background: rgba(255, 255, 255, 0.56);
    }

    .home-category-item strong,
    .home-category-item small {
        display: block;
    }

    .home-category-item strong {
        color: var(--ref-navy);
        font-family: var(--ref-serif);
        font-size: 16px;
        line-height: 1.15;
    }

    .home-category-item small {
        margin-top: 5px;
        color: var(--ref-muted);
        font-size: 10px;
        line-height: 1.45;
    }

    .home-services {
        position: relative;
        padding: 104px 0 112px;
        background: var(--ref-ivory);
    }

    .home-section-head {
        max-width: 760px;
        margin: 0 auto 48px;
        text-align: center;
    }

    .home-section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--ref-gold);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .home-section-kicker::before,
    .home-section-kicker::after {
        content: "";
        width: 28px;
        height: 1px;
        background: currentColor;
        opacity: 0.6;
    }

    .home-section-head h2 {
        margin: 15px 0 0;
        color: var(--ref-navy);
        font-family: var(--ref-serif);
        font-size: clamp(36px, 4vw, 52px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 1.08;
    }

    .home-section-head p {
        max-width: 660px;
        margin: 17px auto 0;
        color: var(--ref-muted);
        font-size: 15px;
        line-height: 1.72;
    }

    .home-services-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .home-service-card {
        position: relative;
        scroll-margin-top: 112px;
        min-height: 270px;
        display: flex;
        flex-direction: column;
        padding: 27px;
        overflow: hidden;
        border: 1px solid var(--ref-line);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 14px 36px rgba(20, 40, 68, 0.07);
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .home-service-card:nth-child(3n + 2) {
        background: linear-gradient(145deg, var(--ref-white), var(--ref-navy-soft));
    }

    .home-service-card:nth-child(6n + 4) {
        background: linear-gradient(145deg, var(--ref-white), var(--ref-ivory));
    }

    .home-service-card::after {
        content: "";
        position: absolute;
        right: -38px;
        bottom: -42px;
        width: 112px;
        height: 112px;
        border: 1px solid rgba(173, 135, 73, 0.14);
        border-radius: 50%;
        pointer-events: none;
    }

    .home-service-card:hover {
        border-color: rgba(173, 135, 73, 0.48);
        box-shadow: 0 20px 44px rgba(20, 40, 68, 0.1);
        transform: translateY(-3px);
    }

    .home-service-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .home-service-icon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(20, 40, 68, 0.07);
        border-radius: 15px;
        color: var(--ref-navy);
        background: var(--ref-navy-soft);
        font-size: 19px;
    }

    .home-service-number {
        color: rgba(20, 40, 68, 0.32);
        font-family: var(--ref-serif);
        font-size: 15px;
        font-style: italic;
    }

    .home-service-category {
        margin-top: 23px;
        color: var(--ref-gold);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }

    .home-service-title {
        margin: 9px 0 0;
        color: var(--ref-navy);
        font-family: var(--ref-serif);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.18;
    }

    .home-service-desc {
        margin: 11px 0 21px;
        color: var(--ref-muted);
        font-size: 13px;
        line-height: 1.62;
    }

    .home-service-link {
        position: relative;
        z-index: 1;
        width: fit-content;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-top: auto;
        color: var(--ref-navy) !important;
        font-size: 11px;
        font-weight: 600;
        text-decoration: none !important;
    }

    .home-service-link i {
        color: var(--ref-gold);
        font-size: 10px;
        transition: transform 160ms ease;
    }

    .home-service-link:hover i {
        transform: translateX(3px);
    }

    .home-partner {
        padding: 82px 0;
        background: var(--ref-white);
    }

    .home-partner-card {
        position: relative;
        isolation: isolate;
        width: min(1100px, calc(100% - 48px));
        min-height: 310px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 42px;
        margin: 0 auto;
        padding: 64px;
        overflow: hidden;
        border: 1px solid rgba(173, 135, 73, 0.42);
        border-radius: 30px;
        background: linear-gradient(125deg, var(--ref-ivory), var(--ref-white) 68%);
        box-shadow: 0 20px 52px rgba(20, 40, 68, 0.08);
    }

    .home-partner-card::before {
        content: "";
        position: absolute;
        top: 50%;
        right: -110px;
        z-index: -1;
        width: 420px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(ellipse, rgba(197, 216, 246, 0.7), rgba(197, 216, 246, 0));
        filter: blur(14px);
        transform: translateY(-50%);
    }

    .home-partner-copy {
        max-width: 610px;
    }

    .home-partner-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 15px;
        color: var(--ref-gold);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }

    .home-partner-copy h2 {
        margin: 0;
        color: var(--ref-navy);
        font-family: var(--ref-serif);
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 1.08;
    }

    .home-partner-copy p {
        max-width: 570px;
        margin: 17px 0 0;
        color: var(--ref-muted);
        font-size: 14px;
        line-height: 1.72;
    }

    .home-partner-actions {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 11px;
    }

    .home-partner-actions .home-btn {
        min-width: 168px;
    }

    .home-page a:focus-visible {
        outline: 3px solid rgba(173, 135, 73, 0.4);
        outline-offset: 4px;
    }

    @media (max-width: 960px) {
        .home-services-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .home-partner-card {
            align-items: flex-start;
            flex-direction: column;
            padding: 52px;
        }

        .home-partner-actions {
            flex-direction: row;
        }
    }

    @media (max-width: 720px) {
        .home-container {
            width: calc(100% - 28px);
        }

        .home-hero {
            min-height: 0;
            margin-top: -82px;
            padding: 142px 16px 58px;
        }

        .home-hero::before {
            top: 30px;
            width: 120vw;
            height: 220px;
            opacity: 0.8;
        }

        .home-hero::after {
            top: 90px;
            width: 155vw;
            height: 510px;
        }

        .home-ornament {
            width: 144px;
            margin-bottom: 14px;
        }

        .home-hero h1 {
            margin-top: 22px;
            font-size: clamp(40px, 11vw, 54px);
            line-height: 1.01;
        }

        .home-hero-lead {
            margin-top: 17px;
            font-size: 15px;
            line-height: 1.65;
        }

        .home-category-rail {
            grid-template-columns: 1fr;
            margin-top: 55px;
        }

        .home-category-item {
            padding: 16px 12px;
        }

        .home-category-item + .home-category-item::before {
            top: 0;
            right: 0;
            bottom: auto;
            width: auto;
            height: 1px;
        }

        .home-services {
            padding: 78px 0 84px;
        }

        .home-section-head {
            margin-bottom: 34px;
        }

        .home-services-grid {
            grid-template-columns: 1fr;
        }

        .home-service-card {
            min-height: 250px;
        }

        .home-partner {
            padding: 56px 0;
        }

        .home-partner-card {
            width: calc(100% - 28px);
            min-height: 0;
            padding: 40px 28px;
            border-radius: 24px;
        }

        .home-partner-actions {
            width: 100%;
        }

        .home-partner-actions .home-btn {
            flex: 1;
        }
    }

    @media (max-width: 440px) {
        .home-eyebrow {
            min-height: 38px;
            padding: 0 14px;
            font-size: 8px;
        }

        .home-actions,
        .home-partner-actions {
            width: 100%;
            flex-direction: column;
        }

        .home-actions .home-btn,
        .home-partner-actions .home-btn {
            width: min(100%, 290px);
        }

        .home-service-card {
            padding: 23px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .home-page *,
        .home-page *::before,
        .home-page *::after {
            scroll-behavior: auto !important;
            transition: none !important;
        }
    }
</style>

<div class="home-page">
    <section class="home-hero" aria-labelledby="homeHeroTitle">
        <div class="home-hero-inner">
            <div class="home-ornament" aria-hidden="true"><span></span></div>

            <div class="home-eyebrow">
                <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i>
                A2Z PDF &middot; ID &middot; Mobile Utilities
            </div>

            <h1 id="homeHeroTitle">PDF, ID and mobile tools&mdash;made simple.</h1>
            <p class="home-hero-lead">
                Merge, split and compress PDFs, prepare ID photos, and resize mobile images from one clear workspace.
            </p>

            <div class="home-actions">
                <?php if ($registrationEnabled): ?>
                <a href="https://<?= htmlspecialchars($_SERVER['SERVER_NAME'], ENT_QUOTES, 'UTF-8') ?>/members/login" class="home-btn home-btn-primary">
                    <span>Create Account</span>
                    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                </a>
                 <?php endif; ?>
                <a href="#a2z-services" class="home-btn home-btn-secondary">
                    <span>Explore All Tools</span>
                </a>
            </div>

            <div class="home-category-rail" aria-label="A2Z tool categories">
                <div class="home-category-item">
                    <span class="home-category-icon" aria-hidden="true"><i class="fa-solid fa-file-pdf"></i></span>
                    <span><strong>PDF Tools</strong><small>Merge, split, compress and convert</small></span>
                </div>
                <div class="home-category-item">
                    <span class="home-category-icon" aria-hidden="true"><i class="fa-solid fa-id-card"></i></span>
                    <span><strong>ID &amp; Photo Sizing</strong><small>Cards, photos, signatures and sheets</small></span>
                </div>
                <div class="home-category-item">
                    <span class="home-category-icon" aria-hidden="true"><i class="fa-solid fa-mobile-screen-button"></i></span>
                    <span><strong>Mobile Utilities</strong><small>Compress and convert phone images</small></span>
                </div>
            </div>
        </div>
    </section>

    <section id="a2z-services" class="home-services" aria-labelledby="homeServicesTitle">
        <div class="home-container">
            <div class="home-section-head">
                <div class="home-section-kicker">A2Z Utility Collection</div>
                <h2 id="homeServicesTitle">Every essential document tool, beautifully organized.</h2>
                <p>Choose the utility you need and complete everyday PDF, ID-sizing, photo and mobile-image work without a complicated setup.</p>
            </div>

            <div class="home-services-grid">
                <?php
                $services = array(
                    array(
                        'id' => 'merge-pdf',
                        'category' => 'PDF Tools',
                        'icon' => 'fa-object-group',
                        'title' => 'Merge PDF',
                        'desc' => 'Combine multiple PDF files into one clean document.'
                    ),
                    array(
                        'id' => 'split-pdf',
                        'category' => 'PDF Tools',
                        'icon' => 'fa-scissors',
                        'title' => 'Split PDF',
                        'desc' => 'Separate selected pages into individual PDF files.'
                    ),
                    array(
                        'id' => 'compress-pdf',
                        'category' => 'PDF Tools',
                        'icon' => 'fa-compress',
                        'title' => 'Compress PDF',
                        'desc' => 'Reduce PDF file size for faster sharing and upload.'
                    ),
                    array(
                        'id' => 'pdf-to-jpg',
                        'category' => 'PDF Tools',
                        'icon' => 'fa-file-image',
                        'title' => 'PDF to JPG',
                        'desc' => 'Turn PDF pages into clear, shareable JPG images.'
                    ),
                    array(
                        'id' => 'image-to-pdf',
                        'category' => 'PDF Tools',
                        'icon' => 'fa-images',
                        'title' => 'Images to PDF',
                        'desc' => 'Create an ordered PDF from JPG, PNG or phone images.'
                    ),
                    array(
                        'id' => 'organize-pdf',
                        'category' => 'PDF Tools',
                        'icon' => 'fa-rotate',
                        'title' => 'Rotate & Organize PDF',
                        'desc' => 'Rotate, reorder and arrange PDF pages correctly.'
                    ),
                    array(
                        'id' => 'passport-photo',
                        'category' => 'ID & Photo',
                        'icon' => 'fa-user-tie',
                        'title' => 'Passport Photo Maker',
                        'desc' => 'Prepare correctly sized passport-style photo sheets.'
                    ),
                    array(
                        'id' => 'id-card-resize',
                        'category' => 'ID & Photo',
                        'icon' => 'fa-id-card',
                        'title' => 'ID Card Resize',
                        'desc' => 'Resize ID card images to clean print-ready dimensions.'
                    ),
                    array(
                        'id' => 'id-card-a4',
                        'category' => 'ID & Photo',
                        'icon' => 'fa-print',
                        'title' => 'ID Card A4 Print Sheet',
                        'desc' => 'Arrange ID card fronts and backs on an A4 page.'
                    ),
                    array(
                        'id' => 'signature-resize',
                        'category' => 'ID & Photo',
                        'icon' => 'fa-signature',
                        'title' => 'Signature Resize',
                        'desc' => 'Resize signatures for forms and online applications.'
                    ),
                    array(
                        'id' => 'mobile-compressor',
                        'category' => 'Mobile Utility',
                        'icon' => 'fa-mobile-screen-button',
                        'title' => 'Mobile Photo Compressor',
                        'desc' => 'Reduce phone photo size and target smaller KB output.'
                    ),
                    array(
                        'id' => 'image-converter',
                        'category' => 'Mobile Utility',
                        'icon' => 'fa-repeat',
                        'title' => 'JPG, PNG & WebP Converter',
                        'desc' => 'Convert common mobile image formats in a few steps.'
                    )
                );

                foreach ($services as $serviceIndex => $service):
                    $serviceNumber = str_pad((string)($serviceIndex + 1), 2, '0', STR_PAD_LEFT);
                ?>
                    <article id="<?=htmlspecialchars($service['id'], ENT_QUOTES, 'UTF-8')?>" class="home-service-card">
                        <div class="home-service-top">
                            <div class="home-service-icon" aria-hidden="true">
                                <i class="fa-solid <?=htmlspecialchars($service['icon'], ENT_QUOTES, 'UTF-8')?>"></i>
                            </div>
                            <span class="home-service-number"><?=htmlspecialchars($serviceNumber, ENT_QUOTES, 'UTF-8')?></span>
                        </div>
                        <div class="home-service-category"><?=htmlspecialchars($service['category'], ENT_QUOTES, 'UTF-8')?></div>
                        <h3 class="home-service-title"><?=htmlspecialchars($service['title'], ENT_QUOTES, 'UTF-8')?></h3>
                        <p class="home-service-desc"><?=htmlspecialchars($service['desc'], ENT_QUOTES, 'UTF-8')?></p>
                        <?php if ($registrationEnabled): ?>
                        <a class="home-service-link" href="https://<?= htmlspecialchars($_SERVER['SERVER_NAME'], ENT_QUOTES, 'UTF-8') ?>/members/ClientArea">
                             <?php endif; ?>
                            <span>Use this tool</span>
                            <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section class="home-partner" aria-labelledby="homePartnerTitle">
        <div class="home-partner-card">
            <div class="home-partner-copy">
                <div class="home-partner-badge">
                    <i class="fa-solid fa-shapes" aria-hidden="true"></i>
                    <?=htmlspecialchars($homeInitials, ENT_QUOTES, 'UTF-8')?> Workspace
                </div>
                <h2 id="homePartnerTitle">One account for every essential document tool.</h2>
                <p>Equip your daily work with practical PDF, photo, ID-sizing and mobile-image utilities in a calm, focused workspace.</p>
            </div>
            <div class="home-partner-actions">
                <?php if ($registrationEnabled): ?>
                <a href="https://<?= htmlspecialchars($_SERVER['SERVER_NAME'], ENT_QUOTES, 'UTF-8') ?>/members/ClientArea" class="home-btn home-btn-primary">
                    <span>Create Account</span>
                    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                </a>
                 <?php endif; ?>
                <a href="https://<?= htmlspecialchars($_SERVER['SERVER_NAME'], ENT_QUOTES, 'UTF-8') ?>/members/ClientArea" class="home-btn home-btn-secondary">
                    <span>Member Login</span>
                </a>
            </div>
        </div>
    </section>
</div>

<?php
require_once("layouts/home/footer.php");
?>
