// CMS pages: list views for packages, vehicles, blogs, pages, inquiries, users, menu, settings

// ---- Reusable table ----
const CmsTable = ({ columns, rows, onRowClick, empty = 'No items.' }) => (
  <div style={{ background: 'white', border: '1px solid #eae4d2', borderRadius: 12, overflow: 'hidden' }}>
    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
      <thead style={{ background: '#F7F5F0', borderBottom: '1px solid #eae4d2' }}>
        <tr>
          {columns.map(c => (
            <th key={c.key} style={{ textAlign: 'left', padding: '10px 16px', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8573', fontWeight: 600 }}>{c.label}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.length === 0 && <tr><td colSpan={columns.length} style={{ padding: 48, textAlign: 'center', color: '#8a8573' }}>{empty}</td></tr>}
        {rows.map((r, ri) => (
          <tr key={r.id || ri} onClick={() => onRowClick && onRowClick(r)} style={{ borderBottom: '1px solid #f3ecd9', cursor: onRowClick ? 'pointer' : 'default', transition: 'background .12s' }}
            onMouseEnter={e => e.currentTarget.style.background = '#FBFAF4'}
            onMouseLeave={e => e.currentTarget.style.background = 'white'}>
            {columns.map(c => <td key={c.key} style={{ padding: '12px 16px', verticalAlign: 'middle' }}>{c.render ? c.render(r) : r[c.key]}</td>)}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

// ---- Packages list ----
const CmsPackages = ({ state, setState, setCmsRoute }) => {
  const [filter, setFilter] = useState('all');
  const [q, setQ] = useState('');
  const list = state.packages
    .filter(p => filter === 'all' || p.status === filter)
    .filter(p => !q || p.title.toLowerCase().includes(q.toLowerCase()) || p.destination.toLowerCase().includes(q.toLowerCase()));

  const onDelete = id => {
    if (!confirm('Delete this package? This cannot be undone.')) return;
    setState(s => ({ ...s, packages: s.packages.filter(p => p.id !== id) }));
  };
  const togglePublish = (id) => {
    setState(s => ({ ...s, packages: s.packages.map(p => p.id === id ? { ...p, status: p.status === 'published' ? 'draft' : 'published' } : p) }));
  };

  return (
    <>
      <CmsPageHeader title="Tour packages" subtitle={`${state.packages.length} total · ${state.packages.filter(p => p.status === 'published').length} live on site`}
        actions={<>
          <Btn kind="ghost" icon="download">Export CSV</Btn>
          <Btn kind="primary" icon="plus" onClick={() => setCmsRoute({ route: 'packages-edit', id: 'new' })}>Add package</Btn>
        </>} />
      <div style={{ padding: '20px 28px' }}>
        <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap', alignItems: 'center' }}>
          {[['all', 'All'], ['published', 'Published'], ['draft', 'Draft']].map(([k, l]) => (
            <button key={k} onClick={() => setFilter(k)} style={{ padding: '6px 12px', borderRadius: 8, fontSize: 13, fontWeight: 500, background: filter === k ? 'var(--ink)' : 'transparent', color: filter === k ? 'white' : '#3a3a33', border: '1px solid ' + (filter === k ? 'var(--ink)' : '#eae4d2') }}>{l} <span style={{ opacity: 0.6 }}>{k === 'all' ? state.packages.length : state.packages.filter(p => p.status === k).length}</span></button>
          ))}
          <div style={{ marginLeft: 'auto', position: 'relative', width: 260 }}>
            <Icon name="search" size={13} style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: '#8a8573' }} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search title, destination..." style={{ width: '100%', padding: '7px 12px 7px 30px', border: '1px solid #eae4d2', borderRadius: 8, fontSize: 13, background: '#F7F5F0', outline: 'none' }} />
          </div>
        </div>

        <CmsTable columns={[
          { key: 'title', label: 'Package', render: p => (
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 44, height: 44, borderRadius: 8, overflow: 'hidden', flexShrink: 0 }}><Img src={p.hero} style={{ width: 44, height: 44 }} /></div>
              <div>
                <div style={{ fontWeight: 500 }}>{p.title}</div>
                <div style={{ fontSize: 12, color: '#8a8573', marginTop: 2 }}>{p.destination} · {p.duration}</div>
              </div>
            </div>
          ) },
          { key: 'category', label: 'Type', render: p => <Pill tone={p.category === 'inbound' ? 'green' : 'blue'}>{p.category === 'inbound' ? 'Inbound' : 'Outbound'}</Pill> },
          { key: 'priceFrom', label: 'Price from', render: p => <span style={{ fontFamily: 'Geist Mono', fontSize: 12 }}>{fmtMYR(p.priceFrom)}</span> },
          { key: 'featured', label: 'Featured', render: p => p.featured ? <Icon name="star" size={14} style={{ color: 'var(--accent)' }} /> : <span style={{ color: '#ccc' }}>—</span> },
          { key: 'status', label: 'Status', render: p => <CmsStatusBadge status={p.status} /> },
          { key: 'created', label: 'Created', render: p => <span style={{ color: '#8a8573', fontSize: 12 }}>{fmtDate(p.created)}</span> },
          { key: 'actions', label: '', render: p => (
            <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }} onClick={e => e.stopPropagation()}>
              <button onClick={() => togglePublish(p.id)} title={p.status === 'published' ? 'Unpublish' : 'Publish'} style={{ padding: 6, borderRadius: 6, color: '#5a5544' }}><Icon name={p.status === 'published' ? 'eye-off' : 'eye'} size={14} /></button>
              <button onClick={() => setCmsRoute({ route: 'packages-edit', id: p.id })} title="Edit" style={{ padding: 6, borderRadius: 6, color: '#5a5544' }}><Icon name="pencil" size={14} /></button>
              <button onClick={() => onDelete(p.id)} title="Delete" style={{ padding: 6, borderRadius: 6, color: '#c9826c' }}><Icon name="trash-2" size={14} /></button>
            </div>
          ) },
        ]} rows={list} onRowClick={p => setCmsRoute({ route: 'packages-edit', id: p.id })} />
      </div>
    </>
  );
};

// ---- Vehicles list ----
const CmsVehicles = ({ state, setState, setCmsRoute }) => (
  <>
    <CmsPageHeader title="Vehicles" subtitle={`${state.vehicles.length} vehicles · ${state.vehicles.filter(v => v.available).length} available`}
      actions={<Btn kind="primary" icon="plus" onClick={() => setCmsRoute({ route: 'vehicles-edit', id: 'new' })}>Add vehicle</Btn>} />
    <div style={{ padding: '20px 28px' }}>
      <CmsTable columns={[
        { key: 'name', label: 'Vehicle', render: v => (
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ width: 56, height: 40, borderRadius: 6, overflow: 'hidden', flexShrink: 0 }}><Img src={v.photo} style={{ width: 56, height: 40 }} /></div>
            <div><div style={{ fontWeight: 500 }}>{v.name}</div><div style={{ fontSize: 12, color: '#8a8573' }}>{v.type}</div></div>
          </div>
        ) },
        { key: 'capacity', label: 'Capacity', render: v => <span>{v.capacity} pax · {v.luggage} bags</span> },
        { key: 'rate', label: 'Daily rate', render: v => <span style={{ fontFamily: 'Geist Mono', fontSize: 12 }}>{fmtMYR(v.rate)}</span> },
        { key: 'available', label: 'Availability', render: v => <Pill tone={v.available ? 'green' : 'red'}>{v.available ? 'Available' : 'Unavailable'}</Pill> },
        { key: 'status', label: 'Status', render: v => <CmsStatusBadge status={v.status} /> },
      ]} rows={state.vehicles} onRowClick={v => setCmsRoute({ route: 'vehicles-edit', id: v.id })} />
    </div>
  </>
);

// ---- Blog list ----
const CmsBlogs = ({ state, setState, setCmsRoute }) => (
  <>
    <CmsPageHeader title="Blog posts" subtitle={`${state.blogs.length} posts · ${state.blogs.filter(b => b.status === 'draft').length} in draft`}
      actions={<Btn kind="primary" icon="plus" onClick={() => setCmsRoute({ route: 'blogs-edit', id: 'new' })}>New post</Btn>} />
    <div style={{ padding: '20px 28px' }}>
      <CmsTable columns={[
        { key: 'title', label: 'Title', render: b => (
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ width: 56, height: 36, borderRadius: 6, overflow: 'hidden', flexShrink: 0 }}><Img src={b.featuredImage} style={{ width: 56, height: 36 }} /></div>
            <div>
              <div style={{ fontWeight: 500 }}>{b.title}</div>
              <div style={{ fontSize: 12, color: '#8a8573' }}>{b.excerpt.slice(0, 60)}...</div>
            </div>
          </div>
        ) },
        { key: 'category', label: 'Category' },
        { key: 'author', label: 'Author' },
        { key: 'date', label: 'Date', render: b => <span style={{ fontSize: 12, color: '#8a8573' }}>{fmtDate(b.date)}</span> },
        { key: 'status', label: 'Status', render: b => <CmsStatusBadge status={b.status} /> },
      ]} rows={state.blogs} onRowClick={b => setCmsRoute({ route: 'blogs-edit', id: b.id })} />
    </div>
  </>
);

