// ─── Shared micro-components ──────────────────────────────────────────────────

const IcoEdit = () => (
  <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
    <path d="M9 1.5l2.5 2.5-7 7H2V8.5l7-7z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
  </svg>
);
const IcoTrash = () => (
  <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
    <path d="M2 3.5h9M5 3.5V2h3v1.5M5.5 6v3.5M7.5 6v3.5M3 3.5l.5 7h6l.5-7" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const IcoUp   = () => (
  <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
    <polyline points="2.5,8.5 6.5,4.5 10.5,8.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const IcoDown = () => (
  <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
    <polyline points="2.5,4.5 6.5,8.5 10.5,4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const EditBtn   = ({ onClick }) => <button className="icon-btn" title="Edit" onClick={onClick}><IcoEdit /></button>;
const DeleteBtn = ({ onClick }) => <button className="icon-btn icon-btn--danger" title="Delete" onClick={onClick}><IcoTrash /></button>;

const SaveCancel = ({ onSave, onCancel }) => (
  <div className="editor-actions">
    <button className="btn btn--primary"  style={{ fontSize: 'var(--fs-caption)', padding: '5px var(--space-4)' }} onClick={onSave}>Save</button>
    <button className="btn btn--ghost"    style={{ fontSize: 'var(--fs-caption)', padding: '5px var(--space-4)' }} onClick={onCancel}>Cancel</button>
  </div>
);

const Label = ({ children, optional }) => (
  <div className="editor-label">
    {children}{optional && <span className="editor-optional"> optional</span>}
  </div>
);

const CardWrap = ({ title, count, onAdd, children }) => (
  <div className="content-card">
    <div className="content-card__header">
      <span className="content-card__title">{title}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
        {count !== undefined && <span className="content-card__count">{count} items</span>}
        {onAdd && (
          <button className="btn btn--ghost" style={{ fontSize: 'var(--fs-caption)', padding: '4px var(--space-3)' }} onClick={onAdd}>
            + Add
          </button>
        )}
      </div>
    </div>
    <div className="content-card__body">{children}</div>
  </div>
);

// ─── 1. Site Settings ─────────────────────────────────────────────────────────

function SiteSettingsSection({ brand, onUpdate, lang }) {
  const [tab, setTab] = React.useState('assets');
  const [d, setD]     = React.useState(brand);
  const set           = (k, v) => setD(p => ({ ...p, [k]: v }));

  return (
    <div>
      <div className="tab-bar" style={{ marginBottom: 'var(--space-5)' }}>
        {[['assets', 'Assets'], ['seo', 'SEO'], ['info', 'Business Info']].map(([id, label]) => (
          <button key={id} className={`tab${tab === id ? ' active' : ''}`} onClick={() => setTab(id)}>{label}</button>
        ))}
      </div>

      {tab === 'assets' && (
        <div className="settings-section">
          <div className="settings-section__title">Brand Assets</div>
          <div className="content-two-col">
            <div>
              <Label>Logo (Light background)</Label>
              <ImageUpload value={d.logoLight} onChange={v => set('logoLight', v)} uploadLabel="Upload Logo (Light)" />
            </div>
            <div>
              <Label>Logo (Dark background)</Label>
              <ImageUpload value={d.logoDark} onChange={v => set('logoDark', v)} uploadLabel="Upload Logo (Dark)" />
            </div>
          </div>
          <div style={{ marginTop: 'var(--space-4)', maxWidth: '200px' }}>
            <Label>Favicon</Label>
            <ImageUpload value={d.favicon} onChange={v => set('favicon', v)} uploadLabel="Upload Favicon" />
          </div>
          <button className="btn btn--primary" style={{ marginTop: 'var(--space-5)' }} onClick={() => onUpdate(d)}>Save Assets</button>
        </div>
      )}

      {tab === 'seo' && (
        <div className="settings-section">
          <div className="settings-section__title">SEO & Meta</div>
          <div className="field"><label>Website Title</label><I18nInput value={d.siteTitle} lang={lang} onChange={v => set('siteTitle', v)} placeholder="Blan Studio — Your Creative Partner" /></div>
          <div className="field"><label>Meta Description</label><I18nTextarea value={d.metaDescription} lang={lang} onChange={v => set('metaDescription', v)} style={{ minHeight: 72 }} /></div>
          <div style={{ marginTop: 'var(--space-1)' }}>
            <Label>Open Graph Image</Label>
            <ImageUpload value={d.ogImage} onChange={v => set('ogImage', v)} uploadLabel="Upload OG Image" />
          </div>
          <button className="btn btn--primary" style={{ marginTop: 'var(--space-5)' }} onClick={() => onUpdate(d)}>Save SEO</button>
        </div>
      )}

      {tab === 'info' && (
        <div className="settings-section">
          <div className="settings-section__title">Business Info</div>
          <div className="editor-two-col">
            <div className="field"><label>Brand Name</label><input value={d.name} onChange={e => set('name', e.target.value)} /></div>
            <div className="field"><label>Email</label><input type="email" value={d.email} onChange={e => set('email', e.target.value)} /></div>
          </div>
          <div className="editor-two-col">
            <div className="field"><label>Phone / WhatsApp</label><input value={d.phone} onChange={e => set('phone', e.target.value)} placeholder="+1 (000) 000-0000" /></div>
            <div className="field"><label>Location</label><input value={d.location} onChange={e => set('location', e.target.value)} placeholder="City, Country" /></div>
          </div>
          <div className="settings-section__title" style={{ marginTop: 'var(--space-5)' }}>Header Actions</div>
          <div className="editor-two-col">
            <div className="field"><label>Primary CTA Label</label><I18nInput value={d.ctaLabel} lang={lang} onChange={v => set('ctaLabel', v)} placeholder="Book a Call" /></div>
            <div className="field"><label>Login Label</label><I18nInput value={d.loginLabel} lang={lang} onChange={v => set('loginLabel', v)} placeholder="Login" /></div>
          </div>
          <button className="btn btn--primary" onClick={() => onUpdate(d)}>Save Info</button>
        </div>
      )}
    </div>
  );
}

// ─── 2. Hero ──────────────────────────────────────────────────────────────────

function HeroSection({ hero, onUpdate, lang }) {
  const [d, setD] = React.useState(hero);
  const set       = (k, v) => setD(p => ({ ...p, [k]: v }));

  return (
    <div className="settings-section">
      <div className="settings-section__title">Hero Section</div>
      <div className="field"><label>Eyebrow</label><I18nInput value={d.eyebrow} lang={lang} onChange={v => set('eyebrow', v)} /></div>
      <div className="field"><label>Headline</label><I18nTextarea value={d.title} lang={lang} onChange={v => set('title', v)} style={{ minHeight: 56 }} /></div>
      <div className="field"><label>Subtitle</label><I18nTextarea value={d.subtitle} lang={lang} onChange={v => set('subtitle', v)} style={{ minHeight: 72 }} /></div>
      <div className="editor-two-col" style={{ marginTop: 'var(--space-2)' }}>
        <CTAField fieldLabel="Primary CTA"   value={d.ctaPrimary}   onChange={v => set('ctaPrimary', v)}   lang={lang} />
        <CTAField fieldLabel="Secondary CTA" value={d.ctaSecondary} onChange={v => set('ctaSecondary', v)} lang={lang} />
      </div>
      <button className="btn btn--primary" style={{ marginTop: 'var(--space-5)' }} onClick={() => onUpdate(d)}>Save Hero</button>
    </div>
  );
}

// ─── 3. Services ──────────────────────────────────────────────────────────────

const BLANK_SERVICE = { title: i18nBlank(), desc: i18nBlank(), tags: i18nBlank(), cardType: 'text', mediaImage: '', mediaImages: [], mediaSrc: '' };

function ServiceForm({ initial, onSave, onCancel, lang }) {
  const [d, setD] = React.useState(initial || BLANK_SERVICE);
  const set       = (k, v) => setD(p => ({ ...p, [k]: v }));

  return (
    <div className="editor-row">
      <div className="editor-two-col">
        <div><Label>Title</Label><I18nInput value={d.title} lang={lang} onChange={v => set('title', v)} autoFocus /></div>
        <div>
          <Label>Card Type</Label>
          <select value={d.cardType} onChange={e => set('cardType', e.target.value)}>
            <option value="text">Text only</option>
            <option value="image">Single image</option>
            <option value="video">Video</option>
            <option value="carousel">Carousel (multiple images)</option>
          </select>
        </div>
      </div>
      <div><Label optional>Description</Label><I18nTextarea value={d.desc} lang={lang} onChange={v => set('desc', v)} style={{ minHeight: 52 }} /></div>
      <div>
        <Label>Tags <span className="editor-optional">comma-separated</span></Label>
        <I18nInput value={d.tags} lang={lang} onChange={v => set('tags', v)} placeholder="Logo design, Typography, Color system" />
      </div>
      {d.cardType === 'image'    && <div><Label>Image</Label><ImageUpload value={d.mediaImage} onChange={v => set('mediaImage', v)} /></div>}
      {d.cardType === 'video'    && <div><Label>Video URL</Label><input value={d.mediaSrc} onChange={e => set('mediaSrc', e.target.value)} placeholder="assets/services/motion.mp4" /></div>}
      {d.cardType === 'carousel' && <div><Label>Images</Label><MultiImageUpload value={d.mediaImages} onChange={v => set('mediaImages', v)} /></div>}
      <SaveCancel onSave={() => { if (i18nOf(d.title, lang).trim() || i18nOf(d.title, 'en').trim()) onSave(d); }} onCancel={onCancel} />
    </div>
  );
}

function ServicesSection({ services, handlers, lang }) {
  const [editingId, setEditingId] = React.useState(null);
  const [adding,    setAdding]    = React.useState(false);

  const moveItem = (id, dir) => {
    const arr = [...services];
    const idx = arr.findIndex(x => x.id === id);
    const to  = idx + dir;
    if (to < 0 || to >= arr.length) return;
    [arr[idx], arr[to]] = [arr[to], arr[idx]];
    handlers.reorder(arr);
  };

  return (
    <CardWrap title="Services" count={services.length} onAdd={() => { setAdding(true); setEditingId(null); }}>
      {adding && <ServiceForm lang={lang} onSave={d => { handlers.add(d); setAdding(false); }} onCancel={() => setAdding(false)} />}
      {services.map((s, idx) => (
        editingId === s.id
          ? <ServiceForm key={s.id} lang={lang} initial={s} onSave={d => { handlers.edit(s.id, d); setEditingId(null); }} onCancel={() => setEditingId(null)} />
          : (
            <div key={s.id} className="content-item">
              <div className="content-item__text">
                <div className="content-item__q">
                  {i18nOf(s.title, lang) || i18nOf(s.title, 'en')}
                  <span className="pill pill--archived" style={{ fontSize: 'var(--fs-caption)', marginLeft: 'var(--space-2)' }}>{s.cardType}</span>
                </div>
                <div className="content-item__a">{i18nOf(s.tags, lang)}</div>
              </div>
              <div className="content-item__actions">
                <button className="icon-btn" title="Move up"   onClick={() => moveItem(s.id, -1)} disabled={idx === 0}><IcoUp/></button>
                <button className="icon-btn" title="Move down" onClick={() => moveItem(s.id,  1)} disabled={idx === services.length - 1}><IcoDown/></button>
                <EditBtn onClick={() => { setEditingId(s.id); setAdding(false); }} />
                <DeleteBtn onClick={() => handlers.delete(s.id)} />
              </div>
            </div>
          )
      ))}
    </CardWrap>
  );
}

// ─── 4. About ─────────────────────────────────────────────────────────────────

function AboutSection({ about, onUpdate, onUpdateTestimonial, painPointHandlers, statHandlers, lang }) {
  const [tab,           setTab]           = React.useState('headline');
  const [editingPainId, setEditingPainId] = React.useState(null);
  const [addingPain,    setAddingPain]    = React.useState(false);
  const [painDraft,     setPainDraft]     = React.useState({ muted: i18nBlank(), bold: i18nBlank() });
  const [editingStatId, setEditingStatId] = React.useState(null);
  const [addingStat,    setAddingStat]    = React.useState(false);
  const [statDraft,     setStatDraft]     = React.useState({ target: '', suffix: '%', label: i18nBlank() });
  const [headline,      setHeadline]      = React.useState(about.headline);
  const [t,             setT]             = React.useState(about.testimonial);

  return (
    <div>
      <div className="tab-bar" style={{ marginBottom: 'var(--space-5)' }}>
        {[['headline', 'Headline & Quote'], ['pain', 'Pain Points'], ['stats', 'Stats']].map(([id, label]) => (
          <button key={id} className={`tab${tab === id ? ' active' : ''}`} onClick={() => setTab(id)}>{label}</button>
        ))}
      </div>

      {tab === 'headline' && (
        <div className="settings-section">
          <div className="settings-section__title">About — Headline & Featured Quote</div>
          <div className="field"><label>Section Headline</label><I18nTextarea value={headline} lang={lang} onChange={v => setHeadline(v)} style={{ minHeight: 56 }} /></div>
          <div className="field"><label>Quote Text</label><I18nTextarea value={t.quote} lang={lang} onChange={v => setT(p => ({ ...p, quote: v }))} style={{ minHeight: 80 }} /></div>
          <div className="editor-two-col">
            <div className="field"><label>Author Name</label><input value={t.name} onChange={e => setT(p => ({ ...p, name: e.target.value }))} /></div>
            <div className="field"><label>Author Role</label><I18nInput value={t.role} lang={lang} onChange={v => setT(p => ({ ...p, role: v }))} placeholder="CEO, Company" /></div>
          </div>
          <div className="field"><label>Author Avatar URL</label><input value={t.avatar} onChange={e => setT(p => ({ ...p, avatar: e.target.value }))} placeholder="assets/reviews/testimonials-1.jpg" /></div>
          <button className="btn btn--primary" onClick={() => { onUpdate({ headline }); onUpdateTestimonial(t); }}>Save</button>
        </div>
      )}

      {tab === 'pain' && (
        <CardWrap title="Pain Points" count={about.painPoints.length} onAdd={() => { setAddingPain(true); setPainDraft({ muted: i18nBlank(), bold: i18nBlank() }); }}>
          {addingPain && (
            <div className="editor-row">
              <div className="editor-two-col">
                <div><Label>Muted prefix</Label><I18nInput value={painDraft.muted} lang={lang} onChange={v => setPainDraft(p => ({ ...p, muted: v }))} placeholder="Forget about" autoFocus /></div>
                <div><Label>Bold text</Label><I18nInput value={painDraft.bold} lang={lang} onChange={v => setPainDraft(p => ({ ...p, bold: v }))} placeholder="unreliable freelancers" /></div>
              </div>
              <SaveCancel
                onSave={() => { if (i18nOf(painDraft.bold, 'en').trim()) { painPointHandlers.add(painDraft); setAddingPain(false); } }}
                onCancel={() => setAddingPain(false)}
              />
            </div>
          )}
          {about.painPoints.map(p => (
            editingPainId === p.id
              ? (
                <div key={p.id} className="editor-row">
                  <div className="editor-two-col">
                    <div><Label>Muted prefix</Label><I18nInput value={painDraft.muted} lang={lang} onChange={v => setPainDraft(d => ({ ...d, muted: v }))} autoFocus /></div>
                    <div><Label>Bold text</Label><I18nInput value={painDraft.bold} lang={lang} onChange={v => setPainDraft(d => ({ ...d, bold: v }))} /></div>
                  </div>
                  <SaveCancel onSave={() => { painPointHandlers.edit(p.id, painDraft); setEditingPainId(null); }} onCancel={() => setEditingPainId(null)} />
                </div>
              )
              : (
                <div key={p.id} className="content-item">
                  <div className="content-item__text">
                    <div className="content-item__q">
                      <span style={{ color: 'var(--fg-secondary)' }}>{i18nOf(p.muted, lang)} </span>
                      {i18nOf(p.bold, lang)}
                    </div>
                  </div>
                  <div className="content-item__actions">
                    <EditBtn onClick={() => { setEditingPainId(p.id); setPainDraft({ muted: p.muted, bold: p.bold }); }} />
                    <DeleteBtn onClick={() => painPointHandlers.delete(p.id)} />
                  </div>
                </div>
              )
          ))}
        </CardWrap>
      )}

      {tab === 'stats' && (
        <CardWrap title="Stats" count={about.stats.length} onAdd={() => { setAddingStat(true); setStatDraft({ target: '', suffix: '%', label: i18nBlank() }); }}>
          {addingStat && (
            <div className="editor-row">
              <div className="editor-two-col" style={{ gridTemplateColumns: '80px 60px 1fr' }}>
                <div><Label>Number</Label><input type="number" value={statDraft.target} onChange={e => setStatDraft(p => ({ ...p, target: Number(e.target.value) }))} placeholder="70" autoFocus /></div>
                <div><Label>Suffix</Label><input value={statDraft.suffix} onChange={e => setStatDraft(p => ({ ...p, suffix: e.target.value }))} placeholder="%" /></div>
                <div><Label>Label</Label><I18nInput value={statDraft.label} lang={lang} onChange={v => setStatDraft(p => ({ ...p, label: v }))} placeholder="lower cost vs agencies" /></div>
              </div>
              <SaveCancel onSave={() => { if (i18nOf(statDraft.label, 'en').trim()) { statHandlers.add(statDraft); setAddingStat(false); } }} onCancel={() => setAddingStat(false)} />
            </div>
          )}
          {about.stats.map(s => (
            editingStatId === s.id
              ? (
                <div key={s.id} className="editor-row">
                  <div className="editor-two-col" style={{ gridTemplateColumns: '80px 60px 1fr' }}>
                    <div><Label>Number</Label><input type="number" value={statDraft.target} onChange={e => setStatDraft(d => ({ ...d, target: Number(e.target.value) }))} autoFocus /></div>
                    <div><Label>Suffix</Label><input value={statDraft.suffix} onChange={e => setStatDraft(d => ({ ...d, suffix: e.target.value }))} /></div>
                    <div><Label>Label</Label><I18nInput value={statDraft.label} lang={lang} onChange={v => setStatDraft(d => ({ ...d, label: v }))} /></div>
                  </div>
                  <SaveCancel onSave={() => { statHandlers.edit(s.id, statDraft); setEditingStatId(null); }} onCancel={() => setEditingStatId(null)} />
                </div>
              )
              : (
                <div key={s.id} className="content-item">
                  <div className="content-item__text">
                    <div className="content-item__q">{s.target}{s.suffix}</div>
                    <div className="content-item__a">{i18nOf(s.label, lang)}</div>
                  </div>
                  <div className="content-item__actions">
                    <EditBtn onClick={() => { setEditingStatId(s.id); setStatDraft({ target: s.target, suffix: s.suffix, label: s.label }); }} />
                    <DeleteBtn onClick={() => statHandlers.delete(s.id)} />
                  </div>
                </div>
              )
          ))}
        </CardWrap>
      )}
    </div>
  );
}

// ─── 5. Reviews ───────────────────────────────────────────────────────────────

const BLANK_REVIEW = { name: '', role: i18nBlank(), company: '', avatar: '', quote: i18nBlank(), featured: false, video: '', media: '' };

function ReviewForm({ initial, onSave, onCancel, lang }) {
  const [d, setD] = React.useState(initial || BLANK_REVIEW);
  const set       = (k, v) => setD(p => ({ ...p, [k]: v }));
  const nameStr   = d.name || '';
  const roleStr   = i18nOf(d.role, 'en');
  const coStr     = d.company || '';

  return (
    <div className="editor-row">
      <div className="editor-two-col">
        <div><Label>Name</Label><input value={d.name} onChange={e => set('name', e.target.value)} autoFocus /></div>
        <div><Label>Avatar</Label><ImageUpload value={d.avatar} onChange={v => set('avatar', v)} shape="avatar" uploadLabel="Upload Avatar" /></div>
      </div>
      <div className="editor-two-col">
        <div><Label>Job Title</Label><I18nInput value={d.role} lang={lang} onChange={v => set('role', v)} placeholder="VP Product" /></div>
        <div><Label optional>Company</Label><input value={d.company} onChange={e => set('company', e.target.value)} placeholder="Helix Systems" /></div>
      </div>
      <div><Label>Quote</Label><I18nTextarea value={d.quote} lang={lang} onChange={v => set('quote', v)} /></div>
      <div className="editor-toggle-row">
        <label className="toggle"><input type="checkbox" checked={d.featured} onChange={e => set('featured', e.target.checked)} /><span className="toggle-slider"></span></label>
        <span className="editor-label" style={{ margin: 0 }}>Featured card</span>
      </div>
      {d.featured && (
        <div className="editor-two-col">
          <div><Label optional>Video URL</Label><input value={d.video} onChange={e => set('video', e.target.value)} placeholder="assets/reviews/testimonial featured video.mp4" /></div>
          <div><Label optional>Background Image URL</Label><input value={d.media} onChange={e => set('media', e.target.value)} /></div>
        </div>
      )}
      {(nameStr || i18nOf(d.quote, lang)) && (
        <div className="review-preview">
          <div className="review-preview__header">
            {d.avatar
              ? <span className="review-preview__avatar" style={{ backgroundImage: `url('${d.avatar}')` }} />
              : <span className="review-preview__avatar review-preview__avatar--empty" />
            }
            <div style={{ flex: 1 }}>
              <div className="review-preview__name">{nameStr || '—'}</div>
              <div className="review-preview__role">{[roleStr, coStr].filter(Boolean).join(' · ') || '—'}</div>
            </div>
            {d.featured && <span className="pill pill--completed" style={{ fontSize: 'var(--fs-caption)' }}>Featured</span>}
            {d.video    && <span className="pill pill--in_progress" style={{ fontSize: 'var(--fs-caption)', marginLeft: 'var(--space-1)' }}>Video</span>}
          </div>
          <div className="review-preview__quote">"{i18nOf(d.quote, lang) || 'Quote will appear here…'}"</div>
        </div>
      )}
      <SaveCancel onSave={() => { if (d.name.trim() && i18nOf(d.quote, 'en').trim()) onSave(d); }} onCancel={onCancel} />
    </div>
  );
}

function ReviewSection({ reviews, handlers, lang }) {
  const [editingId, setEditingId] = React.useState(null);
  const [adding,    setAdding]    = React.useState(false);

  const moveItem = (id, dir) => {
    const arr = [...reviews];
    const idx = arr.findIndex(x => x.id === id);
    const to  = idx + dir;
    if (to < 0 || to >= arr.length) return;
    [arr[idx], arr[to]] = [arr[to], arr[idx]];
    handlers.reorder(arr);
  };

  return (
    <CardWrap title="Reviews / Testimonials" count={reviews.length} onAdd={() => { setAdding(true); setEditingId(null); }}>
      {adding && <ReviewForm lang={lang} onSave={d => { handlers.add(d); setAdding(false); }} onCancel={() => setAdding(false)} />}
      {reviews.map((r, idx) => (
        editingId === r.id
          ? <ReviewForm key={r.id} lang={lang} initial={r} onSave={d => { handlers.edit(r.id, d); setEditingId(null); }} onCancel={() => setEditingId(null)} />
          : (
            <div key={r.id} className="content-item">
              <div className="content-item__thumb">
                {r.avatar
                  ? <span className="review-list-avatar" style={{ backgroundImage: `url('${r.avatar}')` }} />
                  : <span className="review-list-avatar review-list-avatar--empty" />
                }
              </div>
              <div className="content-item__text">
                <div className="content-item__q">
                  {r.name}
                  {(i18nOf(r.role, 'en') || r.company) && (
                    <span style={{ color: 'var(--fg-secondary)', fontWeight: 'var(--fw-regular)' }}>
                      {' — '}{[i18nOf(r.role, 'en'), r.company].filter(Boolean).join(' · ')}
                    </span>
                  )}
                  {r.featured && <span className="pill pill--completed"   style={{ fontSize: 'var(--fs-caption)', marginLeft: 'var(--space-2)' }}>Featured</span>}
                  {r.video    && <span className="pill pill--in_progress" style={{ fontSize: 'var(--fs-caption)', marginLeft: 'var(--space-1)' }}>Video</span>}
                </div>
                <div className="content-item__a">"{i18nOf(r.quote, lang)}"</div>
              </div>
              <div className="content-item__actions">
                <button className="icon-btn" title="Move up"   onClick={() => moveItem(r.id, -1)} disabled={idx === 0}><IcoUp/></button>
                <button className="icon-btn" title="Move down" onClick={() => moveItem(r.id,  1)} disabled={idx === reviews.length - 1}><IcoDown/></button>
                <EditBtn onClick={() => { setEditingId(r.id); setAdding(false); }} />
                <DeleteBtn onClick={() => handlers.delete(r.id)} />
              </div>
            </div>
          )
      ))}
    </CardWrap>
  );
}

// ─── 6. Process ───────────────────────────────────────────────────────────────

const BLANK_STEP = {
  title: i18nBlank(), desc: i18nBlank(), label: i18nBlank(),
  cta: { label: i18nBlank(), linkType: 'internal', section: 'contact', url: '', newTab: false },
};

function ProcessSection({ process, handlers, lang }) {
  const [editingId, setEditingId] = React.useState(null);
  const [adding,    setAdding]    = React.useState(false);
  const [draft,     setDraft]     = React.useState(BLANK_STEP);
  const setD = (k, v) => setDraft(p => ({ ...p, [k]: v }));

  const StepForm = ({ onSave, onCancel }) => (
    <div className="editor-row">
      <div className="editor-two-col">
        <div><Label>Step Title</Label><I18nInput value={draft.title} lang={lang} onChange={v => setD('title', v)} autoFocus /></div>
        <div><Label>Preview Label</Label><I18nInput value={draft.label} lang={lang} onChange={v => setD('label', v)} placeholder="Choose your plan" /></div>
      </div>
      <div><Label>Description</Label><I18nTextarea value={draft.desc} lang={lang} onChange={v => setD('desc', v)} style={{ minHeight: 64 }} /></div>
      <CTAField fieldLabel="CTA Button" value={draft.cta} onChange={v => setD('cta', v)} lang={lang} />
      <SaveCancel onSave={() => { if (i18nOf(draft.title, 'en').trim()) onSave(draft); }} onCancel={onCancel} />
    </div>
  );

  return (
    <CardWrap title="Process Steps" count={process.length} onAdd={() => { setAdding(true); setDraft(BLANK_STEP); setEditingId(null); }}>
      {adding && <StepForm onSave={d => { handlers.add(d); setAdding(false); }} onCancel={() => setAdding(false)} />}
      {process.map((step, i) => (
        editingId === step.id
          ? <StepForm key={step.id} onSave={d => { handlers.edit(step.id, d); setEditingId(null); }} onCancel={() => setEditingId(null)} />
          : (
            <div key={step.id} className="content-item">
              <div className="content-item__text">
                <div className="content-item__q">
                  <span style={{ color: 'var(--fg-secondary)', marginRight: 'var(--space-2)', fontSize: 'var(--fs-body-sm)' }}>0{i + 1}</span>
                  {i18nOf(step.title, lang)}
                  <span className="pill pill--archived" style={{ fontSize: 'var(--fs-caption)', marginLeft: 'var(--space-2)' }}>
                    {step.cta?.linkType === 'external' ? '↗ external' : `→ ${step.cta?.section || 'contact'}`}
                  </span>
                </div>
                <div className="content-item__a">{i18nOf(step.desc, lang)}</div>
              </div>
              <div className="content-item__actions">
                <EditBtn onClick={() => { setEditingId(step.id); setDraft({ title: step.title, desc: step.desc, cta: step.cta, label: step.label }); setAdding(false); }} />
                <DeleteBtn onClick={() => handlers.delete(step.id)} />
              </div>
            </div>
          )
      ))}
    </CardWrap>
  );
}

// ─── 7. Works ─────────────────────────────────────────────────────────────────

const BLANK_WORK = { title: i18nBlank(), tags: i18nBlank(), img: '', href: '#' };

function WorksSection({ works, handlers, lang }) {
  const [editingId, setEditingId] = React.useState(null);
  const [adding,    setAdding]    = React.useState(false);
  const [draft,     setDraft]     = React.useState(BLANK_WORK);

  const moveItem = (id, dir) => {
    const arr = [...works];
    const idx = arr.findIndex(x => x.id === id);
    const to  = idx + dir;
    if (to < 0 || to >= arr.length) return;
    [arr[idx], arr[to]] = [arr[to], arr[idx]];
    handlers.reorder(arr);
  };
  const setD = (k, v) => setDraft(p => ({ ...p, [k]: v }));

  const WorkForm = ({ onSave, onCancel }) => (
    <div className="editor-row">
      <div className="editor-two-col">
        <div><Label>Project Title</Label><I18nInput value={draft.title} lang={lang} onChange={v => setD('title', v)} autoFocus /></div>
        <div><Label>Link URL</Label><input value={draft.href} onChange={e => setD('href', e.target.value)} placeholder="#" /></div>
      </div>
      <div><Label>Project Image</Label><ImageUpload value={draft.img} onChange={v => setD('img', v)} /></div>
      <div>
        <Label>Tags <span className="editor-optional">comma-separated</span></Label>
        <I18nInput value={draft.tags} lang={lang} onChange={v => setD('tags', v)} placeholder="Product Design, AI/ML" />
      </div>
      <SaveCancel onSave={() => { if (i18nOf(draft.title, 'en').trim()) onSave(draft); }} onCancel={onCancel} />
    </div>
  );

  return (
    <CardWrap title="Portfolio / Works" count={works.length} onAdd={() => { setAdding(true); setDraft(BLANK_WORK); setEditingId(null); }}>
      {adding && <WorkForm onSave={d => { handlers.add(d); setAdding(false); }} onCancel={() => setAdding(false)} />}
      {works.map((w, idx) => (
        editingId === w.id
          ? <WorkForm key={w.id} onSave={d => { handlers.edit(w.id, d); setEditingId(null); }} onCancel={() => setEditingId(null)} />
          : (
            <div key={w.id} className="content-item">
              <div className="content-item__thumb">
                {w.img
                  ? <span className="review-list-avatar" style={{ backgroundImage: `url('${w.img}')`, borderRadius: 'var(--radius-xs)', width: 36, height: 28 }} />
                  : <span className="review-list-avatar review-list-avatar--empty" style={{ borderRadius: 'var(--radius-xs)', width: 36, height: 28 }} />
                }
              </div>
              <div className="content-item__text">
                <div className="content-item__q">{i18nOf(w.title, lang)}</div>
                <div className="content-item__a">{i18nOf(w.tags, lang)}</div>
              </div>
              <div className="content-item__actions">
                <button className="icon-btn" title="Move up"   onClick={() => moveItem(w.id, -1)} disabled={idx === 0}><IcoUp/></button>
                <button className="icon-btn" title="Move down" onClick={() => moveItem(w.id,  1)} disabled={idx === works.length - 1}><IcoDown/></button>
                <EditBtn onClick={() => { setEditingId(w.id); setDraft({ title: w.title, tags: w.tags, img: w.img, href: w.href }); setAdding(false); }} />
                <DeleteBtn onClick={() => handlers.delete(w.id)} />
              </div>
            </div>
          )
      ))}
    </CardWrap>
  );
}

// ─── 8. Pricing ───────────────────────────────────────────────────────────────

function PlanEditor({ plan, onSave, lang }) {
  const [d, setD] = React.useState({
    ...plan,
    priceMonthly: plan.prices?.monthly || 0,
    priceQuarter: plan.prices?.quarter || 0,
    priceAnnual:  plan.prices?.annual  || 0,
  });
  const set        = (k, v) => setD(p => ({ ...p, [k]: v }));
  const [saved, setSaved] = React.useState(false);

  const handleSave = () => {
    onSave({
      tier: d.tier, tag: d.tag, blurb: d.blurb,
      prices: { monthly: Number(d.priceMonthly), quarter: Number(d.priceQuarter), annual: Number(d.priceAnnual) },
      features: d.features, note: d.note, cta: d.cta,
    });
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };

  return (
    <div className="settings-section">
      <div className="settings-section__title">{d.tier || 'Plan'}</div>
      <div className="editor-two-col">
        <div className="field"><label>Plan Name</label><input value={d.tier} onChange={e => set('tier', e.target.value)} /></div>
        <div className="field"><label>Badge <span className="editor-optional">e.g. "Most Popular"</span></label><I18nInput value={d.tag} lang={lang} onChange={v => set('tag', v)} /></div>
      </div>
      <div className="field"><label>Blurb</label><I18nInput value={d.blurb} lang={lang} onChange={v => set('blurb', v)} /></div>
      <div className="editor-two-col" style={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
        <div className="field"><label>Monthly (MAD)</label><input type="number" value={d.priceMonthly} onChange={e => set('priceMonthly', e.target.value)} /></div>
        <div className="field"><label>Per 3 Months</label><input type="number" value={d.priceQuarter} onChange={e => set('priceQuarter', e.target.value)} /></div>
        <div className="field"><label>Annual</label><input type="number" value={d.priceAnnual} onChange={e => set('priceAnnual', e.target.value)} /></div>
      </div>
      <div className="field">
        <label>Features <span className="editor-optional">one per line</span></label>
        <I18nTextarea value={d.features} lang={lang} onChange={v => set('features', v)} style={{ minHeight: 120 }} />
      </div>
      <div className="field"><label>Note <span className="editor-optional">optional</span></label><I18nInput value={d.note} lang={lang} onChange={v => set('note', v)} /></div>
      <CTAField fieldLabel="CTA Button" value={d.cta} onChange={v => set('cta', v)} lang={lang} />
      <button className="btn btn--primary" style={{ marginTop: 'var(--space-4)' }} onClick={handleSave}>{saved ? 'Saved' : 'Save Plan'}</button>
    </div>
  );
}

function PricingSection({ pricing, onEditPlan, lang }) {
  return (
    <div>
      {pricing.map(plan => (
        <PlanEditor key={plan.id} plan={plan} lang={lang} onSave={data => onEditPlan(plan.id, data)} />
      ))}
    </div>
  );
}

// ─── 9. FAQ ───────────────────────────────────────────────────────────────────

function FaqSection({ faq, handlers, lang }) {
  const [editingId, setEditingId] = React.useState(null);
  const [adding,    setAdding]    = React.useState(false);
  const [draft,     setDraft]     = React.useState({ question: i18nBlank(), answer: i18nBlank() });

  return (
    <CardWrap title="FAQ" count={faq.length} onAdd={() => { setAdding(true); setDraft({ question: i18nBlank(), answer: i18nBlank() }); }}>
      {adding && (
        <div className="editor-row">
          <div><Label>Question</Label><I18nInput value={draft.question} lang={lang} onChange={v => setDraft(p => ({ ...p, question: v }))} autoFocus /></div>
          <div><Label>Answer</Label><I18nTextarea value={draft.answer} lang={lang} onChange={v => setDraft(p => ({ ...p, answer: v }))} /></div>
          <SaveCancel onSave={() => { if (i18nOf(draft.question, 'en').trim()) { handlers.add(draft); setAdding(false); } }} onCancel={() => setAdding(false)} />
        </div>
      )}
      {faq.map(item => (
        editingId === item.id
          ? (
            <div key={item.id} className="editor-row">
              <div><Label>Question</Label><I18nInput value={draft.question} lang={lang} onChange={v => setDraft(p => ({ ...p, question: v }))} autoFocus /></div>
              <div><Label>Answer</Label><I18nTextarea value={draft.answer} lang={lang} onChange={v => setDraft(p => ({ ...p, answer: v }))} /></div>
              <SaveCancel onSave={() => { handlers.edit(item.id, draft); setEditingId(null); }} onCancel={() => setEditingId(null)} />
            </div>
          )
          : (
            <div key={item.id} className="content-item">
              <div className="content-item__text">
                <div className="content-item__q">{i18nOf(item.question, lang)}</div>
                <div className="content-item__a">{i18nOf(item.answer, lang)}</div>
              </div>
              <div className="content-item__actions">
                <EditBtn onClick={() => { setEditingId(item.id); setDraft({ question: item.question, answer: item.answer }); }} />
                <DeleteBtn onClick={() => handlers.delete(item.id)} />
              </div>
            </div>
          )
      ))}
    </CardWrap>
  );
}

// ─── 10. Partners ─────────────────────────────────────────────────────────────

const BLANK_PARTNER = { logo: '', url: '' };

function PartnersSection({ partners, handlers }) {
  const [editingId, setEditingId] = React.useState(null);
  const [adding,    setAdding]    = React.useState(false);
  const [draft,     setDraft]     = React.useState(BLANK_PARTNER);

  const moveItem = (id, dir) => {
    const arr = [...partners];
    const idx = arr.findIndex(x => x.id === id);
    const to  = idx + dir;
    if (to < 0 || to >= arr.length) return;
    [arr[idx], arr[to]] = [arr[to], arr[idx]];
    handlers.reorder(arr);
  };
  const setD = (k, v) => setDraft(p => ({ ...p, [k]: v }));

  const PartnerForm = ({ onSave, onCancel }) => (
    <div className="editor-row">
      <div className="editor-two-col">
        <div>
          <Label>Logo</Label>
          <ImageUpload value={draft.logo} onChange={v => setD('logo', v)} uploadLabel="Upload Partner Logo" />
        </div>
        <div>
          <Label optional>Link URL</Label>
          <input value={draft.url} onChange={e => setD('url', e.target.value)} placeholder="https://partner.com" />
        </div>
      </div>
      <SaveCancel onSave={() => { if (draft.logo) onSave(draft); }} onCancel={onCancel} />
    </div>
  );

  return (
    <CardWrap title="Partners" count={partners.length} onAdd={() => { setAdding(true); setDraft(BLANK_PARTNER); setEditingId(null); }}>
      {adding && <PartnerForm onSave={d => { handlers.add(d); setAdding(false); }} onCancel={() => setAdding(false)} />}
      {partners.map((p, idx) => (
        editingId === p.id
          ? <PartnerForm key={p.id} onSave={d => { handlers.edit(p.id, d); setEditingId(null); }} onCancel={() => setEditingId(null)} />
          : (
            <div key={p.id} className="content-item">
              <div className="content-item__thumb">
                {p.logo ? (
                  <img src={p.logo} alt="" style={{ width: 52, height: 28, objectFit: 'contain', borderRadius: 'var(--radius-xs)', background: 'var(--bg-surface-2)', border: '1px solid var(--border-subtle)', display: 'block' }} onError={e => e.target.style.display='none'} />
                ) : (
                  <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 52, height: 28, borderRadius: 'var(--radius-xs)', background: 'var(--bg-surface-2)', fontSize: 'var(--fs-caption)', color: 'var(--fg-tertiary)' }}>No logo</span>
                )}
              </div>
              <div className="content-item__text">
                <div className="content-item__q">{p.url || <span style={{ color: 'var(--fg-secondary)' }}>No URL</span>}</div>
              </div>
              <div className="content-item__actions">
                <button className="icon-btn" title="Move up"   onClick={() => moveItem(p.id, -1)} disabled={idx === 0}><IcoUp/></button>
                <button className="icon-btn" title="Move down" onClick={() => moveItem(p.id,  1)} disabled={idx === partners.length - 1}><IcoDown/></button>
                <EditBtn onClick={() => { setEditingId(p.id); setDraft({ logo: p.logo, url: p.url }); setAdding(false); }} />
                <DeleteBtn onClick={() => handlers.delete(p.id)} />
              </div>
            </div>
          )
      ))}
    </CardWrap>
  );
}

// ─── Content Page ──────────────────────────────────────────────────────────────

const CONTENT_NAV = [
  { id: 'site',     label: 'Site' },
  { id: 'hero',     label: 'Hero' },
  { id: 'services', label: 'Services' },
  { id: 'about',    label: 'About' },
  { id: 'reviews',  label: 'Reviews' },
  { id: 'process',  label: 'Process' },
  { id: 'works',    label: 'Works' },
  { id: 'pricing',  label: 'Pricing' },
  { id: 'faq',      label: 'FAQ' },
  { id: 'partners', label: 'Partners' },
];

function Content({ content, handlers, lang, setLang }) {
  const [section, setSection] = React.useState('site');

  const renderSection = () => {
    switch (section) {
      case 'site':     return <SiteSettingsSection brand={content.brand} onUpdate={handlers.updateBrand} lang={lang} />;
      case 'hero':     return <HeroSection hero={content.hero} onUpdate={handlers.updateHero} lang={lang} />;
      case 'services': return <ServicesSection services={content.services} handlers={handlers.services} lang={lang} />;
      case 'about':    return <AboutSection about={content.about} onUpdate={handlers.updateAbout} onUpdateTestimonial={handlers.updateAboutTestimonial} painPointHandlers={handlers.painPoints} statHandlers={handlers.stats} lang={lang} />;
      case 'reviews':  return <ReviewSection reviews={content.reviews} handlers={handlers.reviews} lang={lang} />;
      case 'process':  return <ProcessSection process={content.process} handlers={handlers.process} lang={lang} />;
      case 'works':    return <WorksSection works={content.works} handlers={handlers.works} lang={lang} />;
      case 'pricing':  return <PricingSection pricing={content.pricing} onEditPlan={handlers.editPlan} lang={lang} />;
      case 'faq':      return <FaqSection faq={content.faq} handlers={handlers.faq} lang={lang} />;
      case 'partners': return <PartnersSection partners={content.partners || []} handlers={handlers.partners} />;
      default:         return null;
    }
  };

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-6)' }}>
        <div>
          <h1 className="page-title">Content</h1>
          <p className="page-subtitle" style={{ marginBottom: 0 }}>All landing page sections — data mirrors frontend components exactly</p>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
          <span style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--fg-secondary)', fontWeight: 'var(--fw-medium)' }}>Editing in:</span>
          <LangTabs lang={lang} onChange={setLang} />
        </div>
      </div>

      <div className="content-layout">
        <nav className="content-nav">
          {CONTENT_NAV.map(({ id, label }) => (
            <button
              key={id}
              className={`content-nav__item${section === id ? ' active' : ''}`}
              onClick={() => setSection(id)}
            >
              {label}
            </button>
          ))}
        </nav>
        <div className="content-section">
          {renderSection()}
        </div>
      </div>
    </div>
  );
}