// Section 7, Final CTA + Footer
const WaitlistField = ({ label, name, type = 'text', required, autoComplete, onChange }) => (
  <label style={{ display: 'block' }}>
    <div style={{
      fontSize: 12.5, fontWeight: 600, color: T.ink2,
      marginBottom: 6, letterSpacing: 0.1,
    }}>
      {label}{required && <span style={{ color: T.orange, marginLeft: 3 }}>*</span>}
    </div>
    <input
      name={name}
      type={type}
      required={required}
      autoComplete={autoComplete}
      onChange={onChange}
      style={{
        width: '100%', boxSizing: 'border-box',
        padding: '11px 13px',
        border: `1px solid ${T.border}`,
        borderRadius: 8,
        fontSize: 14.5, color: T.ink,
        background: T.paper,
        outline: 'none', fontFamily: 'inherit',
        transition: 'border-color 150ms ease, box-shadow 150ms ease',
      }}
      onFocus={e => {
        e.currentTarget.style.borderColor = T.orange;
        e.currentTarget.style.boxShadow = '0 0 0 3px rgba(255,94,0,0.12)';
      }}
      onBlur={e => {
        e.currentTarget.style.borderColor = T.border;
        e.currentTarget.style.boxShadow = 'none';
      }}
    />
  </label>
);

