/**
 * SignupForm.jsx — Hero 内联邮箱注册（演示，React island）。迁自原型 .signup + site.js __signup。
 * 注意（铁律 10）：这不是支付表单；仅演示「发送验证码」交互，真实实现由后端 auth 接管。
 */
import { useState } from 'react';
import { Mail, CheckCircle, Download } from 'lucide-react';

export default function SignupForm({ ph, btn, ok, hint, dl }) {
  const [done, setDone] = useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    const email = e.currentTarget.elements['su-email'];
    if (!/\S+@\S+\.\S+/.test(email.value)) {
      email.focus();
      return;
    }
    setDone(true);
  };

  return (
    <form class="signup" id="signup" onSubmit={onSubmit}>
      <div class="su-row">
        <div class="su-field">
          <Mail />
          <input type="email" id="su-email" name="su-email" placeholder={ph} required />
        </div>
        <button class="btn btn-primary btn-lg su-btn" type="submit">
          <span>{btn}</span>
        </button>
      </div>
      <div class="su-ok" id="su-ok" hidden={!done}>
        <CheckCircle />
        <span>{ok}</span>
      </div>
      <div class="su-hint">
        <span>{hint}</span>
        <a class="su-dl" href="#download">
          <Download />
          <span>{dl}</span>
        </a>
      </div>
    </form>
  );
}