/* 99 Frames — shared UI bits */

function Squiggle({ color }) {
  return (
    <svg className="squiggle" viewBox="0 0 140 14" fill="none" style={color ? { color } : null} aria-hidden="true">
      <path d="M2 8 Q 12 1, 22 8 T 42 8 T 62 8 T 82 8 T 102 8 T 122 8 T 138 8"
        stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
    </svg>
  );
}

function CloudButton({ children, color = 'green', size, className = '', as = 'button', href, onClick, disabled, type }) {
  const cls = `cloud-btn btn-${color} ${size || ''} ${className}`.trim();
  if (as === 'a') {
    return <a className={cls} href={href} onClick={onClick}>{children}</a>;
  }
  return (
    <button className={cls} onClick={onClick} disabled={disabled} type={type || 'button'}>
      {children}
    </button>
  );
}

const NAV = [
  { id: 'home', label: 'Home' },
  { id: 'event', label: 'The Event' },
  { id: 'submit', label: 'Submit a Photo' },
  { id: 'gallery', label: 'Gallery' },
  { id: 'about', label: 'About' },
  { id: 'apply', label: 'Host an Event' },
];

function Nav({ page, go }) {
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <a className="brand" onClick={() => go('home')}>
          <span className="nines">99x</span>Frames
        </a>
        <div className="nav-tabs">
          {NAV.map((t) => (
            <button
              key={t.id}
              className={'tab' + (page === t.id ? ' active' : '')}
              onClick={() => go(t.id)}
            >
              {t.label}
            </button>
          ))}
        </div>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  return (
    <footer className="foot shell">
      <p>
        <span style={{ fontFamily: 'var(--font-display)' }}>
          <span style={{ color: 'var(--blue)' }}>99x</span>Frames
        </span>
      </p>
    </footer>
  );
}

/* form field bits */
function TextField({ label, name, value, onChange, error, type = 'text', placeholder, required, hint }) {
  return (
    <div className="field">
      <label htmlFor={name}>
        {label} {required && <span className="req">*</span>}
      </label>
      <input
        id={name}
        type={type}
        value={value}
        placeholder={placeholder}
        className={error ? 'err' : ''}
        onChange={(e) => onChange(e.target.value)}
        autoComplete="off"
      />
      {error ? <div className="msg-err">{error}</div> : hint ? <div className="hint">{hint}</div> : null}
    </div>
  );
}

function IGField({ value, onChange, error }) {
  return (
    <div className="field">
      <label htmlFor="instagram">Instagram handle</label>
      <div className="ig-wrap">
        <span className="at">@</span>
        <input
          id="instagram"
          type="text"
          value={value}
          placeholder="yourname"
          className={error ? 'err' : ''}
          onChange={(e) => onChange(e.target.value.replace(/^@+/, ''))}
          autoComplete="off"
        />
      </div>
      {error ? <div className="msg-err">{error}</div> : <div className="hint">So we can tag you in the gallery</div>}
    </div>
  );
}

/* Format a US phone number as the user types: digits only, max 10,
   auto-inserting ( ) around the area code and a - before the last four. */
function formatPhone(value) {
  const d = String(value || '').replace(/\D/g, '').slice(0, 10);
  if (d.length === 0) return '';
  if (d.length < 4) return '(' + d;
  if (d.length < 7) return '(' + d.slice(0, 3) + ') ' + d.slice(3);
  return '(' + d.slice(0, 3) + ') ' + d.slice(3, 6) + '-' + d.slice(6);
}

/* Contact group: email, phone & Instagram are each optional, but at least
   one must be provided. The shared `error` ("Please add contact info") shows
   under the whole group when none are filled. */
function ContactBlock({ f, set, error, requireEmail, emailError }) {
  return (
    <div className={'contact-block' + (error ? ' err' : '')}>
      <div className="contact-head">
        <span className="contact-title">How can we reach you?</span>
        <span className="contact-note">{requireEmail ? 'Email required' : 'Fill in at least one'}</span>
      </div>
      <TextField label="Email" name="email" type="email" value={f.email} onChange={set('email')} placeholder="your@email.com" required={requireEmail} error={emailError} />
      <div className="two-col">
        <TextField label="Phone" name="phone" type="tel" value={f.phone} onChange={(v) => set('phone')(formatPhone(v))} placeholder="(661) 123-4567" />
        <IGField value={f.instagram} onChange={set('instagram')} />
      </div>
      {error ? <div className="msg-err contact-err">{error}</div> : null}
    </div>
  );
}

function TextArea({ label, name, value, onChange, error, placeholder, required, hint, rows = 4 }) {
  return (
    <div className="field">
      <label htmlFor={name}>
        {label} {required && <span className="req">*</span>}
      </label>
      <textarea
        id={name}
        rows={rows}
        value={value}
        placeholder={placeholder}
        className={error ? 'err' : ''}
        onChange={(e) => onChange(e.target.value)}
      />
      {error ? <div className="msg-err">{error}</div> : hint ? <div className="hint">{hint}</div> : null}
    </div>
  );
}

function FrogLoader({ label = 'One sec…', size }) {
  return (
    <div className="frog-loader" role="status" aria-live="polite">
      <img className={'frog-loader-img' + (size ? ' ' + size : '')} src="assets/frog.png" alt="" />
      <p className="frog-loader-label">{label}</p>
    </div>
  );
}

Object.assign(window, { Squiggle, CloudButton, Nav, Footer, TextField, IGField, ContactBlock, TextArea, FrogLoader, NAV });