// ---- Pages list ----
const CmsPages = ({ state, setState, setCmsRoute }) => (
  <>
    <CmsPageHeader title="Pages" subtitle="Manage About, FAQ, Terms and any other static pages"
      actions={<Btn kind="primary" icon="plus" onClick={() => setCmsRoute({ route: 'pages-edit', id: 'new' })}>New page</Btn>} />
    <div style={{ padding: '20px 28px' }}>
      <CmsTable columns={[
        { key: 'title', label: 'Title', render: p => (
          <div>
            <div style={{ fontWeight: 500 }}>{p.title}</div>
            <div style={{ fontSize: 12, color: '#8a8573', fontFamily: 'Geist Mono' }}>/{p.slug}</div>
          </div>
        ) },
        { key: 'inMenu', label: 'In menu', render: p => p.inMenu ? <Icon name="check" size={14} style={{ color: 'var(--green)' }} /> : <span style={{ color: '#ccc' }}>—</span> },
        { key: 'status', label: 'Status', render: p => <CmsStatusBadge status={p.status} /> },
        { key: 'updated', label: 'Updated', render: p => <span style={{ fontSize: 12, color: '#8a8573' }}>{fmtDate(p.updated)}</span> },
      ]} rows={state.pages} onRowClick={p => setCmsRoute({ route: 'pages-edit', id: p.id })} />
    </div>
  </>
);

