// ヒトヤク — Shared UI Components // Header, Footer, Button, Tag, FAQ, Form inputs, Pharmacist photo placeholder // All consume design tokens from tokens.css const { useState, useEffect, useRef, useMemo } = React; function useIsMobile(bp = 768) { const [m, setM] = useState(typeof window !== 'undefined' && window.innerWidth < bp); useEffect(() => { const h = () => setM(window.innerWidth < bp); window.addEventListener('resize', h); return () => window.removeEventListener('resize', h); }, [bp]); return m; } // ─── Wordmark ──────────────────────────────────────────────── function Wordmark({ size = 22, color, sub = true }) { return ( {e.preventDefault(); window.HY_NAV?.('top');}} style={{display:'inline-flex',alignItems:'baseline',gap:8,textDecoration:'none'}}> ヒトヤク {sub && ( HITOYAKU )} ); } // ─── Button ────────────────────────────────────────────────── function Button({ variant='primary', size='md', icon, iconRight, children, onClick, href, fullWidth, ...rest }) { const base = { display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8, fontFamily:'inherit', fontWeight:500, border:'1px solid transparent', cursor:'pointer', transition:'background .18s, color .18s, border-color .18s, box-shadow .18s, transform .12s', textDecoration:'none', whiteSpace:'nowrap', width: fullWidth ? '100%' : undefined, lineHeight: 1, }; const sizes = { sm: { padding:'10px 16px', fontSize:13, borderRadius:'var(--r-pill)' }, md: { padding:'14px 24px', fontSize:15, borderRadius:'var(--r-pill)' }, lg: { padding:'18px 32px', fontSize:16, borderRadius:'var(--r-pill)' }, }; const variants = { primary: { background:'var(--brand)', color:'#fff', borderColor:'var(--brand)' }, deep: { background:'var(--brand-deep)', color:'#fff', borderColor:'var(--brand-deep)' }, ghost: { background:'transparent', color:'var(--ink-1)', borderColor:'var(--line-strong)' }, soft: { background:'var(--brand-wash)', color:'var(--brand-deep)', borderColor:'transparent' }, accent: { background:'var(--accent-warm)', color:'#fff', borderColor:'var(--accent-warm)' }, link: { background:'transparent', color:'var(--brand-deep)', borderColor:'transparent', padding: 0 }, }; const style = { ...base, ...sizes[size], ...variants[variant] }; const El = href ? 'a' : 'button'; return ( { if (variant==='primary'||variant==='deep') e.currentTarget.style.background='var(--brand-deep)'; if (variant==='ghost') e.currentTarget.style.background='var(--bg-soft)'; if (variant==='accent') e.currentTarget.style.filter='brightness(.95)'; e.currentTarget.style.transform='translateY(-1px)'; }} onMouseLeave={(e)=>{ e.currentTarget.style.background = variants[variant].background; e.currentTarget.style.filter=''; e.currentTarget.style.transform=''; }} {...rest}> {icon} {children} {iconRight} ); } // Tiny inline icons (stroke style, hand-rolled) const Ico = { arrow: , search: , filter: , chat: , line: , check: , plus: , globe: , pin: , online: , shop: , }; // ─── Tag / Pill ────────────────────────────────────────────── function Tag({ children, tone='neutral', size='md', icon }) { const tones = { neutral: { bg:'var(--bg-soft)', fg:'var(--ink-2)', bd:'var(--line-soft)' }, brand: { bg:'var(--brand-wash)', fg:'var(--brand-deep)', bd:'transparent' }, warm: { bg:'var(--accent-warm-soft)', fg:'#8B5A2B', bd:'transparent' }, outline: { bg:'transparent', fg:'var(--ink-2)', bd:'var(--line-mid)' }, online: { bg:'#EAF6EF', fg:'#2F7A52', bd:'transparent' }, busy: { bg:'#FBEFE0', fg:'#A05C2B', bd:'transparent' }, off: { bg:'#F1EFEA', fg:'var(--ink-3)', bd:'transparent' }, }; const t = tones[tone] || tones.neutral; const sizes = { sm: { fontSize:11, padding:'3px 8px' }, md: { fontSize:12, padding:'5px 10px' }, lg: { fontSize:13, padding:'7px 14px' }, }; return ( {icon}{children} ); } // ─── Status dot ────────────────────────────────────────────── function StatusDot({ status }) { const map = { online: { c:'var(--status-online)', label:'相談受付中' }, busy: { c:'var(--status-busy)', label:'返信に時間がかかる場合あり' }, off: { c:'var(--status-off)', label:'現在受付停止中' }, }; const m = map[status] || map.off; return ( {m.label} ); } // ─── Section header (eyebrow + title + lede) ──────────────── function SectionHead({ eyebrow, title, lede, align='left', titleAs='h2' }) { const TitleEl = titleAs; return (
{eyebrow && (
— {eyebrow}
)} {title} {lede && (

{lede}

)}
); } // ─── Pharmacist photo ──────────────────────────────────────── function PharmacistPhoto({ p, size = 160, rounded = '50%', slotId }) { const hue = p.photoHue ?? 140; const bg = `linear-gradient(140deg, hsl(${hue} 32% 86%) 0%, hsl(${hue} 28% 74%) 100%)`; const photoSrc = p.photo || null; const inner = photoSrc ? ( {p.name} ) : (
{p.name?.[0] || 'P'}
); return (
{inner}
); } // ─── Header (global nav) ───────────────────────────────────── function SiteHeader({ current, transparent }) { const [menuOpen, setMenuOpen] = useState(false); const isMobile = useIsMobile(); const nav = [ { id:'top', label:'ヒトヤクとは' }, { id:'list', label:'薬剤師を探す' }, { id:'consult', label:'相談する' }, { id:'corp', label:'法人の方へ' }, { id:'pharma', label:'薬剤師・薬局の方へ' }, { id:'faq', label:'よくある質問' }, ]; const go = (id) => { window.HY_NAV?.(id); setMenuOpen(false); }; return (
{!isMobile && ( )} {!isMobile && (
)} {isMobile && ( )}
{isMobile && menuOpen && (
{nav.map(n=>( {e.preventDefault(); go(n.id);}} style={{ display:'block', padding:'14px 24px', fontSize:15, fontWeight: current===n.id ? 600 : 400, color: current===n.id ? 'var(--brand-deep)' : 'var(--ink-1)', borderBottom:'1px solid var(--line-soft)', }}>{n.label} ))}
)}
); } // ─── Footer ────────────────────────────────────────────────── function SiteFooter() { const Col = ({title, items}) => (
{title}
); const isMobile = useIsMobile(); return ( ); } // ─── FAQ Accordion ─────────────────────────────────────────── function FAQ({ items, defaultOpen=0 }) { const [open, setOpen] = useState(defaultOpen); return (
{items.map((it, i)=>(
{open===i && (
A.
{it.a}
)}
))}
); } // ─── Form inputs ───────────────────────────────────────────── function Field({ label, hint, required, children, error }) { return ( ); } const inputBase = { fontFamily:'inherit', fontSize:15, color:'var(--ink-1)', background:'#fff', border:'1px solid var(--line-mid)', borderRadius:'var(--r-12)', padding:'14px 16px', outline:'none', transition:'border-color .15s, box-shadow .15s', width:'100%', }; function Input(props) { return {e.currentTarget.style.borderColor='var(--brand)'; e.currentTarget.style.boxShadow='var(--shadow-focus)';}} onBlur={(e)=>{e.currentTarget.style.borderColor='var(--line-mid)'; e.currentTarget.style.boxShadow='';}} />; } function Textarea(props) { return