Product Detail - Copy this React, Tailwind Component to your project

Create-detailed-components-with-these-requirements:-1.-Use-'use-client'-directive-for-client-side-components-2.-Style-with-Tailwind-CSS-utility-classes-for-responsive-design-3.-Use-Lucide-React-for-icons-(from-lucide-react-package).-Do-NOT-use-other-UI-libraries-unless-requested-4.-Use-stock-photos-from-picsum.photos-where-appropriate,-only-valid-URLs-you-know-exist-5.-Configure-next.config.js-image-remotePatterns-to-enable-stock-photos-from-picsum.photos-6.-Create-root-layout.tsx-page-that-wraps-necessary-navigation-items-to-all-pages-7.-MUST-implement-the-navigation-elements-items-in-their-rightful-place-i.e.-Left-sidebar,-Top-header-8.-Accurately-implement-necessary-grid-layouts-9.-Follow-proper-import-practices:---Use-@/-path-aliases---Keep-component-imports-organized---Update-current-src/app/page.tsx-with-new-comprehensive-code---Don't-forget-root-route-(page.tsx)-handling---You-MUST-complete-the-entire-prompt-before-stopping-E-commerce-Product-Detail-Page-for-Airpods-Max-Headphones-</summary_title>-<image_analysis>-1.-Navigation-Elements:---Top-header-with:-Phone-number,-Promotional-banner,-Language/Location-selectors---Main-navigation-with:-Logo,-Categories-dropdown,-Deals,-What's-New,-Delivery---Breadcrumb-trail-with:-Electronics->-Audio->-Headphones->-Shop-Headphones-by-type->-airpods-max---Search-bar-with-product-search-functionality-2.-Layout-Components:---Product-gallery:-600x600px-main-image-container---Thumbnail-strip:-80x80px-product-variants---Product-info-section:-~400px-width---Color-selector:-40px-circular-swatches---Quantity-selector:-120px-width-with-+/--controls-3.-Content-Sections:---Product-title---Rating-display-(4.5/5-stars-with-121-reviews)---Price-section-with-monthly-payment-option---Color-selection---Quantity-selector---Stock-status-indicator---Delivery-information-cards-4.-Interactive-Controls:---Color-selector-swatches-(5-options)---Quantity-adjustment-buttons---"Buy-Now"-button-(Primary-CTA)---"Add-to-Cart"-button-(Secondary-CTA)---Product-image-gallery-navigation---Postal-code-entry-field-5.-Colors:---Primary:-#004D2A-(Dark-Green)---Secondary:-#FFFFFF-(White)---Accent:-#FF6B00-(Orange)---Text:-#000000-(Black)---Background:-#F5F5F5-(Light-Gray)-6.-Grid/Layout-Structure:---Two-column-layout-for-desktop---Left-column:-Product-gallery-(50%)---Right-column:-Product-details-(50%)---Responsive-breakpoint-at-768px-</image_analysis>-<development_planning>-1.-Project-Structure:-```-src/-├──-components/-│-├──-layout/-│-│-├──-Header-│-│-├──-Navigation-│-│-└──-Breadcrumb-│-├──-features/-│-│-├──-ProductGallery-│-│-├──-ProductInfo-│-│-└──-AddToCart-│-└──-shared/-├──-assets/-├──-styles/-├──-hooks/-└──-utils/-```-2.-Key-Features:---Image-gallery-with-zoom-functionality---Color-variant-selection---Quantity-adjustment---Add-to-cart-functionality---Delivery-availability-checker---Payment-calculator-3.-State-Management:-```typescript-interface-ProductState-{-├──-product:-{-│-├──-selectedColor:-string-│-├──-quantity:-number-│-├──-price:-number-│-├──-availability:-boolean-│-└──-variants:-ProductVariant[]-├──-cart:-{-│-├──-items:-CartItem[]-│-├──-total:-number-│-└──-count:-number-├──-}-}-```-4.-Routes:-```typescript-const-routes-=-[-├──-'/',-├──-'/category/:id',-├──-'/product/:id',-└──-'/cart'-]-```-5.-Component-Architecture:---ProductPage-(Container)---ProductGallery-(Presentation)---ProductInfo-(Container)---ColorSelector-(Presentation)---QuantitySelector-(Presentation)---AddToCartButton-(Container)-6.-Responsive-Breakpoints:-```scss-$breakpoints:-(-├──-mobile:-320px,-├──-tablet:-768px,-├──-desktop:-1024px,-└──-wide:-1440px-);-```-</development_planning>