// ---- Inquiries ----
const CmsInquiries = ({ state, setState, cmsRoute, setCmsRoute }) => {
  const [filter, setFilter] = useState('all');
  const [selected, setSelected] = useState(cmsRoute.openId || null);
  const list = state.inquiries.filter(i => filter === 'all' || i.status === filter);
  const open = list.find(i => i.id === selected) || state.inquiries.find(i => i.id === selected);

  const setStatus = (id, status) => setState(s => ({ ...s, inquiries: s.inquiries.map(i => i.id === id ? { ...i, status } : i) }));

  return (
    <>
      <CmsPageHeader title="Inquiries" subtitle={`${state.inquiries.filter(i => i.status === 'new').length} new · ${state.inquiries.filter(i => i.status === 'read').length} read · ${state.inquiries.filter(i => i.status === 'responded').length} responded`}
        actions={<Btn kind="ghost" icon="download">Export</Btn>} />
      <div style={{ padding: '20px 28px', display: 'grid', gridTemplateColumns: open ? '1fr 460px' : '1fr', gap: 20, alignItems: 'start' }}>
        <div>
          <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
            {[['all', 'All'], ['new', 'New'], ['read', 'Read'], ['responded', 'Responded']].map(([k, l]) => {
              const count = k === 'all' ? state.inquiries.length : state.inquiries.filter(i => i.status === k).length;
              return (
                <button key={k} onClick={() => setFilter(k)} style={{ padding: '6px 12px', borderRadius: 8, fontSize: 13, fontWeight: 500, background: filter === k ? 'var(--ink)' : 'transparent', color: filter === k ? 'white' : '#3a3a33', border: '1px solid ' + (filter === k ? 'var(--ink)' : '#eae4d2') }}>{l} <span style={{ opacity: 0.6 }}>{count}</span></button>
              );
            })}
          </div>
          <CmsTable columns={[
            { key: 'name', label: 'From', render: i => (
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <div style={{ width: 30, height: 30, borderRadius: '50%', background: '#EFEADA', color: '#5a5544', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600 }}>{i.name.split(' ').map(x => x[0]).join('').slice(0,2)}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6 }}>
                    {i.name}
                    {i.status === 'new' && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />}
                  </div>
                  <div style={{ fontSize: 11, color: '#8a8573' }}>{i.email}</div>
                </div>
              </div>
            ) },
            { key: 'service', label: 'Service', render: i => <Pill tone="neutral">{i.service}</Pill> },
            { key: 'message', label: 'Message', render: i => <div style={{ maxWidth: 360, color: '#5a5544', fontSize: 13, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{i.message}</div> },
            { key: 'date', label: 'Date', render: i => <span style={{ fontSize: 12, color: '#8a8573' }}>{relTime(i.date)}</span> },
            { key: 'status', label: 'Status', render: i => <CmsStatusBadge status={i.status} /> },
          ]} rows={list} onRowClick={i => { setSelected(i.id); if (i.status === 'new') setStatus(i.id, 'read'); }} />
        </div>

        {open && (
          <aside style={{ background: 'white', border: '1px solid #eae4d2', borderRadius: 12, padding: 24, position: 'sticky', top: 80 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
              <div>
                <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                  <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--green)', color: 'white', display: 'grid', placeItems: 'center', fontSize: 14, fontWeight: 600 }}>{open.name.split(' ').map(x => x[0]).join('').slice(0,2)}</div>
                  <div>
                    <div style={{ fontSize: 16, fontWeight: 600 }}>{open.name}</div>
                    <div style={{ fontSize: 12, color: '#8a8573' }}>{relTime(open.date)}</div>
                  </div>
                </div>
              </div>
              <button onClick={() => setSelected(null)} style={{ padding: 6 }}><Icon name="x" size={16} /></button>
            </div>
            <div style={{ marginTop: 20, display: 'grid', gap: 10, fontSize: 13 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 4 }}><span style={{ color: '#8a8573' }}>Email</span><a href={`mailto:${open.email}`} style={{ color: 'var(--accent)' }}>{open.email}</a></div>
              <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 4 }}><span style={{ color: '#8a8573' }}>Phone</span><span>{open.phone}</span></div>
              <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 4 }}><span style={{ color: '#8a8573' }}>Service</span><span>{open.service}</span></div>
              <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 4 }}><span style={{ color: '#8a8573' }}>Package</span><span>{open.package || '—'}</span></div>
              <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 4 }}><span style={{ color: '#8a8573' }}>Preferred</span><span>{open.preferred || '—'}</span></div>
              <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 4 }}><span style={{ color: '#8a8573' }}>Status</span><span><CmsStatusBadge status={open.status} /></span></div>
            </div>
            <div style={{ marginTop: 20, padding: 16, background: '#F7F5F0', borderRadius: 10, fontSize: 14, lineHeight: 1.55, whiteSpace: 'pre-wrap' }}>{open.message}</div>
            <div style={{ marginTop: 20, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Btn kind="primary" size="sm" icon="message-circle" onClick={() => { window.open(`https://wa.me/${open.phone.replace(/[^\d]/g, '')}?text=${encodeURIComponent('Hi ' + open.name + ', thanks for your inquiry...')}`, '_blank'); setStatus(open.id, 'responded'); }}>Reply via WA</Btn>
              <Btn kind="dark" size="sm" icon="mail" onClick={() => { window.open(`mailto:${open.email}?subject=Re: Your PXS Travel inquiry`, '_blank'); setStatus(open.id, 'responded'); }}>Email</Btn>
              {open.status !== 'responded' && <Btn kind="ghost" size="sm" onClick={() => setStatus(open.id, 'responded')}>Mark responded</Btn>}
            </div>
          </aside>
        )}
      </div>
    </>
  );
};

