@props(['eyebrow' => 'Available Customisation', 'headingLines' => [], 'intro' => null, 'items' => [], 'ctaHref' => null, 'ctaLabel' => 'Request Custom Specification', 'productName' => 'Mutton Cloth', 'specCode' => 'MC / CUSTOM'])
@php($widthItem = $items[0] ?? ['title' => 'Width', 'description' => 'Manufactured to requirement.'])
@php($lengthItem = $items[1] ?? ['title' => 'Roll Length', 'description' => 'Manufactured to requirement.'])
<section {{ $attributes->class(['customisation-drawing-section']) }} aria-labelledby="customisation-drawing-title">
    <div class="shell">
        <header class="customisation-drawing-heading">
            <p class="eyebrow">{{ $eyebrow }}</p>
            <h2 id="customisation-drawing-title">@foreach($headingLines as $line){{ $line }}@if(!$loop->last)<br>@endif @endforeach</h2>
            @if($intro)<p>{{ $intro }}</p>@endif
        </header>

        <div class="customisation-drawing-grid">
            <div class="roll-drawing-wrap">
                <svg class="roll-drawing" viewBox="0 0 680 520" role="img" aria-labelledby="roll-drawing-name roll-drawing-description">
                    <title id="roll-drawing-name">Custom {{ $productName }} roll dimensions</title>
                    <desc id="roll-drawing-description">{{ $widthItem['title'] }}: {{ $widthItem['description'] }} {{ $lengthItem['title'] }}: {{ $lengthItem['description'] }}</desc>
                    <defs>
                        <marker id="dimension-arrow" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M8 0 0 4l8 4" /></marker>
                        <pattern id="roll-hatch" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(32)"><path d="M0 0v10" /></pattern>
                    </defs>
                    <g class="roll-object">
                        <path class="roll-sheet" d="M115 205 430 155c62-10 112 8 123 51l34 138-323 56c-78 13-136-12-149-65Z" />
                        <path class="roll-hatch" d="M115 205 430 155c62-10 112 8 123 51l34 138-323 56c-78 13-136-12-149-65Z" />
                        <ellipse cx="115" cy="270" rx="72" ry="67" />
                        <ellipse cx="115" cy="270" rx="49" ry="45" />
                        <ellipse cx="115" cy="270" rx="21" ry="19" />
                        <path d="M114 203c88 9 102 119 1 134M146 209c65 20 70 99 1 121M176 205c55 25 58 93 2 120" />
                        <path class="fabric-tail" d="M265 399c67 7 112-8 159-28 48-20 100-24 163-11l28 86c-72-15-127-10-178 13-63 28-128 32-198 8Z" />
                        <path d="M264 420c62 8 115-5 168-29 51-22 103-26 164-14M255 443c67 8 126-6 184-31 50-22 103-24 166-10" />
                    </g>
                    <g class="dimension-lines">
                        <path d="M49 170V91M584 325V91M57 105h519" marker-start="url(#dimension-arrow)" marker-end="url(#dimension-arrow)" />
                        <text x="316" y="86" text-anchor="middle">{{ strtoupper($widthItem['title']) }}</text>
                        <text class="dimension-value" x="316" y="128" text-anchor="middle">{{ strtoupper($widthItem['description']) }}</text>
                        <path d="M222 472v34M614 449v57M230 493h376" marker-start="url(#dimension-arrow)" marker-end="url(#dimension-arrow)" />
                        <text x="418" y="474" text-anchor="middle">{{ strtoupper($lengthItem['title']) }}</text>
                        <text class="dimension-value" x="418" y="516" text-anchor="middle">{{ strtoupper($lengthItem['description']) }}</text>
                    </g>
                    <g class="drawing-notes">
                        <text x="44" y="44">SERVOKNIT / {{ strtoupper($productName) }}</text>
                        <text x="44" y="61">CUSTOM MANUFACTURE</text>
                        <text x="528" y="44">NOT TO SCALE</text>
                    </g>
                </svg>
            </div>

            <aside class="spec-tag" aria-label="{{ $productName }} custom specification options">
                <span class="spec-tag-thread" aria-hidden="true"></span>
                <span class="spec-tag-hole" aria-hidden="true"></span>
                <header class="spec-tag-header">
                    <p>Product specification</p>
                    <div><h3>{{ $productName }}</h3><span>{{ $specCode }}</span></div>
                </header>
                <dl class="spec-tag-list">
                    @foreach(array_slice($items, 2) as $item)
                        <div class="spec-tag-row">
                            <dt>{{ $item['title'] }}</dt>
                            <dd>{{ $item['description'] }}</dd>
                        </div>
                    @endforeach
                </dl>
                @if($ctaHref)
                    <a href="{{ $ctaHref }}" class="spec-tag-cta">
                        <span>{{ $ctaLabel }}</span><span aria-hidden="true">→</span>
                    </a>
                @endif
            </aside>
        </div>
    </div>
</section>