<?php
$assetBase =
    basename(rtrim(FCPATH, "\\/")) === "public" ? "assets/" : "public/assets/";
$phoneDisplay = $phoneDisplay ?? "+91 98765 43210";
$phoneHref = $phoneHref ?? "+919876543210";
$whatsappNumber = $whatsappNumber ?? "919876543210";
$categories = [
    [
        "key" => "recognition",
        "number" => "01",
        "title" => "Recognition and memory",
        "intro" =>
            "Does your current identity have genuine brand equity worth protecting?",
        "questions" => [
            "Customers recognise the logo without needing to read the full business name.",
            "The logo is easy to remember after a brief first impression.",
            "Existing customers would notice if the logo changed significantly.",
            "The logo contains at least one distinctive visual feature worth protecting.",
            "The logo is used consistently enough to have built recognition.",
        ],
    ],
    [
        "key" => "flexibility",
        "number" => "02",
        "title" => "Clarity and flexibility",
        "intro" =>
            "Can the logo perform reliably across modern digital and physical applications?",
        "questions" => [
            "The logo remains clear and readable at social-profile and favicon sizes.",
            "It works in one colour without gradients, shadows, or special effects.",
            "Horizontal, stacked, and icon-only versions are available when needed.",
            "The logo reproduces reliably in print, signage, embroidery, and digital use.",
            "Editable vector master files and organised exports are available.",
        ],
    ],
    [
        "key" => "relevance",
        "number" => "03",
        "title" => "Relevance and differentiation",
        "intro" =>
            "Does the logo represent the business today and stand apart from competitors?",
        "questions" => [
            "The logo reflects the business you are now, not the business you used to be.",
            "Its personality fits the customers and price position you want to attract.",
            "It looks meaningfully different from direct competitors.",
            "The design avoids overused symbols, templates, and short-lived trends.",
            "The logo can support future products, locations, or services.",
        ],
    ],
    [
        "key" => "trust",
        "number" => "04",
        "title" => "Trust and ownership",
        "intro" =>
            "Is the identity professionally resolved and safe for the business to grow with?",
        "questions" => [
            "The logo looks intentional and professionally made rather than improvised.",
            "Typography, spacing, colour, and alignment are consistent.",
            "The logo creates the right level of trust for the price and category.",
            "The business owns the approved artwork and can prove where it came from.",
            "No obvious competitor similarity or trademark concern has been identified.",
        ],
    ],
];
$questionNumber = 0;
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Free Logo Redesign Scorecard | BrandSquare</title>
    <meta name="description" content="Score your current logo in seven minutes. Get a clear retain, refresh, redesign, or rebuild recommendation with BrandSquare's free 100-point logo audit.">
    <link rel="canonical" href="<?= base_url("logo-redesign-scorecard") ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?= base_url(
        $assetBase . "css/landing_1.css",
    ) ?>">
    <link rel="stylesheet" href="<?= base_url($assetBase . "css/main.css") ?>">
    <link rel="stylesheet" href="<?= base_url(
        $assetBase . "css/logo_redesign_scorecard.css",
    ) ?>">