// ---- Users ----
const CmsUsers = ({ state, setState }) => {
  const [modal, setModal] = useState(null);
  const [form, setForm] = useState({ name: '', email: '', role: 'Editor' });
  return (
    <>
      <CmsPageHeader title="Users" subtitle={`${state.users.length} team members`}
        actions={<Btn kind="primary" icon="user-plus" onClick={() => { setForm({ name: '', email: '', role: 'Editor' }); setModal('new'); }}>Invite user</Btn>} />
      <div style={{ padding: '20px 28px' }}>
        <CmsTable columns={[
          { key: 'name', label: 'Name', render: u => (
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--green)', color: 'white', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600 }}>{u.avatar}</div>
              <div style={{ fontWeight: 500 }}>{u.name}</div>
            </div>
          ) },
          { key: 'email', label: 'Email' },
          { key: 'role', label: 'Role', render: u => <Pill tone={u.role === 'Admin' ? 'orange' : 'neutral'}>{u.role}</Pill> },
          { key: 'lastLogin', label: 'Last login', render: u => <span style={{ fontSize: 12, color: '#8a8573' }}>{u.lastLogin}</span> },
        ]} rows={state.users} />
      </div>
      <Modal open={modal === 'new'} onClose={() => setModal(null)} title="Invite a new user" subtitle="They'll receive an email to set their password.">
        <div style={{ padding: 24, display: 'grid', gap: 14 }}>
          <Input label="Full name" value={form.name} onChange={v => setForm({ ...form, name: v })} />
          <Input label="Email" type="email" value={form.email} onChange={v => setForm({ ...form, email: v })} />
          <Select label="Role" value={form.role} onChange={v => setForm({ ...form, role: v })} options={['Admin', 'Editor']} hint="Admins have full access. Editors can manage blog posts and pages only." />
          <div style={{ marginTop: 10, display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
            <Btn kind="ghost" onClick={() => setModal(null)}>Cancel</Btn>
            <Btn kind="primary" onClick={() => {
              const newUser = { id: 'u' + Date.now(), ...form, avatar: form.name.split(' ').map(x => x[0]).join('').slice(0,2).toUpperCase(), lastLogin: 'Never' };
              setState(s => ({ ...s, users: [...s.users, newUser] }));
              setModal(null);
            }}>Send invite</Btn>
          </div>
        </div>
      </Modal>
    </>
  );
};

// ---- Nav/menu manager ----
const CmsMenu = ({ state, setState }) => {
  const [items, setItems] = useState(state.nav);
  const [dragIdx, setDragIdx] = useState(null);

  const commit = (next) => {
    setItems(next);
    setState(s => ({ ...s, nav: next }));
  };

  const updateItem = (id, patch) => commit(items.map(it => it.id === id ? { ...it, ...patch } : it));
  const removeItem = id => commit(items.filter(it => it.id !== id));
  const addItem = () => commit([...items, { id: 'n' + Date.now(), label: 'New item', link: '/new', visible: true }]);
  const move = (from, to) => {
    const next = [...items]; const [moved] = next.splice(from, 1); next.splice(to, 0, moved); commit(next);
  };

  return (
    <>
      <CmsPageHeader title="Navigation menu" subtitle="Drag to reorder. Changes appear on the live site."
        actions={<Btn kind="primary" icon="plus" onClick={addItem}>Add menu item</Btn>} />
      <div style={{ padding: '20px 28px', maxWidth: 800 }}>
        <div style={{ background: 'white', border: '1px solid #eae4d2', borderRadius: 12, overflow: 'hidden' }}>
          {items.map((it, i) => (
            <div key={it.id}
              draggable
              onDragStart={() => setDragIdx(i)}
              onDragOver={e => e.preventDefault()}
              onDrop={() => { if (dragIdx != null && dragIdx !== i) move(dragIdx, i); setDragIdx(null); }}
              style={{ display: 'grid', gridTemplateColumns: '30px 1fr 1.5fr 60px 30px', gap: 12, alignItems: 'center', padding: '14px 16px', borderBottom: i < items.length - 1 ? '1px solid #f3ecd9' : 0, background: dragIdx === i ? '#F7F5F0' : 'white', cursor: 'grab' }}>
              <Icon name="grip-vertical" size={16} style={{ color: '#a39d8a' }} />
              <input value={it.label} onChange={e => updateItem(it.id, { label: e.target.value })} style={{ border: '1px solid #eae4d2', borderRadius: 8, padding: '7px 10px', fontSize: 13, outline: 'none', background: '#F7F5F0' }} />
              <input value={it.link} onChange={e => updateItem(it.id, { link: e.target.value })} style={{ border: '1px solid #eae4d2', borderRadius: 8, padding: '7px 10px', fontSize: 13, outline: 'none', fontFamily: 'Geist Mono', background: '#F7F5F0' }} />
              <Toggle value={it.visible} onChange={v => updateItem(it.id, { visible: v })} />
              <button onClick={() => removeItem(it.id)} style={{ color: '#c9826c', padding: 6 }}><Icon name="trash-2" size={14} /></button>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

// ---- Settings ----
const CmsSettings = ({ state, setState }) => {
  const [tab, setTab] = useState('agency');
  const [form, setForm] = useState(state.settings);
  const { show, node } = useToast();

  const save = () => { setState(s => ({ ...s, settings: form })); show('Settings saved.'); };

  return (
    <>
      <CmsPageHeader title="Site settings"
        actions={<Btn kind="primary" icon="check" onClick={save}>Save changes</Btn>} />
      <div style={{ padding: '20px 28px', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 24 }}>
        <div>
          {[['agency', 'Agency info', 'building'], ['homepage', 'Homepage', 'home'], ['contact', 'Contact', 'phone'], ['social', 'Social', 'share-2'], ['advanced', 'Advanced', 'settings']].map(([k, l, ic]) => (
            <button key={k} onClick={() => setTab(k)} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 8, fontSize: 13, fontWeight: tab === k ? 600 : 500, background: tab === k ? 'white' : 'transparent', color: tab === k ? 'var(--accent)' : '#3a3a33', textAlign: 'left', border: tab === k ? '1px solid #eae4d2' : '1px solid transparent', marginBottom: 4 }}>
              <Icon name={ic} size={14} />
              {l}
            </button>
          ))}
        </div>
        <div style={{ background: 'white', border: '1px solid #eae4d2', borderRadius: 12, padding: 28, maxWidth: 720 }}>
          {tab === 'agency' && <div style={{ display: 'grid', gap: 16 }}>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 22, letterSpacing: '-0.015em' }}>Agency information</h3>
            <Input label="Agency name" value={form.agencyName} onChange={v => setForm({ ...form, agencyName: v })} />
            <Input label="Tagline" value={form.tagline} onChange={v => setForm({ ...form, tagline: v })} />
            <Input label="License number" value={form.license} onChange={v => setForm({ ...form, license: v })} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 6 }}>Logo</div>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ width: 60, height: 60, borderRadius: 12, background: 'var(--accent)', color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'Fraunces', fontWeight: 600, fontSize: 24 }}>P</div>
                <Btn kind="ghost" icon="upload">Upload new</Btn>
              </div>
            </div>
          </div>}
          {tab === 'homepage' && <div style={{ display: 'grid', gap: 16 }}>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 22, letterSpacing: '-0.015em' }}>Homepage</h3>
            <Input label="Hero image URL" value={form.heroImage} onChange={v => setForm({ ...form, heroImage: v })} />
            <div style={{ borderRadius: 10, overflow: 'hidden', height: 180 }}><Img src={form.heroImage} style={{ height: 180 }} /></div>
            <Textarea label="Hero tagline" value={form.tagline} onChange={v => setForm({ ...form, tagline: v })} rows={2} />
          </div>}
          {tab === 'contact' && <div style={{ display: 'grid', gap: 16 }}>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 22, letterSpacing: '-0.015em' }}>Contact details</h3>
            <Input label="Phone" value={form.phone} onChange={v => setForm({ ...form, phone: v })} />
            <Input label="WhatsApp number" value={form.whatsapp} onChange={v => setForm({ ...form, whatsapp: v })} hint="Include country code. Used for WhatsApp CTAs across the site." />
            <Input label="Email" value={form.email} onChange={v => setForm({ ...form, email: v })} />
            <Textarea label="Address" value={form.address} onChange={v => setForm({ ...form, address: v })} rows={2} />
            <Input label="Operating hours" value={form.hours} onChange={v => setForm({ ...form, hours: v })} />
          </div>}
          {tab === 'social' && <div style={{ display: 'grid', gap: 16 }}>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 22, letterSpacing: '-0.015em' }}>Social media</h3>
            <Input label="Facebook" prefix="fb.com/" value={form.social.facebook} onChange={v => setForm({ ...form, social: { ...form.social, facebook: v } })} />
            <Input label="Instagram" prefix="@" value={form.social.instagram} onChange={v => setForm({ ...form, social: { ...form.social, instagram: v } })} />
            <Input label="TikTok" value={form.social.tiktok} onChange={v => setForm({ ...form, social: { ...form.social, tiktok: v } })} />
          </div>}
          {tab === 'advanced' && <div style={{ display: 'grid', gap: 16 }}>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 22, letterSpacing: '-0.015em' }}>Advanced</h3>
            <div style={{ padding: 16, background: '#FBF5E8', border: '1px solid #F0E4C3', borderRadius: 10, fontSize: 13 }}>
              <Icon name="info" size={14} style={{ marginRight: 6 }} />
              Caching, robots.txt and backup options will be managed via Laravel Artisan commands on the production server.
            </div>
          </div>}
        </div>
      </div>
      {node}
    </>
  );
};

Object.assign(window, { CmsTable, CmsPackages, CmsVehicles, CmsBlogs, CmsPages, CmsInquiries, CmsUsers, CmsMenu, CmsSettings });