const FinalCTA = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [firstName, setFirstName] = React.useState('');

  const handleSubmit = () => {
    // Form passes HTML5 validation before this fires.
    // Let the form submit naturally into the hidden iframe; we just flip UI state.
    setSubmitted(true);
  };

  return (
  <section id="start" style={{
    background: T.dark,
    padding: '120px 32px',
    position: 'relative',
    overflow: 'hidden',
  }}>
    {/* subtle dot pattern */}
    <div aria-hidden style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px)',
      backgroundSize: '28px 28px',
      maskImage: 'radial-gradient(ellipse 60% 70% at 50% 50%, black 30%, transparent 75%)',
      WebkitMaskImage: 'radial-gradient(ellipse 60% 70% at 50% 50%, black 30%, transparent 75%)',
    }} />
    {/* Hidden iframe target: catches Brevo's response page so the visitor stays here */}
    <iframe name="brevo-target" title="brevo" style={{
      position: 'absolute', width: 0, height: 0, border: 0, opacity: 0, pointerEvents: 'none',
    }} aria-hidden="true" />
    <div style={{ position: 'relative', maxWidth: 560, margin: '0 auto', textAlign: 'center' }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 7,
        padding: '5px 12px', borderRadius: 999,
        background: 'rgba(255,255,255,0.08)',
        border: '1px solid rgba(255,255,255,0.12)',
        marginBottom: 22,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: T.orange }} className="pulse-dot" />
        <span className="mono" style={{
          fontSize: 11, color: 'rgba(255,255,255,0.85)', letterSpacing: 0.6,
          textTransform: 'uppercase', fontWeight: 600,
        }}>
          {submitted ? "You're on the list" : 'Early access, limited spots'}
        </span>
      </div>
      <h2 className="display" style={{
        fontSize: 'clamp(32px, 4.2vw, 48px)',
        fontWeight: 800, letterSpacing: -1, lineHeight: 1.1,
        color: 'white', marginBottom: 18,
      }}>
        {submitted ? `Thanks${firstName ? `, ${firstName}` : ''}. We'll be in touch.` : 'Get early access to Harmoni Spark.'}
      </h2>
      <p style={{
        fontSize: 17.5, color: 'rgba(255,255,255,0.65)',
        marginBottom: 36, lineHeight: 1.55,
      }}>
        {submitted
          ? "We are opening Spark in waves. When your slot is ready, you will get an email from us, usually within a few days."
          : 'We are opening Spark in waves. Add your details and we will be in touch when your slot opens.'}
      </p>

      {submitted ? (
        <div style={{
          background: T.paper,
          borderRadius: 14,
          padding: '40px 28px',
          boxShadow: '0 24px 60px rgba(0,0,0,0.4)',
          textAlign: 'center',
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: '50%',
            background: T.greenLight, color: T.greenDark,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 18,
          }}>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <path d="M20 6L9 17l-5-5" />
            </svg>
          </div>
          <div style={{
            fontSize: 17, fontWeight: 600, color: T.ink,
            marginBottom: 8, letterSpacing: -0.2,
          }}>
            You are on the early access list.
          </div>
          <div style={{ fontSize: 14, color: T.ink3, lineHeight: 1.55, maxWidth: 420, margin: '0 auto' }}>
            A confirmation is on its way from <span style={{ color: T.ink2, fontWeight: 500 }}>arron.knight@mail.harmoniapp.com</span>. Add it to your contacts so it does not land in promotions.
          </div>
        </div>
      ) : (
      <form
        method="POST"
        target="brevo-target"
        onSubmit={handleSubmit}
        action="https://1daae385.sibforms.com/serve/MUIFAMnpe0lAhinLwGDq4uwjkFj-4hXUZ6617PYhnvl3YoPW8kPqVRPGfY7akvlH1TpdXsynQdYHQTX6iKbZhhxrV85goqdMJqlL-pOgDlJeKzVfi7H8ozSyGlUNDzVVB9BZjvWm6xiZGi_yoxnx7LQ26adCQDtisFhh7I5IgRN8woZ-KHB6awr2B2fd1CVcHgqnrVPIMR5bZR3n"
        style={{
          background: T.paper,
          borderRadius: 14,
          padding: 28,
          boxShadow: '0 24px 60px rgba(0,0,0,0.4)',
          textAlign: 'left',
        }}
      >
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 14, marginBottom: 14,
        }}>
          <WaitlistField label="Name" name="FIRSTNAME" required autoComplete="given-name" onChange={e => setFirstName(e.target.value)} />
          <WaitlistField label="Work email" name="EMAIL" type="email" required autoComplete="email" />
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 14, marginBottom: 22,
        }}>
          <WaitlistField label="Company" name="COMPANY" autoComplete="organization" />
          <WaitlistField label="Role" name="JOB_TITLE" autoComplete="organization-title" />
        </div>

        {/* Honeypot, hidden from real users */}
        <input
          type="text" name="email_address_check" defaultValue=""
          tabIndex={-1} autoComplete="off" aria-hidden="true"
          style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}
        />
        <input type="hidden" name="locale" value="en" />
        <input type="hidden" name="html_type" value="simple" />

        <button
          type="submit"
          style={{
            width: '100%',
            background: T.orange, color: 'white',
            padding: '14px 24px', borderRadius: 10,
            fontWeight: 600, fontSize: 16,
            border: 'none', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            boxShadow: '0 6px 20px rgba(255,94,0,0.25)',
            transition: 'all 200ms ease',
            fontFamily: 'inherit',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.background = T.orangeHover;
            e.currentTarget.style.transform = 'translateY(-1px)';
          }}
          onMouseLeave={e => {
            e.currentTarget.style.background = T.orange;
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          Join the waitlist
          <Icon d="M5 12h14M12 5l7 7-7 7" size={16} sw={2.5} />
        </button>

        <div style={{
          marginTop: 14, fontSize: 12, color: T.ink4,
          textAlign: 'center', lineHeight: 1.5,
        }}>
          No spam. We will only email you about Spark.
        </div>
      </form>
      )}
    </div>
  </section>
  );
};

const Footer = () => (
  <footer style={{
    background: T.dark,
    color: 'rgba(255,255,255,0.55)',
    padding: '28px 32px',
    borderTop: '1px solid rgba(255,255,255,0.08)',
  }}>
    <div style={{
      maxWidth: 1240, margin: '0 auto',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontSize: 13.5, flexWrap: 'wrap', gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <SparkLogo size={26} inverse />
      </div>
      <div>
        A product by Harmoni · <a href="https://harmoniapp.com" style={{ color: 'rgba(255,255,255,0.8)', textDecoration: 'none' }}>harmoniapp.com</a>
      </div>
    </div>
  </footer>
);

window.FinalCTA = FinalCTA;
window.Footer = Footer;