(function attachSchemaBuildForm(global) {
  const React = global.React;
  if (!React) return;

  function SchemaBuildForm({ onSubmit, loading }) {
    const [websiteUrl, setWebsiteUrl] = React.useState('');
    const [businessName, setBusinessName] = React.useState('');
    const [businessType, setBusinessType] = React.useState('LocalBusiness');
    const [telephone, setTelephone] = React.useState('');
    const [address, setAddress] = React.useState('');
    const [pagesText, setPagesText] = React.useState('');
    const [schemaTypes, setSchemaTypes] = React.useState('');

    function parsePages() {
      return pagesText.split('\n').map((line) => line.trim()).filter(Boolean).map((line) => {
        const parts = line.split('|').map((part) => part.trim());
        return { url: parts[0], title: parts[1] || '', pageType: parts[2] || undefined };
      });
    }

    function submit(event) {
      event.preventDefault();
      const payload = {
        websiteUrl,
        schemaTypes: schemaTypes.split(',').map((item) => item.trim()).filter(Boolean),
        businessProfile: {
          name: businessName,
          businessType,
          telephone,
          address: address ? { streetAddress: address } : undefined,
          url: websiteUrl
        },
        pages: parsePages(),
        options: { includeHtmlSnippets: true, includeCmsGuides: true, maxSchemas: 50 }
      };
      onSubmit && onSubmit(payload);
    }

    return <form className="free-seo-card" onSubmit={submit}>
      <div className="free-seo-card__header"><div><p className="eyebrow">Patch 06</p><h2>Schema Builder</h2><p>Create validated JSON-LD from local page and business evidence.</p></div></div>
      <label>Website URL<input required value={websiteUrl} onChange={(e) => setWebsiteUrl(e.target.value)} placeholder="https://example.com" /></label>
      <div className="grid two">
        <label>Business name<input value={businessName} onChange={(e) => setBusinessName(e.target.value)} placeholder="Example Dental Clinic" /></label>
        <label>Business type<input value={businessType} onChange={(e) => setBusinessType(e.target.value)} placeholder="Dentist, LocalBusiness, Organization" /></label>
      </div>
      <div className="grid two">
        <label>Telephone<input value={telephone} onChange={(e) => setTelephone(e.target.value)} placeholder="+1-555-100-2000" /></label>
        <label>Street address<input value={address} onChange={(e) => setAddress(e.target.value)} placeholder="100 Main Street" /></label>
      </div>
      <label>Schema types, optional<input value={schemaTypes} onChange={(e) => setSchemaTypes(e.target.value)} placeholder="Organization, LocalBusiness, Service, FAQPage" /></label>
      <label>Pages, one per line: URL | Title | pageType<textarea rows="7" value={pagesText} onChange={(e) => setPagesText(e.target.value)} placeholder="https://example.com/ | Home | home\nhttps://example.com/services/invisalign | Invisalign in Austin | service" /></label>
      <button type="submit" disabled={loading}>{loading ? 'Generating...' : 'Generate schema run'}</button>
    </form>;
  }

  global.SchemaBuildForm = SchemaBuildForm;
})(window);