const INTERNAL_SECTIONS = [
  { value: 'hero',     label: 'Hero' },
  { value: 'services', label: 'Services' },
  { value: 'about',    label: 'About' },
  { value: 'reviews',  label: 'Reviews' },
  { value: 'process',  label: 'Process' },
  { value: 'works',    label: 'Works' },
  { value: 'pricing',  label: 'Pricing' },
  { value: 'faq',      label: 'FAQ' },
  { value: 'contact',  label: 'Contact' },
];

const CTA_BLANK = { label: i18nBlank(), linkType: 'internal', section: 'pricing', url: '', newTab: false };

function CTAField({ value, onChange, fieldLabel, lang = 'en' }) {
  const d   = { ...CTA_BLANK, ...(value || {}) };
  const set = (k, v) => onChange({ ...d, [k]: v });

  return (
    <div className="cta-field">
      {fieldLabel && <div className="editor-label">{fieldLabel}</div>}

      <div className="editor-two-col">
        <div>
          <div className="editor-label">Button Label</div>
          <I18nInput value={d.label} lang={lang} onChange={v => set('label', v)} placeholder="Get Started" />
        </div>
        <div>
          <div className="editor-label">Link Type</div>
          <select value={d.linkType} onChange={e => set('linkType', e.target.value)}>
            <option value="internal">Internal — scroll to section</option>
            <option value="external">External — URL</option>
          </select>
        </div>
      </div>

      {d.linkType === 'internal' && (
        <div>
          <div className="editor-label">Target Section</div>
          <select value={d.section} onChange={e => set('section', e.target.value)}>
            {INTERNAL_SECTIONS.map(s => (
              <option key={s.value} value={s.value}>{s.label}</option>
            ))}
          </select>
        </div>
      )}

      {d.linkType === 'external' && (
        <div className="editor-two-col">
          <div>
            <div className="editor-label">URL</div>
            <input value={d.url} onChange={e => set('url', e.target.value)} placeholder="https://" />
          </div>
          <div>
            <div className="editor-label">New Tab</div>
            <div className="editor-toggle-row">
              <label className="toggle">
                <input type="checkbox" checked={!!d.newTab} onChange={e => set('newTab', e.target.checked)} />
                <span className="toggle-slider"></span>
              </label>
              <span style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--fg-secondary)' }}>Open in new tab</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}