import {useState} from 'react'; import {useFetcher, Link} from 'react-router'; import { ChevronDown, Clock, Instagram, Mail, MessageCircle, Package, RotateCcw, Truck, Youtube, X, } from 'lucide-react'; import type { AbiirContactPageCms, AbiirContactReachRowCms, AbiirLegalPageCms, AbiirFaqPageCms, AbiirInfoPageCms, AbiirPressItemCms, AbiirPressPageCms, AbiirShippingPageCms, } from '~/lib/abiirStaticPages'; import { abiirFormErrorTextClass, abiirFormPrimaryButtonClass, abiirFormPrimaryButtonStyle, abiirFormStackClass, contactInputClass, contactLabelClass, } from '~/lib/abiirFormTheme'; const accent = '#c17d5c'; const burgundy = '#5d0b24'; /** * Static pages: center-aligned hero band + full-width main column (body copy stays left in children). */ export function Shell({ title, eyebrow = 'Help', subtitle, eyebrowTone = 'default', children, }: { title: string; /** Upper label above the title — matches collection “eyebrow” (e.g. Our Collection) */ eyebrow?: string; /** Figma: Raleway 16 / #5a5550 (FAQ band) */ subtitle?: string; /** `accent` = Support label (#c17d5c, Jost); `default` = Help band (burgundy Raleway) */ eyebrowTone?: 'default' | 'accent'; children: React.ReactNode; }) { const eyebrowClass = eyebrowTone === 'accent' ? "m-0 font-['Jost',sans-serif] text-[11px] font-medium uppercase not-italic leading-[1.1] tracking-[2.76px] text-[#c17d5c]" : "m-0 font-['Raleway',sans-serif] text-[0.75rem] font-medium uppercase not-italic leading-[1.1] tracking-[0.32em] text-[#5d0b24]"; return (

{eyebrow}

{title}

{subtitle ? (

{subtitle}

) : null}
{children}
); } export function AbiirFaqPageView({cms}: {cms: AbiirFaqPageCms}) { const [openId, setOpenId] = useState(null); return (
{cms.sections.map((section, sIdx) => (
0 ? 'mt-[51px]' : undefined} key={sIdx}>

{section.sectionTitle}

{section.items.map((item, iIdx) => { const id = `${sIdx}-${iIdx}`; const isOpen = openId === id; return (
{isOpen ? (

{item.answer}

) : null}
); })}
))}
); } const returnPolicyIcons = [RotateCcw, Package, Clock] as const; const ordersShippingIcons = [Truck, Package, Clock] as const; export function AbiirShippingPageView({cms}: {cms: AbiirShippingPageCms}) { return (

Orders & shipping

{cms.shippingOptions.map((row, i) => { const Icon = ordersShippingIcons[i % ordersShippingIcons.length]; return (

{row.title}

{row.leadTime}

{row.priceLine}

); })}

Returns & refunds

{cms.returnsPolicy.map((row, i) => { const Icon = returnPolicyIcons[i % returnPolicyIcons.length]; return (

{row.title}

); })}

{cms.bannerHeadline}

); } export function AbiirInfoTextPageView({cms}: {cms: AbiirInfoPageCms}) { return ( {cms.intro ? (

{cms.intro}

) : null}
{cms.paragraphs.map((p, i) => (

{p}

))}
); } const EMAIL_IN_TEXT = /([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,})/gi; const SHIPPING_LINK_PHRASE = 'Shipping & Returns page'; function LegalMailAndShippingLinks({ text, emailLinkClassName = 'text-[#c17d5c] no-underline transition-opacity hover:opacity-90', }: { text: string; emailLinkClassName?: string; }) { if (text.includes(SHIPPING_LINK_PHRASE)) { const [a, b] = text.split(SHIPPING_LINK_PHRASE); return ( <> {LegalMailAndShippingLinks({text: a || '', emailLinkClassName})} {SHIPPING_LINK_PHRASE} {LegalMailAndShippingLinks({text: b || '', emailLinkClassName})} ); } const parts = text.split(EMAIL_IN_TEXT); return ( <> {parts.map((part, i) => i % 2 === 1 ? ( {part} ) : ( {part} ), )} ); } function LegalParagraphBlock({text}: {text: string}) { if (text.includes('\n')) { return (

); } return (

); } export function AbiirLegalPageView({cms}: {cms: AbiirLegalPageCms}) { return (

{cms.sections.map((section, sIdx) => (

{section.title}

{section.paragraphs.map((p, pIdx) => (
))} {section.listItems?.length ? (
    {section.listItems.map((item) => (
    • ))}
) : null} {section.trailingParagraphs?.map((p, tpIdx) => (
))}
))}
); } type ContactViewProps = {cms: AbiirContactPageCms}; function contactReachRowIcon( row: AbiirContactReachRowCms, ) { const c = 'h-4 w-4 text-[#c17d5c]'; if (row.icon === 'message') { return ; } if (row.icon === 'clock') { return ; } return ; } function socialIcon(network: 'instagram' | 'youtube') { const c = 'h-[15px] w-[15px] shrink-0 text-[#1a1a18]'; return network === 'youtube' ? ( ) : ( ); } function ContactFormBlock({cms}: ContactViewProps) { const fetcher = useFetcher<{ok?: boolean; error?: string}>(); const err = fetcher.data && !fetcher.data.ok; const p = cms.formPlaceholders; return (
{fetcher.data?.ok ? (

{cms.formSuccessText}

) : ( {cms.formHeadline ? (

{cms.formHeadline}

) : null}