</head>
<body class="scorecard-page">
    <header class="scorecard-header">
        <nav aria-label="Main navigation">
            <a class="brand" href="<?= base_url() ?>" aria-label="BrandSquare home">Brand<span>Square.</span></a>
            <div class="scorecard-nav">
                <a href="<?= base_url() ?>">Home</a>
                <a href="<?= base_url(
                    "logo-redesign-india",
                ) ?>">Logo redesign</a>
                <a class="scorecard-call" href="tel:<?= esc(
                    $phoneHref,
                ) ?>">Call now</a>
            </div>
        </nav>
    </header>

    <main>
        <section class="scorecard-hero">
            <div class="scorecard-hero-copy">
                <span class="scorecard-kicker"><i></i> Free seven-minute logo audit</span>
                <h1>Does your logo need a <em>redesign?</em></h1>
                <p>Score your current identity across 20 practical checks and get a clear recommendation: retain, refresh, redesign, or rebuild.</p>
                <div class="scorecard-hero-actions">
                    <a href="#take-audit">Start my free scorecard <span>→</span></a>
                    <small>No design knowledge required</small>
                </div>
                <div class="scorecard-proof">
                    <span><b>20</b> practical checks</span>
                    <span><b>100</b> point score</span>
                    <span><b>4</b> clear outcomes</span>
                </div>
            </div>
            <div class="scorecard-cover" aria-label="Logo Redesign Scorecard preview">
                <span>BRANDSQUARE BRAND AUDIT / 2026</span>
                <b>LOGO<br><em>REDESIGN</em><br>SCORECARD</b>
                <p>Recognition · Flexibility<br>Differentiation · Trust</p>
                <i>____ / 100</i>
            </div>
        </section>

        <section class="scorecard-intro">
            <span>How it works</span>
            <div>
                <article><b>01</b><h2>Answer honestly</h2><p>Rate each statement from strongly disagree to strongly agree.</p></article>
                <article><b>02</b><h2>See your score</h2><p>Get category subtotals and a practical redesign-readiness result.</p></article>
                <article><b>03</b><h2>Choose the right change</h2><p>Avoid replacing useful brand equity or protecting a logo that limits growth.</p></article>
            </div>
        </section>

        <section class="scorecard-tool" id="take-audit">
            <div class="scorecard-tool-heading">
                <span>Interactive assessment</span>
                <h2>Audit the logo you use today.</h2>
                <p>Choose one answer for every statement. Your progress and category scores are calculated automatically.</p>
            </div>

            <form class="scorecard-form" data-scorecard novalidate>
                <div class="scorecard-progress" aria-label="Assessment progress">
                    <div><span data-progress-label>Category 1 of 4</span><b data-progress-percent>25%</b></div>
                    <i><span data-progress-bar></span></i>
                </div>

                <?php foreach ($categories as $categoryIndex => $category): ?>
                    <fieldset data-audit-step data-category="<?= esc(
                        $category["key"],
                    ) ?>" <?= $categoryIndex > 0 ? "hidden" : "" ?>>
                        <legend>
                            <span><?= esc($category["number"]) ?></span>
                            <div><b><?= esc(
                                $category["title"],
                            ) ?></b><small><?= esc(
    $category["intro"],
) ?></small></div>
                        </legend>

                        <?php foreach ($category["questions"] as $question): ?>
                            <?php $questionNumber++; ?>
                            <div class="audit-question">
                                <p><span><?= str_pad(
                                    (string) $questionNumber,
                                    2,
                                    "0",
                                    STR_PAD_LEFT,
                                ) ?></span><?= esc($question) ?></p>
                                <div class="audit-scale" role="radiogroup" aria-label="<?= esc(
                                    $question,
                                ) ?>">
                                    <?php foreach (
                                        [
                                            1 => "Strongly disagree",
                                            2 => "Mostly disagree",
                                            3 => "Unsure",
                                            4 => "Mostly agree",
                                            5 => "Strongly agree",
                                        ]
                                        as $score => $label
                                    ): ?>
                                        <label title="<?= esc($label) ?>">
                                            <input type="radio" name="q<?= $questionNumber ?>" value="<?= $score ?>" required aria-label="<?= esc(
    $label,
) ?>">
                                            <span><?= $score ?></span>
                                            <small><?= esc($label) ?></small>
                                        </label>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>

                        <div class="scorecard-form-actions">
                            <?php if (
                                $categoryIndex > 0
                            ): ?><button type="button" class="scorecard-back" data-audit-back>← Previous</button><?php endif; ?>
                            <button type="button" class="scorecard-next" data-audit-next><?= $categoryIndex ===
                            count($categories) - 1
                                ? "Calculate my score"
                                : "Next category" ?> <span>→</span></button>
                        </div>
                    </fieldset>
                <?php endforeach; ?>
            </form>

            <section class="scorecard-result" data-scorecard-result hidden aria-live="polite">
                <div class="result-summary">
                    <div class="result-score">
                        <span>Your logo score</span>
                        <b><i data-total-score>0</i><small>/100</small></b>
                    </div>
                    <div>
                        <span data-result-eyebrow>Your recommendation</span>
                        <h2 data-result-title>Strategic refresh</h2>
                        <p data-result-copy></p>
                    </div>
                </div>
                <div class="result-meter"><i><span data-result-meter></span></i><div><span>Rebuild</span><span>Redesign</span><span>Refresh</span><span>Retain</span></div></div>
                <div class="result-categories">
                    <article><span>Recognition</span><b data-category-score="recognition">0/25</b></article>
                    <article><span>Flexibility</span><b data-category-score="flexibility">0/25</b></article>
                    <article><span>Differentiation</span><b data-category-score="relevance">0/25</b></article>
                    <article><span>Trust</span><b data-category-score="trust">0/25</b></article>
                </div>

                <div class="scorecard-lead">
                    <div>
                        <span>Keep your result</span>
                        <h3>Get the complete PDF scorecard on WhatsApp.</h3>
                        <p>We’ll send the printable seven-page workbook and can give you a professional second opinion on your result.</p>
                    </div>
                    <form class="lead-form scorecard-lead-form" data-endpoint action="<?= base_url(
                        "leads",
                    ) ?>" method="post" novalidate>
                        <?= csrf_field() ?>
                        <input type="hidden" name="lead_type" value="web_logo_redesign_scorecard">
                        <input type="hidden" name="message" value="" data-scorecard-message>
                        <label class="website-field" aria-hidden="true">Website<input name="website" tabindex="-1" autocomplete="off"></label>
                        <label>Your name<input required name="name" autocomplete="name" placeholder="Enter your name"></label>
                        <label>WhatsApp number<input required name="phone" type="tel" inputmode="tel" autocomplete="tel" minlength="7" maxlength="40" placeholder="+91 98765 43210"></label>
                        <button type="submit" data-sending-label="Saving your result..." data-success-label="Scorecard requested ✓">Send my PDF scorecard <span>→</span></button>
                        <small>Free. No spam. Your audit result is included with your enquiry.</small>
                        <div class="form-message" role="status" aria-live="polite"></div>
                    </form>
                </div>
                <button class="scorecard-restart" type="button" data-scorecard-restart>Retake the assessment</button>
            </section>
        </section>

        <section class="scorecard-confidence">
            <div><span>Why this scorecard works</span><h2>Change only what the evidence says to change.</h2></div>
            <p>A redesign is not always the right answer. BrandSquare’s framework helps protect recognition when it is valuable—and exposes the practical problems that quietly reduce trust, usability, and growth.</p>
        </section>
    </main>

    <a class="scorecard-whatsapp" href="https://wa.me/<?= esc(
        ltrim($whatsappNumber, "+"),
    ) ?>?text=Hi%20BrandSquare%2C%20I%27d%20like%20help%20reviewing%20my%20logo%20score." target="_blank" rel="noopener noreferrer" aria-label="Discuss your logo score on WhatsApp"><span>●</span> Ask BrandSquare</a>

    <footer class="scorecard-footer">
        <div><a class="brand" href="<?= base_url() ?>">Brand<span>Square.</span></a><p>Strategic logo design and redesign for ambitious Indian businesses.</p></div>
        <div><a href="<?= base_url() ?>">Home</a><a href="<?= base_url(
    "logo-redesign-india",
) ?>">Logo redesign</a><a href="<?= base_url("sitemap") ?>">Sitemap</a></div>
        <div><a href="tel:<?= esc($phoneHref) ?>"><?= esc(
    $phoneDisplay,
) ?></a><a href="mailto:hello@brandsquare.co.in">hello@brandsquare.co.in</a></div>
    </footer>

    <script src="<?= base_url($assetBase . "js/landing.js") ?>"></script>
    <script src="<?= base_url(
        $assetBase . "js/logo_redesign_scorecard.js",
    ) ?>"></script>
</body>
</html>
